How to Use Global Variables in React Native

Shiv Yadav Feb 02, 2024

React Native

In this article, we will look into the global variables and how to initialize them and use them in React Native.

React Native has two different variables by default: local and global. While global variables can be used anywhere, in any activity, and are changed from anywhere, local variables are only utilized inside a set range.

Global scope variables, which may be utilized across many activities, are supported by React Native. Therefore, in this tutorial, we’ll create global scope variables in React Native and use them across many activities.

Use Global Variables in React Native

We must utilize the built-in term global to construct global variables. For further information, see the code below.

Syntax:

global.myvar = 'Welcome to Upwork';

If we have a local variable called myvar, it is only available from the same class. And if we have global.myvar, it becomes global and accessible from any application class.

The following example will help you comprehend it. A global.MyVar variable, accessed from both the first and second screens, was initialized on the first screen.

First, import the react-navigation library into your project to create an activity structure since we cannot utilize many activities in our project without it.

npm install --save react-navigation

Now with any code editor, open App.js and replace the code with the following.

Example Code (App.js):

import 'react-native-gesture-handler';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='FirstPage'>
        <Stack.Screen
  name = 'FirstPage'
          component={FirstPage}
          options={
    {
      title: 'First Page', headerStyle: {
        backgroundColor: '#f4511e',
      },
          headerTintColor: '#fff', headerTitleStyle: {
            fontWeight: 'bold',
          },
    }}
        />
        <Stack.Screen
          name="SecondPage"
          component={SecondPage}
          options={{
            title: "Second Page",
            headerStyle: {
              backgroundColor: "#f4511e",
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "bold",
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Navigator used here lets you create components and helps navigate different components. It helps to navigate between the screens, like we have one element of the screen called First Page, which have its properties like title, color, header style, font, font weight, etc.

Likewise, screen second is called Second Page, with properties like title, color, header style, font, font weight, etc.

Replace the code in FirstPage.js with the following code in any code editor.

import React from 'react';
import {Button, SafeAreaView, Text, View} from 'react-native';

const FirstPage = ({navigation}) => {
  global.MyVar = 'Welcome To Upwork';

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, padding: 16 }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}
          >
            Here is the First Page of the App
          </Text>
          <Text
            style={{
              fontSize: 18,
              textAlign: "center",
              marginBottom: 16,
              color: "red",
            }}
          >
            Value of Global Variable is: {global.MyVar}
          </Text>
          <Button
            onPress={() => navigation.navigate('SecondPage')}
            title='Go to Second Page.'
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default FirstPage;

A global variable is declared by using the keyword global. After using the global keyword, we have to make its variables store the global value.

As you can see, the MyVar variable is declared globally, which stores the value Welcome To Upwork. We only have to initialize it once.

Now we can use that variable on different pages when required.

In any code editor, open SecondPage.js and replace the code with the following.

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';

const SecondPage = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, padding: 16 }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}
          >
            Here is the Second Page of the App
          </Text>
          <Text
            style={{
              fontSize: 18,
              textAlign: "center",
              marginBottom: 16,
              color: "red",
            }}
          >
            Value of Global Variable is: {global.MyVar}
          </Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default SecondPage;

Output:

global variable declaration - output 1

In the screenshot, you can see the value of the variable and the button with the name GO TO SECOND PAGE. It renders the first page to the second page with the help of a navigator.

global variable declaration - output 2

Here in the screenshot, you can see the global variable is also used.

Author: Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

Use Global Variables in React Native

Related Article - React Native