slash screen implement

[leecade]

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

4. Remove the default LaunchScreen.xib

5. Create LaunchImage

   

6. 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"
    }
   }

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

   

8. 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];
   
    // [...]
   }