CODEWITHSUNDEEP
react-nativereact-reduxreact-native-flatlist
user16243552
user16243552

Reputation: 21

Implement pull to refresh FlatList in React native

Flatlist code

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>
          )
        }

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

implemented with class component

Upvotes: 1

Views: 900

Answers (1)

Vicky
Vicky

Reputation: 157

Make changes:

_handelRefresh=async()=>{
            this.setState({refreshing: true})
            this.YOURAPIFunction();
            this.setState({refreshing: false})
        } 
       
    <FlatList 
           contentContainerStyle={{ alignSelf: 'stretch' }} 
           data={data.getPosts} 
           keyExtractor={item => item._id} 
           renderItem={this._renderItem} 
           numColumns={3} 
           refreshing={this.state.refreshing} 
           onRefresh={this._handleRefresh} 
         />

Upvotes: 0

Related Questions