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 |
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 :-
hi admin,
it worked when i did like this :-
const FirstProject = StackNavigator(
{
First: { screen: LoginActivity },
Second: { screen: ProfileActivity},
});
export default () => ;
I have a query :-
if i have to use external js file to include in this i.e my LoginActivity and ProfileActivity classes are different js files. then how can i use stack navigator with that.
Hitesh read my this tutorial : https://reactnativecode.com/load-call-external-local-js-file/ this would surely help you.
Awesome Blog with very neat and wonderful explanation. Thank you so much
Welcome Anand 🙂 .
Hi Sir,
This is mind blowing tuts am following your tuts buts am struggling to install react (Stack Navigation and guest-handler node_module ) means am not figuring out it well
How to make listview after user login and bring on the user login session???
Cannot redefine property: ThemeProvider ,
‘ActivityProject’ is not defined. (no-undef)
Rifadh read my this tutorial : https://reactnativecode.com/getting-started-with-react-navigation/ .
Your React native code base is super.
can you please share github link where all code is pubished.
while running the code, somewhere I am missing node modules. so package.json is required.
Adtiya sorry I have not uploaded any code on GitHub, You can tell me which node modules is missing and I’ll tell you the way to install it.