Versioning React Native apps address: https://medium.com/@andr3wjack/ Versioning - React - Native apps-407469707661Copy the code

React Naitve integrates JavaScript, Android, and iOS. Along came three different build tools: NPM, Xcode, and Gradle. What happens when we release the App and increase the version number? We have to update package.json, build.gradle, and info.plist.

Update the version number with a command?

It would be nice if we could just run the following command:

npm version [major|minor|patch]
Copy the code

Give it a try

As an Android developer, I know Gradle can do a lot of things, so I started with Android.

In the build.gradle file I need to read the package.json file, which is very easy to do in Gradle.

import groovy.json.JsonSlurper
def getNpmVersion() {
    def inputFile = new File(".. /package.json")
    def packageJson = new JsonSlurper().parseText(inputFile.text)
    return packageJson["version"]}Copy the code

I can then break it up into separate strings that I can use in my build script.

def (major, minor, patch) = getNpmVersion().tokenize('. ')
Copy the code

How you calculate versioncode and versionName using the package.json version is up to you. You can see a complete example on Github.

android/build.gradle

def getNpmVersionArray() { // major [0], minor [1], patch [2]
    def (major, minor, patch) = getNpmVersion().tokenize('. ')
    return [Integer.parseInt(major), Integer.parseInt(minor), Integer.parseInt(patch)] as int[]
}
subprojects {
    ext {
        def npmVersion = getNpmVersionArray()
        versionMajor = npmVersion[0]
        versionMinor = npmVersion[1]
        versionPatch = npmVersion[2]}}Copy the code

android/app/build.gradle

android {
    ...

    defaultConfig {
        ...
        versionCode versionMajor * 10000 + versionMinor * 100 + versionPatch
        versionName "${versionMajor}.${versionMinor}.${versionPatch}"}}Copy the code

iOS

Xcode doesn’t have Gradle’s convenience, so I’m going to use bash instead.

#! /usr/bin/env bash -e

PROJECT_DIR="ios/ReactNativeApp"
INFOPLIST_FILE="Info.plist"
INFOPLIST_DIR="${PROJECT_DIR}/${INFOPLIST_FILE}"

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

BUILD_NUMBER=$(/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "${INFOPLIST_DIR}")
BUILD_NUMBER=$(($BUILD_NUMBER + 1))


# Update plist with new values
/usr/libexec/PlistBuddy -c "Set :CFBundleShortVersionString ${PACKAGE_VERSION#*v}" "${INFOPLIST_DIR}"
/usr/libexec/PlistBuddy -c "Set :CFBundleVersion $BUILD_NUMBER" "${INFOPLIST_DIR}"
Copy the code

The script reads the version information in package.json, increases the version number, and then updates info.plist with PlistBuddy.

Put together

By default, NPM version updates the version number, and if it is in a Git repository, a new version commit is created and labeled. Meanwhile, NPM Version provides three mount points for performing user-defined operations: PerVersion, Version, and PostVersion.

To execute the version-ios.sh script when adding a version, add the following:

{
    "scripts": {
    "version": "./version-ios.sh"
}
Copy the code

successful

With it, we can now increase the version, and no need to update three times, only perform NPM version [major | minor | patch].

We can do a lot more with NPM version hooks! We can update Changelog.md, create a publishing branch, and then push the branch and the label to the remote.

Source: github.com/AndrewJack/…