Touchable elements rendered partially off screen fire incorrectly on non-notch iOS devices/simulators

[wkirby]

Description

When using a non-notch device or simulator (i.e. an iPhone SE 3rd Generation), any Touchable element (TouchableOpacity, TouchableHighlight, etc.) that is rendered partially off screen will incorrectly register an onPress event when:

• The status bar is touched to trigger a scroll-to-top
• Intermittently on scroll

React Native Version

0.71.11

Output of npx react-native info

System:
    OS: macOS 13.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 61.55 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: Not Found
    npm: 8.12.2 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: 2023.05.22.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 28, 29, 30, 31, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0
      System Images: android-30 | Google APIs Intel x86 Atom, android-32 | Google Play ARM 64 v8a, android-Tiramisu | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.1 AI-211.7628.21.2111.8193401
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /Users/wyatt/.jenv/shims/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.11 => 0.71.11
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

This is reproducible with this App component:

const data = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
  28, 29, 30, 31, 32, 33, 34, 35, 36, 39, 40, 41, 42, 43, 44, 45, 46,
];

function App(): JSX.Element {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView style={{ flex: 1 }}>
        {data.map((i) => (
          <TouchableOpacity
            style={{ height: 30 }}
            key={i}
            onPress={() => console.log(`hello ${i}`)}
          >
            <Text>{i}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

1. Build app exporting only this App component
2. Run in iPhone SE 3rd Generation simulator
3. Press status bar (as though to scroll to top)
4. Observe that the final item on the screen registers an onPress event

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

https://github.com/facebook/react-native/assets/579688/fdf7ad40-516c-4ec4-8cde-1657d36cfb3a