How do I add custom title and button to a header in React Native?

Question

I have a simple page with list of students. Once I click on each student profile, I want to go to a new page, where the title of the page will be the name of the student and where I will have a button on the right. All of this should be done in the header. So I put the following code:

<Stack.Screen name="Profile" component={ProfileScreen}
                  options={({ route }) => ({ title: route.params.name })}
 />

Which correctly displays the name of the student on the header. Then I wanted to add the button on the right and as written here I changed my code to:

<Stack.Screen name="Profile" component={ProfileScreen}
                  options={{ headerTitle: ({route}) => ({ title: route.params.name }),
                             headerRight: () => (
                                                <Button
                                                    onPress={() => alert('This is a button!')}
                                                    title="Info"
                                                    color="#fff"
                                                  />),
                          }}
              />

And now I have the following error: TypeError: undefined is not an object (evaluating 'route.params') Can someone advice how to add both custom title and button

Guruparan Giritharan · Accepted Answer · 2021-02-27 11:47:40Z

1

You will have to pass it like below

   options={({ route }) => ({
      title: route.params.name,
      headerRight: () => (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color="#fff"
        />
      ),
    })}

answered Feb 27, 2021 at 11:47

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

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

Comments

marc_s · Accepted Answer · 2021-10-22 05:26:29Z

1

There are two methods by which you can set up the custom header

You can set up a custom button like this

 function LogoTitle() {
     return (
         <Image
            style={{ width: 50, height: 50 }}
            source={require('@expo/snack-static/react-native-logo.png')}
         />
     );
 }

 function StackScreen() {
     return (
          <Stack.Navigator>
              <Stack.Screen
                   name="Home"
                   component={HomeScreen}
                   options={{ headerTitle: props => <LogoTitle {...props} /> }}
              />
          </Stack.Navigator>
     );
 }

You can hide the header by navigation
```
 options: {
     header: null,
 }
```
and can also create custom header and import it to any component you can pass props from every component to that one custom header

edited Oct 22, 2021 at 5:26

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Feb 27, 2021 at 12:47

Anuj Sharma

4556 silver badges17 bronze badges

Collectives™ on Stack Overflow

How do I add custom title and button to a header in React Native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related