EXPO Problem in React Navigation 5, why the back top button "<--" is now always default in the right?

Question

EXPO SDK 39 Problem in React Navigation 5, why the back top button "<--" is now always default in the right top instead the normal position with is left?

And how to set a default stack or tab navigation options in all stack or tab pages?

wrong place:

right place:

 export default function Rotas({navigation}) {
  return (
    <NavigationContainer>
      <Stack.Navigator
      options={{
        headerTitleAlign: 'center',
        headerLeftContainerStyle: {
          backgroundColor: 'red',
          transform: [{ rotate: '180deg' }],
          left: 308,
          
        }
        }} 
      > 
        <Stack.Screen /* Esta sera a homme screen, a primeira tela a ser carregada ao abrir o aplicativo */
        options={{
          
          title: 'Sweet Homme',
          headerTintColor: 'white',  /* Cor do texto */
          headerTitleAlign: 'center',
          headerStyle: {
            backgroundColor: 'purple', // Cor de fund0
           

          } 
        }}
        style={{color: 'red'}} name="Home" component={Home} />
        <Stack.Screen 
        options={{
          title: 'WRONG PLACE >>>',
          headerTintColor: 'aquamarine',  /* Cor do texto */
          headerTitleAlign: 'center',
        
          headerStyle: {
            backgroundColor: 'purple', // Cor de fund0
          } 
        }}

        name="Nice" component={Nice} />
        {/* Aplicar esse options no stack screen para fazer a seta voltar não ficar no lado direito do app...
        usando o stack navigator... */}
        <Stack.Screen name="Tela3" component={Tela3}
        options={{
        headerTintColor: 'blue',
        headerTitleAlign: 'center',
        headerLeftContainerStyle: {
          backgroundColor: 'purple',
          transform: [{ rotate: '180deg' }],
          left: 308,
          
        }
        }} />
    {/* Cada Stack.Screen é uma tela, uma pagina, a primeira pagina que o index 
    vai abrir é a que esta no topo desta função. */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

Remove these styles

transform: [{ rotate: '180deg' }],
left: 308,

So what's happening is you are rotating the header container, which is causing the back button to move to the right.

<----- this button, rotated 180 degrees will become ----->

You can use headerRight to add a custom component on the right of the header, if that is what you need.

Please read the docs here https://reactnavigation.org/docs/header-buttons/