Get in touch

Donate

In the last post we understood how to use react navigation module in a simple way. But, in real world project, we will need to nest one navigator in another.

There are three types of built-in navigators.

StackNavigator

TabNavigator

DrawerNavigator

Basically we need to understand how to nest StackNavigator and TabNavigator in one another. And also how to pass parameters (i.e. props) when we do nesting.

Lets first code the index file. The code for index file will be like this :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

import React,{Component}from'react';

import{

AppRegistry

}from'react-native';

import Login from'./login'

import Home from'./home'

import{StackNavigator}from'react-navigation'

constRouteConfigs={

Login:{screen:Login},

Home:{screen:Home}

}

constStackNavigatorConfig={

headerMode:'none',

}

constInvisionApp=StackNavigator(RouteConfigs,StackNavigatorConfig)

AppRegistry.registerComponent('InvisionApp',()=>InvisionApp);

Here we have used simple StackNavigator with two screens Login and Home. Since, we don’t want header for this particular navigator so we have set headerMode to ‘none’ in StackNavigatorConfig.

Now lets check code for login.js :

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

import React,{Component}from'react';

import{

AppRegistry,

StyleSheet,

Text,

View,

Button

}from'react-native';

exportdefaultclassLoginextendsComponent{

render(){

const{navigate}=this.props.navigation

return(

<View style={styles.container}>

<Text style={styles.welcome}>

Welcome toLogin Screen!

</Text>

<Text style={styles.instructions}>

Press Home button togo toHome screen

</Text>

<Button

onPress={()=>navigate('Home')}

title="Home"

/>

</View>

);

}

}

conststyles=StyleSheet.create({

container:{

flex:1,

justifyContent:'center',

alignItems:'center',

backgroundColor:'#F5FCFF',

},

welcome:{

fontSize:20,

textAlign:'center',

margin:10,

},

instructions:{

textAlign:'center',

color:'#333333',

marginBottom:5,

},

});

And here is code for home.js :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

import React,{Component}from'react';

import{

AppRegistry,

StyleSheet,

Text,

View

}from'react-native';

import{TabNavigator}from"react-navigation";

import Main from'./main'

import Chats from'./chats'

constTabNav=TabNavigator({

Main:{screen:Main},

Chats:{screen:Chats}

})

exportdefaultclassHomeextendsComponent{

render(){

return(

<TabNav screenProps={"The data you want to pass"}/>

)

}

}

Lets understand the above code. In login.js we have Login component with a Button which has been binded to navigate prop, so that, when user clicks the button he is routed to Home screen.

In home.js we have a TabNavigator with two screens, Main screen and Chats screen, following which we have Home component . We are using Home component to render TabNavigator and also to pass props using special ‘screenProps’ property to Main screen and Chats screen. So, ‘screenProps’ allows us to pass data we want to pass to TabNavigator screens.

Now, lets check the code of main.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

import React,{Component}from'react'

import{StackNavigator}from'react-navigation'

import Profile from'./profile'

import Age from'./age'

import Height from'./height'

constRouteConfigs={

Profile:{screen:Profile},

Age:{screen:Age},

Height:{screen:Height}

}

constSomeStack=StackNavigator(RouteConfigs)

exportdefaultclassMainextendsComponent{

render(){

return(

<SomeStack screenProps={this.props.screenProps}/>

)

}

}

here’s the code for chats.js

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

import React,{Component}from'react';

import{

AppRegistry,

StyleSheet,

Text,

View

}from'react-native';

exportdefaultclassChatsextendsComponent{

render(){

return(

<View style={styles.container}>

<Text style={styles.welcome}>

Welcome toChats!

</Text>

</View>

);

}

}

conststyles=StyleSheet.create({

container:{

flex:1,

justifyContent:'center',

alignItems:'center',

backgroundColor:'#F5FCFF',

},

welcome:{

fontSize:20,

textAlign:'center',

margin:10,

},

instructions:{

textAlign:'center',

color:'#333333',

marginBottom:5,

},

});

In the above main.js code we have again used a StackNavigator. This StackNavigator has been nested in the TabNavigator used in home.js. It has tree screens i.e. Profile, Age and Height screen. Again, we have passed the props we received from TabNavigator used in home.js to the screens of main.js. So, we are receiving the prop and passing it to Profile, Age and Height screen using screenProps property.

Now, lets check code of profile.js below :

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

import React,{Component}from'react';

import{

AppRegistry,

StyleSheet,

Text,

View,

Button

}from'react-native';

exportdefaultclassProfileextendsComponent{

render(){

return(

<View style={styles.container}>

<Text style={styles.welcome}>

Welcome toMain Tab!

</Text>

<Text style={styles.instructions}>

{this.props.screenProps}

</Text>

<Button

onPress={()=>this.props.navigation.navigate('Age',{age:25})}

title={"Age"}

/>

<Button

onPress={()=>this.props.navigation.navigate('Height')}

title="Height"

/>

</View>

);

}

}

conststyles=StyleSheet.create({

container:{

flex:1,

justifyContent:'center',

alignItems:'center',

backgroundColor:'#F5FCFF',

},

welcome:{

fontSize:20,

textAlign:'center',

margin:10,

},

instructions:{

textAlign:'center',

color:'#333333',

marginBottom:5,

},

});

Code of age.js is like this :

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

import React,{Component}from'react';

import{

AppRegistry,

StyleSheet,

Text,

View

}from'react-native';

exportdefaultclassAgeextendsComponent{

render(){

return(

<View style={styles.container}>

<Text style={styles.welcome}>

WelcometoAge{this.props.navigation.state.params.age}!

</Text>

</View>

);

}

}

conststyles=StyleSheet.create({

container:{

flex:1,

justifyContent:'center',

alignItems:'center',

backgroundColor:'#F5FCFF',

},

welcome:{

fontSize:20,

textAlign:'center',

margin:10,

},

instructions:{

textAlign:'center',

color:'#333333',

marginBottom:5,

},

});

And, code of height.js is like this :

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

import React,{Component}from'react';

import{

AppRegistry,

StyleSheet,

Text,

View

}from'react-native';

exportdefaultclassHeightextendsComponent{

render(){

return(

<View style={styles.container}>

<Text style={styles.welcome}>

Welcome toHeight!

</Text>

</View>

);

}

}

conststyles=StyleSheet.create({

container:{

flex:1,

justifyContent:'center',

alignItems:'center',

backgroundColor:'#F5FCFF',

},

welcome:{

fontSize:20,

textAlign:'center',

margin:10,

},

instructions:{

textAlign:'center',

color:'#333333',

marginBottom:5,

},

});

Lets understand the above code. In profile.js we have rendered the data that we have been passing using screenProps property. Below that we have two buttons which are bind to navigation props. The first one allows us to navigate to Age screen and second one allows us to navigate to Height screen. Also, you can notice that when navigating to age screen we are passing parameter age which is set to 25. In age.js we have a simple Age component which renders the age parameter passed and height.js is also a very simple React native component.