CODEWITHSUNDEEP
androidiostypescriptreact-nativereact-native-flatlist
Manuel Lemaire
Manuel Lemaire

Reputation: 127

React native - Click not triggered on Pressable when keyboard is up

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.

Upvotes: 0

Views: 1413

Answers (1)

Jonas Beck
Jonas Beck

Reputation: 521

It looks a typical keyboardShouldPersistTaps prop issue. I see you have no any styling in all your component. Please try to apply {flex: 1} style and keyboardShouldPersistTaps='always' prop to Flatlist.

Upvotes: 4

Related Questions