title: How do I center the text for the header in the Navigation Container?
body: <p>I am trying to center the text for a header, but can't seem to implement it. I am following a tutorial on this and even though I'm following it step-by-step the text is not aligning in the center. I want it to center as I will be using a backHeaderTitle using the useLayoutEffect to return to the previous screen. I would appreciate any help as I have been stuck for a few days on this.</p>
  <p>\\</p>
  <pre><code>import &quot;react-native-gesture-handler&quot;;
  import React from &quot;react&quot;; 
  import { StyleSheet, Text, View } from &quot;react-native&quot;;
  import { NavigationContainer } from &quot;@react-navigation/native&quot;;
  import { createStackNavigator } from &quot;@react-navigation/
  stack&quot;;
  import LoginScreen from &quot;./screens/LoginScreen&quot;;
  
  const Stack = createStackNavigator();
  const globalScreenOptions = {
    headerStyle: {backgroundColor: &quot;#2C6BED&quot;},
    headerTitleStyle: {color: &quot;white&quot;},
    headerTintColor: &quot;white&quot;,
  }
  export default function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator screenOptions={globalScreenOptions}&gt;
          &lt;Stack.Screen  
          name=&quot;Login&quot; 
          component={LoginScreen}
          
          /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>
  <p>\\</p>