HeaderBackButton onPress is not firing #8775
Description
Current Behavior
When setting headerLeft on a screen and overriding it with HeaderBackButton, onpress is not firing. Also, the default back behavior (when not overriding using headerLeft) is not firing. Current setup is similar to:
// Modal stack
<Stack.Navigator mode="modal">
<Stack.Screen name="Main" component={TabNavigator} />
<Stack.Screen name="ModalA" component={ModalA} />
<Stack.Screen name="ModalA" component={ModalA} />
/>
// TabNavigator
<Tab.Navigator>
<Tab.Screen name="HomeTab" component={Home} />
<Tab.Screen name="SettingsTab" component={Settings} />
</Tab.Navigator>
// Settings Tab
<SettingsNavigator.Navigator headerMode="screen">
<SettingsNavigator.Screen name="SettingsHome" component={SettingsHome} />
<SettingsNavigator.Screen
name="SupportedBuildings"
component={SupportedBuildings}
options={{
headerShown: true,
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
console.log('hi');
}}
label="Test"
/>
),
}}
/>
</SettingsNavigator.Navigator>
Pressing the back button does nothing and does not log to the console. Removing the "headerRight" option and using the default back button also does not correctly cause the screen to go back. HOWEVER, replacing the headerRight with a custom button as follows:
<SettingsNavigator.Navigator headerMode="screen">
<SettingsNavigator.Screen name="SettingsHome" component={SettingsHome} />
<SettingsNavigator.Screen
name="SupportedBuildings"
component={SupportedBuildings}
options={{
headerShown: true,
headerLeft: (props) => (
<Button
{...props}
onPress={() => {
navigationRef.current?.navigate('More');
}}
title="Back"
/>
)
}}
/>
</SettingsNavigator.Navigator>
This WILL correctly work, which tells me it is an issue with the HeaderBackButton.
Expected Behavior
The onPress method for the HeaderBackButton should fire.
How to reproduce
Create a stack similar to the one above. Or, just try to use the HeaderBackButton. It will not work.
Your Environment
| software | version |
|---|---|
| iOS or Android | iOS |
| @react-navigation/native | 5.7.3 |
| @react-navigation/stack | 5.9.0 |
| @react-navigation/bottom-tabs | 5.8.0 |
| react-native-gesture-handler | 1.7.0 |
| react-native-safe-area-context | 3.1.6 |
| react-native-screens | 2.9.0 |
| react-native | 0.63.0 |
| expo | none |
| node | 14.7.0 |
| npm or yarn | yarn - 1.22.4 |