React navigation 5 bottom tab bar android keyboard ISSUE - react-native

Question

There is huge problem with bottom tab navigation on android that I'm struggling with and can't find any solution!!
on Android when keyboard shows the bottom tab bar goes upon the keyboard, which is obviously not a desired behaviour!
This happens when softInputMode in Android Manifest is set to adjustResize (which is the default mode for react native), I've tried with adjustPan and resolves the problem, but now when keyboard appears android avoids not only the view but either the header of the app! This behaviour too is not acceptable!
I've also tried with workarounds like listening to keyboard events (didShow, and didHide are only available) and disabling the bottom bar on keyboard appearingt but this leads to many glitches in the app.
The keyboardHidesTabBar prop is also very ugly cause it is an animation that hides the bar that starts after keyboard opening...

Answer 1

Have you tried this solution keyboardHidesTabBar: true in TabBarOptions props.
<Tab.Navigator
tabBarOptions={{
keyboardHidesTabBar: true,
}}
>
<Tab.Screen />
<Tab.Screen />
</Tab.Navigator>

Answer 2

Answer for React Navigation V5 with or without a Custom tabBar
if you use a custom tabBar the keyboardHidesTabBar: true prop is not working but when i change the custom tabBar to default tab bar that prop works but i don't like the behavior of that prop on android, so i used keyboard from react-native to check if the keyboard is active or not and setting the css display prop to 'none'
import { Keyboard, View } from "react-native";
const [keyboardStatus, setKeyboardStatus] = useState<boolean>();
useEffect(() => {
const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
setKeyboardStatus(true);
});
const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
setKeyboardStatus(false);
});
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, []);
so on the custom tab bar component now we can do like this.
<View style={
[
styles.mainContainer,
keyboardStatus ? styles.hideTabNavigation : null,
]
}
>
// your code here
</View>
Hope this will help someone until they fix this issue!