How To Use Refresh Control Using React Native?


Share:
 | Published By: Admin | Published On: Dec 16, 2021 | Category: React Native


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.

Step 1 - Create project

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

expo init MyWebtuts 
Step 2 - App.js

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;
Step 3 - Run project

In the last step run your project using bellow command.

expo start
Output:


I hope, It will help you...

Share: