I am new to react native.

I am trying to create two screens. My issue is that I don't want app bar on the first screen but I want app bar on the second screen as I need to go back.

am going to the next screen by pressing the card from the first screen and am using createStackNavigator for navigation.

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './ponents/homeScreen';
const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
    //   Details: DetailsScreen,
    },
    {
      initialRouteName: 'Home',
    },
    { headerMode: 'none' },
  );


export default class App extends Component {
  render() {
    return ( 
      <RootStack/>
    );
  }
}

I am new to react native.

I am trying to create two screens. My issue is that I don't want app bar on the first screen but I want app bar on the second screen as I need to go back.

am going to the next screen by pressing the card from the first screen and am using createStackNavigator for navigation.

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './ponents/homeScreen';
const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
    //   Details: DetailsScreen,
    },
    {
      initialRouteName: 'Home',
    },
    { headerMode: 'none' },
  );


export default class App extends Component {
  render() {
    return ( 
      <RootStack/>
    );
  }
}

• javascript
• reactjs
• react-native
• react-router

• 1 check stackoverflow./questions/46065819/… – kj007 Commented Sep 22, 2018 at 17:36

2 Answers 2

People ing here from using @react-navigation with React Native or Expo (Tab navigation in this case):

    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{ headerShown: false }}

If you want to conditionally apply it just hook "headerShown" to a state variable.

Simply do this and it will remove the appbar

class YourClass extends React.PureComponent {

static navigationOptions = {
    header: null,
  }