How to hide React Native NavigationBar

Question

I have NavigatorIOS under Navigator and would like to hide Navigator\'s NavigationBar to use NavigatorIOS\'s bar. Is there any way to do this?

This is screenshot tha

Answer 1

In the React Navigation (5.x) [Current Version]

Set headerShown property to false to hide navigation bar as below :

complete example :

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


// Screen
import LoginScreen from '../screens/auth/LoginScreen';

const Stack = createStackNavigator();

const CareAndCarersNavigation = () => {
    return (
        
            
                
            
        
    )
}

export default MainNavigation

In the React Navigation (4.0)

to hide navigation bar you have 3 options :

1. For the single screen, you can set header null in navigationOptions

static navigationOptions = {
    //To hide the ActionBar/NavigationBar
    header: null,
};

2. For the single screen, you can set header null in createStackNavigator like this

const App = createStackNavigator({
  First: {
    screen: HomeActivity,
    navigationOptions: {
      header: null,
    },
  },
});

3. Hide the header from all the screens in once using defaultNavigationOptions

const App = createStackNavigator(
  {
    First: {
      screen: HomeActivity,
    },
  },{
    defaultNavigationOptions: {
      header: null
    },
  }
);