Videos
» npm install react-native-ico-logo
» npm install react-native-ico-technology-logos
iOS Icons
- Set
AppIconinImages.xcassets. - Add 9 different size icons:
29pt29pt*229pt*340pt*240pt*357pt57pt*260pt*260pt*3.
Images.xcassets will look like this:
Android Icons
- Put
ic_launcher.pngin folders[ProjectDirectory]/android/app/src/main/res/mipmap-*/.- 72*72
ic_launcher.pnginmipmap-hdpi. - 48*48
ic_launcher.pnginmipmap-mdpi. - 96*96
ic_launcher.pnginmipmap-xhdpi. - 144*144
ic_launcher.pnginmipmap-xxhdpi. - 192*192
ic_launcher.pnginmipmap-xxxhdpi.
- 72*72
Update 2019 Android
The latest versions of react native also supports round icon. For this particular case, you have two choices:
A. Add round icons:
In each mipmap folder, add additionally to the ic_launcher.png file also a round version called ic_launcher_round.png with the same size.
B. Remove round icons:
Inside yourProjectFolder/android/app/src/main/AndroidManifest.xml remove the line android:roundIcon="@mipmap/ic_launcher_round"and save it.
Otherwhise the build throws an error.
I wrote a generator to automatically generate icons for your react native app from a single icon file. It generates your assets and it also adds them correctly to your ios and android project:
Update (04/09/2019)
We revamped our generator to be up to date with the ecosystem standards. You can now use @bam.tech/react-native-make.
You can install it using: yarn add @bam.tech/react-native-make in the react-native project
To use it react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>
And... that's it! Hope it can be useful for others :)
Recommendations:
- 1024x1024 base image
- No transparent background for iOS
- An icon which follows adaptive icons guidelines for Android
Here are some improvements over the previous tool:
- No Yeoman dependency, it is now a react-native-cli plugin
- No Image Magick dependency
- Creates Adaptive icons for Android
- Adds missing icons sizes for iOS