slash screen implement

ref: https://github.com/mehcode/rn-splash-screen

Usage

import SplashScreen from 'rn-splash-screen'

// Hide the active splash screen
SplashScreen.hide()

Android step

1. Add a slash image in [project_name]/android/app/src/main/res/drawable/slash.png

   example:
   

2. Add the image as a windowBackground in [project_name]/android/app/src/main/res/values/styles.xml

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="android:windowBackground">@drawable/splash</item>
   </style>
   

3. Override the onCreate to show the splash screen in [project_name]/android/app/src/main/java/com/[project_name]/MainActivity.java

   // [...]
   import com.mehcode.reactnative.splashscreen.SplashScreen;
   
   public class MainActivity extends ReactActivity {
     // [...]
   
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         // Show the js-controlled splash screen
         SplashScreen.show(this);
   
         // After react is initialized; set our background color (override splash screen theme)
         getReactNativeHost().getReactInstanceManager().addReactInstanceEventListener(new ReactInstanceManager.ReactInstanceEventListener() {
             @Override
             public void onReactContextInitialized(ReactContext context) {
                 // Hide the native splash screen
                 getWindow().getDecorView().setBackgroundColor(Color.WHITE);
             }
         });
   
         super.onCreate(savedInstanceState);
   
         // [...]
     }
   
     // [...]
   }
   

iOS step

1. Remove the default LaunchScreen.xib

2. Create LaunchImage

   

3. Prepare images

   • Default@2x.png (640x960)
   • Default-568h@2x.png (640x1136)
   • Default-667h@2x.png (750x1334)
   • Default-Portrait-736h@3x.png (1242x2208)
   • Default-Landscape-736h@3x.png (2208x1242)

   ios/[project name]/Images.xcassets
     └── LaunchImage.launchimage
         ├── Contents.json
         ├── Default-568h@2x.png
         ├── Default-667h@2x.png
         ├── Default-Landscape-736h@3x.png
         ├── Default-Portrait-736h@3x.png
         ├── Default-Portrait.png
         └── Default@2x.png
   

   Contents.json

   {
     "images": [
       {
         "extent": "full-screen",
         "idiom": "iphone",
         "filename": "Default-568h@2x.png",
         "minimum-system-version": "7.0",
         "orientation": "portrait",
         "scale": "2x",
         "subtype": "retina4"
       },
       {
         "extent": "full-screen",
         "idiom": "iphone",
         "filename": "Default-667h@2x.png",
         "minimum-system-version": "8.0",
         "orientation": "portrait",
         "scale": "2x",
         "subtype": "667h"
       },
       {
         "extent": "full-screen",
         "idiom": "iphone",
         "filename": "Default-Landscape-736h@3x.png",
         "minimum-system-version": "8.0",
         "orientation": "landscape",
         "scale": "3x",
         "subtype": "736h"
       },
       {
         "extent": "full-screen",
         "idiom": "iphone",
         "filename": "Default-Portrait-736h@3x.png",
         "minimum-system-version": "8.0",
         "orientation": "portrait",
         "scale": "3x",
         "subtype": "736h"
       },
       {
         "extent": "full-screen",
         "idiom": "iphone",
         "filename": "Default@2x.png",
         "minimum-system-version": "7.0",
         "orientation": "portrait",
         "scale": "2x"
       }
     ],
     "info": {
       "version": 1,
       "author": "xcode"
     }
   }
   

4. In project settings, tap Use Asset Catalog for Launch Images under App Icons and Launch Images and have it use the newly created LaunchImage.

   

5. Show the splash screen after rootView created in [project_name]/ios/[project_name]/AppDelegate.m

   // [...]
   #import "RCTSplashScreen.h"
   
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
     // [...]
   
     RCTRootView *rootView = // [...]
   
     // Show splash screen (rn-splash-screen)
     [RCTSplashScreen show:rootView];
   
     // [...]
   }
   

Start by reviewing the Android paths under android/app/src/main/res and android/app/src/main/java/[project_name]/MainActivity.java, then the iOS assets and ios/[project_name]/AppDelegate.m described in the issue. Use the rn-splash-screen reference to understand the platform setup. Done means the splash screen is configured for Android and iOS and can be hidden after initialization.