Question 32819 in React native Question posted in
The official React Native documentation can be found here.

How to change the Native Stack Navigator Title in Center "Android" – React native

I have an issue in Stack Navigator Title because I want the title in Center of the Screen but the output is shown in the left side so please help me to change as a center format

I attached the screenshot of my Issue

import {createNativeStackNavigator} from '@react-navigation/native-stack'

import HomeScreen from '../screens/HomeScreen';
import RestaurantDetailsScreen from '../screens/RestaurantDetails'
import DishDetaileScreen from '../screens/DishDetailsScreen';
import Busket from '../screens/Busket';
import OrderScreen from '../screens/OrderScreen';
import OrderDetails from '../screens/OrderDetails';

const Stack = createNativeStackNavigator();

const RootNavigator = () => {
    return(
        <Stack.Navigator initialRouteName="Restaurant">
            <Stack.Screen name="Home" component={HomeScreen}/>
            {/* <Stack.Screen 
            name="Restaurant" 
            component={RestaurantDetailsScreen}
            options={{headerShown: false}}/> */}
        </Stack.Navigator>
    )
}


export default RootNavigator

I insert the stack navigator on my screen but the title shown on the screen is left side but I want this as the Center

Screenshot of my Issue

Tags:

2

Answers


  1. 0

    You can add style like below example,

     <Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
    Login or Signup to reply.
  2. 0

    Just can also use headerTitleAlign: 'center' in your Stack.Screen component.

    import {createNativeStackNavigator} from '@react-navigation/native-stack'

import HomeScreen from '../screens/HomeScreen';


const Stack = createNativeStackNavigator();

const RootNavigator = () => {
    return(
        <Stack.Navigator initialRouteName="Restaurant">
             <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={() => ({
              headerTitleAlign: 'center',
            })}
          />
        </Stack.Navigator>
    )
}


export default RootNavigator
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search