Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FlatList scrollToEnd not working on iOS when items width changes (works on Android/Web) #47974

Open
omniphx opened this issue Nov 26, 2024 · 1 comment

Comments

@omniphx
Copy link

omniphx commented Nov 26, 2024

Description

I want to automatically scrollToEnd() when changing FlatList item widths from smaller to larger number. However, this behavior does not behave correctly on iOS despite it working on Android and Web. Seems as if the list on iOS scrolls to the end position of the previous calculated offset. Adding a CTA to re-fire the 'Scroll to end' works as expected on all platforms.

Steps to reproduce

  1. Open the snack on an iOS device/simulator: https://snack.expo.dev/@omniphx/scroll-to-end-when-width-changes
  2. Press "Set item width to 100"
  3. Press "Set item width to 200"

Expected behavior is for FlatList to scroll to the end after changing item width from 100 > 200. Logic for this is inside a useEffect that fires after width has changed. This works on Android/web but does not seem to scroll to the correct end location when running on an iOS.

React Native Version

0.75.4 (Where issue was originally discovered, but was able to reproduce with a snack on Expo SDK 52/RN v0.76)

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.7.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 130.67 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.0
    path: ~/.nvm/versions/node/v20.11.0/bin/node
  Yarn:
    version: 1.22.21
    path: ~/.nvm/versions/node/v20.11.0/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.0/bin/npm
  Watchman:
    version: 2024.11.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/MITCHMX20/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/MITCHMX20/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 14.1.1
    wanted: 14.1.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.4
    wanted: 0.75.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false


### Stacktrace or Logs

```text
n/a

Reproducer

https://snack.expo.dev/@omniphx/scroll-to-end-when-width-changes

Screenshots and Videos

AIZU2598.MP4
@Ashalbulk
Copy link

same here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants