I'm essentially creating a very simple searchbar. The component is just an input followed by a list of results. Here is basically the whole component:
interface Props { items: { id: number; label: string }[]; onChange: (itemId: number) => void; value: string; onClose: () => void;}export const List = ({ onChange, items, value, onClose,}: Props) => { const handlePress = (itemId: number) => () => { onChange(itemId); }; const renderItem = ({ item }: { item: { id: number; label: string } }) => (<Pressable onPress={handlePress(item.id)}><Typography>{item.label}</Typography></Pressable> ); return (<KeyboardAvoidingView behavior="padding"><SafeAreaView><StatusBar backgroundColor={primaryColor} barStyle="light-content" /><View><Pressable onPress={onClose}><FontAwesomeIcon size={spacingL} icon={faChevronLeft} color={white} /></Pressable><TextInput value={value} blurOnSubmit autoFocus clearButtonMode="while-editing" /></View><View><FlatList data={items} renderItem={renderItem} keyExtractor={item => item.id.toString()} /></View></SafeAreaView></KeyboardAvoidingView> );};My issue is that, when the input is focused, then I need to tap twice to select the result I want: one click to unfocus the input and hide the keyboard, and one click to press on my selection. I need to be able to do both in one tap!
I've already tried using keyboardShouldPersistTaps in different ways, on the FlatList, but also wrapping the whole thing in a ScrollView, with and without keyboardShouldPersistTaps, nothing seems to work...
I don't know if it helps, but I noticed, on my iPhone simulator, that if the input is focused but the keyboard is not visible, then I get the expected behavior.