2

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>
   );
 });
}
Sanjita
  • 103
  • 5

0 Answers0