04-Apr-2023
.
Admin
Hi Guys,
In this blog, I will explain you how to create refreshcontrol indicator in react native. You can easily create refreshcontrol indicator in react native. First i will import namespace RefreshControl, after I will make refreshcontrol indicator using refreshcontrol indicator in react native.
Here, I will give you full example for simply display refreshcontrol indicator using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init RefreshControlIndicator
Step 2 - App.js
In this step, You will open App.js file and put the code.
import React from 'react';
import { ScrollView, RefreshControl, StyleSheet, Text, SafeAreaView} from 'react-native';
import Constants from 'expo-constants';
const wait = (timeout) => {
return new Promise(resolve => {
setTimeout(resolve, timeout);
});
}
const App = () => {
const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => {
setRefreshing(true);
wait(1000).then(() => setRefreshing(false));
}, []);
return (
<ScrollView
contentContainerStyle={styles.scrollView}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
>
<Text style={styles.text}>Pull down to see refreshcontrol indicator</Text>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollView: {
flex: 1,
backgroundColor: 'lightskyblue',
alignItems: 'center',
justifyContent: 'center',
},
text: {
color : "#fff",
fontSize : 19
}
});
export default App;
Step 3 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native