Hello Friends,

Now let's see example of how to use refresh control example. We will check how to use refresh control. This is a short guide on use refresh control in react native. Here you will learn how to use refresh control. Let's get started with how to use refresh control in react native.

Here i will give you many example how to use refresh control using react native.

Let's start, Run the following command for create project.

expo init MyWebtuts 

In this step, You will open App.js file and put the code.

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

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(2000).then(() => setRefreshing(false));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
        <Text contentContainerStyle={styles.posttext}>React Native Refresh Control Example</Text>
        <Text contentContainerStyle={styles.posttext}>My Webtuts</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: '#ffb606',
    alignItems: 'center',
    justifyContent: 'center',
  },
  posttext:{
    textAlign:'center'
  }
});

export default App;

In the last step run your project using bellow command.

expo start

I hope, It will help you...