2

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...

Med Elbayoumi
  • 21
  • 2

2 Answers2

0

Have you tried this solution keyboardHidesTabBar: true in TabBarOptions props.

<Tab.Navigator
  tabBarOptions={{
keyboardHidesTabBar: true,
}}
>
<Tab.Screen />
<Tab.Screen />
</Tab.Navigator>
Rahul
  • 36
  • 1
  • 1
    Yes i tried but it is an ugly animation that hides the tab bar and it animates the same time the keyboard appears so it feels like a kind of glitch – Med Elbayoumi Jul 05 '21 at 10:41
  • update for react navigation 6.x: the property name is `tabBarHideOnKeyboard` – anya Oct 04 '21 at 12:55
0

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!

Nivethan
  • 2,339
  • 19
  • 22