Passing title from React Native navigation to Header Component

Question

I m trying to pass the title of each page from react navigation to the header component but with no luck. I am pretty sure that i am sending the prop corectly but i dont know how to used i tried with {props.headerTitle} but no luck.

Header Component:

export default function Header() {
  return (
    <View style={styles.header}>
      <Text>{props.headerTitle}</Text>
    </View>
  );
}

Navigation

<AuthStack.Navigator initialRouteName={RegisterLogin}>
            <AuthStack.Screen
              name="RegisterLogin"
              component={RegisterLogin}
              options={({navigation, route}) => ({
                headerShown: false,
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: 'red',
                  elevation: 0,
                  shadowOpacity: 0,
                  borderBottomWidth: 0,
                },
              })}
            />
            <AuthStack.Screen
              name="Login"
              component={LoginWithContext}
              options={({navigation, route}) => ({
                headerTitle: (props) => <Header {...props} />,
                headerStyle: {
                  backgroundColor: 'red',
                  elevation: 0,
                  shadowOpacity: 0,
                  borderBottomWidth: 0,
                },
              })}
            />

Ewan · Accepted Answer · 2020-06-20 14:54:35Z

2

I'm not quite sure what you're trying to accomplish. React Navigation headers display the page title by default when you set the title option like so:

<AuthStack.Screen
    name="RegisterLogin"
    component={RegisterLogin}
    options={{
        title: 'Your title here',
        headerStyle: {
            backgroundColor: 'red',
            elevation: 0,
            shadowOpacity: 0,
            borderBottomWidth: 0,
        }
    }}
/>

Is there a different behavior you want here?

Edit: assuming you are trying to pass the title to your header component for some further custom behavior, you can do it like so:

// Header Component
function Header({children}) {
    return (
        <View>
            <Text>{children}</Text>
        </View>
    );
}
// In your navigator
<AuthStack.Screen
    name="RegisterLogin"
    component={RegisterLogin}
    options={{
        title: 'Your title here',
        headerTitle: (children) => <Header {...children}/>,
        headerStyle: {
            backgroundColor: 'red',
            elevation: 0,
            shadowOpacity: 0,
            borderBottomWidth: 0,
        }
    }}
/>

See the docs on headerTitle: https://reactnavigation.org/docs/stack-navigator/#headertitle

edited Jun 20, 2020 at 14:54

answered Jun 20, 2020 at 14:31

Ewan

7916 silver badges8 bronze badges

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

1 Comment

Obsesie Over a year ago

actually yea I think I've overthinked a simple problem when i could've do it this way. Thank you.

Collectives™ on Stack Overflow

Passing title from React Native navigation to Header Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related