How to hide header of createStackNavigator on React Native?

Just Ahead picture Just Ahead · Jul 2, 2018 · Viewed 24.6k times · Source

I want to hide header because I already have styled Toolbar in code:

import {createStackNavigator}
from 'react-navigation'
const AppStackNavigator = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
})
class App extends Component {
render() {
  return (
  <AppStackNavigator initialRouteName='Home'/>`<br>
  );
  }
}
export default App;

What should I add to my code?

Answer

Aravind S picture Aravind S · Jul 2, 2018

update your code like this code

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage, 
        navigationOptions: {
            header: null,
        },
    },
})

and if you dont want the header for all screens, then

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage,
    },
},
{
    navigationOptions: {
        header: null,
    },
})

Note: This solution is for an old version of React Navigation.