Issues with React components in headerCenter

[Almouro]

Hello,

Great work with react-native-screens, we migrated most of our screens to react-native-screens and already see great performance improvements. 🎉

One thing that was tricky was migrating headerTitle containing a React component. I know about headerCenter but these are the issues I had with it:

1. headerCenter is also centered on Android while headerTitle is left aligned by default

If we want to follow default guidelines, we should left align our title to the left on Android.

I thought it would be easy by wrapping the title like so:

<View
    style={{
      width: "100%",
      alignItems: Platform.select({ ios: "center", android: "flex-start" }),
    }}
  >
    <Title />
  </View>

However width: 100% seems to be the width of the whole navbar, which brings the second point.

2. width: 100% on headerCenter takes the whole navbar width

Setting a headerTitle and a headerRight is awesome with react-native-screens because it handles very well long content, for instance:

navigation.setOptions({
   headerStyle: { backgroundColor: "purple" },
   headerTitle: "Oh dear, this is a very long title, really long",
   headerRight: () => <Text style={{ color: "white" }}>Big button</Text>,
 });

However we lose this behavior with headerCenter:

navigation.setOptions({
  headerStyle: { backgroundColor: "purple" },
  headerCenter: () => <Text style={{ color: "white" }}>Oh dear, this is a very long title, really long</Text>,
  headerRight: () => <Text style={{ color: "white" }}>Big button</Text>,
});

3. Some components in our app can be used by JS stacks or Native stacks

We still use JS stacks in a few places in our app, because it provides more flexibility to parameterize transitions. Essentially we have a main native stack navigator and some JS nested stacks.

Some components set the header title and can be used by either a native screen or a JS screen which makes this tricky since:

• react-navigation by default supports only headerTitle
• setting a component in headerTitle crashes the native screen

So the component cannot just do

navigation.setOptions({
  headerTitle: () => <Title />,
  headerCenter: () => <Title />
});

Essentially the component has to know whether it's in a native stack screen or a JS one, which shouldn't be its responsibility in my opinion.

It would be ideal if react-native-screens supported components in headerTitle (and could convert it to a headerCenter)

[kacperkapusciak]

Hi @Almouro,
Thank you very much for this incredibly descriptive post 🥇
As you might guess headerCenter and headerTitle work very differently under the hood on the native side. Currently, we don't have a direct answer to your issue. We are working on a smoother integration with react-navigation in general and this might be one of the issues we address. But I don't want to get your hopes up that we're going to fix this in the nearest future.

As always - Pull Requests are more than welcome!