Hello guys, As we all know react navigation has recently launched its new version 3.x with some major new upgrades. Old React Navigation components name is changed. So it cannot work with old components if you have the older version of react navigation 1.0 or 2.0 then the old components will but other than if you have install new version 3.x then you should use its newly hybrid components. So in this tutorial we would going to add multiple activities screen in our react native project using react navigation 3.x in android iOS application example tutorial. So let’s get started .
Contents in this project Getting Started With React Navigation 3.x Tutorial to Add Activity in Android iOS React Native project :
1. Open your react native project in Command Prompt or Terminal and execute below command to install the react navigation library in your project.
|
1
|
npm install —save react–navigation
|
Screenshot of CMD :
Screenshot of CMD after successfully executing above command:
2. Now we need to install the react-native-gesture-handler library in our project in order to use it with android and iOS. If you are using EXPO then you can leave this step. To install the react-native-gesture-handler execute the below command in your react native project.
|
1
|
npm install —save react–native–gesture–handler
|
Screenshot of CMD :
Screenshot of CMD after executing above command:
3. Finally we need to execute the
react–native link command in your project so it will re-arranged the complete react native project folder and index the newly installed libraries.
4. No additional steps are required for iOS devices for iOS applications it is ready to go.
5. To configure the react-native-gesture-handler library for react native project we need to add some additional libraries in our MainActivity.java file.
So goto YourProject – > android -> app -> src- >main -> java -> com-> YourProject -> MainActivity.java file. Open MainActivity.java file in edit mode in notepad or any text editor and put below files.
|
1
2
3
|
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
|
You need to also put the return function for ReactActivityDelegate.
|
1
2
3
4
5
6
7
8
9
|
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
|
Complete source code or our MainActivity.java file, It will help you to understand all the modifications:
|
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
|
package com.newproj;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return “newproj”;
}
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
|
6. Now all the changes is been made, Its time to start coding .
7. Open your project’s App.js file and import StyleSheet, Text, View and Button component in your project.
|
1
2
3
|
import React, {Component} from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
|
8. Import the createStackNavigator and createAppContainer component of react navigation in your project. I will explain their usages in next step.
|
1
|
import { createStackNavigator, createAppContainer } from “react-navigation”;
|
9. Create a View class in your project named as HomeScreen, Inside this class we would simply create a View. This would be our Home screen of application.
static navigationOptions : It is used to add some extra data in application activity header title bar.
title : Used to show the activity title name in Action Title bar.
gotoNextActivity : Inside this function we would simply creating the react navigation’s navigate method to navigate 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
|
class HomeScreen extends Component{
static navigationOptions =
{
title: ‘HomeScreen’,
};
gotoNextActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>This is Home Screen Activity.</Text>
<Button onPress = { this.gotoNextActivity } title = ‘Open Second Activity’/>
</View>
);
}
}
|
Screenshot of Home screen :
10. Creating another activity named as SecondScreen in your project. This would be our second screen activity of application.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
class SecondScreen extends Component{
static navigationOptions =
{
title: ‘SecondScreen’,
};
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>This is Second Screen Activity.</Text>
</View>
);
}
}
|
Screenshot of Second Screen:
11. Creating a Constant named as RootStack with createStackNavigator component and pass all the two created classes inside it with unique identifier like Home and Second. Now we will access these classes with the identifiers.
initialRouteName : Is used to define the Home Screen of application, You can define any of your screen here and it will become your home screen.
|
1
2
3
4
5
6
7
8
9
|
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Second: SecondScreen
},
{
initialRouteName: “Home”
}
);
|
12. The final step is to pass the complete RootStack constant holder into createAppContainer component.
|
1
|
export default createAppContainer(RootStack);
|
13. Creating Style:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
backgroundColor : ‘#f5fcff’,
padding: 11
},
text:
{
fontSize: 22,
color: ‘#000’,
textAlign: ‘center’,
marginBottom: 10
},
});
|
14. 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
|
import React, {Component} from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { createStackNavigator, createAppContainer } from “react-navigation”;
class HomeScreen extends Component{
static navigationOptions =
{
title: ‘HomeScreen’,
};
gotoNextActivity = () =>
{
this.props.navigation.navigate(‘Second’);
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>This is Home Screen Activity.</Text>
<Button onPress = { this.gotoNextActivity } title = ‘Open Second Activity’/>
</View>
);
}
}
class SecondScreen extends Component{
static navigationOptions =
{
title: ‘SecondScreen’,
};
render() {
return (
<View style={styles.MainContainer}>
<Text style={styles.text}>This is Second Screen Activity.</Text>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Second: SecondScreen
},
{
initialRouteName: “Home”
}
);
export default createAppContainer(RootStack);
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
backgroundColor : ‘#f5fcff’,
padding: 11
},
text:
{
fontSize: 22,
color: ‘#000’,
textAlign: ‘center’,
marginBottom: 10
},
});
|
Screenshots:
Also Read :
Create File Picker in React Native Android iOS Example Tutorial
React Native Create Beautiful Social Icons Button using React Native Elements Example Tutorial
How to Set Background Image as Full Screen in React Native App
React Native Typing Text Animation iOS Android Example Tutorial
React Native Solve Warning componentwillmount is Deprecated and will be Removed in the Next Major Version
