Creating Launch Screens

Launch Screens are displayed to users while your app is loading. These typically contain app branding and/or previews of the app's interface. They can be static images or, for iOS, make use of native UI elements and dynamically display based on the user's screen size.

Configuration

Your environment file needs to contain the following section pointing to folders containing the launch screen files. The Android configuration simply points to a directory, while the iOS configuration points to both an image set and a xib file. You can change the paths as needed.

launchScreen: {
  android: 'assets/launchScreen/android',
  ios: {
    images: 'assets/launchScreen/ios/LaunchImages.xcassets',
    xib: 'assets/launchScreen/ios/LaunchScreen.xib'
  }
}

Android

Launch screens for Android simply consist of a set of png images. The Android directory should contain four folders, drawable-hdpi, drawable-mdpi, drawable-xhdpi, and drawable-xxhdpi each of which contain a single image named screen.png of a different resolution. The resolution of each image is as follows:

folder	resolution
drawable-hdpi	480x800
drawable-mdpi	320x480
drawable-xhdpi	720x1280
drawable-xxhdpi	960x1600

Once complete, your folder structure should be as follows:

Run init to copy the files to the Android native folder and your launch screen should appear on next run.

iOS

React Native uses .xib files from Xcode's Interface Builder. This allows for greater flexibility but also introduces a learning curve. We recommend this tutorial as well as the standard Xcode documentation.

Once you're done creating your interface in Xcode, you'll need to copy several files into your Flagship project. First, the entire LaunchImages.xcassets directory needs to be copied into assets/launchScreen/ios (or other directory as configured). Note that any referenced images need to be included as well, so if you used images located elsewhere on your computer you'll need to copy them into the imagesets and update the paths in the Contents.json files.

Next, the LaunchScreen.xib file needs to be copied into assets/launchScreen/ios or other directory as configured.

When complete, your folder structure should be similar to that pictured below. This example is for a launch screen that has a single image named Badge.

Now, run init to copy the files to the necessary locations in the native ios directory. The launch screen should appear on next run. Note that iOS devices and simulators aggressively cache the launch screens so you may need to reinstall the app or reset your simulator in order to see any changes.