search

crazycodeboy / react-native-splash-screen

A splash screen for react-native, hide when application loaded ,it works on iOS and Android.
MIT License
5.61k stars 1.1k forks source link

[Android Question]: Set navigation bar background color? #444

Open luskin opened 4 years ago

luskin commented 4 years ago

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 commented 4 years ago

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

luskin commented 4 years ago

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

zmnv commented 4 years ago

@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 commented 4 years ago

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 commented 2 years ago

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 commented 2 years ago

@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