When textInput is focused, the first touch of flatList does not work, however the second works

Question

When I type in TextInput, the first time I touch one of the FlatList elements. This should console.log('item press') , but it is not. Just a second touch. It is comforting. Does anyone know the reason?

This is my code.

 <TextInput placeholder='test' value={this.state.inputText} onChangeText={(inputText) => this.setState({inputText})} style={{ marginBottom: 20, fontSize: 17, width: 300, textAlign: 'center'' }} /> <FlatList data={[{key: 'item 1'}, {key: 'item 2'}]} renderItem={({item}) => <TouchableHighlight onPress={() => console.log('item press')} underlayColor='#dddddd' > <View style={{height: 40}}> <Text style={{fontSize: 16, textAlign: 'center'}}>{item.key}</Text> </View> </TouchableHighlight> } /> 

Answer 1

You should use a FlatList with keyboardShouldPersistTaps={'handled'} support and close the keyboard with another function using Keyboard.Dissmiss() . your FlatList will look like this:

  <FlatList keyboardShouldPersistTaps={'handled'} data={[{key: 'item 1'}, {key: 'item 2'}]} renderItem={({item}) => <TouchableHighlight onPress={() => console.log('item press')} underlayColor='#dddddd'> <View style={{height: 40}}> <Text style={{fontSize: 16, textAlign: 'center'}}>{item.key}</Text> </View> </TouchableHighlight> } /> 

You can use the Keyboard.dismiss() function in the onPress after the console.log('item press') command in the TouchableHighlight component.