react-native: RefreshControl does not work correctly on state change
React Native version: 0.59.8
Steps To Reproduce
- Pull down on list, refresh control appears (as it should)
- Press button on top of list to load data, refresh control does not appear even though refreshing is true. You can also this is true by pressing the button first, the pulling down, then finally pressing the button again.
Describe what you expected to happen: The refresh control should appear whenever refreshing
is true
Snack, code example, or link to a repository: https://snack.expo.io/ByZXxOuhV
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 20
- Comments: 26
Commits related to this issue
- Pull in patch for #24855 — committed to ROMBOTics/react-native by cnuss 5 years ago
- React Native sync for revisions c1f5884...4ea064e Summary: This sync includes the following changes: - **[4ea064eb0](https://github.com/facebook/react/commit/4ea064eb0 )**: Don't fire passive effects... — committed to facebook/react-native by sammy-SC 2 years ago
- React Native sync for revisions c1f5884...4ea064e Summary: This sync includes the following changes: - **[4ea064eb0](https://github.com/facebook/react/commit/4ea064eb0 )**: Don't fire passive effects... — committed to OlimpiaZurek/react-native by sammy-SC 2 years ago
still an issue on v0.62.2 when
<RefreshControl />
is enabled (with local state) from auseEffect
function.If anyone is still having problems with this:
I found a workaround that is just enabling the bounce.
I had bounces={false} and after removing it, itβs working on iOS now(Android was already working)
But in my case, the loading didnβt appear not even once.
Opened Pr ^
same issue ,why so much bugs in basic componentππππππππππππππππππππππππ
Can confirm, it is really annoying because there are no actual workarounds if you need to:
I noticed it only happens on iOS (I tested on Android 9.0.0 and it works properly)
This is still an issue
The issue is still there in iOS. RN ver: 0.71.8
same problem here, refreshControl does not show first time in useEffect even i set showState to true
Added a solution but not the perfect one.
https://github.com/facebook/react-native/issues/37308#issuecomment-1667593174
I had to use a very hacky and very wrong workaround to make it work.
Basically, I noticed that it worked the first time (usually while loading the initial data at screen startup) but stopped working after that. So, I force the component (a
FlatList
in my case) to re-render completely after each successful refreshcontrol appearance, by changing itskey
attribute.Honestly, it sucks, and it could not be feasible on lists with a lot of components to re render, but in my case it works well enough.
The timeout is necessary to wait for the RefreshControl animation to finish