[Android Question]: Set navigation bar background color?

[luskin]

Hello.

We are simply trying to figure out how to change the background color of the soft keys/navigation bar at the bottom of some android phones (the virtual back button/home/app stack... etc).

I'm assuming it's an easy solution but we can't find documentation anywhere, thanks!

[loudy]

We're using this package: https://github.com/thebylito/react-native-navigation-bar-color

[luskin]

@loudy thanks for that but how are you setting the color on the launch screen?

[zmnv]

@loudy

Hello guys. Because of that I can't set my background color....

I have:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         ...
        <item name="android:navigationBarColor">@color/backgroundColor</item>
    </style>
</resources>

and it works. But while I see SPLASH SCREEN – react-native-splash-screen makes navigation bar BLACK.

How to set color for splash screen?

[zmnv]

Okay, I found it.

styles.xml:

<resources>
    <!-- Base application theme -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@color/backgroundColor</item>
        <item name="android:statusBarColor">@color/backgroundColor</item>
        <item name="android:navigationBarColor">@color/backgroundColor</item>
        <item name="colorControlActivated">@color/blue</item>
    </style>
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/backgroundColor</item>
        <item name="android:navigationBarColor">@color/backgroundColor</item>
    </style>
</resources>

Add R.style.SplashScreenTheme in MainActivity.java:

SplashScreen.show(this, R.style.SplashScreenTheme);

[BismarkCodes]

That helps too. But anyone has an idea on how to change the background color of the system navigation bar on the splash screen in an expo-managed project?

[BismarkCodes]

@loudy

Hello guys. Because of that I can't set my background color....

I have:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         ...
        <item name="android:navigationBarColor">@color/backgroundColor</item>
    </style>
</resources>

and it works. But while I see SPLASH SCREEN – react-native-splash-screen makes navigation bar BLACK.

How to set color for splash screen?

I found the solution by adding this to my app.json file.

"androidNavigationBar": { "barStyle": "dark-content", "backgroundColor": "#ffffff" },

NB: i'm using an expo-managed-project and I'm quite sure it should work in a bare react-native project too