I have search input with list of results. I am trying to select the one item from the list. But I am not able to select the item on first press as the input field is on focus. First press is considered to close the keyboard. I want to trigger the touch event on first press with closing the keyboard. My code is given below-
<TextInput
placeholder='Destination'
underlineColorAndroid={'transparent'} style={[styles.input]}
value={this.state.destination}
onChangeText={(text) => this.saveDestination(text)}
/>
<View style={{ backgroundColor: WHITE, marginVertical:
(this.state.predictions.length === 0) ? 0 : 15 }}>
{this.destinationPredictation()}
</View>
destinationPredictation() {
const arr = this.state.predictions;
return arr.map((d, index) => {
return (
<TouchableOpacity
onPress={() => { this.setState({ destination: d.description });
}}
style={[{ flex: 1, paddingHorizontal: 5, paddingTop: 10,
paddingBottom: (index === this.state.predictions.length - 1)
? 10 : 0 }]}
key={d.id}
>
<View style={{ width: (WIDTH - 50), paddingHorizontal: 0,
flexDirection: 'row', alignItems: 'center' }}>
<Icon name='map-marker' size={30} color={REGULAR_OPTION}
style={{ marginHorizontal: 8 }} />
<Text style={[styles.destinationOptions, { flex: 1 }]}>
{d.description}
</Text>
</View>
</TouchableOpacity>
);
});
}