react-native-navigation icon indicating copy to clipboard operation
react-native-navigation copied to clipboard

Refresh Indicator in FlatList doesn't work correctly with largeTitle

Open sallar opened this issue 6 years ago β€’ 9 comments

Issue Description

Im creating a new issue since the previous one is marked as stale for some reason. #3137 If you use largeTitle in a view that hosts a FlatList, the Refresh Indicator is shown at a position that is not correct.

The current workaround is apparently to use react-native-tableview which uses the native UITableView, which works nicely, but that has it's own issues and also doesn't support android.

Steps to Reproduce / Code Snippets / Screenshots

Screenshot 2019-12-13 at 0 37 44
  • Use largeTitle in a screen
  • Embed a refreshable FlatList in that view
  • Drag down to see the indicator

Environment

  • React Native Navigation version: 4.0.5
  • React Native version: 0.61.4
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator / Debug

sallar avatar Dec 30 '19 10:12 sallar

Hey @sallar πŸ‘‹ Can you please fork the library and add a screen where the issue reproduces to the playground app?

guyca avatar Dec 30 '19 11:12 guyca

Hey @guyca sure thing. On it

sallar avatar Dec 30 '19 11:12 sallar

Actually @guyca I just saw that this issue is already visible in Playground. You can find it in FlatListScreen.js:

Kapture 2019-12-30 at 13 44 21

The correct behaviour is this:

Kapture 2019-12-30 at 13 47 16

you can see that the loading indicator is correctly on top. not behind the search box or title. The second video is using react-native-tableview instead of FlatList.

The react-navigation module has added new "native" stack module that does this correctly, so I know it should be possible to fix this. I just dont know how :D

sallar avatar Dec 30 '19 11:12 sallar

@guyca the issue still has "requires reproduction" tag, do I need do anything extra?

sallar avatar Jan 02 '20 22:01 sallar

@sallar I have updated the tags for you. Thanks for looking into it.

ItsNoHax avatar Jan 07 '20 13:01 ItsNoHax

Thanks @ItsNoHax. Im not even sure if this can be fixed in this project, but this is a big obstacle currently for making native-looking apps on iOS 13. It's not a big deal, but would be nice to figure out where the issue comes from.

sallar avatar Jan 07 '20 14:01 sallar

It appears that a RN fix is coming that would solve this issue: https://github.com/facebook/react-native/pull/28236

remstos avatar Mar 25 '20 17:03 remstos

That’s amazing πŸŽ‰πŸŽ‰πŸŽ‰

sallar avatar Mar 25 '20 18:03 sallar

This is still a problem. Is there a workaround?

Ainias avatar Jan 09 '25 08:01 Ainias