ScrollView may cause some confusion when deleting some child items after sliding at the child level #44549
Labels
Component: ScrollView
Issue: Author Provided Repro
This issue can be reproduced in Snack or an attached project.
Newer Patch Available
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
Stacktrace or Logs
Reproducer
scrollView
Screenshots and Videos
24e71b7b1f3768e4de24f2cff58a930a.mp4
The text was updated successfully, but these errors were encountered: