DEV Community

Osama Qarem
Osama Qarem

Posted on • Updated on

Automatic Versioning for React Native Apps

Problem

You need to update your app's version to 1.0.0:

1. You open up android/app/build.gradle to update the version and bump the build number.

2. You do the same thing for iOS using Xcode because editing build configuration files directly is more error prone.

3. You need to keep it all consistent, so you open up package.json and update the version so the reference to the version shown to the user from the JS side is correct.



import { version } from "./package.json"

console.log(version)
// 1.0.0


Enter fullscreen mode Exit fullscreen mode

I feel so productive and happy!

Said no developer ever after going through that.

Solution

The ideal experience is to update only a single version number. Here's what we're going to do:

1. Use npm version [patch|minor|major] to handle the JS package version (see semantic versioning).

The JS version is our source of truth. Therefore, the Android and iOS versions should match whatever the package.json version is set to.

2. Use fastlane to handle the Android and iOS sides.

fastlane is an amazing open source tool focused at automating Android and iOS tasks. It has a wide library of community developed plugins that can help us handle things like, versioning.

3. Combine the above 2 steps into a single npm script.

Steps

We will use a fresh React Native project as a starting point:



npx react-native init MyApp


Enter fullscreen mode Exit fullscreen mode

Install fastlane if you do not already have it:



# Install the latest Xcode command line tools
xcode-select --install

# Install fastlane using RubyGems
sudo gem install fastlane -NV

# Alternatively using Homebrew
brew install fastlane


Enter fullscreen mode Exit fullscreen mode

Set up a fastlane directory and create an empty fastfile:



cd MyApp
mkdir fastlane && cd fastlane 
touch Fastfile


Enter fullscreen mode Exit fullscreen mode

We want to be able to run the fastlane command from the root of our React Native project. Therefore we will install our versioning plugins from the root directory:



cd ..

# Install plugins
fastlane add_plugin increment_version_name increment_version_code load_json


Enter fullscreen mode Exit fullscreen mode

Say 'yes' if it asks about creating a gemfile.

The first two plugins are for handling the version, version code on android and the third one is for reading a JSON file (our package.json).

Next, we are going to add our fastlane scripts. Copy the following to the fastfile at fastlane/Fastfile.



  desc 'Android: Increment versionCode and set versionName to package.json version.'
  package = load_json(json_path: "./package.json")

  private_lane :inc_ver_and do
    increment_version_code(
      gradle_file_path: "./android/app/build.gradle",
    )

    increment_version_name(
      gradle_file_path: "./android/app/build.gradle",
      version_name: package['version']
    )
  end


  desc 'iOS: Increment build number and set the version to package.json version.'
  private_lane :inc_ver_ios do
  package = load_json(json_path: "./package.json")

    increment_build_number(
      xcodeproj: './ios/' + package['name'] + '.xcodeproj'
    )
    increment_version_number(
      xcodeproj: './ios/' + package['name'] + '.xcodeproj',
      version_number: package['version']
    )
  end


  desc 'Bump build numbers, and set the version to match the pacakage.json version.'
  lane :bump do
    inc_ver_ios
    inc_ver_and
  end


Enter fullscreen mode Exit fullscreen mode

Next we are going to add the following scripts to our package.json for automatic patch, minor and major version bumps:



{ 
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "bump-patch": "npm version patch --no-git-tag-version && bundle exec fastlane bump",
    "bump-minor": "npm version minor --no-git-tag-version && bundle exec fastlane bump",
    "bump-major": "npm version major --no-git-tag-version && bundle exec fastlane bump",
},


Enter fullscreen mode Exit fullscreen mode

The first part of the command will upate the JS package version without making a commit to the git repo. The second part will execute the fastlane bump command, which will automatically bump the android and iOS build numbers and update the version to match the JS side.



# npm
npm run bump-patch  

# yarn
yarn bump-patch


Enter fullscreen mode Exit fullscreen mode

Version Bump Gif


PS: I'm maintaining a React Native template with a lot of goodies like the one in the article.

Top comments (17)

Collapse
 
fondakogb profile image
federazionekoinonie • Edited

Thank you: this helped me a lot in a project few months ago!

SOLVED ISSUE
I started a new react-native project with updated versions of softwares, and I faced following issue. When I execute:

fastlane add_plugin increment_version_name increment_version_code load_json

I get this error:

Seems like the plugin is not available on RubyGems, what do you want to do?
Looking for related GitHub issues on fastlane/fastlane...
˜/.rbenv/versions/3.0.0/lib/ruby/gems/3.0.0/gems/highline-1.7.10/lib/highline.rb:624:in `encode': \e[31m[!] no implicit conversion of Hash into String\e[0m (TypeError)
     from ˜/.rbenv/versions/3.0.0/lib/ruby/gems/3.0.0/gems/highline-1.7.10/lib/highline.rb:624:in `say'
     . . .
     from ˜/.rbenv/versions/3.0.0/bin/fastlane:23:in '<main>'

Googling a bit I found this: github.com/fastlane/fastlane/issue...
And effectively I have (now, for this project) ruby 3.0, not 2.6.5 anymore (I thinked was something related to upgrated OS from Mojave to Catalina, or to new Node.js...)
So I 'solved' by downgrading ruby to 2.7.2 and now it works like a charm again!

Collapse
 
sendypw profile image
Sendy Putra

Added too auto-changelog

npm install -g auto-changelog
Enter fullscreen mode Exit fullscreen mode

and add to package.json script

"version": "auto-changelog -p"
Enter fullscreen mode Exit fullscreen mode

thats will be automate create changelog after automate versioning

Collapse
 
sardok profile image
sinx

Can't you use package['name'] in Fastline file? What is the reason chosing ENV[APP_NAME] over it?

Collapse
 
osamaqarem profile image
Osama Qarem

Good point! Thanks. I've updated the post!

The reason being is that I copied most of the fastfile for this post from a project I was working on where pacakge['name'] was different from the Xcode project name 😂

Collapse
 
noonyfirstfence profile image
noonyfirstfence

Very good, one issue I noticed as I currently only have Andorid not iOS and because the iOS function runs in Fastlane first it errors and stops the following Android function firing. I've modified it so that both functions run independently so that now if one fails the other still tries. Hope its helpful to anyone else using only one OS.

desc 'Bump build numbers, and set the version to match the pacakage.json version.'
lane :bump do
  begin
    inc_ver_ios
  rescue => error
    puts "Error in inc_ver_ios: #{error.message}"
  end
  begin
    inc_ver_and
  rescue => error
    puts "Error in inc_ver_ios: #{error.message}"
  end
end
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jcoulaud profile image
Julien Coulaud

What a coincidence, that is exactly what I was looking for and you just published it! Thx :)

Collapse
 
osamaqarem profile image
Osama Qarem

Happy it helped!

Collapse
 
victorbruce profile image
Victor Bruce

Thank you very much for this wonderful guide.🙏🏾😊

Collapse
 
billtlee profile image
Bill Lee

This is great! I was using app.json for that. If I use your solution, do I need to remove the buildnumber and versioncode from app.json? Thanks!

Collapse
 
osamaqarem profile image
Osama Qarem

No strict rules here! The solution is customizable! Do what suits your needs and makes more sense to you 👍

Collapse
 
anwargul0x profile image
Anwar Gul

Great Work , If possible please do write on fastlane setup for react native.

Collapse
 
osamaqarem profile image
Osama Qarem

Thank you:)
I do have another guide. I hope you find it useful:
github.com/osamaq/reactnative-fast...

Collapse
 
anwargul0x profile image
Anwar Gul

Really Thank you so much.

Collapse
 
adityaaxa profile image
aditya-axa

This will have issue with xcode 11 as there is new variable need to use github.com/SiarheiFedartsou/fastla...

Collapse
 
sebadiazarg profile image
Sebastian Diaz

Hi @osamaq ! I'll try this, it would be very useful. Thanks!
Do you know if it'll work exactly with Xcode 12? Thanks again.

Collapse
 
osamaqarem profile image
Osama Qarem

It does. I've used it many times while working with Xcode 12.0.1. have fun 👍