[v4] | [v2] keyboard disappears after pressing input

[arpkirill]

Bug

When you try to open the keyboard by pressing input, the keyboard appears for a couple of seconds and then disappears, this only happens on some phones. I couldn't understand the pattern.

SAMSUNG SM-A105F SAMSUNG SM-A750FN

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.3
react-native	0.71.8
react-native-reanimated	3.11.0
react-native-gesture-handler	^2.16.2

Steps To Reproduce

1. Open the modal
2. Click on input
3. See the keyboard for a couple of seconds and then it disappears

Describe what you expected to happen:

1. Open the keyboard and don’t close it until you want to

Reproducible sample code

https://github.com/gorhom/react-native-bottom-sheet/assets/44532033/0ef5822a-22a6-4460-b67e-a15bbb4eeb31

    <View style={st.container}>
      <BottomSheet
        index={0}
        onClose={handleClose}
        topInset={containerStyle.paddingTop}
        backgroundStyle={st.sheetBackground}
        handleIndicatorStyle={st.indicator}
        keyboardBehavior="extend"
        keyboardBlurBehavior="none"
        android_keyboardInputMode="adjustResize"
        enableDynamicSizing={true}
        enablePanDownToClose={true}>
        <BottomSheetView style={st.content}>
          <FormikProvider value={formik}>
            <Text style={st.title}>Введите сумму вывода</Text>
            <Text style={st.text}>
              {'Ближайший вывод будет произведен \nв ближайшее время'}
            </Text>
            <TextField
              name={'amount'}
              InputComponent={BottomSheetTextInput}
              containerStyle={st.inputContainer}
              placeholder={'0'}
              keyboardType={'numeric'}
              addAfter={<Text>₽</Text>}
            />
            <Button
              containerStyle={st.button}
              text={'Вывести'}
              onPress={formik.handleSubmit}
            />
          </FormikProvider>
        </BottomSheetView>
      </BottomSheet>
    </View>

[arpkirill]

Perhaps this is due to the height of the keyboard, if it is too high, then the keyboard collapses

[LizMyers]

I have the very same problem

[arpkirill]

I have the very same problem

I found a temporary solution, but it makes the interface a bit crooked.

        keyboardBehavior={Platform.OS === 'ios' ? 'interactive' : 'fillParent'}

[PankajRanaAdglobal]

Facing same Keyboard issue in Android device only. Any Update on this?

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[arpkirill]

actual

[duydtd97]

I have the very same problem, anyone help me !

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[micheleb]

having the exact same issue

[duydtd97]

dont close this thread :v

[micheleb]

actually I think this is the same as #1602

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[gorhom]

could you please test on v5 ?

[sliptype]

For me, this issue occurred with a TextInput/BottomSheetTextInput inside the footer component. The footerComponent was dependent on the insets.bottom variable from useSafeAreaInsets.

This caused the footer to rerender when the keyboard was opened, which subsequently closed the keyboard.

It might not be the exact same issue, but definitely check for any insets that could be updating and causing rerenders!

[cr0ybot]

I have tested on v5.0.0-alpha.11, still presents the same issue. I'm also adding a BottomSheetTextInput via the footerComponent prop, and I even tried removing any bottomInset references. It seems like the changing of the value of the input itself is causing it to rerender. I removed several layers of composition so that the BottomSheetTextInput was a direct and only child of BottomSheetFooter, and the issue persisted. It also seems like banging on the keyboard too quickly results in a crash.

[gorhom]

Thank you for testing, I'm currently preparing for the v5 stable release, and I'll make sure to include this one in

[RomanSytnyk]

Same issue on Samsung S23

[gorhom]

no one provide a reproducible sample code of the issue, how can i help you 🫠

[florian-deroo]

no one provide a reproducible sample code of the issue, how can i help you 🫠

Still got the issue on 5.0.1, i will do a reproducible sample code

[florian-deroo]

My issue occurs when I import my custom hook. In my case, I will just delete this hook as I don't even remember why I was using it.

export default function useKeyboard() {
    const [keyboardStatus, setKeyboardStatus] = useState(false);
    function _keyboardDidShow() {
        setKeyboardStatus(true);
    }
function _keyboardDidHide() {
        setKeyboardStatus(false);
    }

    useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
        const keyboardDidShowListener2 = Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

        return () => {
            keyboardDidShowListener.remove()
            keyboardDidShowListener2.remove()
        };
    }, []);

    return keyboardStatus;
}

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import {
    BottomSheetModal,
    BottomSheetView,
    BottomSheetModalProvider, BottomSheetModalProps, BottomSheetTextInput,
} from '@gorhom/bottom-sheet';
import {GestureHandlerRootView} from "react-native-gesture-handler";
import useKeyboard from "@/hooks/useKeyboard";

const App = () => {
    // ref
    const bottomSheetModalRef = useRef<BottomSheetModal>(null);

    // variables
    const snapPoints = useMemo(() => ['25%', '50%'], []);

    // callbacks
    const handlePresentModalPress = useCallback(() => {
        bottomSheetModalRef.current?.present();
    }, []);

    function bottomSheetConfig() : Omit<BottomSheetModalProps, 'children'> {
        return {
            keyboardBehavior: 'interactive',
            keyboardBlurBehavior: 'restore',
            enablePanDownToClose: true,
            android_keyboardInputMode: "adjustResize",
        }
    }

    // This hook will break the input
    const keyboard = useKeyboard()

    // renders
    return (
        <GestureHandlerRootView>
            <BottomSheetModalProvider>
                <View style={styles.container}>
                    <Button
                        onPress={handlePresentModalPress}
                        title="Present Modal"
                        color="black"
                    />
                    <BottomSheetModal
                        {...bottomSheetConfig()}
                        ref={bottomSheetModalRef}
                        index={1}
                        snapPoints={snapPoints}
                    >
                        <BottomSheetView style={styles.contentContainer}>
                            <Text>Awesome 🎉</Text>
                        </BottomSheetView>
                        <BottomSheetTextInput
                            style={{
                                fontWeight: "400",
                                height: 50,
                                backgroundColor: "#EAEEF1",
                                borderRadius: 400,
                                paddingLeft: 20,
                                paddingRight: 20,
                                marginLeft: 10,
                                marginRight: 10,
                                width: 200,
                                textAlign: "center"
                            }}
                            placeholder={"Text input"}
                        />
                    </BottomSheetModal>
                </View>
            </BottomSheetModalProvider>
        </GestureHandlerRootView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 24,
        justifyContent: 'center',
        backgroundColor: 'grey',
    },
    contentContainer: {
    },
});

export default App;

[mabdurrafey-afl]

🎉🎉🎉 Fixed the issue by wrapping the sheet component inside a useMemo hook.