How to dismiss keyboard and handle Touchable press in single tap - React Native

Question

I have the following simplified React Native code:

<ScreenContainer>
  <View>
    <TextInput
      value={query}
      onChangeText={handleInputChange}
      autoFocus={true}
      onSubmitEditing={() => {}}
    />
  </View>

  <SafeAreaView>
    <FlatList
      data={results.length > 0 ? results : null}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View>
          <TouchableOpacity onPress={() => handlePress(item)}>
            // Some other text
          </TouchableOpacity>
        </View>
      )}
    />
  </SafeAreaView>
</ScreenContainer>

The TextInput is a search bar that dynamically changes the items in the Flatlist. Each item in the Flatlist renders a TouchableOpacity. Simple enough

Currently, when a search result appears and I tap on the TouchableOpacity, it takes 2 presses to register the handlePress event: 1 press to dismiss the keyboard and the next to actually handle the press.

Does anyone know how to handle the press and dismiss the keyboard in 1 press? Maybe I should be using a different component or structure my jsx differently?

For dismiss the keyboard.Please check here. https://stackoverflow.com/a/34779467/19153194 — Vaishnavi Maske, Jun 26 '23 at 06:43

score 1 · Accepted Answer · answered Jun 26 '23 at 00:14

1

You're looking for the keyboardShouldPersistTaps property.

answered Jun 26 '23 at 00:14

Matt Ruiz

145
1
1
10

1

Thanks! I did not realize that `Flatlist` inherits all the props from `ScrollView`. That's what I needed! – JBrown Jun 26 '23 at 14:32

How to dismiss keyboard and handle Touchable press in single tap - React Native

1 Answers1