FlatList onRefresh not called on pull up.
See original GitHub issueIs this a bug report?
Yes
Have you read the Bugs section of the Contributing to React Native Guide?
Yes
Environment
react-native -v
: 0.4.5node -v
: 7.4.0npm -v
: 5.0.3yarn --version
(if you use Yarn): 0.24.5
Then, specify:
- Target Platform (e.g. iOS, Android): iOS
- Development Operating System (e.g. macOS Sierra, Windows 10): macOs Sierra
- Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): XCode 8.3.3
Steps to Reproduce
- Implement React-Native FlatList in a module.
- Render a component in renderItems prop
- nest FlatList inside
<ScrollView>
element - Pull up on device to attempt to refresh
Expected Behavior
Call onRefresh function on pull up.
Actual Behavior
onRefresh function is not called.
Reproducible Demo
Snack Link: https://snack.expo.io/HJYx3Kx4W
...
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>
)
}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:9 (3 by maintainers)
Top Results From Across the Web
React-Native: FlatList onRefresh not called on pull up.
I'm trying to update a list gotten from a server by pulling up on the view. When I do the onRefresh does not...
Read more >React-Native: FlatList onRefresh not called on pull up. – iTecNote
I'm trying to update a list gotten from a server by pulling up on the view. When I do the onRefresh does not...
Read more >react native refresh list when scroll Code Example - Code Grepper
“react native refresh list when scroll” Code Answer. react native flatlist pull to refresh. javascript by Poised Puffin on May 21 2020 Comment....
Read more >React Native Pull-to-Refresh: Make Refreshing Easy for Users
Pull -to-refresh is an extremely common feature in mobile applications. It lets users fetch the latest data without taking up valuable screen ...
Read more >[Solved]-React-Native: FlatList onRefresh not called on pull up.
[Solved]-React-Native: FlatList onRefresh not called on pull up.-React Native. Search. score:-2. return ( <ScrollView> <FlatList onRefresh={() => this.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@hramos Here’s a link: https://snack.expo.io/HJYx3Kx4W
Issue is that FlatList onRefresh does not work when it is nested inside ScrollView. In the Snack, if you change the ScrollView to View, then it works okay.
@hramos @sahrens I’m running into a couple situations where having ScrollView support would be helpful. For example, if I need to detect a scroll event in order to hide the header, according to the FlatList docs this is not possible. Furthermore, if a content filter bar is to be placed above a FlatList, it would be rendered fixed above the scrollable content and take up screen space, an issue that would not otherwise occur when using ScrollView.
UPDATE: Just tried attaching onScroll to FlatList. It works; would be nice to see this documented when you guys have a chance. Regarding the header bar, there’s a prop that I missed the first time around. I see now that the intent of FlatList is a super ScrollView, and I suppose nesting would be bad design.