Icons and Semantic versioning for React-Native app

Part ɪ: Creating new React-Native app│Story 04: Adding app icons and setting Semantic versioning for app releases

In the previous few post of this part of the series, we initialized a new React-native app, renamed its BundleID/Package name and got a Gitlab project created for the app’s code repository.

Now we’ll start preparing the app to publish to the app stores.

In order to publish our app on Apple or Google play stores, the stores require app publishers to provide icons of different sizes for every device they support. (see App Icons guidelines for Apple store and Google Play store)

In this post we will add icons to our app for the two platforms. Along with we would also set semantic versioning for the app’s releases.

Adding app icons

When we created the project using react-native CLI’s init command, react-native set up a default icon like below for android and no icon for iOS 👇

(click over images to zoom)

If we want to have custom icons for our app, we can use this npm tool — @bam.tech/react-native-make as explained here.

To use this tool, we first need to have 1024x1024 base image.

Android Asset Studio

I find Android Asset Studio simple & easy way to create an icon for the app 👇

(click over image to zoom)

Once the icon files are downloaded, you would find the biggest size icon it created is 512 x 512. However our npm tool recommends to have 1024x1024 base image size for the icon.

To resize the image, I used ResizeAppIcon. Upload the 512 x 512 icon image we downloaded above from Android Asset Studio, select the ‘1024 x 1024 pixel’ as resize option and download 👇

Save the downloaded 1024x1024 size icon file in the project’s root folder and rename it if you want to give it some meaningful name. (I named it as app1024Icon.png)

Now that we have a base image of 1024 x 1024 pixel size for our app icons, we can use the @bam.tech/react-native-make tool to generate the icons for iOS and android.

Add the above package to our app:

yarn add @bam.tech/react-native-make

and then run the below command:

react-native set-icon --path app1024Icon.png

(I downloaded the 1024x1024 pixel size image for the app icon in the project’s root folder. If you saved it to some other folder, you have to specify the path accordingly in the above command.)

With above command, the icons should get generated and updated for both iOS and android. Check them in xCode and Android Studio 👇

⚡Note, the tool may not be able to update the launcher round images required for android, you have to add those manually from the icons set we downloaded above from Android Asset Studio 👇

Great, we are done with icons.
Now let’s move on to setting up Semantic versioning for our app releases.

Semantic versioning for app releases

When we create the project using react-native CLI’s init command, by default, it set the app version as 1.0 for Android and iOS versions 👇

(click over images to zoom)

whereas, for the npm package’s versioning, it has version 0.0.1 👇

We wish to version our Android and iOS apps also to be versioned in semantic format like in package.json (0.0.1 format) It will be nice if the version from package.json can be used for Android and iOS.

For this, we can use npm package react-native-version to set the version numbers for our app builds.

Install react-native-version:

yarn add react-native-version --dev

Next, add a postscript to our scripts in the package.json as below:

...
...
"scripts": {
  "android": "react-native run-android",
  "ios": "react-native run-ios",
  "start": "react-native start",
  "test": "jest",
  "lint": "eslint .",
  "postversion": "react-native-version"
},
...
...

Now, whenever we want to publish a new build of the app, all we have to do is to run the command yarn version.The command will ask you to enter the new version number and then react-native-version will then update the android/ and ios/ code to automatically bump the commit version and update the Git tag created by yarn version.

⚡Note that yarn version will auto commit and push changes to repository to the remote branch. Therefore make sure your changes are ready to commit before you run this command 👇

(click over image to zoom)

Perfect, we are closing towards making the app ready for release, with the app icons added and semantic versioning in place for the app releases, one last optional thing we would do before heading over to app’s first release set up is to add Typescript to our app development stack.

In the next post, we would add and configure dependencies to our React-Native project to allow us to code our app in Typescript.
This is optional, if you are not looking for Typescript setup, you can skip it to jump to Part-II to read the steps for manually releasing the app to Google Play store.
And in case you already have a manual release created for the app on Google Play console, check out Part-III to automate the app’s bundling and release using Gitlab CI-CD pipeline and Gradle Play Publisher(GPP).

←Prev: Gitlab repository ┈ 🏠 ┈ Next: Add Typescript→