CODEWITHSUNDEEP
react-nativesplash-screen
Saeed Heidarizarei
Saeed Heidarizarei

Reputation: 8916

How to Remove White Screen after Splash Screen in React Native For Android

I have a default react native project I installed from this turorial and I added a splash screen to my Project with this tutorial. However, now I get:

What is the best and most standard way to fix this problem? I need my splash screen for 1 secend and after that my app should start, I have read more articles but I couldn't find a fix for react native.

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".SplashActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name=".MainActivity" />
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Upvotes: 20

Views: 41309

Answers (11)

Blogger Klik
Blogger Klik

Reputation: 110

I solved it for android by making the color of the white screen the same as the color of the splash screen.

Upvotes: 0

Vivek
Vivek

Reputation: 5213

For iOS

  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  UIView* launchScreenView = vc.view;
  launchScreenView.frame = self.window.bounds;
  rootView.loadingView = launchScreenView;

Upvotes: -1

Jonathan Sanchez
Jonathan Sanchez

Reputation: 9374

This was my solution for IOS - 2021 on RN v.063

from the React Native documents https://reactnative.dev/docs/publishing-to-app-store#pro-tips

  1. Search and find your AppDelegate.m file
  2. Add this code
  3. Re-build the app (so stop the app and start it again)
// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  rootView.loadingView = vc.view;

here is the React Native docs message

As your App Bundle grows in size, you may start to see a blank screen flash between your splash screen and the display of your root application view. If this is the case, you can add the following code to AppDelegate.m in order to keep your splash screen displayed during the transition.

Upvotes: 12

Jason Jin
Jason Jin

Reputation: 1849

Recently I met this issue(RN v0.62.2, iPhone), I could resolve it by following React Native official document though.

https://reactnative.dev/docs/running-on-device#2-configure-release-scheme

Upvotes: 2

Gajendra Mehra
Gajendra Mehra

Reputation: 11

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Linking,
} from 'react-native'
import SplashScreen from 'react-native-splash-screen'

export default class App extends Component {

    async componentDidMount() {
        SplashScreen.hide();
    }


    render() {
        return (
            <TouchableOpacity
                style={styles.container}
                onPress={(e)=> {
                    Linking.openURL('http://www.devio.org/');
                }}
            >
                <View >
                    <Text style={styles.item}>
                        SplashScreen 启动屏
                    </Text>
                    <Text style={styles.item}>
                        @：http://www.devio.org/
                    </Text>
                    <Text style={styles.item}>
                        GitHub:https://github.com/crazycodeboy
                    </Text>
                    <Text style={styles.item}>
                        Email:[email protected]
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f3f2f2',
        marginTop: 30
    },
    item: {
        fontSize: 20,
    },
    line: {
        flex: 1,
        height: 0.3,
        backgroundColor: 'darkgray',
    },
})

Upvotes: 0

Daria Kozlova
Daria Kozlova

Reputation: 61

Also had this issue.

Changing splash screen background color to the one which I use on the next screen saved the situation for both platforms

Upvotes: 0

kaushal
kaushal

Reputation: 911

I fix this by following steps mentioned by @sergiulucaci on GitHub like this and it worked

Go to android/app/src/main/res/values/styles.xml

Disable the app's preview as follows:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item> // <--- ADD THIS
        // Other items...
    </style>
</resources>

Upvotes: 13

ArkaneKhan
ArkaneKhan

Reputation: 476

I too have been through this problem. In my case it was redux persist library that use to extract persisted state from storage and feed it into the reducers and this process use to take almost 1 second during that second it used to show white screen a little flicker and then it renders the actual screen.

The work around i used is this actually the control to hide splash is on javascript side you are doing this to hide it.

componentDidMount() {
    SplashScreen.hide();
}

Just add a little delay and it will work fine.

componentDidMount() {
    setTimeout(() => SplashScreen.hide() , 2000);
}

Upvotes: 14

Saeed Heidarizarei
Saeed Heidarizarei

Reputation: 8916

First:
Run npm i react-native-splash-screen --save

Second step(Plugin Installation):
Automatic installation

react-native link react-native-splash-screen or rnpm link react-native-splash-screen

Manual installation
Android:
1: In your android/settings.gradle file, make the following additions:

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

2: In your android/app/build.gradle file, add the :react-native-splash-screen project as a compile-time dependency:

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

3: Update the MainApplication.java file to use react-native-splash-screen via the following changes:

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

Example Code:

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Linking,
} from 'react-native'
import SplashScreen from 'react-native-splash-screen'

export default class example extends Component {

    componentDidMount() {
        SplashScreen.hide();
    }


    render() {
        return (
            <TouchableOpacity
                style={styles.container}
                onPress={(e)=> {
                    Linking.openURL('http://www.devio.org/');
                }}
            >
                <View >
                    <Text style={styles.item}>
                        SplashScreen 启动屏
                    </Text>
                    <Text style={styles.item}>
                        @：http://www.devio.org/
                    </Text>
                    <Text style={styles.item}>
                        GitHub:https://github.com/crazycodeboy
                    </Text>
                    <Text style={styles.item}>
                        Email:[email protected]
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f3f2f2',
        marginTop: 30
    },
    item: {
        fontSize: 20,
    },
    line: {
        flex: 1,
        height: 0.3,
        backgroundColor: 'darkgray',
    },
})

Upvotes: 2

Ahsanwarsi
Ahsanwarsi

Reputation: 1023

Had this issue, spent lots of time in debugging.

Solution: CSS property was duplicating in one of my components. Removing duplication fixed white screen issue for me.

Upvotes: 1

neomib
neomib

Reputation: 4073

Here is another solution for both ios and android: https://github.com/mehcode/rn-splash-screen. I hid the splash screen in the render function of my app.tsx (the entry point) and showed the same image until all of my https requests were done.

My code:

public render()
    {
        SplashScreen.hide();

       //after everything has finished loading - show my app.
       if (this.state.isFinishedloading) 
        {
            return (
                <this.navigator screenProps={{ ...providers }} />
            );
        }

      // Until then show the same image as the splash screen with an ActivityIndicator.
        return (
           <View style={{ flex: 1 }}>
              <Image style={styles.image} source={require('../assets/img/splash.png')} >
                <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
              </Image>
           </View>
        );

    }

Upvotes: 3

Related Questions