How can I click TouchableOpacity when TextInput is focused (keyboard is open)?

Question

I want to make suggestion for my text input. When I focus on a TextInput, a list of title suggestions should appear. While I am typing, I should be able to click on the desired title. The suggestion feature works well. The problem starts when the TouchableOpacity can't be clicked while the keyboard is open. However, the TouchableOpacity can be clicked when I hide the keyboard first by clicking the back button (If I tap on the screen, it triggers the onBlur method, causing the list to disappear). The expected behavior is that TouchableOpacity can be clicked while the keyboard is open.

I've been looking for solutions for similar problem but nothing works on my case. The solutions I've tried are KeyboardAwareScrollView and keyboardShouldPersistTaps

  return (
    <SafeAreaView style={styles.container}>
          <View style={[{ flex: 1 }]}>
            <Text>Enter Title</Text>
            <TextInput
              style={{ width: '100%', height: 60, backgroundColor: 'green' }}
              autoCorrect={false}
              onChangeText={(val) => {
                handleTitleChange()
                filterTitle(val);
              }}
              multiline={false}
              onFocus={() => {
                setIsTitleFocused(true);
              }}
              onBlur={() => {
                setIsTitleFocused(false);
              }}
              value={Input.title}
            />
            {isTitleFocused && (
              <ScrollView contentContainerStyle={{height:200}}>
                <FlatList
                  data={filteredTitle}
                  renderItem={({ item, index }) => (
                    <TouchableOpacity
                      style={{
                        padding: 10,
                        backgroundColor: 'gray',
                        marginVertical: 10,
                      }}
                      onPress={() => onTitleSelected(item?.title)}>
                      <Text style={{color:"white"
                      }}>{item?.title || ''}</Text>
                    </TouchableOpacity>
                  )}
                  keyExtractor={(item) => item?.title}
                />
              </ScrollView>
            )}

            <Text>Enter Detail</Text>
            <TextInput
              style={{ width: '100%', height: 60, backgroundColor: 'lightgray' }}
              autoCorrect={false}
              onChangeText={(val) => {
                handleDetailChange()
              }}
              multiline={false}
              value={Input.detail}
            />
          </View>
    </SafeAreaView>
  );
}```

Answer 1

First things first, you don't need the ScrollView wrapping the FlatList, you can achieve the same behaviour with only the FlatList. Then, you can set the keyboardShouldPersistTaps prop on the FlatList to 'handled', which according to the documentation will achieve what you need

the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor)

However, this might still trigger the onBlur callback of the TextInput, I'm not sure there's much room for improvement there.