Search code examples
react-nativestack-navigator

How to hide header of createStackNavigator on React Native?


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?


Solution

  • 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.