Hiding the Navigation Bar

rakibtg · October 20, 2017, 7:56pm

Is there any API from expo to hide the android navigation bar? i’m talking about the bottom system navigation bar not the status bar alt text

How to hide the Navigation Bar? Thanks

davepack · October 20, 2017, 9:29pm

Hi, this isn’t something you can do right now, but you can head over to canny to vote for the feature request: Hide Android Bottom Buttons / Fullscreen Mode | Voters | Expo

mobshed · August 5, 2019, 3:49am

Any updates on that feature? Is there any workaround?

wodin · August 14, 2019, 3:04pm

Actually, yes!

Check this pull request that was merged 20 hours ago:

https://github.com/expo/expo/pull/5280

mobshed · August 14, 2019, 3:44pm

That’s fantastic! Thanks @wodin for the info.

Now, a couple questions:

1.- Where do you precisely add “androidNavigationBar” in app.json? Under “expo”?
2.- Do I need to reinstall or update expo afterwards?

wodin · August 14, 2019, 4:03pm

I have not tried this, but:

I think you would put it at the same level as the androidStatusBar option. i.e. under expo. The following URL shows the updated documentation. As you can see the config looks very similar for androidStatusBar and androidNavigationBar:

github.com

expo/expo/blob/94e06dbbc2221033ddd5fd7fb8cebc9d192e2710/docs/pages/versions/unversioned/workflow/configuration.md#androidstatusbar

---
title: Configuration with app.json
---

`app.json` is your go-to place for configuring parts of your app that don't belong in code. It is located at the root of your project next to your `package.json`. It looks something like this:

```javascript
{
  "expo": {
    "name": "My app",
    "slug": "my-app",
    "sdkVersion": "UNVERSIONED",
    "privacy": "public"
  }
}
```

`app.json` was previous referred to as `exp.json`, but for consistency with [Create React Native App](https://github.com/react-community/create-react-native-app) it has been consolidated under one file. If you are converting your app from using `exp.json` to `app.json`, all you need to do is add an `"expo"` key at the root of `app.json`, as the parent of all other keys.

Most configuration from `app.json` is accessible at runtime from your JavaScript code via [`Constants.manifest`](../../sdk/constants/#expoconstantsmanifest). Sensitive information such as secret keys are removed. See the `"extra"` key below for information about how to pass arbitrary configuration data to your app.

This file has been truncated. show original

See the following for an example of androidStatusBar showing that it lives under expo:

https://docs.expo.io/versions/latest/guides/configuring-statusbar/#set-the-backgroundcolor-of-the-status-bar

You will need a version of expo released after the change was merged in (there isn’t one yet), or else you’ll need to build it yourself. I have not tried to do this myself.

mobshed · August 14, 2019, 4:12pm

Well, I guess I’ll have to be a bit more patient then

Topic		Replies	Views
Fullscreen Mode How to / Third Party Tooling	14	6001	March 17, 2020
How to disable/force hide the system navigation bar and status bar on Android? Expo SDK	1	292	June 18, 2022
androidNavigationBar not really hidden Expo SDK	1	435	November 16, 2019
Hiding "androidNavigationBar" results in top margin issue Expo Development Tools	0	325	May 30, 2021
React Native Expo APP in Fullscreen Expo SDK	4	2815	February 8, 2019

Hiding the Navigation Bar

Related Topics