HeaderRight Buttons are not clickable (React Native)-CodePudding

I am experiencing an odd bug with the React Native Navigation v5 headerRight Buttons. I currently have a TouchableOpacity set as a headerRight component in the react native navigation screen; however, the onPress event is not being triggered. There seems to be an invisible object in the middle of the header (title area) that has an absolute position, which prevents the onPress event from being registered. I tried playing around with the zIndex and headerMode values; however, the button is still not pressable. I can only press the button when it is placed on the far right of the screen (i.e. marginRight: 0). Any help would be greatly appreciated.

For reference, I am encountering the same issues as the following thread: https://github.com/react-navigation/react-navigation/issues/7052

Example of my Code

<StackNavigator.Navigator headerMode='screen'>
  <StackNavigator.Screen
    name='Home'
    component={HomeScreen}
    options={{
      headerRight: () => (
        <TouchableOpacity
          onPress={() => {}}
        >
          <Text>Button Text</Text>
        </TouchableOpacity>
      ),
    }}
  />
</StackNavigator.Navigator>

CodePudding user response：

Updating to the following packages seems to have resolved it for me:

"@react-navigation/stack": "5.9.3",
"@react-navigation/drawer": "5.9.3",
"@react-navigation/native": "5.7.4",

CodePudding user response：

Try to give higher values to zIndex may be 100 or give headerMode: float if that not also not works try updating your packages .