(iOS) setPage calls with container layout changes cause the content to freeze

[floydkim]

Environment

react-native-pager-view version 6.3.0, 6.5.1

I initially noticed this bug in my app on a real device, and it didn’t reproduce on the simulator.
However, with the example app, it was reproduced on both a real device and the simulator.

my local dev environment

System:
  OS: macOS 15.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 112.80 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: ~/.nvm/versions/node/v20.11.1/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.11.1/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.1/bin/npm
  Watchman:
    version: 2024.11.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/floydkim/.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:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/floydkim/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  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: true
iOS:
  hermesEnabled: true
  newArchEnabled: false

Description

This issue occurs when using setPage in pager-view to navigate pages with animation.
If the layout size (e.g., height) of the pager-view component changes, content becomes uncontrollable within the pager-view, and further page navigation becomes impossible.

The issue does not occur when using the setPageWithoutAnimation method.
Additionally, I found that if the width and height of the pager-view are fixed, this issue does not occur.

It seems that the iOS native UI component might break due to container layout changes—just a shallow guess.

Video (iPhone 15 real device)

1. Build the example app.
2. Go to the Keyboard Example menu.
3. Touch the TextInput to show the keyboard.
4. Press the Next page button.
5. Then you can’t interact with anything inside the pager-view or navigate to the previous page. However, you can still exit the navigation screen.

reproducer-react-native-pager-view.mov

Reproducible Demo

The reproduction code is based on the library’s example app. (link)
It is almost the same as the example app code.

The keyboard interaction is an indirect cause; it was used because it easily triggers view height changes.