How to Get App Version in React Native?

Jul 28, 2022 . Admin

This article will provide some of the most important example how to get app version in react native. step by step explain how to get react app version. I would like to show you react native app version number. In this article, we will implement a react native get app version number.

Here, in this example, i will get expo app version from app.json file. i will import configuration file from app.json. so let's see below example.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: Install and Setup

First of all you have to install react-native-countdown-component package and moment package.

npm install react-native-countdown-component

npm install moment --save

Step 3: App.js

In this step, You will open the App.js file and put the code.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { expo } from './app.json';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Your App Version is {expo.version}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Step 4: app.json

In this step, You will open the app.json file and put the code.

{
  "expo": {
    "name": "firstApp",
    "slug": "firstApp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Step 5: Run Project

In the last step run your project using the below command.