1

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.

Kirill Novikov
  • 2,576
  • 4
  • 20
  • 33
Bhaskar Joshi
  • 413
  • 7
  • 18

1 Answers1

2

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.

Fiston Emmanuel
  • 4,242
  • 1
  • 8
  • 14
  • Thanks, yeah that explanation is right. Unfortunately it didn't worked for some device. I am using s21 ultra. I ended up using Modal from React native. It is working fine for me. – Bhaskar Joshi Dec 28 '21 at 09:59
  • Glad to hear. How we can edit the answer so it can be helpful for future developers who will face the same issue. I guess to avoid `react-native-modals` when you have touchable components inside – Fiston Emmanuel Dec 28 '21 at 10:08