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. You can read about Local Variables from Here. React Native did support Global Scope Variables which can be used between multiple activities. So in this tutorial we would going to Create Global Scope Variables in React Native used it between multiple Activities.
Syntax of declaring Global Variable (Prototype): We have to use inbuilt keyword global to create global variables. See the below code for more details.
|
1
2
3
4
5
6
7
8
|
constructor(){
super();
// Creating Global Variable.
global.SampleVar = ‘This is Global Variable.’;
}
|
What we are doing in this project:
We are creating react native app with 2 activities. Now we would declare the Global Variable in first MainActivity inside the constructor(). Now we would use this variable in second activity and show it inside Text component.
Contents in this project Create Global Scope Variables in React Native Android iOS App:
1. Import react-navigation library in your project to add activity structure because we cannot use multiple activities in our project without adding react navigation library. Open your project’s folder in CMD and execute
npm install —save react–navigation command.
2. Import StyleSheet, View, Text and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Button } from ‘react-native’;
|
3. Import StackNavigator module from react navigation library.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
4. Create first class in your App.js file named as MainActivity. We would declare the Global Variable inside this class in constructor() function.
constructor() : We would create Global variable in constructor().
navigationOptions : Used to set Title of activity shows inside action title bar.
navigate2SecondActivity() : This function would navigate us to second activity.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
class MainActivity extends Component {
constructor(){
super();
// Creating Global Variable.
global.SampleVar = ‘This is Global Variable.’;
}
static navigationOptions =
{
title: ‘MainActivity’,
};
navigate2SecondActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.MainContainer }>
<View style={{marginBottom: 15}}>
<Text style = { styles.textStyle }> MainActivity </Text>
</View>
<Button onPress = { this.navigate2SecondActivity } title = ‘Open Second Activity’/>
</View>
);
}
}
|
5. Create another class named as SecondActivity. This is our next activity class, We would simply show the Global Variable in Text component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class SecondActivity extends Component
{
static navigationOptions =
{
title: ‘SecondActivity’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.textStyle }> {global.SampleVar} </Text>
</View>
);
}
}
|
6. Create StackNavigator() function after class. This function is inbuilt and we have to use this function to call activities.
|
1
2
3
4
5
6
|
export default MyNewProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
|
7. Create Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
textStyle:
{
fontSize: 22,
textAlign: ‘center’,
color: ‘#000’,
},
});
|
8. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, Button } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class MainActivity extends Component {
constructor(){
super();
global.SampleVar = ‘This is Global Variable.’;
}
static navigationOptions =
{
title: ‘MainActivity’,
};
navigate2SecondActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.MainContainer }>
<View style={{marginBottom: 15}}>
<Text style = { styles.textStyle }> MainActivity </Text>
</View>
<Button onPress = { this.navigate2SecondActivity } title = ‘Open Second Activity’/>
</View>
);
}
}
class SecondActivity extends Component
{
static navigationOptions =
{
title: ‘SecondActivity’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.textStyle }> {global.SampleVar} </Text>
</View>
);
}
}
export default MyNewProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
textStyle:
{
fontSize: 22,
textAlign: ‘center’,
color: ‘#000’,
},
});
|
Screenshots in Android device:
Screenshots in iOS device:
Also Read :
React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial
React Native Common DatePicker for Android and iOS Example Tutorial
Generate signed release android APK run without server React Native
How to Use State Inside React Native App Full Explained Example Tutorial
React Native Shake Android Emulator Open Developer Menu in Windows MAC
