Skip to content

Expo setup ​

The Expo config plugin generates native launch resources and inserts the package's show() call into Android MainActivity and iOS AppDelegate.

Minimal configuration ​

Add the plugin to app.json or app.config.js:

json
{
  "expo": {
    "plugins": [
      [
        "react-native-splash-screen-newarch",
        {
          "image": "./assets/splash.png",
          "backgroundColor": "#F1F5F1"
        }
      ]
    ]
  }
}

Generate and build the native projects:

bash
npx expo prebuild
npx expo run:android
# or
npx expo run:ios

Day-to-day prebuilds

Running npx expo prebuild again is normally enough. Use --clean only when you intend to recreate the native directories and have confirmed they contain no manual changes you need to preserve.

Shared options ​

OptionDefaultDescription
imagenullShared image; platform-specific images take precedence
backgroundColor#000000Shared background color
resizeModecontainShared iOS mode: contain or cover
androidtrueSet to false to skip Android, or pass Android options
iostrueSet to false to skip iOS, or pass iOS options

Android system mode ​

Use this for a centered logo on a solid color:

json
{
  "expo": {
    "plugins": [
      [
        "react-native-splash-screen-newarch",
        {
          "android": {
            "mode": "system",
            "image": "./assets/splash-logo.png",
            "backgroundColor": "#F1F5F1"
          },
          "ios": {
            "image": "./assets/splash-logo.png",
            "backgroundColor": "#F1F5F1",
            "imageWidth": 160,
            "imageHeight": 160
          }
        }
      ]
    ]
  }
}

System mode does not create the package's full-screen Android Dialog, so it cannot play custom Android hide transitions or call show() after startup.

Android dialog mode ​

The default mode supports full-screen artwork and custom exits:

json
{
  "android": {
    "mode": "dialog",
    "image": "./assets/splash-full.png",
    "backgroundColor": "#F1F5F1",
    "imageResizeMode": "centerCrop",
    "fullScreen": true
  }
}

Android options ​

OptionDefaultDescription
modedialogdialog or system
fullScreentrueExtend dialog content into display cutout areas
createLayouttrueManage the layout, launch theme, and resources
overwriteLayoutfalseReplace an existing launch_screen.xml
imageShared imagePNG, NinePatch, JPG, WebP, and XML
backgroundColorShared colorLayout and system launch background
imageResizeModecenterCropGenerated ImageView.scaleType
imageWidth / imageHeightnullNumbers become dp; strings are used as written
imageGravitycenterGenerated ImageView.layout_gravity
postSplashScreenThemeCurrent activity themeApp theme restored after launch
systemImagetrue in systemUse the image in Android's constrained icon area
windowIsTranslucentfalseMake the starting window transparent; test task behavior carefully

iOS options ​

OptionDefaultDescription
imageShared imagePNG, JPG, JPEG, and PDF
backgroundColorShared colorGenerates the SplashScreenBackground color asset
resizeModecontaincontain or cover
imageWidth / imageHeightnullPoints; set both for a fixed centered logo
maxWaitTime10Maximum seconds to wait for JavaScript hide()

Verify plugin output ​

First check that Expo resolves the plugin:

bash
npx expo config --type introspect

Then inspect the generated native projects:

  • Android MainActivity contains SplashScreen.show(...).
  • The Android launch activity uses the generated splash theme.
  • iOS AppDelegate contains RNSplashScreen.show().
  • The iOS target includes the generated storyboard and asset catalog entries.

Configuration changes require rebuilding the development client. Expo Go cannot load this native module.

Released under the MIT License.