Assets setup

Requirements

On a mac, you can install it with brew:

brew install imagemagick

Generate icons

You’ll need a square image for your icon with a size of more than 192x192 px (psd is supported). Starting with XCode 9, your Apple App Store icon is bundled with the app, so provide an icon with a size of more than 1024x1024 px (psd is supported).

Then run:

yo rn-toolbox:assets --icon icon.png

Answer yes when asked about overwriting.

That’s it! :balloon: Icons have been generated in different sizes and integrated in your project.

Generate splashscreens

You’ll need a square image for your splash with a size of more than 2208x2208 px (psd is supported). The image will be cropped, it should be the logo of the app inside a big square with a 30% margin.

iOS

Run:

yo rn-toolbox:assets --splash splash.psd --ios

You’re all set! :dancer:

IMPORTANT: You will need to uninstall the app from device/emulator first before seeing the changes.

Android

The generator only supports a splash with a plain background color on Android.

Run:

yo rn-toolbox:assets --splash splash.psd --android

In order to set the background color go in YOURPROJECT/android/app/src/main/res/values/colors.xml and put an hexacode instead of the rgb(0,0,0).

You’re done! :dancer:

IMPORTANT: You will need to uninstall the app from device/emulator first before seeing the changes.

Generate Store assets

You’ll need to specify:

yo rn-toolbox:assets --icon icon.png --splash splash.psd --store

This will create 3 files at the root of your project:

Generate Android notification icons

When setting up push notifications on Android (with React Native Push notification for instance), you’ll need a status bar icon.

You’ll need an image for your icon with a size of more than 96x96 px (psd is supported).

yo rn-toolbox:assets --android-notification-icon icon.png

Run the command only for a platform

You can select the platform you want to generate assets for. For instance:

yo rn-toolbox:assets --icon icon.png --android
yo rn-toolbox:assets --splash splash.psd --ios

Hide Splashscreen from JS code

You can use react-native-splash-screen for iOS.

Troubleshooting

Reinstalling ImageMagick with the legacy tools should do the trick:

image