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

Question

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

Answer 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. ;)

Answer 2

Issue with React-Native. FlatList does not seem to detect onRefresh when nested inside ScrollView: Issue ticket: https://github.com/facebook/react-native/issues/14756

Answer 3

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.