Hide android bottom buttons react native using expo build

Question

I have a problem, that I want to hide bottom buttons on android system in my app. I use expo build for my app. Tried other solutions that I saw on stackoverflow, but it didn't worked. I installed libraries "react-native-immersive" and "react-native-immersive-mode" and got an error. expo error

Answer 1

The Expo configuration file app.json at the root of your project it is possible to control the way the bottom bar of Android behaves with the "androidNavigationBar" property.

app.json

{
  "androidNavigationBar": {
    "visible": "immersive",
  }
}

You can review the documentation following the following link: Configuration with app.json - Expo Documentation

Expo documentation is very well done and it will be easy for you to get information to do things correctly, greetings.

Answer 2

Right now expo makes it easy to configure this inside your app. it is possible to control this in any of your views.js . Check out the documentation here: https://docs.expo.dev/versions/latest/sdk/navigation-bar example;

import * as NavigationBar from "expo-navigation-bar";

...
const [barVisibility, setBarVisibility] = useState();



NavigationBar.addVisibilityListener(({ visibility }) => {
    if (visibility === "visible") {
      setBarVisibility(visibility);
    }
  });
  useEffect(() => {
    navigationConfig();
  }, [barVisibility]);

  const navigationConfig = async () => {
    // Just incase it is not hidden
    NavigationBar.setBackgroundColorAsync('red');

    // Hide it
    NavigationBar.setVisibilityAsync("hidden");
  };