[android][navbar] allow for all Android FullScreen options

[cruzach]

Why

Android System UI provides 3 options: 



• Leanback: navbar/statusbar are hidden, touching the screen brings them back
• Immersive: navbar/statusbar are hidden, swipe from edge of the screen brings them back, that swipe/touch gesture is NOT recognized by the app
• Sticky Immersive: navbar/statusbar are hidden, swipe from edge of the screen brings semi-transparent statusbar/navbar into view, that swipe/touch gesture IS recognized by the app

source

Currently, we let users set androidNavigationBar.visible to true or false. True is normal behavior, false results in Leanback option above.

Proposal: allow users to use leanback, immersive, or sticky immersive.

How

Changed app.json androidNavigationBar.visible to accept a string, and respond based off of that.
The term visible might not be the best description of this, since that seems to match a true/false value instead, so I'm open to suggestions on that. Maybe visibility is more accurate

Test Plan

Tested in Expo client and standalone

when making these changes to the SDK 36 branch, this affects both Navigation bar and status bar, but when working off of master it only affects navigation bar, which I believe is preferable so that users can decide on their own whether or not they want to hide both. I think this difference is due to changes in 4cb56e4

This PR expands upon the feature added in #5280
Closes #6525
Also should mark this as completed once this lands https://expo.canny.io/feature-requests/p/hide-android-bottom-buttons--fullscreen-mode

[ExpoBot]

	Warnings
⚠️	You modified workflow/configuration.md in the unversioned directory. Please consider copying the changes to the latest released version if applicable.

Generated by 🚫 dangerJS against 61ba227

[brentvatne]

we should take care of updating the value in app.json automatically in expo upgrade :)

[cruzach]

@brentvatne good thinking 🧠will do

[alanupstone]

Hi. This doesn't seem to work. I am quite new to this world, so I might be missing something, so be gentle...

$ expo build:android -t app-bundle --release-channel android
Error: Problem validating fields in app.json. See https://docs.expo.io/versions/v36.0.0/workflow/configuration/
• Field: androidNavigationBar.visible - should be boolean.

app.json....

{
"expo": {
"name": "Pocket Infoweb",
"slug": "PocketInfoweb-Dev",
"description": "Find your tools inventory.",
"privacy": "public",
"sdkVersion": "36.0.0",
"platforms": ["ios", "android"],
"version": "1.1.27",
"icon": "./assets/images/icon.png",
"orientation": "portrait",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"enabled": true,
"checkAutomatically": "ON_ERROR_RECOVERY",
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["assets/images/", "assets/fonts/"],
"ios": {
"supportsTablet": true,
"buildNumber": "92",
"bundleIdentifier": "com.helpfulconsultants.pocketinfowebpro",
"config": {
"usesNonExemptEncryption": false
}
},
"android": {
"package": "com.helpfulconsultants.pocketinfowebpro",
"versionCode": 6
},
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#0b4a76"
},
"androidNavigationBar": {
"visible": "immersive",
"barStyle": "light-content",
"backgroundColor": "#3689b1"
}
}
}

$ expo diagnostics

Expo CLI 3.13.1 environment info:
System:
OS: macOS High Sierra 10.13.6
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.13.7 - ~/.nvm/versions/node/v10.15.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
expo: ^36.0.2 => 36.0.2
react: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.2.tar.gz => 0.61.4
npmGlobalPackages:
expo-cli: 3.13.1

[brentvatne]

@alanupstone - these changes will be included in the upcoming sdk37 release

[alanupstone]

@brentvatne - Thanks for the quick response. I'll stand down! Must be misunderstanding something I read about it being in 36.0.2

[brentvatne]

gotcha, yeah it'll be out soon!

[alanupstone]

@brentvatne Is this wrong to use, then, in my package.json?
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.2.tar.gz",

[brentvatne]

the latest release of that package is 36.0.1: https://github.com/expo/react-native/releases

[nkaramarko]

navigator color goes back to phone color when keyboard is showing or modal is showing.
will this be fixed soon?
i have SDK 36

[inglesuniversal]

I am extremely proud of the EXPO Team and ALL of your accomplishments. I waited long enough for the fullscreen feature to work again on Android Phones... and SDK release 37 is a phenomenal way to prove just that.

`
"androidNavigationBar": {
"visible": "immersive",
"barStyle": "light-content",
"backgroundColor": "#000000"
}

`

Keep creating great stuff for this thriving developer community.

Regards

Hugo Barbosa
MyCloudVIP

[embray]

Thanks for this. Though I'm trying to use "sticky-immersive" and while it works for the navigation bar, swiping never brings back the status bar. I'm on SDK 37.

[inglesuniversal]

You have to make a bit more pressure on the lower part of your Android Phone and then slowly swipe up your finger on the screen and it will remain active for about 3-5 secs

[embray]

@inglesuniversal In the case I was trying this worked for the navigation bar on the botom, but not for the status bar. With "leanback" both bars would come up when touching; with "sticky-immersive" only the navbar would come up, but the status bar would not appear. I'll see if I can make a simple reproducible example.

[ahmedvila]

Immersive mode is turned off (android navigation bar sticks and doesn't hide) when soft keyboard is shown and then hidden again. There are numerous resources on this issue, but this one promises the most:
https://stackoverflow.com/questions/35791224/status-bar-appears-when-soft-keyboard-appears-but-not-hidden-back-when-soft-keyb#comment59611069_35791224

[faizabdulchakim]

"androidNavigationBar": {
"visible": "immersive",
"barStyle": "light-content",
"backgroundColor": "#000000"
}

where is this setting?

[ahmedvila]

where is this setting?

https://docs.expo.io/workflow/configuration/#androidnavigationbar

[ghost]

Guys, thank you so much for the effort. I don't know if it's just me, but this new feature doesn't seem to work how it should with bottomTabNavigator. The tab bar is moving how it should , but tab icons and labels are kind of messy.

[cruzach]

@Mendzak if you think you've found a bug in the Expo SDK, please open an issue and follow the bug report template