How can I hide the bottom navigation bar?

Question

I want to hide the Bottom Navigation Bar or make it transparent so that View take full screen.

Is there any way to do this?

I'm expecting that it will auto hide when not in use. It should only be visible when user want to use the navigation like in Youtube when we watch video in Landscape view.

Answer 1

You can refer to this thread : https://stackoverflow.com/a/55077439/20325571 You will need to install a new package : npm install react-native-navigation-bar-color

Then, you will need to import

import {
  HideNavigationBar,
  ShowNavigationBar,
} from 'react-native-navigation-bar-color';

And these methods will be available : ShowNavigationBar(); And HideNavigationBar();

Answer 2

You can use expo's NavigationBar component to control its appearance. setVisibilityAsync and setBehaviourAsync will be the two functions you want. From the docs:

For example, if the navigation bar is hidden (setVisibilityAsync(false)) and the behavior is 'overlay-swipe', the user can swipe from the bottom of the screen to temporarily reveal the navigation bar.

https://docs.expo.dev/versions/latest/sdk/navigation-bar/

Answer 3

This is how I have solved the issue.

import the library react-native-navigation-bar-color

Then you can use it like this.

import {View, Button} from 'react-native';
import {hideNavigationBar} from 'react-native-navigation-bar-color';

const BottomBar = () => {
  hide = () => {
    hideNavigationBar();
  };

  return (
    <View>
      <Button title="Hide bar" onPress={() => hide()} />
    </View>
  );
};

export default BottomBar;