React-Native: FlatList onRefresh is not called.

Question

Current behavior:

I am trying to update the list received from the server by pulling the view. When I do onRefresh, this does not work.

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

Expected Behavior:

Pulling on a view calls the Refresh function.

the 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

Problem with React-Native. FlatList doesn't seem to detect onRefresh when it is nested inside ScrollView: release ticket: https://github.com/facebook/react-native/issues/14756

Answer 2

. .

:

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

Answer 3

, Google Bing .

In my case, there was an automatic import of another FlatList that did not behave the way I wanted (it seems it did not have "onRefresh"):

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

What I really wanted:

import { FlatList } from 'react-native';

Now to find out why we have such a dependency. ;)