Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[android][navigation-bar] Add androidNavigationBar options in configure app.json #5280

Merged
merged 8 commits into from Aug 13, 2019

Conversation

@vivianzzhu91
Copy link
Contributor

commented Aug 9, 2019

Why

Because of those feature requests, https://expo.canny.io/feature-requests/p/android-navigation-bar-color-change, https://expo.canny.io/feature-requests/p/dark-mode-for-android-navigation-bar, https://expo.canny.io/feature-requests/p/hide-android-bottom-buttons--fullscreen-mode, I decided to add a androidNavigationBar option in app.json to configure navigation bar on Android.

How

Add three options for androidNavigationBar:

{
  "androidNavigationBar": {
     /*
        Determines to show or hide bottom navigation bar.
        "true" to show, "false" to hide.
        If set to false, status bar will also be hide. As it's a general rule to hide both status bar and navigation bar on Android developer official docs.
      */
    "visible": BOOLEAN,
    /*
      Configure the navigation bar icons to have light or dark color.
      Valid values: "light-content", "dark-content".
    */
    "barStyle": STRING,

    /*
      Configuration for android navigation bar.
      6 character long hex color string, eg: "#000000"
    */
    "backgroundColor": STRING
  }
}

Test Plan

Tested on Android devices, and all configurations worked as expected.
Screen Shot 2019-08-09 at 3 29 57 PM
Screen Shot 2019-08-09 at 4 01 37 PM
Screen Shot 2019-08-09 at 3 49 13 PM
Screen Shot 2019-08-09 at 3 38 20 PM

vivianzzhu91 added 3 commits Aug 9, 2019
@vivianzzhu91 vivianzzhu91 requested a review from ide Aug 9, 2019
@vivianzzhu91 vivianzzhu91 changed the title [navigation-bar] Add androidNavigationBar options in configure app.json [android][navigation-bar] Add androidNavigationBar options in configure app.json Aug 12, 2019
ide added 5 commits Aug 13, 2019
@ide ide merged commit 94e06db into master Aug 13, 2019
1 of 3 checks passed
1 of 3 checks passed
client Workflow: client
Details
sdk Workflow: sdk
Details
docs Workflow: docs
Details
@ide ide deleted the @vivianzzhu91/navigation-bar branch Aug 13, 2019
@GollyJer

This comment has been minimized.

Copy link

commented Aug 21, 2019

This is really cool! Being based on app.json I assume it won't be adjustable at runtime. Is that correct?
Thanks @vivianzzhu91

We have an issue with our app when the user chooses a dark theme the navigation bar remains white (on some android devices).

@jaroslav009

This comment has been minimized.

Copy link

commented Aug 22, 2019

Not worked i have Android 9.0; SDK: 33.0

@miazga

This comment has been minimized.

Copy link

commented Aug 22, 2019

Great piece of work @vivianzzhu91!
Have you tried to make the configuration work in a runtime?

@vivianzzhu91

This comment has been minimized.

Copy link
Contributor Author

commented Aug 31, 2019

This feature barStyle:dark-content is only available after Andriod O. See here for more information. And it cannot be adjustable at runtime and can only be predefined in app.json.

@maytinhdibo

This comment has been minimized.

Copy link

commented Sep 5, 2019

This feature barStyle:dark-content is only available after Andriod O. See here for more information. And it cannot be adjustable at runtime and can only be predefined in app.json.

@vivianzzhu91 it does not work, please support it can change when run.

@EeoBryan

This comment has been minimized.

Copy link

commented Sep 6, 2019

Hi @vivianzzhu91 , I tried and it didnt work for me. Can you help me take a look. I included these in my app.json and it gave me error saying that "android navigation bar isn't supposed to be in app json"
expo3
expo4

@vivianzzhu91

This comment has been minimized.

Copy link
Contributor Author

commented Sep 6, 2019

Hi @EeoBryan you should include "androidNavigationBar" in the same level with "ios". So the first pic seemed to be the right way to do it. Remove the "androidNavigationBar" in the "android" in second pic because it doesn't exist in the configuration we set.

@EeoBryan

This comment has been minimized.

Copy link

commented Sep 9, 2019

@vivianzzhu91 hmm, i tried that but apparently I still got the same error heh. Maybe I should wait for the next SDK update or something?

@ide

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

This will go out with SDK 35.

@ksairi

This comment has been minimized.

Copy link

commented Sep 17, 2019

@ide how can I test this in my app from the source code in master branch as I see that this has been merged already?
Which of the packages in expo/packages have been updated with this merge so I can use them in my node_modules?
cheers!

@ide

This comment has been minimized.

Copy link
Member

commented Sep 17, 2019

These are the instructions for building from source: https://github.com/expo/expo/blob/56f502adbc56f10659744a730cbba3ddd2a0930b/README.md#set-up. If you get stuck I recommend waiting for the next SDK release.

@ksairi

This comment has been minimized.

Copy link

commented Sep 17, 2019

@ide thanks much!

@adamsolomon1986

This comment has been minimized.

Copy link

commented Sep 25, 2019

does it work in SDK 35? I saw that it hides it on launch but once you navigate to another screen in your app, the nav bar shows up again!!!! any idea?

@sidlovskyy

This comment has been minimized.

Copy link

commented Oct 4, 2019

does it work in SDK 35? I saw that it hides it on launch but once you navigate to another screen in your app, the nav bar shows up again!!!! any idea?

The same for me

@zcduthie

This comment has been minimized.

Copy link

commented Oct 6, 2019

Thank you for implementing this. I'm sure many people will be very grateful (myself included). Could the SYSTEM_UI_FLAG_IMMERSIVE_STICKY flag be added as well? Based on the docs at https://developer.android.com/training/system-ui/immersive and having a quick look at the code, it looks like the code currently enables something closer to 'Lean back' mode?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.