The user needs to click twice on the FlatList
item because autoFocus={true}
for the <TextInput
. At the first click the keyboard is hiding and next click calling onPress={this.GetItem.bind(this, item)}
. Is there any option to call GetItem()
on the first click instead of clicking twice.
Demo: https://snack.expo.io/ByJ_yWehM
export default class App extends Component {
GetItem (item) {
console.log(item);
Alert.alert(item);
}
render() {
return (
<View style={styles.container}>
<TextInput
autoFocus={true}
style={styles.paragraph}
keyboardType='web-search'
>
Change code in the editor and watch it change on your phone!
Save to get a shareable url.
</TextInput>
<Card title="Local Modules">
<View>
<TextInput
style={styles.searchField}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<FlatList
data={["akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate","akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate"]}
renderItem={({item}) => (
<Text
style={styles.listField}
onPress={this.GetItem.bind(this, item)}
>{item}</Text>
)}
/>
</View>
</Card>
</View>
);
}
}
The purpose of the component is giving autosuggestion in <FlatList>
when user searching in <TextInput>
Method 1: Using TouchableWithoutFeedback Component: We simply encapsulate the outermost View component of our App inside the TouchableWithoutFeedback component and set the onPress value of this component to Keyboard. dismiss.
Adding keyboardShouldPersistTaps='handled'
to your FlatList
will prevent keyboard from being dismissed onPress
.
<FlatList
keyboardShouldPersistTaps='handled'
data={["akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate","akin","alike","close","comparable","like","similar","uniform","Allied","Analogous","Co-ordinate","Commensurate"]}
renderItem={({item}) => (
<Text
onPress={this.GetItem.bind(this, item)}
>{item}</Text>
)}
/>
always
also works as keyboardShouldPersistTaps
value.
Official doc for keyboardShouldPersistTaps here
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With