Navigation not passing to header right button?

Question

I added a couple of header right buttons, but when I click them, I get the following error:

TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

This is the code for the header, and it has the header right buttons:

   <Stack.Screen 
          name="Tabs" 
          component={Tabs} 
          options =  {{
              title: " ",
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 24,
                color: '#FFFFFF'
              },
              headerStyle: {
                backgroundColor: '#121212',
                shadowColor: 'transparent'
              },
              headerRight: () => (
                <View style={{flexDirection: "row"}}>

                  <TouchableOpacity 
                    style={{paddingRight: 20}}
                    onPress={() => this.props.navigation.navigate('Search')}>
                    <Ionicons name="ios-search" size={25} color="white" />
                  </TouchableOpacity>

                  <TouchableOpacity 
                      style={{paddingRight: 20}}
                      onPress={() => this.props.navigation.navigate('Notifications')}>
                      <Ionicons name="md-notifications" size={25} color="white" />
                  </TouchableOpacity>

                </View>
                
              ),

          }}/>

How can I access navigation in the header?

EDIT: Followed the docs and changed it to this:

        <Stack.Screen 
          name="Tabs" 
          component={Tabs} 
          options = {( navigation ) => ({
              title: " ",
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 24,
                color: '#FFFFFF'
              },
              headerStyle: {
                backgroundColor: '#121212',
                shadowColor: 'transparent'
              },
              headerRight: () => (
                <View style={{flexDirection: "row"}}>

                  <TouchableOpacity 
                    style={{paddingRight: 20}}
                    onPress={() => navigation.navigate('Search')}>
                    <Ionicons name="ios-search" size={25} color="white" />
                  </TouchableOpacity>

                  <TouchableOpacity 
                      style={{paddingRight: 20}}
                      onPress={() => navigation.navigate('Notifications')}>
                      <Ionicons name="md-notifications" size={25} color="white" />
                  </TouchableOpacity>

                </View>
                
              ),

          })}/>

But now getting this error:

TypeError: navigation.navigate is not a function. (In 'navigation.navigate('Search')', 'navigation.navigate' is undefined)

How can I access navigation in the header?

Answer 1

You can define options as a function that takes the navigation object as an argument:

options={({ navigation }) => ({
    title: " ",
    headerTitleStyle: { ... }
})}

Here is a simplified working example.

Other use cases can be found in react-navigation documentation.