React Native RefreshControl indicator Example

Aug 28, 2020

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...