CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-bottom-tab
Med Elbayoumi
Med Elbayoumi

Reputation: 21

React navigation 5 bottom tab bar android keyboard ISSUE

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

Upvotes: 2

Views: 2343

Answers (2)

Nivethan
Nivethan

Reputation: 3649

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!

Upvotes: 0

Rahul
Rahul

Reputation: 36

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

<Tab.Navigator
  tabBarOptions={{
keyboardHidesTabBar: true,
}}
>
<Tab.Screen />
<Tab.Screen />
</Tab.Navigator>

Upvotes: 0

Related Questions