tabBarHideOnKeyboard Not Working and Bottom Bar Goes Up with Keyboard

[sandesh-wadal]

Hello,

I am experiencing an issue with the CurvedBottomBar.Navigator where the tabBarHideOnKeyboard screen option is not functioning as expected. Specifically, when the keyboard appears, the bottom bar is not hiding as it should. Instead, the bottom bar goes up along with the keyboard.

Steps to Reproduce:
Set up a CurvedBottomBar.Navigator with tabBarHideOnKeyboard enabled in the screenOptions.
Implement a screen where the keyboard is triggered (e.g., a text input field).
Observe that when the keyboard appears, the bottom bar does not hide, and instead, it moves up with the keyboard.

Expected Behavior:
The bottom bar should hide when the keyboard is visible, as specified by the tabBarHideOnKeyboard option.

Actual Behavior:
The bottom bar moves up with the keyboard, not hiding as expected.

tried adding this in Navigator as well as in screen

<CurvedBottomBar.Navigator
    screenOptions={{
      headerShown: false,
      unmountOnBlur: true,
      tabBarHideOnKeyboard:true
    }}
    
    
     <CurvedBottomBar.Screen
    options={{
      tabBarHideOnKeyboard:true
    }}

[victor-rayan]

same here

[dws-ronak]

const tabRef = useRef(null);
tabRef?.current?.setVisible(false),

@sandesh-wadal You can handle it manually using ref and Keyboard API of react native.

[sandesh-wadal]

@dws-ronak I am using ref to set visible true and false. using keyboard 'keyboardDidShow' and 'keyboardDidHide' listers.
as tabBarHideOnKeyboard is not working.
But wanted to check if tabBarHideOnKeyboard is working or not.

[sandesh-wadal]

@victor-rayan you can use this -
I am using this for android only.

useEffect(() => {
if (Platform.OS === 'android') {
const keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
() => {
if (bottomBarRef && bottomBarRef.current) {
bottomBarRef.current.setVisible(false);
}
},
);
const keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
() => {
if (bottomBarRef && bottomBarRef.current) {
bottomBarRef.current.setVisible(true);
}
},
);
return () => {
keyboardDidHideListener.remove();
keyboardDidShowListener.remove();
};
}

}, []);

[rushant11]

same here

@victor-rayan have you found anything else for this issue?

[ahmadmustafeen]

@victor-rayan you can use this - I am using this for android only.

useEffect(() => { if (Platform.OS === 'android') { const keyboardDidShowListener = Keyboard.addListener( 'keyboardDidShow', () => { if (bottomBarRef && bottomBarRef.current) { bottomBarRef.current.setVisible(false); } }, ); const keyboardDidHideListener = Keyboard.addListener( 'keyboardDidHide', () => { if (bottomBarRef && bottomBarRef.current) { bottomBarRef.current.setVisible(true); } }, ); return () => { keyboardDidHideListener.remove(); keyboardDidShowListener.remove(); }; }

}, []);

This worked for me, but have a delay cause of useEffect, still working on the solution.