[IOS] ScrollView with Textinput / TouchalbeOpacity causes weird scroll position behavior

[bumjin1013]

Description

After enabling the new architecture, upgrading navigation to v7, and upgrading to react-native-screens v4.4.0, the following issues occur:

When a ScrollView contains a TextInput or TouchableOpacity, the scroll behaves abnormally, and the components are re-rendered incorrectly (flickering).

This issue is only observed on iOS and does not occur on Android. The app was working fine before upgrading the React Native version, as well as the versions of react-native-screens and react-navigation.

Steps to reproduce

1. use rn 0.76.4, rn-screens v4.4.0, react-navigation v7
2. make scrollView with TextInput / TocuhalbeOpacity

React Native Version

0.76.5

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 15.1.1
  CPU: (8) arm64 Apple M2
  Memory: 733.66 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.4
    path: ~/.nvm/versions/node/v18.20.4/bin/node
  Yarn:
    version: 4.4.0
    path: ~/Desktop/studymoa-app/node_modules/.bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.20.4/bin/npm
  Watchman:
    version: 2024.10.21.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/inbeomjin/.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.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.1.2
    path: /Users/inbeomjin/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

non

Reproducer

non

Screenshots and Videos

ScreenRecording_12-27-2024.16-51-08_1.MP4

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[shubhamguptadream11]

@bumjin1013 It would be really nice if you provide a repro with minimal depedencies involved. You can use this template.
Without this it would be very hard for us to pin point the exact package invloved here.