CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Ramin Kaviani
Ramin Kaviani

Reputation: 41

React Navigation - Custom headerRight component being covered by custom headerTitle component

I am trying to customize the header of the stack navigator in my app.js file. I changed the text of the title using headerTitle, and then added in a custom Icon for the headerRight button.

However, it seems that when headerTitle is used, headerLeft and headerRight are not visible at all. If i delete headerTitle then they become visible in my header.

I tried changing the left and right properties in headerTitleContainerStyle and tried adding padding and margin to headerTitleStyle, but these did not work. This was suggested by the docs for React Navigator.

Below is my code for the relevant stack page.

<Stack.Navigator
  initialRouteName="Dashboard"
  screenOptions={{
    headerTitleAlign: "center",
    headerStyle: {
      backgroundColor: Colors.secondary,
    },
    headerTintColor: Colors.secondary,
  }}
>
  <Stack.Screen
    name="Dashboard"
    component={MyTab}
    options={
      ({ title: "Dashboard" },
      { headerTitleStyle: { marginHorizontal: 150 } },
      { headerTitleContainerStyle: { right: 200, paddingRight: 150 } },
      {
        headerRight: () => (
          <Button
            onPress={() => alert("This is a button!")}
            title="Info"
            color="#00cc00"
          >
            <Text>Teext</Text>
          </Button>
        ),
      },
      { headerTitle: () => <Text>yeeete</Text> })
    }
  />
  
</Stack.Navigator>

the Button you see above is copied directly from the example in the Docs on how to add a right header button. My code is pretty much identical to their example (well, I guess clearly not since it does not work?!), so I have no idea what the issue could be.

MyTab is my Tab navigator.

Upvotes: 1

Views: 1181

Answers (1)

Tushar Pandey
Tushar Pandey

Reputation: 4857

I have used this approach to customise the header in app like this :

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,
    },
});}

In this AppHeader is my custom component.

Upvotes: 1

Related Questions