Setting `headerLeft` on Android modal hides title

Greetings! Either I’ve found a bug (and have failed to find a solution online), or my complete lack of understanding which, if the latter, I will retire into the hills of Saskatchewan, should I ever find one.

When presenting a screen modally inside a native Stack Navigator - on android - via presentationStyle: modal, everything works as one would expect. However, when I specify a headerLeft in the navigation options of the target screen, the title mysteriously disappears.

Sample project can be found here: https://github.com/beardwin/AndroidRNScreensBug

Expo 38.0.8

react-native-screens 2.9.0.

The app is basically as follows:

import React, { useEffect } from "react";
import { StackScreenProps } from "@react-navigation/stack";
import { createNativeStackNavigator } from "react-native-screens/native-stack";
import { Button, StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { enableScreens } from "react-native-screens";

enableScreens();

type NavigatorParams = {
  Home: undefined;
  PooFarts: undefined;
};

const HomeScreen = ({
  navigation,
}: StackScreenProps<NavigatorParams, "Home">) => (
  <View style={styles.screen}>
    <Text>Home Screen</Text>
    <Button
      onPress={() => {
        navigation.navigate("PooFarts");
      }}
      title="Pop a poo fart"
    />
  </View>
);

const PooFartsScreen = ({
  navigation,
}: StackScreenProps<NavigatorParams, "PooFarts">) => {
  useEffect(() => {
    navigation.setOptions({
      title: "Fiddlesticks",
      // uncomment below, and the title will no longer appear
      // headerLeft: () => <Button title="Adios!" onPress={navigation.goBack} />,
    });
  }, [navigation]);

  return (
    <View style={styles.screen}>
      <Text>Poo Farts</Text>
    </View>
  );
};

const Stack = createNativeStackNavigator<NavigatorParams>();

const Navigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen
      name="PooFarts"
      component={PooFartsScreen}
      options={{ stackPresentation: "modal" }}
    />
  </Stack.Navigator>
);
export default function App() {
  return (
    <NavigationContainer>
      <Navigator />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  screen: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center",
  },
});

On Android

[remcorakers]

Hi @beardwin, I ran into the same issue and solved it as follows, by using the headerCenter option and a helper method to create navigation options that can easily be reused. Trick is to set the title empty for Android and use the headerCenter option instead. For iOS the functionality can be kept as-is.

const stackNavigatorOptions = (title: string): NativeStackNavigationOptions => {
  const options: NativeStackNavigationOptions = {
    headerBackTitleStyle: {
      fontSize: 16
    },
    title: Platform.OS === 'android' ? '' : title,
    headerTitleStyle: {
      fontSize: 16,
    },
  };

  if (Platform.OS === 'android') {
    options.headerCenter = () =>  <Text>{title}</Text>;
  }

  return options;
};

Then you can use this method in your navigators like this:

<Stack.Screen
  name="SomeScreen"
  component={SomeScreenComponent}
  options={{
    ...stackNavigatorOptions('Title of the screen'),
  }}
/>

[JoniVR]

Alright, the reason why it’s happening makes sense, it’s just that the title could probably be a separate property or something… Thanks for the speedy reply! I think I’ll just go ahead and try to replicate the original title and add a button next to it similarly to how it looks inside modals.