React Native TextInput and FlatList capturing onPress of ListItem

Question

So I am trying to create an Autocomplete Search Box having 2 sibling views TextInput and FlatList (which is only displayed when this.state.data.length> 0) so my render function is given below : -

 renderItem = ({ item }) => {
          return (
            <TouchableOpacity 
             onPress={(item) => {/* do something here */}}>
             <Text>{item.key}</Text>
            </TouchableOpacity>
          );
        }

render(){
  return (
   <View>
     <TextInput />
     {this.state.data.length > 0 && 
       <FlatList 
       data={this.state.data}
       renderItem={this.renderItem} />}
   </View>);
}

The problem is when I click on the list item the first click triggers the onEndEditing callback of the TextInput and then the second click triggers the onPress of the TouchableOpacity of the list item.

How can I trigger the onPress of the list item on the first click please?

Answer 1

It is an active issue in react-native.

In the meantime, you can try handle keyboardShouldPersistTaps property in a ScrollView instead.

return (
        <ScrollView
            style={ styles.flex }
            automaticallyAdjustContentInsets={ false }
            keyboardShouldPersistTaps="handled"
            contentInset={{ 'bottom':20 }}
            keyboardDismissMode='on-drag'
            >
            <View>...</View>
        </ScrollView>
    );