Get and Display the Version of Our Application in React Native

Reading time: 2 minutes

Good afternoon everyone,

In today’s tutorial, I will show you how to retrieve the version of our app and display it wherever we want in our React Native application.

Here’s how:

import React from "react";
import { View, TouchableOpacity} from "react-native";

import SurfaceText from '../componentes/SurfaceText';

const Ajustes = ({ navigation }) => {

    const pkg = require('../app.json');
    const appVersion = pkg.expo.version;

    return (
        <View>
            <TouchableOpacity>
                <SurfaceText texto={t('textoVersion') + " " + appVersion} navigationPass={navigation} />
            </TouchableOpacity>
        </View>
    )
};

We create the constant pkg (you can choose any name you want) where we store the path to our package file (package.json), which is where our app version is stored. We need to update it each time we make changes and update the app.

Then, I have created a constant called appVersion which will display the version obtained from package.json.

It’s pretty straightforward, but there it is.

NOTE:

The TouchableOpacity is a component that allows the element to be clickable. If you don’t need any additional functionality, a simple <View> is sufficient. I added a custom component because it’s what we wanted to do, but if you simply print the variable, you will get the result.

DevCodeLight