This video is available to students only

Icons and Badges

Set the app's launch screen and icons. Learn what image to put in native and what to bundle with React Native. Set the tab bar icons.

Icons and badges#

App icon#

The app icons need to be set in the native layer. There are default locations for uploading images of specific format and sizes. As these are set natively, they cannot be updated through codepush, i.e. via React Native.

Let's see how to set these on the respective platforms.

iOS#

Set as many icon images as possible for better results. If not looking to support the app on iPad, there's no need to add those icons.

For iOS, add images with square corners (NOT rounded); iOS will crop what is required. Otherwise we will get blacked-out corners while launching and closing the app.

To manually upload the app icons, put all of the icons inside <appName>/Images.xcassets/AppIcon.appiconset/ folder and update the references in the Contents.json file at the same location.

Android#

Again, set as many icon images as you can for best results, as the device range is quite wide and they support many different resolutions, especially on Android. If you are not looking to support the app on tablets, there's no need to add those icons.

Upload one large image (at least 512 x 512), and the wizard will automatically create the required sizes.

Alternately, manually upload the respective sizes to the folders at ./android/app/src/main/res/mipmap-*.

Android Sizes

The official guidelines for icons can be found here.

Launch Screen#

iOS#

Start a new discussion. All notification go to the author.