Tab Navigation View also known as TabNavigator View is a type of user swipeable view with multiple tabs activity inside it. React native developer can load – open multiple activities in a single view with each Tab holding a Activity. So each tab represents a single activity. So here is the complete step by step tutorial for React Native Swipeable Tab Navigation View for both android and iOS applications.
Contents in this project React Native Swipeable Tab Navigation View with multiple Activities :
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, To add this library Open your project using command prompt and type below command inside your react native project folder.
Example : My project name is Mainproject. First i am going into my Mainproject using cd command then inside that project folder i have to type the below command.
|
1
|
npm install —save react–navigation
|
3. Add AppRegistry, StyleSheet, Platform and Text component inside the import block.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, Platform} from ‘react-native’;
|
4. Import the TabNavigator module from react-navigation library.
|
1
|
import { TabNavigator } from “react-navigation”;
|
5. Create a new class named as HomeClassActivity that extends the React.Component module. This would be our first Activity inside the Tab Navigator View.
|
1
2
3
4
5
|
class HomeClassActivity extends React.Component {
}
|
6. Add static navigationOptions inside your HomeClassActivity and inside the static navigationOptions put the tabBarLabel : ‘ Your Tab Name ‘ . The tabBarLabel is used to set the individual tab name that shows on the screen.
|
1
2
3
4
5
6
7
8
9
|
class HomeClassActivity extends React.Component {
static navigationOptions = {
tabBarLabel: ‘Home’,
};
}
|
7. Add render’s return block inside your HomeClassActivity and create Text component in it, to show the sample text on activity screen. This would be our First Tab Activity.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class HomeClassActivity extends React.Component {
static navigationOptions = {
tabBarLabel: ‘Home’,
};
render() {
return(
<Text style={styles.TextStyle}>This is Home Activity.</Text>
);
}
}
|
8. Now by following all the upper steps create another activity class named as SubjectClassActivity .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
class SubjectClassActivity extends React.Component {
static navigationOptions = {
tabBarLabel: ‘Subject’,
};
render() {
return(
<Text style={styles.TextStyle}>This is Subject Activity.</Text>
);
}
}
|
9. Create another activity named as CategoryClassActivity .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class CategoryClassActivity extends React.Component {
static navigationOptions = {
tabBarLabel: ‘Category’
};
render() {
return(
<Text style={styles.TextStyle}>This is Category Activity.</Text>
);
}
}
|
10. This step is very important for Tab Navigator project because now we would connect each tab with each activity using TabNavigator const object. Here Home indicates the HomeClassActivity , Subject indicates the SubjectClassActivity and Category indicates the CategoryClassActivity .
|
1
2
3
4
5
6
7
8
9
|
const Mainproject = TabNavigator({
Home: { screen: HomeClassActivity },
Subject: { screen: SubjectClassActivity },
Category: { screen: CategoryClassActivity },
});
|
11. Add custom tab navigation style options in TabNavigator .
activeTintColor : Set the color of Tab Text while a tab is selected or activated.
fontSize : Set the Tab text font size.
backgroundColor : Sets the complete tab background color.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
const Mainproject = TabNavigator({
Home: { screen: HomeClassActivity },
Subject: { screen: SubjectClassActivity },
Category: { screen: CategoryClassActivity },
},
{
tabBarOptions: {
activeTintColor: ‘#fff’,
labelStyle: {
fontSize: 14,
},
style: {
backgroundColor: ‘#009688’,
},
}
});
|
12. Create custom style sheet class for Text component.
|
1
2
3
4
5
6
7
8
9
10
11
|
const styles = StyleSheet.create({
TextStyle :{
fontSize: 25,
color: “#000”,
textAlign : ‘center’,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
},
});
|
13. Call the Mainproject using App Registry.
|
1
|
AppRegistry.registerComponent(‘Mainproject’, () => Mainproject);
|
14. Complete source code for index.android.js / index.ios.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, Text, Platform} from ‘react-native’;
import { TabNavigator } from “react-navigation”;
class HomeClassActivity extends React.Component {
static navigationOptions = {
tabBarLabel: ‘Home’,
};
render() {
return(
<Text style={styles.TextStyle}>This is Home Activity.</Text>
);
}
}
class SubjectClassActivity extends React.Component {
static navigationOptions = {
tabBarLabel: ‘Subject’,
};
render() {
return(
<Text style={styles.TextStyle}>This is Subject Activity.</Text>
);
}
}
class CategoryClassActivity extends React.Component {
static navigationOptions = {
tabBarLabel: ‘Category’
};
render() {
return(
<Text style={styles.TextStyle}>This is Category Activity.</Text>
);
}
}
const Mainproject = TabNavigator({
Home: { screen: HomeClassActivity },
Subject: { screen: SubjectClassActivity },
Category: { screen: CategoryClassActivity },
},
{
tabBarOptions: {
activeTintColor: ‘#fff’,
labelStyle: {
fontSize: 14,
},
style: {
backgroundColor: ‘#009688’,
},
}
});
const styles = StyleSheet.create({
TextStyle :{
fontSize: 25,
color: “#000”,
textAlign : ‘center’,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
},
});
AppRegistry.registerComponent(‘Mainproject’, () => Mainproject);
|
Screenshot in Android device :
Screenshot in iOS device :
Tab Navigator Project Activity Calling Life Cycle:
Also Read :
Call External Local JS File Activity in Current App.js File in React Native
React Native Installing Realm Mobile Database in iOS Android Tutorial
React Native Get Device Height Width on Button Click
React Native Integrate Mapbox in Android iOS Example Tutorial
Create Global Scope Variables in React Native used between Activities
