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

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.

Answer 2

static navigationOptions = { title: 'Welcome', header: null };

Answer 3

If you use NavigatorIOS always, you can do it like this:

1. modify the file NavigatorIOS.ios.js as below:

   before: navigationBarHidden={this.props.navigationBarHidden}
   after:  navigationBarHidden={route.navigationBarHidden}
   

2. navigator.push({navigationBarHidden: false})

Answer 4

use header: null for react-navigation, in your navigationOptions as follows;

navigationOptions: {
    header: null,
}

Answer 5

you need declare navigation object like this .

const StackNavigator = createStackNavigator(
  {
   Screen: { screen: HOME},
  },
  {
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        headerShown: false,
        header: null,
        headerTitle: routeName
      };
    }
  }
);