Josh
Josh

Reputation: 3090

How do I change the header with nested navigator stacks?

The header changes on screens in the loginFlow StackNavigator but I can't change any of the nav options in the mainFlow stack.

const AppStackNavigator = StackNavigator(
    {
        loginFlow: {
            screen: StackNavigator(
                {
                    Landing: { screen: Landing },
                    Login: { screen: Login },
                    Signup: { screen: Signup }
                },
                {
                    mode: "modal"
                    //headerMode: "screen"
                }
            )
        },
        mainFlow: {
            screen: StackNavigator(
                {
                    someTab: {
                        screen: TabNavigator({
                            Suppliers: { screen: Suppliers },
                            Shortlist: { screen: Shortlist }
                        })
                    }
                },
                {
                    //headerMode: "screen"
                }
            )
        }
    },
    {
        headerMode: "none"
    }
);

My code on the header bar in Signup works:

 static navigationOptions = {
        headerTitle: <Image source={require("../../../assets/img/logo-coloured.png")} />,
        headerRight: <Image source={require("../../../assets/img/signup.png")} style={{ marginRight: 15 }} />,
        headerLeft: <Image source={require("../../../assets/icons/close.png")} style={{ marginLeft: 15 }} />,
        headerStyle: { backgroundColor: "#fff", elevation: 0, borderBottomWidth: 0 }
    };

Same code used on TabNavigator screens doesn't change the nav header at all.

Upvotes: 1

Views: 490

Answers (1)

sanjar
sanjar

Reputation: 1101

You can set one title for the TabNavigator this way :

mainFlow: {
    screen: StackNavigator(
        {
            someTab: {
                screen: TabNavigator({
                    Suppliers: { screen: Suppliers },
                    Shortlist: { screen: Shortlist }
                }),
                navigationOptions: { title: "someTab title"}
            }
        }
    )
}

Upvotes: 1

Related Questions