Skip to content

Latest commit

 

History

History
97 lines (65 loc) · 2.92 KB

README.md

File metadata and controls

97 lines (65 loc) · 2.92 KB

Assets setup

Requirements

  • You need node >= 6 installed (using NVM is recommended)
  • Install the generator npm install -g yo generator-rn-toolbox
  • You need imagemagick installed to use this generator.

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! 🎈 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).

iOS

Run:

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

You're all set! 💃

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

You're done! 💃

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

Generate Store assets

You'll need to specify:

  • an icon with a size of more than 512x512 px (psd is supported).
  • a splash screen image for the play store image with a size of more than 1024x500 px (psd is supported).
yo rn-toolbox:assets --icon icon.png --splash splash.psd --store

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

  • itunes-icon.png
  • play-store-icon.png
  • play-store-image.png

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

  • Getting Error: Command failed: Invalid Parameter - -resize on Windows

Reinstalling ImageMagick with the legacy tools should do the trick:

image