When textInput focused, first touch on flatList doesn't work, however the second works

When I type something into TextInput, then I touch one of FlatList items first time. It should console.log('item press'), but it not. Only the second touch It consoles. Does someone 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>
}
/>


1 Answer
1

You should use the FlatList with keyboardShouldPersistTaps={'handled'} prop and handle your keyboard close in another function by Keyboard.Dissmiss(). your FlatList will be like this:

FlatList

keyboardShouldPersistTaps={'handled'}

Keyboard.Dissmiss()

FlatList

<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 prop after in the console.log('item press') command in TouchableHighlight component.

Keyboard.dismiss()

onPress

console.log('item press')

TouchableHighlight

FlatList

keyboardShouldPersistTaps

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.