React navigation is evolving very fast as per developer requirements. At present time react navigation has launched its new 5.x version which comes with so many new features. In today’s tutorial we would discuss one of them. We would learn about Hiding Navigation bar also known as App screen activity bar, Action title bar. So in this tutorial we would learn about React Navigation 5.x Hide Navigation Bar Open Full Screen Modal in React Native Android iOS App.
Contents in this project React Navigation 5.x Hide Navigation Bar Open Full Screen Modal in React Native:-
1. Before getting started the app coding we have to install the necessary package library which is React Navigation, Reanimated, Gesture Handler, React Native Screens, React Native Safe Area, Masked View and Stack Navigator library in our current react native project. I’ve already created a tutorial regarding the installation process. Here is the link of that tutorial. GoTo this tutorial and follow the Step 1, 2 and 3.
2. Open your project’s main App.js file and import View, Text, NavigationContainer and createStackNavigator component.
|
1 2 3 4 |
import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; |
3. Creating a functional component named as HomeScreen(). This is the first screen of our app which header we would hide.
|
1 2 3 4 5 6 7 8 9 |
function HomeScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text style={{fontSize: 24, color: 'black'}}>This is Home Screen.</Text> </View> ); } |
4. Creating a createStackNavigator() object named as Stack. The Stack contain two properties Screen and Navigator which is used to define Screens and their options.
|
1 |
const Stack = createStackNavigator(); |
5. Creating functional component named as App. Inside the component we would first declare NavigationContainer -> Stack.Navigator -> Stack.Screen component. Inside the Stack.Screen component we would call the Home Screen activity and using the options prop we would hide the header bar.
- options={{ headerShown: false }} : Is used to hide the Navigation Title bar in react navigation 5.x version.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} /> </Stack.Navigator> </NavigationContainer> ); } |
6. At last we would call the export default App method to call the App component on application start.
|
1 |
export default App; |
7. Complete Source Code for App.js file class:
|
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 |
import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; function HomeScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text style={{fontSize: 24, color: 'black'}}>This is Home Screen.</Text> </View> ); } const Stack = createStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} /> </Stack.Navigator> </NavigationContainer> ); } export default App; |
Screenshot:
