ScrollView may cause some confusion when deleting some child items after sliding at the child level

[TallNutAlt]

Description

Touch confusion when deleting sub items using scrollView <ScrollView showsHorizontalScrollIndicator={false} style={{ marginLeft: moderateScale(10), borderWidth: 2, flex: 1, overflow: 'hidden', }} bounces={false} horizontal={true}> {selectedCities.map((item, index) => { return ( <TouchableOpacity activeOpacity={1} onPress={() => { toggleCitySelection({ provinceName: item.provinceName, cityName: item.areaName || item.cityName, }); }} style={{ backgroundColor: '#E9F3FF', marginLeft: moderateScale(5), paddingVertical: moderateScale(8), paddingHorizontal: moderateScale(10), paddingRight: moderateScale(20), borderRadius: moderateScale(4), position: 'relative', }} key={index}> <View> <Text style={{ color: '#3B97F5', fontSize: moderateScale(14), }}> {item.areaName || (item.cityName === '全市' ? item.provinceName : item.cityName) || item.provinceName} </Text> </View> <View style={{ position: 'absolute', right: 0, top: 0, width: moderateScale(15), height: moderateScale(15), backgroundColor: '#3C98FF', borderRadius: moderateScale(2), opacity: 0.5, }}> <Image style={{ width: moderateScale(15), height: moderateScale(15), }} source={require('../static/image/whitecha.png')} /> </View> </TouchableOpacity> ); })} <View style={{width: moderateScale(20)}} /> </ScrollView>

Steps to reproduce

Please watch the video. When scrollView is scrolled, deleting subitems will cause problems. However, it is normal to delete items without scrolling <ScrollView showsHorizontalScrollIndicator={false} style={{ marginLeft: moderateScale(10), borderWidth: 2, flex: 1, overflow: 'hidden', }} bounces={false} horizontal={true}> {selectedCities.map((item, index) => { return ( <TouchableOpacity activeOpacity={1} onPress={() => { toggleCitySelection({ provinceName: item.provinceName, cityName: item.areaName || item.cityName, }); }} style={{ backgroundColor: '#E9F3FF', marginLeft: moderateScale(5), paddingVertical: moderateScale(8), paddingHorizontal: moderateScale(10), paddingRight: moderateScale(20), borderRadius: moderateScale(4), position: 'relative', }} key={index}> <View> <Text style={{ color: '#3B97F5', fontSize: moderateScale(14), }}> {item.areaName || (item.cityName === '全市' ? item.provinceName : item.cityName) || item.provinceName} </Text> </View> <View style={{ position: 'absolute', right: 0, top: 0, width: moderateScale(15), height: moderateScale(15), backgroundColor: '#3C98FF', borderRadius: moderateScale(2), opacity: 0.5, }}> <Image style={{ width: moderateScale(15), height: moderateScale(15), }} source={require('../static/image/whitecha.png')} /> </View> </TouchableOpacity> ); })} <View style={{width: moderateScale(20)}} /> </ScrollView>

React Native Version

0.72.4

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
  Memory: 4.02 GB / 15.73 GB
Binaries:
  Node:
    version: 20.11.1
    path: D:\SDK\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 10.2.4
    path: D:\SDK\npm.CMD
  Watchman:
    version: 20231008.002904.0
    path: C:\ProgramData\chocolatey\lib\watchman\tools\watchman-v2023.10.09.00-windows\bin\watchman.EXE
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio: Not Found
Languages:
  Java: 17.0.8
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.4
    wanted: 0.72.4
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

No logs

Reproducer

scrollView

Screenshots and Videos

https://github.com/facebook/react-native/assets/109561878/e3f55c9c-d429-45b9-9451-cc83ad1c3c39

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.14. 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.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	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/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cortinico]

Please share a reproducer @TallNutAlt

[TallNutAlt]

Please share a reproducer @TallNutAlt

https://github.com/TallNutAlt/scrollViewBugE @cortinico