HeaderCenter Inconsistent Behavior

[ryanmcgough]

Hello,

I was testing out potentially moving towards createNativeStackNavigator() over createStackNavigator() and have been experiencing some inconsistent behavior regarding alignment with the headerLeft, headerCenter, and headerRight options. I initially tried using an image, but it was either slightly off centered to the right, or breaking out of the header bar. To test if it was a styling issue i tried using just <Text />, and each time i reload the app the text may appear in different spaces. Below are some variations of where the text may appear:

Another piece I noticed is this appears to only be happening on any iOS 13 device. The above issue does not happen on any iOS prior.

Below are some code snippets as well as package versions:

Packages:

"react": "16.13.1",
"react-native": "0.63.2",
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",

Navigation:

const NativeStack = createNativeStackNavigator()

const LoginStack = () => {
  return (
    <NativeStack.Navigator>
      <NativeStack.Screen 
        name={'Login'} 
        component={LoginScreen}
        options={{
          headerLeft: () => <Text>Left</Text>,
          headerCenter: () => <Text>Center</Text>,
          headerRight: () => <Text>Right</Text>
        }}
      />
    </NativeStack.Navigator>
  )
}

Note: I have enabledScreens() in my app.js file per the documentation.

Any information regarding this would be greatly appreciated! I'm happy to try any suggestions as well.

Thank you!

[ryanmcgough]

After more research, I found this situation has already been mentioned and solver per #600