React Navigation 5.x Hide Navigation Bar Open Full Screen Modal in React Native

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.

3. Creating a functional component named as HomeScreen(). This is the first screen of our app which header we would hide.

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.

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.

6. At last we would call the export default App method to call the App component on application start.

7. Complete Source Code for App.js file class:

Screenshot:

React Navigation 5.x Hide Navigation Bar Open Full Screen Modal in React Native

Leave a Reply

Your email address will not be published.