Seamless Transition
Despite our beautiful splash screen, you probably noticed that there is still a flash of white then the app first loads.
This is because the splash screen is hidden by the native code before React Native had finished loading the JavaScript code.
To prevent this flash, we can use react-native-splash-screen to programmatically hide the splash screen when the app is actually ready.
Install the library with
yarn add react-native-splash-screen# ornpm install react-native-splash-screenUse the linking command to link the native dependencies:
npx react-native link react-native-splash-screenInstall native dependencies:
cd ios && pod install && cd ..iOS#
Open AppDelegate.m in Xcode and add the the code to display the splash screen:
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>#import <React/RCTRootView.h>+#import "RNSplashScreen.h"@implementation AppDelegate
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ // ...other code+ [RNSplashScreen show]; return YES;}
@endIn App.tsx, hide the Splash Screen once the component has mounted:
import SplashScreen from 'react-native-splash-screen';
export const App: React.FC = () => { React.useEffect(() => { SplashScreen.hide(); }, []); ...};
Rebuild the app from XCode to see the new splash screen in action.
Android#
Update the MainActivity.java to use react-native-splash-screen via the following changes:
+import android.os.Bundle;+import org.devio.rn.splashscreen.SplashScreen;public class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) {+ SplashScreen.show(this); super.onCreate(savedInstanceState); }}Finally, rebuild the app from Android Studio.