How do I tap only once on touchable opacity placed inside a scrollview?-CodePudding

I already researched similar questions on the topic, so please don't be in a hurry to close this question.

I have a search screen, where I type a search term and I fetch listed results. Once fetched, I want to tap on any one of them and navigate to that page details object. My initial first tap is never been detected, but my second is. My component:

return (
  <View>
    <TextInput
      value={query}
      placeholder="Type Here..."
      onChangeText={(search) => setQuery(search)}
    />
    {fetching ? (
      <Spinner
        visible={fetching}
        textContent={'Fetching data...'}
        textStyle={{ fontSize: 14 }}
      />
    ) : null}
    {items ? (
      <ScrollView keyboardShouldPersistTaps={true}>
        <FlatList
          numColumns={1}
          horizontal={false}
          data={items}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() =>
                navigation.navigate('Item Details', { id: item.id })
              }>
              <ItemDisplay item={item} keyboardShouldPersistTaps="always" />
            </TouchableOpacity>
          )}
        />
      </ScrollView>
    ) : null}
  </View>
);

My ItemDisplay is just a row of item's photo and item's id. Nothing fancy.

As suggested on the similar questions, I do use <ScrollView keyboardShouldPersistTaps={true}> and <ItemDisplay item={item} keyboardShouldPersistTaps="always" /> However it doesn't help m, I still need to tap twice. Any ideas on how do I fix this? I am testing it on android, if that matters.

I also tried <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps={"always"} > but this doesnt help as well.

CodePudding user response：

If I understood your problem correctly, you are facing an issue clicking an item when the Keyboard is present.

If so you can simply pass keyboardShouldPersistTaps as always to your FlatList and then the children of the list will receive taps when an item is pressed.

Also, you shouldn't be using a ScrollView to wrap your Flatlist, if they are both having the same orientation, numColumns isn't required as you have passed it as 1

You can read more about keyboardShouldPersistTaps at https://reactnative.dev/docs/0.64/scrollview#keyboardshouldpersisttaps

Take a look at this Live Snack to see it in action.