Material Bottom Navigation View is a hidden view which doesn’t display on device screen at first. This view comes up from bottom of application screen when user press specific button with slide down to slide up animation. Material Bottom Navigation View can contain any widgets or components. In React Native there are no specific component available named as Bottom Navigation View, but using the custom NPM Github library we can easily achieve this View in our app. So in this tutorial we would going to make a Material Bottom Navigation View for Android iOS Example Tutorial in React Native app.
Contents in this project Material Bottom Navigation View for Android iOS Example Tutorial in React Native:
1. The first step is to install REACT NATIVE BTR NPM GitHub library in your react native project. To install the REACT NATIVE BTR library you need to open your project folder in Command Prompt or Terminal and execute below command.
|
1
|
npm i react–native–btr —save
|
Screenshot of Command Prompt :
2. Import StyleSheet, View, Platform, Text and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, Button } from ‘react-native’;
|
3. Import BottomSheet component from react-native-btr library in your project.
|
1
|
import { BottomSheet } from ‘react-native-btr’;
|
4. Create constructor() in your project, Now we would make a Boolean State named as visible and set its default value as false. This state is used to show and hide the Bottom Navigation View.
|
1
2
3
4
5
6
7
8
9
10
11
|
constructor() {
super();
this.state = {
visible: false
}
}
|
5. Create a function named as _toggleBottomNavigationView() in your main class. Inside this function we would simply toggle the State value.
|
1
2
3
4
5
|
_toggleBottomNavigationView = () => {
this.setState({ visible: !this.state.visible })
}
|
6. Creating a Root View in render’s return block, This would be our MAIN root view.
|
1
2
3
4
5
6
7
8
9
10
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
7. Creating a Button component inside the Root view, Using this button we would call the _toggleBottomNavigationView() function and show and hide the Bottom Navigation View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
render() {
return (
<View style={styles.MainContainer}>
<Button onPress={this._toggleBottomNavigationView} title=“Show Bottom Navigation View” />
</View>
);
}
|
8. Creating the BottomSheet component after button component. Put any components or widgets inside it which you want to show inside Bottom sheet View.
visible : Used to SHOW and HIDE the Bottom Sheet View.
onBackButtonPress : Actives the Android back button so if the back button on android device will press then it will call the toggle function and hide the View.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<Button onPress={this._toggleBottomNavigationView} title=“Show Bottom Navigation View” />
<BottomSheet
visible={this.state.visible}
onBackButtonPress={this._toggleBottomNavigationView}
onBackdropPress={this._toggleBottomNavigationView}>
<View style={styles.bottomNavigationView}>
<Text style={styles.text}>
Put All Your Components Here, Which you want to show inside Bottom Navigation View.
</Text>
</View>
</BottomSheet>
</View>
);
}
|
9. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 2,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
backgroundColor: ‘#E0F7FA’
},
bottomNavigationView: {
backgroundColor: ‘#fff’,
width: ‘100%’,
height: 300,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
padding: 10,
textAlign: ‘center’,
fontSize: 20
}
});
|
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
82
83
84
85
86
87
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, Button } from ‘react-native’;
import { BottomSheet } from ‘react-native-btr’;
export default class App extends Component<{}> {
constructor() {
super();
this.state = {
visible: false
}
}
_toggleBottomNavigationView = () => {
this.setState({ visible: !this.state.visible })
}
render() {
return (
<View style={styles.MainContainer}>
<Button onPress={this._toggleBottomNavigationView} title=“Show Bottom Navigation View” />
<BottomSheet
visible={this.state.visible}
onBackButtonPress={this._toggleBottomNavigationView}
onBackdropPress={this._toggleBottomNavigationView}>
<View style={styles.bottomNavigationView}>
<Text style={styles.text}>
Put All Your Components Here, Which you want to show inside Bottom Navigation View.
</Text>
</View>
</BottomSheet>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
margin: 2,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0,
backgroundColor: ‘#E0F7FA’
},
bottomNavigationView: {
backgroundColor: ‘#fff’,
width: ‘100%’,
height: 300,
justifyContent: ‘center’,
alignItems: ‘center’
},
text: {
padding: 10,
textAlign: ‘center’,
fontSize: 20
}
});
|
Screenshots:
Also Read :
React Native Convert Complete Array Object To Single String Variable
What is Props in React Native Explained Tutorial with Example
React Native JSON Parsing ListView From MySQL Database Android iOS
React Native Full Page Width Swipeable Horizontal ScrollView Android iOS
How to Create Strike Through Text in React Native Android iOS App
