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.