Adding Loader To a Screen Using Pull Down To Refresh Without Using Hooks

As we know React-native is composed of functional and class components. In functional components, you might see hooks concept very often which sounds confusing to the developer without having the prior knowledge of hooks. The aim of this tutorial is to develop refreshController in react native with class components which is not even available in the official docs of react-native. It should be noticed that the class components have more extensive abilities as compare to functional components, many developers prefer to use class components.

Objective: Adding loader to a screen using “pull down” to refresh screen feature by using Class Component.

IOS Pull Down to Refresh

In many professional mobile applications you might have seen, when you pull down the screen through your fingers gestures, you might see a loader that will come out on the very top of the screen, indicating that the screen is loading something, this feature would help the users to know that the screen is loading the data.

Android Pull Down to Refresh

Prerequisites:

1. Established react-native environment on your machine

2. Basic understanding of react-native

we need a class component which would have a scroll view where user can scroll the data.

Let’s start with the steps to achieve the objective.

Step 1: Import Libraries

The below libraries comes with the react-native starting application, so don’t worry about it, you only have to import RefreshControl from react-native.

import React,{Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
RefreshControl,
} from 'react-native';
import {
Header,
Colors,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

Step 2: Make Constructor to hold the states of the loader.

constructor(props) {
super(props)
this.state = {
refreshing: false,
setRefreshing:false,
}}

Step 3: Add functions that will render the loader on the screen for sometime when the screen is pull down.

//for the loader when you drag it down
wait = (timeout) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
}
onRefresh = () => {
this.setState({setRefreshing:true});
this.wait(3000).then(() => {
this.setState({setRefreshing:false})
}
);
}
// ends here

Step 4: Add the below code in the ScrollView tag or Content tag if you are using the famous native-base library.

<ScrollView
refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh={this.onRefresh} />
} >

Complete Code

import React,{Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
RefreshControl,
} from 'react-native';
import {
Header,
Colors,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
export default class Refreshcontroller extends Component  {
constructor(props) {
super(props)
this.state = {
refreshing: false,
setRefreshing:false,
}
}
//for the loader when you drage it down
wait = (timeout) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
}
onRefresh = () => {
this.setState({setRefreshing:true});
this.wait(3000).then(() => {
this.setState({setRefreshing:false})
}
);
}
// ends here
render() {
return (
<View>
<SafeAreaView>
<ScrollView
refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh={this.onRefresh} />
}
style={styles.scrollView}>
<Header />
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>What to do ?</Text>
<Text style={styles.sectionDescription}>
Drag down your<Text style={styles.highlight}> application screen</Text> to see the drag down refresh effect.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
</View>
);
}};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 18,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});

The result of the above code would look like this, the red circle have the loader which will be shown after pull down.

Pull Down To Refresh Loader

Source Code: https://github.com/sabaoonbedar/Pull-Down-to-Refresh-React-Native/tree/master