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