Activities also knows as screens is used to add multiple individual pages( Screens ) in react native android and iOS applications. Activity is the only way to show another screen with its own individual component sets on it without interrupting the other activity. So in this tutorial we would going to add new activity in our react native application using StackNavigator. StackNavigator is the module of react navigation library. So let’s get started .
NOTE : This is the older version of React Navigation, In new version all the components is changed so read our New React Navigation 3.x tutorial.
Contents in this project Add New Activity in React Native App Using StackNavigator :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Add react-navigation library inside your project :
1 : Open your project using command prompt like i did in below screenshot and type below command inside your react native project folder. For example : My project name is ActivityProject . So first i am going into my ActivityProject project using cd command then inside that project folder i have to type the below command.
|
1
|
npm install —save react–navigation
|
2 : After start installing react navigation library the screen should look like below screenshot :
3 : After done installing react-navigation library the screen should look like below screenshot.
3. Start coding :
1. After successfully installed the react navigation library next step is to start coding, So open your project’s App.js file.
2. Add
AppRegistry ,
StyleSheet ,
Text ,
View ,
Button component in import block.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, Button } from ‘react-native’;
|
3. After adding all above component we should have to add the StackNavigator import from react-navigation block.
|
1
2
3
4
5
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, Button } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
|
4. Create a fresh class named as MainActivity and extend Component to that class. This class should be our first main activity.
|
1
2
3
4
|
class MainActivity extends Component {
}
|
5. Add static navigation options inside that class. Using the static navigation options we can set our activity title name which would show inside the activity above Toolbar / Action bar.
|
1
2
3
4
5
6
7
8
9
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
}
|
6. Create a function named as OpenSecondActivityFunction . This function would allow us the open the second activity on button click.
this.props.navigation.navigate(‘Second’) : The second parameter pass in this function indicates to the second activity.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
OpenSecondActivityFunction = () =>
{
this.props.navigation.navigate(‘Second’);
}
}
|
7. Add render’s return method in this class and add View component as parent and inside the View component add 1 Text component and 1 Button component. We are also calling the OpenSecondActivityFunction on button onPress.
|
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
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
OpenSecondActivityFunction = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.container }>
<Text style = { styles.ActivityNameTextCss }> MainActivity </Text>
<Button onPress = { this.OpenSecondActivityFunction } title = ‘Open Second Activity’/>
</View>
);
}
}
|
8. Now create another class named as SecondActivity just after MainActivity class. This should be our second screen.
|
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.container }>
<Text style = { styles.ActivityNameTextCss }> SecondActivity </Text>
</View>
);
}
}
|
9. Now as you can see in above mentioned code we have calling style sheet named as container and ActivityNameTextCss . So we need to create both css class .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const styles = StyleSheet.create(
{
container:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
ActivityNameTextCss:
{
fontSize: 22,
color: ‘black’,
textAlign: ‘center’,
},
});
|
10. Step 10 is very important because in this step we would navigate the MainActivity and SecondActivity using StackNavigator method. Place this code just after the SecondActivity class.
First object navigate to MainActivity.
Second object navigate to SecondActivity.
|
1
2
3
4
5
6
|
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
|
11. 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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, Button } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
OpenSecondActivityFunction = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.container }>
<Text style = { styles.ActivityNameTextCss }> MainActivity </Text>
<Button onPress = { this.OpenSecondActivityFunction } title = ‘Open Second Activity’/>
</View>
);
}
}
class SecondActivity extends Component
{
static navigationOptions =
{
title: ‘SecondActivity’,
};
render()
{
return(
<View style = { styles.container }>
<Text style = { styles.ActivityNameTextCss }> SecondActivity </Text>
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create(
{
container:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
ActivityNameTextCss:
{
fontSize: 22,
color: ‘black’,
textAlign: ‘center’,
},
});
|
Screenshot in Android device :
Screenshot in iOS device :
Stack Navigator activity calling life cycle :-
Also Read :
React Native Create Custom Countdown Timer for Android iOS Tutorial
React Native Fast Image Cache Package – Android iOS Example
Remote Debugger is in a Background Tab which may cause apps to perform Slowly React Native
Upgrade Current React Native 0.63 Project to Latest Version 0.64 Guide
Add Blinking Animation on Text in React Native Android iOS
