React Native Hide Activity Navigation Bar Make App Full Screen iOS Android Example

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.

Screenshot after done installing:

2. Import View, StyleSheet and Text component in your project.

3. Import StackNavigator component from react navigation library.

4. Create a class named as MainActivity, This would be our main first activity class in current project.

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).

6. Create render’s return block in your project inside this block we would make a Root View with a sample Text component.

7. Now finally we would create the StackNavigator activity defining structure, Inside this block we would define our all activities.

8. Creating Style.

9. Complete source code for App.js File :

Screenshot in Android device :

Hide Activity Navigation BarScreenshot in iOS device:

2 Comments

  1. This doesnt work on my project, can you send me a video or something else that i can understand this solution clearly?

Leave a Reply

Your email address will not be published. Required fields are marked *