React Native – Global Scope Variables

There are by default two types of variables in react native, Local Variable and Global Variable. Local variables is used within defined scope and Global variables can be use at any place within any activity and can be changeable from any where. React Native did support Global Scope Variables which can be used between multiple activities.

The global scope in React Native is variable global. Such as global.foo = foo, then you can use global.foo anywhere. But do not abuse it! In my opinion, global scope may used to store the global config or something like that. Share variables between different views, as your description, you can choose many other solutions(use redux,flux or store them in a higher component), global scope is not a good choice.

Syntax of declaring Global Variable (Prototype): We have to use inbuilt keyword global to create global variables. See the below code for more details.

constructor(){
    super();
    // Creating Global Variable.
    global.SampleVar = 'This is Global Variable.';
  }

Install react-navigation dependency to import createAppContainer. If you install react-navigation@3.11.1 then createStackNavigator present inside the react-navigation. Otherwise you have to install independently other dependencies.

npm install react-navigation –save

Other supporting libraries for react-navigation
npx npm install react-native-gesture-handler react-native-safe-area-context @react-native-community/masked-view react-native-screens react-native-reanimated –save

CocoaPods Installation
Please use the following command to install CocoaPods

cd ios && pod install && cd ..

Project Structure

To start with this Example you need to create a directory named pages in your project and create two files Screen1.js and Screen2.js.

App.js

import React, { Component } from 'react';

import { createAppContainer,createStackNavigator } from 'react-navigation';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
const App = createStackNavigator({
  Screen1: { screen: Screen1 }, 
  Screen2: { screen: Screen2 }, 
  },
  {
    initialRouteName: 'Screen1',
  }
);
export default createAppContainer(App);

Screen1.js

//This is an example code for Navigation Drawer with Custom Side bar//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, TouchableOpacity, Text } from 'react-native';
// import all basic components

export default class Screen1 extends Component {
  constructor() {
    super();
    //Setting up global variable
    global.MyVar = 'https://blog.codehunger.in';
  }
  render() {
    return (
      <TouchableOpacity style={styles.MainContainer} onPress={()=>this.props.navigation.navigate("Screen2")}>
        <Text style={{ fontSize: 23 }}> Screen 1 </Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});

Screen2.js

//This is an example code for Navigation Drawer with Custom Side bar//
import React, { Component } from 'react';
//import react in our code.
import { StyleSheet, View, Text } from 'react-native';
// import all basic components

export default class Screen2 extends Component {
  //Screen2 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 2  {global.MyVar}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
  },
});