React Native Pull to Refresh

React Native

About Lesson

In this React Native lesson we are going to learn about React Native Pull to Refresh, one of the best thing about rendering your data inside a FlatList is this, that it has Pull to Refresh feature, so Pull-to-refresh is a touchscreen gesture that consists of touching the screen of a computing device with a finger or pressing a button on a pointing device, dragging the screen downward with the finger or pointing device, and then releasing it, as a signal to the application to refresh the contents of the screen.

We are going to use our previous lesson example that was fetching data from an api, this is my Pullrefresh.js file.

import React, {useEffect, useState} from 'react'
import {View, FlatList, Text} from 'react-native';
import {Card} from 'react-native-paper';
import axios from 'axios';

function Pullrefresh() {

    const [posts, setPosts] = useState([])
    const [loading, setLoading] = useState(true)

    const loadData = () => {

        axios.get('https://jsonplaceholder.typicode.com/posts')
       .then(resp => {
           setPosts(resp.data)
           setLoading(false)
       })
       .catch(error => console.log("error"))
    }

   useEffect(() => {
       loadData();
       
   }, [])

   const renderData = (item) => {
       return(
        <Card style = {{padding:30,maring:10, backgroundColor:"#eddfdf"}}>
        <Text style = {{fontSize:30}}>{item.title}</Text>
        <Text style = {{fontSize:20}}>{item.body}</Text>
    </Card>
       )

   }

    return (
       <FlatList
       data = {posts}
       renderItem = {({item}) => {
           return renderData(item)

       }}
       onRefresh = {() => loadData()}
       refreshing = {loading}
       keyExtractor = {item => `${item.id}`}
       />
    )
}

export default Pullrefresh

import React, {useEffect, useState} from 'react'

import {View, FlatList, Text} from 'react-native';

import {Card} from 'react-native-paper';

import axios from 'axios';

function Pullrefresh() {

const [posts, setPosts] = useState([])

const [loading, setLoading] = useState(true)

const loadData = () => {

axios.get('https://jsonplaceholder.typicode.com/posts')

.then(resp => {

setPosts(resp.data)

setLoading(false)

})

.catch(error => console.log("error"))

}

useEffect(() => {

loadData();

}, [])

const renderData = (item) => {

return(

<Text style = {{fontSize:30}}>{item.title}</Text>

</Card>

)

}

return (

<FlatList

data = {posts}

renderItem = {({item}) => {

return renderData(item)

}}

onRefresh = {() => loadData()}

refreshing = {loading}

keyExtractor = {item => `${item.id}`}

)

}

export default Pullrefresh

In here i have created some useState hooks for state management.

const [posts, setPosts] = useState([])
const [loading, setLoading] = useState(true)

1 2	const [posts, setPosts] = useState([]) const [loading, setLoading] = useState(true)

This is my function for fetching the data from an api, we are going to use axios, make sure that you have already installed axios, after fetching the data we need to make the setLoading to false.

    const loadData = () => {

        axios.get('https://jsonplaceholder.typicode.com/posts')
       .then(resp => {
           setPosts(resp.data)
           setLoading(false)
       })
       .catch(error => console.log("error"))
    }

const loadData = () => {

axios.get('https://jsonplaceholder.typicode.com/posts')

.then(resp => {

setPosts(resp.data)

setLoading(false)

})

.catch(error => console.log("error"))

}

In here we are going to add our fetching method inside useEffect hooks, because i have already said that if you want to do some side effects than you can use useEffect() hooks.

This is our FlatList, and we want to show our data using react native flatlist, you can see that we have added two more options in our FlatList, the first one is onRefresh and in here we need to add our fetching method in our case it is loadData(), the second one is refreshing, in here you need to add the loading state.

 <FlatList
       data = {posts}
       renderItem = {({item}) => {
           return renderData(item)

       }}
       onRefresh = {() => loadData()}
       refreshing = {loading}
       keyExtractor = {item => `${item.id}`}
       />

<FlatList

data = {posts}

renderItem = {({item}) => {

return renderData(item)

}}

onRefresh = {() => loadData()}

refreshing = {loading}

keyExtractor = {item => `${item.id}`}

This is my App.js file and i have added my component in here.

import React from 'react';

import Pullrefresh from './components/Pullrefresh';



export default function App() {
  return (
 
    <Pullrefresh/>
  
  );
}

import React from 'react';

import Pullrefresh from './components/Pullrefresh';

export default function App() {

return (

);

}

Run your application and this is the result.