'React-Native: FlatList onRefresh not called on pull up.

Current Behavior:

I'm trying to update a list gotten from a server by pulling up on the view. When I do the onRefresh does not fire.

I've set the GET request in the callback of the setState function, but that didn't seem to do anything.

Expected Behavior:

Pulling up on the view calls onRefresh function.

Code:

...
  constructor(props) {
    super(props);
    this.state = {
      stories: [],
      isFetching: false,
    };
  }
  componentDidMount() { this.fetchData() }
  onRefresh() {
    this.setState({ isFetching: true }, function() { this.fetchData() });
  }
  fetchData() {
    var that = this;
    axios.get('http://192.168.0.13:3000/api/story/get/by/geo')
      .then((res) => {
        that.setState({ stories: res.data, isFetching: false });
        that.props.dispatch(StoryActions.setStories(res.data))
      })
  }
  render() {
    return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )
  }

Version Information

React-Native: 0.45.0

Node: 7.4.0

react-native react-native-flatlist

Solution 1:^[1]

Commenting since this ranked high on ~~google~~ bing for my search.

In my case there was an automatic import of another FlatList that didn't behave exactly as I wanted (it didn't seem to have an "onRefresh"):

import { FlatList } from 'react-native-gesture-handler';

What I really wanted:

import { FlatList } from 'react-native';

Now for investigating why we have this dependency. ;)

Solution 2:^[2]

I have faced this issue. sometimes IDE picks wrong Flatlist component in auto complete code. IDE consider react-native-gesture-handler of Flatlist. react-native-gesture-handler of Flatlist is not supported onRefresh. react-native of Flatlist only support the onRefresh.

So Need to change react-native of Flatlist component.

Solution 3:^[3]

I also ran into the same issue. Resolved it by adding refreshControl prop to the parent component of Flatlist which would be Content or Scrollview like this:

import { StyleSheet, RefreshControl } from 'react-native';

 refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={() => this.handleRefresh()}
          />
        }

...

Solution 4:^[4]

You might be using RefreshControl as a props in ScrollView: Example and Guide

Solution 5:^[5]

Please ensure that flatlist is not nested inside scrollview, discussed here

Solution 6:^[6]

I also had this issue for some time. I found the solution on this expo example.

This is a snippet of that example:

return (
      <ScrollView>
        <FlatList
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
          data={this.state.stories}
          keyExtractor={(item, index) => item.id}
          renderItem={({item}) => (<StoryFeed story={item} id={item.id} /> )}
          />
      </ScrollView>
    )

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	honeyp0t
Solution 2	Najathi
Solution 3
Solution 4	mohsen gharivand
Solution 5	abhish
Solution 6	Waweru Kamau

'React-Native: FlatList onRefresh not called on pull up.

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]