Versioning React Native apps – Medium

  • Using the hooks for npm version we can do even more!
  • Npm version by default will increment the version, commit, and tag that commit with the new version.
  • Finally it stages the Info.plist with the modified package.json.
  • Never miss a story from Andrew Jack , when you sign up for Medium.
  • There you have it, we can now increment our version without the added hassle of updating it three times.

React Native brings together JavaScript, Android and iOS. With that comes three different build tools, npm, Xcode, and Gradle. What happens…

@reactnewsletter: “Versioning React Native Apps“ –

React Native brings together JavaScript, Android and iOS. With that comes three different build tools, npm, Xcode, and Gradle. What happens when we want to release and increment the version? We have to increment the package.json, build.gradle, and info.plist!

Single command versioning?

Wouldn’t it be great if we could just run

Being an Android developer I know that Gradle can do pretty much anything, so I started there.

In my build.gradle file I need to read the package.json file, which turns out is pretty easy in Gradle.

return packageJson[“version”]

I can then split it into individual strings, so I can use it in my build scripts.

iOS

Xcode doesn’t have anything as nearly as good as Gradle, so we’ll have to use bash for this.

PROJECT_DIR=”ios/ReactNativeApp”

INFOPLIST_FILE=”Info.plist”

PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: ‘{ print $2 }’ | sed ‘s/[\”,]//g’ | tr -d ‘[[:space:]]’)

/usr/libexec/PlistBuddy -c “Set :CFBundleShortVersionString ${PACKAGE_VERSION#*v}” “${INFOPLIST_DIR}”

/usr/libexec/PlistBuddy -c “Set :CFBundleVersion $BUILD_NUMBER” “${INFOPLIST_DIR}”

git add “${INFOPLIST_DIR}”

This script reads the package.json version, increments the build number, then updates the Info.plist file using PlistBuddy. Finally it stages the Info.plist with the modified package.json.

Npm version by default will increment the version, commit, and tag that commit with the new version. To hook into this command npm provides three entry points, preversion, version, and postversion.

To execute the version-ios.sh script when we increment the version we can add the following:

“scripts”: {

“version”: “./version-ios.sh”

There you have it, we can now increment our version without the added hassle of updating it three times. Just “npm version [major|minor|patch]”.

Using the hooks for npm version we can do even more! We could update the CHANGELOG.md, create a release branch, and push the branch and tags to remote.

Versioning React Native apps – Medium