How can I edit navigationOptions for each screen in nested tabNavigation?

Question

I am trying to show title in the header and also a right action button in the header.

I have tried to follow https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab-bar-on-specific-screens But without any progress.

Navigation.js

const FeedStack = createStackNavigator({
    Welcome: {
        screen: WelcomeScreen,
        navigationOptions: {
            headerTitle: 'Welcome',
        },
    },
    Auth: {
        screen: AuthScreen,
        navigationOptions: {
            headerTitle: 'Login',
        },
    },
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

const TabNavigator = createBottomTabNavigator({
    DailyTask: {
        screen: DailyTaskScreen,
        navigationOptions: {
            headerTitle: 'Daily Task',
        },
    },
    MyTasks: {
        screen: MyTasksScreen,
        navigationOptions: {
            headerTitle: 'My Tasks',
        },
    },
    SelectCategory: {
        screen: SelectCategoryScreen,
        navigationOptions: {
            headerTitle: 'Select Category',
        },
    },
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

const HomeStack = createStackNavigator({
    Tabs: TabNavigator,
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

const AppNavigator = createSwitchNavigator({
    Auth: FeedStack,
    Home: HomeStack,
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.headerColor : 'white',
        },
        headerTintColor: Platform.OS === 'android' ? 'white' : Colors.secondaryColor,
    },
});

export default createAppContainer(AppNavigator);

Screen.js

DailyTaskScreen.navigationOptions = {
    headerTitle: 'Daily Task',
    headerRight: (
        <HeaderButtons HeaderButtonComponent={HeaderButton}>
            <Item
                title='Category'
                iconName='md-albums'
                onPress={() => {
                    this.props.navigation.navigate('SelectCategory')
                }}
            />
        </HeaderButtons>
    )
};

What do I need to do to get the expected results of being able to edit the navigationOptions?

Sandip Singh Sandip Singh · Accepted Answer · 2019-11-04T07:04:32

For adding an element at right of the header and implementing it's onPress, you can do it like this :

Just add this code below 'export default class' in the js file of the screen where you want to add it.

static navigationOptions = {
    headerLeft: null,
    headerRight: (
        <TouchableOpacity
            onPress={() => alert('This is a button!')}>
            <Text style={{color: '#fff', marginRight:12, fontSize: 14}}>Done</Text>
        </TouchableOpacity>
    )
};

How can I edit navigationOptions for each screen in nested tabNavigation?

1 Answers