This tutorial is the second part of Add New Activity in React Native Application tutorial. In this tutorial we would going to create an react native application with 2 different activities, First one is MainActivity and Second is SecondActivity. Now we would add a button in our MainActivity and on button onPress – onClick event we would call a function that will navigate us to SecondActivity.
Contents in this project Open Navigate to Another Activity on Button Click in React Native App :
1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
2. Read our Previous tutorial to Add New Activity in Existing React Native Project.
3. Import react-navigation library in your project using using NPM server. So open your project’s folder in Command Prompt / Terminal and Type below command to install react-navigation library.
|
1
|
npm install —save react–navigation
|
Screenshot of Command Prompt after installing the library :
4. Now open your project’s index.ios.js or index.android.js file and Import AppRegistry, StyleSheet, Text, View and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, View, Button } from ‘react-native’;
|
5. Import StackNavigator module from react-navigation library in your project.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
6. Create a new class named as MainActivity.
static navigationOptions : Used to set the Activity screen title shown inside the Title bar.
FunctionToOpenSecondActivity : This function allow us to navigate to the 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
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
FunctionToOpenSecondActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.MainContainer }>
<View style={{marginBottom: 20}}>
<Text style = { styles.TextStyle }> This is MainActivity </Text>
</View>
<Button onPress = { this.FunctionToOpenSecondActivity } title = ‘Click Here To Open Second Activity’/>
</View>
);
}
}
|
7. Create another class named as SecondActivity .
|
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 }> This is SecondActivity </Text>
</View>
);
}
}
|
8. Add StackNavigator method with your Application project name to call the activities like i did in below code. For example my project name is Project. This step is very important.
|
1
2
3
4
5
6
|
export default Project = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
|
9. Add all below CSS classes.
|
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: 23,
textAlign: ‘center’,
color: ‘#000’,
},
});
|
10. 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
|
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’,
};
FunctionToOpenSecondActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render()
{
return(
<View style = { styles.MainContainer }>
<View style={{marginBottom: 20}}>
<Text style = { styles.TextStyle }> This is MainActivity </Text>
</View>
<Button onPress = { this.FunctionToOpenSecondActivity } title = ‘Click Here To Open Second Activity’/>
</View>
);
}
}
class SecondActivity extends Component
{
static navigationOptions =
{
title: ‘SecondActivity’,
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.TextStyle }> This is SecondActivity </Text>
</View>
);
}
}
export default Project = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: ‘center’,
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: ‘center’,
color: ‘#000’,
},
});
|
Screenshot in Android Mobile Phone application :
Screenshot in iOS iPhone mobile application :
Also Read :
No Component Found for View with name ARTShape React Native iOS Error
React Native Start Stop Device Vibration on Button Click Android iOS
React Native Create Drop Shadow Effect Text in Android iOS Example
React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial
React Native Set Alpha Opacity of View Image Background Android iOS
