Implement pull to refresh FlatList

Question

please help me out to implement pull to refresh on my app, I'm kinda new to react native, thanks. I don't know how to handle onRefresh and refreshing.

class HomeScreen extends Component {   state = { refreshing: false }    _renderItem = ({ item }) => <ImageGrid item={item} />    _handleRefresh = () => {    };    render() {     const { data } = this.props;     if (data.loading) {       return (         <Root>           <Loading size="large" />         </Root>       )     }  return (    <Root>      <HomeHeader />      <FlatList        contentContainerStyle={{ alignSelf: 'stretch' }}        data={data.getPosts}        keyExtractor={item => item._id}        renderItem={this._renderItem}        numColumns={3}        refreshing={this.state.refreshing}        onRefresh={this._handleRefresh}      />    </Root>   );  } }  export default graphql(GET_POSTS_QUERY)(HomeScreen); 

Answer 1

Set variable

this.state = {      isFetching: false, } 

Create Refresh function

onRefresh() {     this.setState({isFetching: true,},() => {this.getApiData();}); } 

And in last set onRefresh and refreshing in FlatList.

<FlatList     data={ this.state.FlatListItems }     onRefresh={() => this.onRefresh()}     refreshing={this.state.isFetching} /> 

After fetching Data in function getApiData Make sure to set false isFetching.

this.setState({ isFetching: false }) 

Answer 2

You can also use refreshControl in Flatlist, ScrollView, and any other list component.

<FlatList   contentContainerStyle={{ alignSelf: 'stretch' }}   data={data.getPosts}   keyExtractor={(item) => item._id}   renderItem={this._renderItem}   numColumns={3}   refreshControl={     <RefreshControl       refreshing={this.state.refreshing}       onRefresh={this._handleRefresh}     />   } />