7

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>

Mo.
  • 26,306
  • 36
  • 159
  • 225
  • Not exactly the answer you are looking for but, does [keyboad events](https://facebook.github.io/react-native/docs/keyboard.html#addlistener) help you with that? – bennygenel Apr 14 '18 at 22:18
  • @bennygenel The purpose of the component is giving autosuggestion in `` when user searching in `` – Mo. Apr 14 '18 at 22:20

1 Answers1

18

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

Dyo
  • 4,429
  • 1
  • 15
  • 30
  • 1
    Great answer. This prop is not documented for the `FlatList` component, only for `ScrollView`. – Hinrich Jul 30 '18 at 22:47