[iOS] ScrollView contentOffset isn't working as expected (blank / jumping)

hannojg commented 2 years ago

Description

Using contentOffset with a FlatList on iOS "doesn't work". Either the list renders blank, and on the first interaction, it tries to get to the content offset (does so in multiple jumps), or it's not blank but doing multiple jumps. Neither feels good or clean. Using contentOffset on a ScrollView works however as expected.

Compare these android and iOS videos. The list is expected to have item 15 roughly in its center:

✅ Android (works)

https://user-images.githubusercontent.com/16821682/156601227-e5b7278c-864a-429f-a0d7-46da7c866ce7.mp4

❌ iOS (broken)

https://user-images.githubusercontent.com/16821682/156600976-77380fc4-1596-4453-ab45-e1bbb8fbccee.mov

Note 1: You can see that the content is initially blank. I then scroll manually (pressing) which makes the content appear

Note 2: contentOffset is broken on android as well since going from 0.66.4 -> 0.67. I created a separate issue for that here

Version

0.67.3

Output of `npx react-native info`

Click to expand!

``` System: OS: macOS 12.1 CPU: (20) x64 Intel(R) Core(TM) i9-10910 CPU @ 3.60GHz Memory: 82.88 MB / 48.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.3/bin/yarn npm: 8.4.1 - ~/.nvm/versions/node/v14.18.3/bin/npm Watchman: 2022.01.31.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 26, 28, 29, 30, 31 Build Tools: 26.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0, 32.0.0 System Images: android-26 | Google APIs Intel x86 Atom_64, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-30 | ARM 64 v8a, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom Android NDK: 23.0.7599858 IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7935034 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 1.8.0_201 - /usr/bin/javac npmPackages: @react-native-community/cli: ^6.0.0 => 6.0.0 react: 17.0.2 => 17.0.2 react-native: Not Found react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found ```

Steps to reproduce

I added in the rn-tester app another FlatList example (fork available here):

https://github.com/hannojg/react-native/blob/ec1c81b621486eddffb8cc29e312d43fe2324865/packages/rn-tester/js/examples/FlatList/FlatList-contentOffset.js#L18-L44

Simply add contentOffset to a FlatList and see how it doesn't work on ios. Note however, that contentOffset on a ScrollView does work.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@skillnation/petrified-toffee

In this snack the contentOffset is set to 800. The following observations can be made:

When mounted the content offset is not applied correctly
With the toggle flat list button we can un-/mount the FlatList. I tried to mimick with that what happens when we navigate on a screen. It can be seen that the flat list item "aren't there" (as shown above) until you scroll the list

https://user-images.githubusercontent.com/16821682/156606855-d722713d-9ca3-4fbd-9362-05685d9a4d37.mp4

mathiastambjergsteengaard commented 2 years ago

I can confirm that contentOffset does not work on Android starting from react-native v. 67(I have tested 67.2, 67.4 and 68.2) but i cant seem to find the issue you are referring to. Can you point me in the right direction?

hannojg commented 2 years ago

Sorry, never managed to create the issue for android. I believe on android the issue also exists on the scrollview, while this issue here is about FlatList on iOS.

github-actions[bot] commented 6 months ago

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] commented 6 months ago

This issue was closed because it has been stalled for 7 days with no activity.

facebook / react-native