facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.39k stars 24.36k forks source link

Touch events unresponsive for flexible child Views in ScrollView component under React Native new architecture #47740

Open yandadaFreedom opened 2 days ago

yandadaFreedom commented 2 days ago

Description

There is an issue with the touch events in a ScrollView when using the new architecture. Specifically, below a ScrollView, there is a View component with a minWidth of 100%. Inside this View, there are three child View components, each set with flexGrow: 1, flexShrink: 1, and flexBasis: "25%". The last two child View component does not respond to the touchstart event under the new architecture, while it works fine in the old architecture.

Steps to reproduce

  1. Create a ScrollView component provided by react-native and set horizontal to true
  2. Place a View component below the ScrollView with minWidth: 100%.
  3. Inside the View component, add three child View components, each with flexGrow: 1, flexShrink: 1, and flexBasis: "25%".
  4. Test the touchstart event on the last two child View component.

Expected Result: The last two child View components should respond to the touchstart event.

Actual Result: The last two child View components do not respond to the touchstart event when using the new architecture, while this issue does not occur in the old architecture.

React Native Version

0.74.3、0.75.2、0.76.2

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.2.1
  CPU: (8) x64 Apple M3
  Memory: 180.14 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: /usr/local/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v20.11.1/bin/npm
  Watchman:
    version: 2024.10.21.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11709847
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.2
    wanted: 0.76.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No logs

Reproducer

https://github.com/yandadaFreedom/rn-original-scrollview

Screenshots and Videos

No response

react-native-bot commented 2 days ago

[!TIP] Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.74.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

react-native-bot commented 2 days ago

[!TIP] Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.