generator-rn-toolboxを使ってReact Nativeアプリのアイコンやスプラッシュスクリーンを簡単に変更しましょう的なお話

Expoを使わない素のReact Nativeでアプリを開発していると避けては通れないXcodeやAndroid Studio。
面倒なのがネイティブ部分のローカライズやアイコンなどのアセット類の管理。
特にアイコンなどのアセット類に関しては入れる画像の数が大量だったりサイズいっぱい用意しないとで面倒だったりするわけで。

ということで今日はそれを簡単に行うためのツールの紹介をば。

bamlab/generator-rn-toolbox
このgenerator-rn-toolboxというのを使えばCLIのみでアイコンアセットを変更できたりするので超便利。
とりあえずこんな感じで使えばよい。

# install
$ brew install imagemagick
$ npm install -g yo generator-rn-toolbox

# app icon
$ yo rn-toolbox:assets --icon assets/images/icon.png

# splash image
$ yo rn-toolbox:assets --splash assets/images/splash.psd --ios
$ yo rn-toolbox:assets --splash assets/images/splash.psd --android

ちなみに実行するディレクトリはReact Nativeディレクトリのルート。
同階層にiosとかandroidのディレクトリがある場所。

例えばiosだと画像も全部作ってくれるし、plistも上書きしてくれるからパパッとなる。
もちろんSplashImageも同じだけど、スプラッシュの場合は2208x2208pxでpsdの必要がある。
Androidだとiconがまだroundedに対応していないのがちょっと難点。
プルリクが出てるけどまだマージされていなく。
Roundedをいれたいならばこのプルリクに該当するコミットを取得しちゃって行うのがいいかもしれない。
$ sudo npm install -g "git://github.com/bamlab/generator-rn-toolbox.git#d10da2de"

ちなみにBitriseに仕込むことももちろんできるわけで。
imagemagickはすでに入っているからインストールする必要はないので、下記のスクリプトをビルドする前のどこかで仕込んであげればよい。

npm install -g yo generator-rn-toolbox
npm install -g "git://github.com/bamlab/generator-rn-toolbox.git#d10da2de"
yo rn-toolbox:assets --icon assets/images/icon.png --ios --projectName ProjectName --force

ってな感じでやってあげれば自動的にアイコンセットやらスプラッシュイメージセットやらを作ってくれるっていう。
ちなみにAppIconsとかLaunchImagesを読み込むよという指定だけは先にしておく必要があるので注意。
BitriseでCLI上で組み込めるのがとても大きく、環境ごとにアイコンの出し分けとかもできるからすごく楽だよね的なみたいな。