React Native headerTitleStyle wont center

I'm facing a little problem with the header included with the stackNavigator in react-native. The header title default style seems to be set as alignSelf: start, however, i can't change it to center in my application.[![Header is not centered][1]][1]

https://i.stack.imgur.com/1Ih7Q.png

Here is the code for my routes section:

import * as React from 'react';

import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import Main from './pages/Main';
import User from './pages/User';

const Stack = createStackNavigator();

export default function Routes() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: {backgroundColor: '#7159c1'},
          headerTintColor: '#fff',
          headerTitleStyle: {
            alignSelf: 'center',
            alignItems: 'center',
            color: '#fff',
          },
        }}>
        <Stack.Screen name="Home" component={Main} />
        <Stack.Screen
          name="User"
          component={User}
          options={({route}) => ({title: route.params.user.name})}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}