How to hide React Native NavigationBar

I solved this by defining a custom NavigationBar which can inspect the current route. Would look something like this:

class NavigationBar extends Navigator.NavigationBar {
  render() {
    var routes = this.props.navState.routeStack;

    if (routes.length) {
      var route = routes[routes.length - 1];

      if (route.display === false) {
        return null;
      }
    }

    return super.render();
  }
}

Using your example:

render: function(){
  return (
    <Navigator
      initialRoute={{
        component: UserSetting,
        rightButtonTitle: 'Done',
        title: 'My View Title',
        display: false,
      }}
      style={styles.container}
      renderScene={this.renderScene}
      navigationBar={
        <NavigationBar
          routeMapper={NavigationBarRouteMapper}
          style={styles.navBar}
        />
      }
    />
  );
}

I did this:

Dashboard:{
  screen: Dashboard,
  navigationOptions: {
    headerStyle: {display:"none"},
    headerLeft: null
  },
},

Because some old methods are deprecated i used stacknavigator. It works for me, if you are using StackNavigator.

//******For Older Versions. But Will be Deprecated in future*******
//static navigationOptions = { title: 'Welcome', header: null };

//For Latest Version Use:
static navigationOptions = { title: 'Welcome', headerShown: false};

Feel free to contact, if any issue.

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

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

<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />

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 (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

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
    },
  }
);

UPDATED

As @DarthVanger said in the comment below, to hide all headers in the stack, use screenOptions like the following:

<NavigationContainer>
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Navigator>
</NavigationContainer>