Different app versions on iOS and Android - React Native (CRNA) with Expo

Question

Is it possible to have two different app versions (one for iOS and one for Android) within the same codebase in a React Native (CRNA) app using Expo?

There is obviously only 1 app.json as follows:

{
  "expo": {
    "name": "MyApp",
    "icon": "./assets/images/appstore-icon.png",
    "description": "This is a sample",
    "slug": "test",
    "privacy": "unlisted",
    "sdkVersion": "19.0.0",
    "version": "1.0.10",
    ......... etc
  }
}

Is there a way to add platform-specific versioning?

Answer 1

sdkVersion is SDK version of Expo not your apps. version is your app version, use whatever versioning scheme that you like

If you want to versioning separately for Android/iOS app set right inside app.json like:

{
   "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "slug": "your-app-slug",
    "version": "1.2.0",
    "sdkVersion": "21.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "3.2.1"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": "1.2.3"
    }
  }
}

To keep track of versioning, you can update the binary’s versionCode and buildNumber. It is a good idea to glance through the app.json documentation to get an idea of all the properties you can change, e.g. the icons, deep linking url scheme, handset/tablet support, and a lot more.

See: https://docs.expo.io/versions/latest/guides/building-standalone-apps.html#7-update-your-app

Answer 2

Unfortunately there is no direct way of doing what you ask.

Using Platform

You can define custom code for each application using the Platform react native API, which docs can be found on the RN docs. Using this API you can check the current platform and define code for each.

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({  height: (Platform.OS === 'ios') ? 200 : 100, });

or you can also define some code for each platform using platform.select

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },

Using Specific file extensions

You can name each js file using filename.ios.js or filename.android.js and they will be called in each platform automatically.

Using Environments

Besides of platform in many cases I like to define an Environment module which allows me to swap some values depending on what environment I've selected. For example:

- environment
   /environment.js
   /state.js

In environment.js I save the available state keys and the currently selected environment:

environment.js

export const environments = {
  pre: "PRE_ENV",
  prod: "PROD_ENV",
};

export const currentEnvironment =  environments.pre;

Then in the state.js I like to store some helpers to check which environment I'm in:

state.js

import { currentEnvironment, environments } from "./environment";

export const isProductionEnvironment = () => {
  return environments.prod === currentEnvironment;
};

export const isPreEnvironment = () => {
  return environments.pre === currentEnvironment;
};

Now you can make some environment-dependent code in new files, like:

greeting.js

import { environments, currentEnvironment } from "./environment";

export const selectGreeting = () => {
  switch(currentEnvironment) {
    case environments.pre:
      return "Welcome to the pre environment";

    case environments.prod:
      return "Welcome to the prod environment";

    default:
      return "Unsupported Environment";
  }
};

To manage your app.js there is no beautiful solution, you store some default app.js to some environment and copy paste it or you can use: https://github.com/oliverbenns/expo-deploy

It is a little library written in bash which helps you deploy to multiple slugs.

Hope it helps!