可触摸的不透明度 OnPress 在 React 本机中不起作用

Question

TouchableOpacity onPress is not working inside Flatlist but when I replaced onPress with onPressIn/onPressOut it is working fine, but in that case the reaction is too fast and having issue while scrolling. I don''t know what it is happening and haven't found any related issue. Below is my code:

  renderItem = ({ item, index }: { item: any, index: number }) => {
    const { type } = this.props;
    const valueType = {
      phone: item,
      stage: item.title,
      location: item.name
    }
      return (
        <TouchableOpacity
          onPressIn={() => this.onSelect(item, index)}
          style={styles.modalListContainer}
        >
          <Icon name={icon[type]} height={20} width={20}/>
          <Spacer width={10} />
          <View style={styles.modelTextContainer}>
          <Text style={styles.modelText}>{valueType[type]}</Text>
          </View>
          
        </TouchableOpacity>
      )
  }

          <FlatList
            data={item}
            renderItem={this.renderItem}
            keyExtractor={this.keyExtractor}
            ItemSeparatorComponent={() => <><Spacer height={10} /><View style={styles.modelTextDevider} /><Spacer height={10} /></>}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.container}
          />

It is rendered inside a Modal using react-native-modals library. Any help would be appreciated. Thank you.

Answer 1

react-native-modals , have a parent touchable component (PanResponder) which wraps your children's components. On some android devices, when you have a touchable component like a button, the touch event does not propagate down to child component instead capture by react-native-modals parent component.

The ideal solution should be absolute positioning your button but will break your UI and the modal will be useless.

There's an existing issue with this library repository. https://github.com/jacklam718/react-native-modals/pull/210 but the solution provided is not 100% accurate for Android devices.

If you're using React Navigation, you already installed react-native-gesture-handler .

import TouchableOpacity from react-native-gesture-handler in place of `react-native. It should solve the issue for most devices.