Platform Implementation

Overview

Setting up splash screens requires platform-specific configuration for both iOS and Android. This guide provides detailed instructions for each platform, ensuring your splash screen displays correctly across all devices and OS versions.

Platform Differences

iOS and Android handle splash screens differently:

iOS: Uses Storyboard files for launch screens
Android: Uses drawable resources and themes (with special handling for Android 12+)

iOS Configuration

iOS uses Storyboard files for splash screens, which offers flexibility in layout and automatic handling of different device sizes.

Install Dependencies

After installing react-native-bootsplash, install iOS pods:

cd ios && pod install

Generate Assets

Use the CLI tool to generate iOS-specific assets:

npx react-native-bootsplash generate \
  --assets-path=assets/splash \
  --background-color="#FFFFFF" \
  --logo-width=100 \
  --flavor=main \
  path/to/your/logo.png

This creates the necessary image assets and Storyboard files.

Configure Xcode Project

Open iOS project in Xcode (ios/YourProject.xcworkspace)
Set Launch Screen File in project settings:
- Select your project in the Project Navigator
- Go to "General" tab > "App Icons and Launch Screen"
- Set "Launch Screen File" to "BootSplash" (created by the generator)

Update Info.plist

Add or update these entries in ios/YourProject/Info.plist:

<key>UILaunchStoryboardName</key>
<string>BootSplash</string>
 
<!-- For dark mode support -->
<key>UIUserInterfaceStyle</key>
<string>Automatic</string>

Configure AppDelegate

Update ios/YourProject/AppDelegate.mm to show the splash screen:

#import "RNBootSplash.h"
 
- (BOOL)application:(UIApplication *)application 
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... existing code ...
  
  // Initialize and show splash screen
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:self.window.rootViewController.view];
  
  return YES;
}

iOS Customization Options

Custom Storyboard Layout

You can customize the generated Storyboard for more complex layouts:

Open BootSplash.storyboard in Xcode
Add additional UI elements (labels, secondary images, etc.)
Use Auto Layout constraints for proper positioning
Test on different device sizes using the preview

Dark Mode Support

To support dark mode with different assets:

Create separate image sets for light and dark appearances
In Xcode, select your image asset
In the Attributes Inspector, change "Appearances" to "Any, Dark"
Add appropriate images for each appearance

iOS Troubleshooting

Issue: Black screen appears instead of splash screen

Solutions:

Ensure UILaunchStoryboardName is correctly set in Info.plist
Verify the Storyboard file is included in the build target
Check that image assets are properly linked
Clean build folder and rebuild: Product > Clean Build Folder

Android Configuration

Android splash screen implementation varies based on the Android version, with Android 12+ introducing a new SplashScreen API.

Generate Assets

Run the asset generator for Android:

npx react-native-bootsplash generate \
  --assets-path=assets/splash \
  --background-color="#FFFFFF" \
  --logo-width=100 \
  --flavor=main \
  path/to/your/logo.png

Update MainActivity

Modify android/app/src/main/java/.../MainActivity.java:

import com.zoontek.rnbootsplash.RNBootSplash;
import android.os.Bundle;
 
public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this); // Initialize splash screen
    super.onCreate(null); // Pass null to fix white flash
  }
}

Configure styles.xml

Update android/app/src/main/res/values/styles.xml:

<resources>
  <!-- Base application theme -->
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Your app theme customizations -->
  </style>
  
  <!-- BootSplash theme -->
  <style name="BootTheme" parent="Theme.BootSplash">
    <item name="bootSplashBackground">@color/bootsplash_background</item>
    <item name="bootSplashLogo">@drawable/bootsplash_logo</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>
</resources>

Update AndroidManifest.xml

Apply the BootTheme to MainActivity:

<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
  android:launchMode="singleTask"
  android:windowSoftInputMode="adjustResize"
  android:exported="true"
  android:theme="@style/BootTheme">
  <!-- ... intent filters ... -->
</activity>

Android 12+ Specific Configuration

Android 12 introduced a new SplashScreen API with specific requirements:

Android 12 Requirements

Splash screens are mandatory on Android 12+
The system enforces specific design constraints
Custom animations are limited compared to earlier versions

Additional Configuration for Android 12+

Update styles.xml for Android 12+ (create values-v31/styles.xml):

<resources>
  <style name="BootTheme" parent="Theme.BootSplash">
    <item name="android:windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="android:windowSplashScreenAnimatedIcon">@drawable/bootsplash_logo</item>
    <item name="android:windowSplashScreenAnimationDuration">200</item>
    <item name="postBootSplashTheme">@style/AppTheme</item>
  </style>
</resources>

Handle the splash screen duration:

// In MainActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
  // Keep splash screen visible while app loads
  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    getSplashScreen().setKeepOnScreenCondition(() -> true);
  }
  
  RNBootSplash.init(this);
  super.onCreate(null);
}

Dark Mode Support for Android

To support dark mode on Android:

Create dark mode colors (values-night/colors.xml):
<resources> <color name="bootsplash_background">#121212</color> </resources>
Provide dark mode drawable if needed:
- Place dark mode logo in drawable-night-*dpi folders
- Or use vector drawables with theme colors