Splash image

2019-06-10

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

outline

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

//android
react-native run-android

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

error

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.

<bitmap
    android:src="@drawable/launch_screen"
    android:gravity="fill_horizontal|fill_vertical"/>

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.

reference

Buy me a coffeeBuy me a coffee
Posts