The activity navigation also known as Action Title Bar is used to show the activity name as title and image icon inside it. At the default stage the navigation bar shows at the top of the application screen with activity title, but sometimes react naive developer needs to remove the navigation bar in order to make the react native app full screen. Using the header : null property of Static navigation options we can hide the navigation bar. So in this tutorial we would going to Hide Activity Navigation Bar to Make the App Full Screen in iOS Android React Native App Example Tutorial.
Contents in this project Hide Activity Navigation Bar Make App Full Screen iOS Android React Native App Example:
1. Install the React Navigation library in your current react native project in order to implement activity structure. So open your project folder in command prompt like i did in below screenshot and execute the below command.
|
1
|
npm install —save react–navigation
|
Screenshot after done installing:
2. Import View, StyleSheet and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { View, StyleSheet, Text } from ‘react-native’;
|
3. Import StackNavigator component from react navigation library.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
4. Create a class named as MainActivity, This would be our main first activity class in current project.
|
1
2
3
4
5
|
class MainActivity extends Component {
}
|
5. Create the static navigationOptions in your MainActivity project, This is the activity modification options.
title : Used to set Title of your current activity.
headerStyle : backgroundColor : Used to set the Background color of Navigation bar.
headerTintColor : Used to set Title color text shows inside Navigation bar.
header : null :- Used to hide the Header(Navigation bar).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
static navigationOptions =
{
title: ‘MainActivity’,
headerStyle: {
backgroundColor: ‘#FFC107’
},
headerTintColor: ‘#fff’,
header : null
};
|
6. Create render’s return block in your project inside this block we would make a Root View with a sample Text component.
|
1
2
3
4
5
6
7
8
9
10
11
|
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={styles.textStyle}> Hiding Navigation Bar in React Native. </Text>
</View>
);
}
|
7. Now finally we would create the StackNavigator activity defining structure, Inside this block we would define our all activities.
|
1
2
3
4
5
6
|
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
|
8. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#fff’
},
textStyle:{
fontSize: 22,
textAlign: ‘center’,
color: ‘#000’
}
});
|
9. 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
|
import React, { Component } from ‘react’;
import { View, StyleSheet, Text } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
headerStyle: {
backgroundColor: ‘#FFC107’
},
headerTintColor: ‘#fff’,
header : null
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style={styles.textStyle}> Hiding Navigation Bar in React Native. </Text>
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity }
});
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10,
backgroundColor: ‘#fff’
},
textStyle:{
fontSize: 22,
textAlign: ‘center’,
color: ‘#000’
}
});
|
Screenshot in Android device :
Screenshot in iOS device:
Also Read :
React Native Insert Text Input Data To MySQL Server Android iOS Tutorial
Create Transparent Background View in React Native Android iOS
React Native ActivityIndicator Android iOS Example Tutorial
React Native Application Life Cycle Methods Explained Example Tutorial
React Native Common DatePicker for Android and iOS Example Tutorial
