React-native / Splash-Screen appear when showing keyboard

Question

I added a splash-screen to my react native project, everything works fine exept when i open the keyboard it show briefly the splash-screen behind it. Video : https://drive.google.com/open?id=14ahrc-dyYnNEYAAX3iMQVwqqV6fVo_xG

To Reproduce

create background_splash.xml in drawable with this code in it :

 <?xml version="1.0" encoding="utf-8" ?>

<layer-list 
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/primary"/>
</layer-list>

Then add it in the styles.xml file

<item name="android:windowBackground">
     @drawable/background_splash
</item>

Expected Behavior

The splash-screen should not display when the keyboard appears.

Code Example

Everything is in the To Reproduce tab, you just need to add a TextInput for it to appear.

Environment

React Native Environment Info: System: OS: Windows 10 CPU: (4) x64 Intel(R) Xeon(R) CPU E5-1603 v4 @ 2.80GHz Memory: 9.57 GB / 15.92 GB Binaries: npm: 6.4.1 - C:\\Program Files\\nodejs\\npm.CMD

Answer 1

I had the same problem with my app, here is my workaround. First you have to install the module react-native-background-color which allows you to set the background color of your root Activity.

After call the setColor method in your App.jsx (with a short timeout to avoid a "flash" immediately after splash screen) example with hooks :

export default function App(): Element {
    useEffect(() => {
        if (Platform.OS === "android") {
            setTimeout(() => {
                BackgroundColor.setColor("#FFFFFF");
            }, 500);
        }
    }, []);
    return <AppContainer />;
}

Hope this help !

Edit: improve the code with a Platform.OS test.

Answer 2

These libraries ( react-native-root-view-background & react-native-background-color ) did not work for me probably due to being outdated, but this one worked for me flawlessly tested with "react-native": "~0.63.4" :

https://www.npmjs.com/package/react-native-root-view-background-color

import RootViewBackgroundColor from 'react-native-root-view-background-color';
 
 
// Set the Root View background color to black
RootViewBackgroundColor.setBackground(0, 0, 0, 1);
 
// Set the Root View background color to white
RootViewBackgroundColor.setBackground(255, 255, 255, 1);