How to add a second header icon using headerRIght and Icon.Button

Question

I am trying to add a search icon next to the menu icon on my header on the right side. I have tried repeating Icon.Button but there is no change. Using React Navigation, React Native Paper, and react-native-vector-icons/Iconicons.

    <HomeStack.Navigator
    screenOptions={{
        headerStyle: {
            backgroundColor: '#155888'
        },
        headerTintColor: '#fff',
        headerTitleAlign: 'center',
        headerRight: () => (
            <Icon.Button 
                name='ios-menu'
                size={30}
                backgroundColor='#155888'
                style={{ flexDirection:"row", paddingRight: 15 }}
                onPress={() => { navigation.toggleDrawer() }}
            />
        )
    }}
>

Tushar Pandey · Accepted Answer · 2020-08-11 18:16:05Z

1

I think custom-header will solve your problem.

I have also faced that issue, what I did I just added to custom-header each screen ( by using helper method )

export const createAppHeader = (props, callback, data) => {

props.navigation.setOptions({
    headerRight: () => (
        <AppHeader
            onClick={callback}
            pageData={data}
        />
    ),
    headerLeft: null,
    headerStyle: {
        shadowOpacity: 0,
        shadowOffset: {
            height: 0,
        },
        elevation: 0,
        shadowRadius: 0,
    },
});}

here AppHeader is custom header which is React component.

answered Aug 11, 2020 at 18:16

Tushar Pandey

4,8875 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add a second header icon using headerRIght and Icon.Button

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related