Contents
Deprecated
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.
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.
- design splash image by sketchapp.
- export splash image to png on sketchapp.
- 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
- official site: generator-rn-toolbox
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
