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?

Answer 1

You're looking for the keyboardShouldPersistTaps property.