react native expo androidNavigationBar not working

Question

I am trying to hide the software navigation bar in an Android app.
I am using androidNavigationBar in app.json

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

and on the dev build all works fine, but when I created prod build these features not working. may someone had this issue and can help me?

Answer 1

so, need to upgrade expo to 48 and use expo-navigation-bar npm package.

and use something like this code

const AndroidSoftwareNavHidden = async () =>{
   await NavigationBar.setPositionAsync('absolute')
   await NavigationBar.setVisibilityAsync("hidden");
   await NavigationBar.setBehaviorAsync('overlay-swipe')
}

useEffect(()=>{
   AndroidSoftwareNavHidden()
},[])

it helps me!

Answer 2

Maksym’s way works as long as the user does not leave the app, but if for some reason the app goes in the background because the user is replying to a text or something and then goes back to the app, the navigation bar will be visible and will not go away unless the app is closed and open again.

To fix this, you can use AppState to make sure the navigation bar is hidden when the app is being used. Even if the user leaves the app and comes back, the navigation bar will not appear until the user swipes.

So, to implement this, in your App.js, start by importing everything you need:

import { useEffect } from "react"
import { AppState } from "react-native"
import * as NavigationBar from "expo-navigation-bar"

Then add this code inside the App component:

// Hide bottom bar
const hideNavBar = async () => {

    // Prevent content from moving up when bar is shown
    await NavigationBar.setPositionAsync("absolute") 

    // Hide bottom bar
    await NavigationBar.setVisibilityAsync("hidden") 

    // Show the bar when user swipes
    await NavigationBar.setBehaviorAsync("overlay-swipe")  
}

useEffect(() => {

    const handleAppStateChange = (nextAppState) => {

        // If app is being used, hide nav bar
        if (nextAppState === "active") {

            hideNavBar()
        }
    }

    // Subscribe to app state changes
    const appStateSubscription = AppState.addEventListener('change', handleAppStateChange)

    // Clean up the event listener when the component unmounts
    return () => {
        appStateSubscription.remove()
    }
}, [])

You can change the behavior and look of the navigation bar to your liking. The official documentation on the Expo NavigationBar can help you with that.

P.S. - For anyone else reading this solution, at least for now, expo-navigation-bar only works on android, not on iOS nor the web.