Xyzor
Xyzor

Reputation: 155

React navigation header disappear in drawernavigator

I updated the react-navigation to 1.0.0-beta.19 and now my navigator component is not working properly. The header disappeared from DrawerNavigator.

The strange part is that I tried to restore the package to the previous version (1.0.0-beta.13), but it didn't fix it. So maybe it has nothing to do with the version update, but this is the only thing that changed.

I checked the package in node_modules and it realy was restored to the previous version.

What I'm curious about is that my navigator component is bad or the problem is somewhere else?

The navigator component (bottom-up):

const AuthStack = StackNavigator({
    login: { screen: LoginScreen }
    ,forgottendPassword: { screen: ForgottenScreen }
}, {
    initialRouteName: 'login'
    ,headerMode: 'none'
});

// HomeScreen with drawer menu
const HomeDrawer = DrawerNavigator({
    home: {
        screen: HomeScreen
        ,navigationOptions: { drawerLockMode: 'locked-closed' }
    }
}, {
    initialRouteName: 'home'
    ,drawerPosition: 'right'
    ,drawerWidth: 300
    ,contentComponent: props => <HomeDrawerMenu {...props} />
});

// Main stack
const MainStack = StackNavigator({
    homeDrawer: {
        screen: HomeDrawer
        ,navigationOptions: ({ navigation }) => ({
            header: <HomeMenu navigate={navigation.navigate} />
        })
    }
    ,partnerList: {
        screen: PartnerListScreen
        ,navigationOptions: ({ navigation }) => ({
            header: <PartnerListMenu navigation={navigation} />
        })
    }
}, {
    initialRouteName: 'homeDrawer'
});

// Root navigator
const Nav = StackNavigator({
    auth: { screen: ({ navigation }) => 
        <AuthStack screenProps={{ rootNavigation: navigation }} />
    }
    ,main: { screen: ({ navigation }) =>
        <MainStack screenProps={{ rootNavigation: navigation }} />
    }
}, {
    initialRouteName: 'auth',
    headerMode: 'none',
});

export default Nav;

Packages:

EDIT: Screenshot from the HomeScreen where the menu is missing:

enter image description here

Upvotes: 0

Views: 1676

Answers (1)

Xyzor
Xyzor

Reputation: 155

An unnecessary flex: 1 caused the problem.

Upvotes: 1

Related Questions