Splash image

2023-10-16 hit count image

generate and apply splash image by using generator-rn-toolbox


generator-rn-toolbox is Deprecated, so this blog post is not managed any more.If you want to make App icon easily, I recommend to use react-native-make that is a new library of generator-rn-toolbox.

If you want to know more, see the blog below.


we introduce how to generate splash images created by generator-rn-toolbox on mac osx.

libaray installation

if you want to know how to install generator-rn-toolbox library, see previous blog post App icon.

prepare splash image

prepare 2208x2208px size psd file not png, jpg for generating splash images.

export psd from sketchapp

we use sketchapp for design but it is impossible to export psd file from sketchapp. however if you follow below, you can make psd file from sketchapp.

  1. design splash image by sketchapp.
  2. export splash image to png on sketchapp.
  3. search ‘png to psd converter’ on the internet for converting the file.(we use this site)

set splash image

create and set splash image by below code on cmd.

// iOS
yo rn-toolbox:assets --splash [filename.psd] --ios

// Android
yo rn-toolbox:assets --splash [filename.psd] --android

check it out

splash image is created and applied to the project. let’s check splash image is applied by running the project.

// iOS
react-native run-ios

react-native run-android

if splash image is not showing up, remove your app from the simulator or phone and do again.


we got the problem not to show Splash image up full size. so we’ve modified android/app/src/main/res/drawable/launch_screen_bitmap.xml file like below.


Can’t Generate Images

I got the erro below and couldn’t generate the images.

Error: Command failed: identify: FailedToExecuteCommand `'gs'

execute the command below to install ghostscript.

brew install ghostscript

and execute the commands below, you can see that the images are generated.

// iOS
yo rn-toolbox:assets --splash [filename.psd] --ios

// Android
yo rn-toolbox:assets --splash [filename.psd] --android

Control Splash screen

somtimes, we need to control Splash Screen. for example, you want to check login or download the data in showing Splash screen. if you are in this case, see the blog post below to control Splash screen.


Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.