How to change the StatusBar color of the splash screen?

Question

I'm using React Native for building my android application and I've followed this tutorial to set up my splash screen. Here is the result. My main problem is that the status bar color changes to black, I can't solve this by having <item name="colorPrimaryDark">@color/colorPrimaryDark</item> in my styles.xml file, and <color name="blue">#009CD7</color>, <color name="colorPrimaryDark">#009CD7</color> in my colors.xml file.

Bonus question: how to center the image without hardcoding a margin so that it stays in the center regardless of the device the app is running on?

Answer 1

Add colorPrimaryDark one more item in your current splash theme or create a new one.

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:statusBarColor">@android:color/white</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:background">@drawable/background_splash</item>
    <item name="colorPrimaryDark">@android:color/white</item>
</style>

Then use it as a second parameter while showing SplashScreen.

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this, R.style.SplashTheme, true);
        super.onCreate(savedInstanceState);
    }
}