2.12.0 (Android) createNativeStackNavigator "headerTitle" / "title" not displaying when "headerLeft" is set

Using v2.12.0, given the following example

import { Text } from "react-native";
import { createNativeStackNavigator } from "react-native-screens/native-stack";

const DashboardStack = createNativeStackNavigator();

function DashboardStackView() {
  return (
    <DashboardStack.Navigator screenOptions={{ headerStyle: { backgroundColor: "#DC5E5C" } }}>
      <DashboardStack.Screen
        name="DashboardScreen"
        component={DashboardScreen}
        options={({ route }) => ({
          headerTitle: "Dashboard",
          headerLeft: () => <LeftDrawerButton />, // "() => null" also doesn't work
        })}
      />
    </DashboardStack.Navigator>
  );
}

const LeftDrawerButton = () => <Text>Drawer</Text>

Setting headerTitle or title doesn’t seem to display at all when headerLeft is set.

[darron1217]

Oh, I found a solution navigation.addListener('beforeRemove', callback)

[thunderclap1030]

Because it is the native behavior on Android since the title is on the left side of the header: https://github.com/software-mansion/react-native-screens/tree/master/native-stack#headerleft.

So you could use property headerCenter for show header title only for Android. That way will make sure consistent UI for both platform.

For instance :

headerCenter: () => Platform.OS === 'android' ? <Text> Home page </Text> : null

I already try it and everything seem to be work well.