Updated March 31, 2023
Introduction to Global Variable React Native
The following article provides an outline for Global Variable React Native. There are two kinds of variables in react native, by default. These types of variables are local variable and global variable. For using a variable in a defined scope, a local variable is used, and for using variables all around the code and getting the liberty of changing the values of the variables anywhere in between the code, one has to use global variables. React Native supports global variables, and it gives the liberty to use them while performing multiple activities.
Syntax:
Separately developed variables are stored in the global variable.
module.Store = {
BirdyWorld() {
return 'BirdyWorld';
},
AnimalKingdom() {
return 'AnimalKingdom';
},
VANKKAM() {
return 'VANKKAM'
}
};
if (global) {
global.Store = module.Store;
}Example of Global Variable React Native
For developing any mobile or web application, it’s necessary for the coders to declare global scope variables. Global scope variables are the variables which can be accessed from any part of the code, screen or activity after its first initialization. It also gives the liberty to change the values of the variable from any part of the code. Global variables are used in the same way as local variables; the only difference is there scope is global. While using React Native, one can create global scope variables by just adding a global prefix before the variable.
In the code below, the major components used for the proper execution are:
- BirdyWorld.js
- AnimalKingdom.js
- Welcome.js
- Everywhere.js
- App.js
Below, all navigator elements are developed separately; then, they are stored in the global variable, which is then called to navigate through different pages so developed on clicking the respective buttons. The application below developed is the perfect example to navigate between different windows through a global variable. Firstly, the BirdyWorld window appears on code execution, and when the “WELCOME TO THE BIRDY LAND” button is clicked, it takes to the AnimalKingdom window, and when the “WELCOME TO ANIMAL KINGDOM” button is clicked, it takes to the VANKKAM window. Lastly, when the “TAKE ME TO BIRDY WORLD” button is clicked, it takes back to the BirdyWorld window.
a. BirdyWorld.js
import React
, { Component } from 'react';
import Constants from 'expo-constants';
import { SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
} from 'react-native';
export default class BirdyWorld extends Component {
render() {
return (
<SafeAreaView style={
decoration.docker
}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/1181181/pexels-photo-1181181.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={
{flex: 1}
}
>
<View style={
decoration.dockers
}>
<Text style={
decoration.titleee
}>
{
Store.BirdyWorld()
}</Text>
<Button
color="#3bedbe"
borderRightColor= "#f58c58"
borderLeftColor= "#f50c18"
borderTopColor= "#140ddb"
borderBottomColor= "#ba1658"
title='Welcome to Birdy Land'
onPress={() => {
this.props.navigation.navigate('AnimalKingdom')
}} />
<Image
source={{
uri:
'https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png.webp',
}}
style={{
width: 300,
height: 300,
resizeMode: 'center',
opacity: 0.5,
}}
/>
</View>
</ImageBackground>
</SafeAreaView>
)
}
}
const decoration = StyleSheet.create({
dockers: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
padding: 8,
},
docker: {
flex: 1,
padding: 10,
},
titleee: {
fontSize: 28,
fontWeight: 'bold',
textAlign: 'center',
padding: 10,
color: '#cbf268',
},
});b. AnimalKingdom.js
import React
, { Component } from 'react';
import Constants from 'expo-constants';
import { SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert } from 'react-native';
export default class AnimalKingdom extends Component {
render() {
return (
<SafeAreaView style={decoration.docker}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/87403/cheetah-leopard-animal-big-87403.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={
{flex: 1}
}
>
<View style={
decoration.dockers
}>
<Text style={
decoration.titleee
}>{
Store.AnimalKingdom()
}
</Text>
<Button
color="#fcb058"
borderRightColor= "#f58c58"
borderLeftColor= "#f50c18"
borderTopColor= "#140ddb"
borderBottomColor= "#ba1658"
title='WElcome TO ANIMAL KINGDOM'
onPress={() => {
this.props.navigation.navigate('VANKKAM')
}} />
</View>
<Image
source={{
uri:
'https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png.webp',
}}
style={{
width: 300,
height: 300,
resizeMode: 'center',
opacity: 0.5,
}}
/>
</ImageBackground>
</SafeAreaView>
)
}
}
const decoration = StyleSheet.create({
dockers: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
padding: 8,
},
docker: {
flex: 1,
padding: 10,
},
titleee: {
fontSize: 28,
fontWeight: 'bold',
textAlign: 'center',
padding: 10,
color: '#0d0c0f',
},
});c. Welcome.js
import React
, { Component } from 'react';
import Constants from 'expo-constants';
import { SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert } from 'react-native';
export default class VANKKAM extends Component {
render() {
return (
<SafeAreaView style={
decoration.docker
}>
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/3214944/pexels-photo-3214944.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={
{flex: 1}
}
>
<View style={
decoration.dockers
}>
<Text style={
decoration.titleee
}
>{
Store.VANKKAM()
}</Text>
<Button
color="#ed3469"
borderRightColor= "#f58c58"
borderLeftColor= "#f50c18"
borderTopColor= "#140ddb"
borderBottomColor= "#ba1658"
title='TAKE ME TO BIRDY WORLD'
onPress={() => {
this.props.navigation.navigate('BirdyWorld')
}} />
</View>
<Image
source={{
uri:
'https://cdn.educba.com/academy/wp-content/uploads/2020/05/cropped-website_logo_transparent_background_white.png.webp',
}}
style={{
width: 300,
height: 300,
resizeMode: 'center',
opacity: 0.5,
}}
/>
</ImageBackground>
</SafeAreaView>
)
}
}
const decoration = StyleSheet.create({
dockers: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
padding: 8,
},
docker: {
flex: 1,
padding: 10,
},
titleee: {
fontSize: 28,
fontWeight: 'bold',
textAlign: 'center',
padding: 10,
color: '#e7f754',
},
});d. Everywhere.js
module.Store = {
BirdyWorld() {
return 'BirdyWorld';
},
AnimalKingdom() {
return 'AnimalKingdom';
},
VANKKAM() {
return 'VANKKAM'
}
};
if (global) {
global.Store = module.Store;
}e. App.js
import React from 'react';
import { SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
} from 'react-native';
import VANKKAM from './Welcome';
import AnimalKingdom from './AnimalKingdom';
import BirdyWorld from './BirdyWorld';
import './Everywhere';
import { createStackNavigator
, createAppContainer } from 'react-navigation';
const Application = createStackNavigator({
BirdyWorld: {
screen: BirdyWorld,
navigationOptions: {
title: 'BirdyWorld',
},
},
VANKKAM: {
screen: VANKKAM,
navigationOptions: {
title: 'VANKKAM',
},
},
AnimalKingdom: {
screen: AnimalKingdom,
navigationOptions: {
title: 'AnimalKingdom',
},
},
});
export default createAppContainer(Application);Output:
On code execution:
On clicking the “WELCOME TO THE BIRDY LAND” button:
On clicking the “WELCOME TO ANIMAL KINGDOM” button:
On clicking the “TAKE ME TO BIRDY WORLD” button:
Conclusion
On the basis of the above code, we understood the concept of global variables in reacts native. Furthermore, we understood how a variable can be used globally and how it can help us while coding in react native.
Recommended Articles
This is a guide to Global Variable React Native. Here we discuss the introduction, syntax, and example of global variable react native along with code implementation. You may also have a look at the following articles to learn more –
