CODEWITHSUNDEEP
react-nativereact-navigation-v6
jeet
jeet

Reputation: 157

Center the header title in drawer navigation

enter image description hereenter image description hereI am trying to center the title with Drawer Navigation. It's default behaviour on ios is center but for android it is moving to the left side just by the drawer. How to make it to the center of the navigation bar. I have tried different options provided in the documentation but nothing helped. This is giving almost center appearance on both ios and android but it is not fail proof.

const DrawerNavigator = () => {
  const screenOptionsProps = {
      screenOptions: {
      headerTitle: () => {
        return (
          <View
            style={{
                height: dimensions.height * 0.1,
                width: dimensions.width - dimensions.width * 0.36,
                justifyContent: 'center',
                alignItems: 'center',
            }}>
            <Text>Title</Text>
          </View>
        );
      },
    },
  }
  };
  return (
    <Drawer.Navigator
      {...screenOptionsProps}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Screen1" component={Screen1} />
    </Drawer.Navigator>
  );
};

Upvotes: 3

Views: 2788

Answers (3)

jE Droid
jE Droid

Reputation: 348

Check below code:

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerMenu {...props} />}
  screenOptions={{
    headerShown: true,
    drawerActiveBackgroundColor: Colors.ActiveBackgroundColor,
    drawerActiveTintColor: Colors.ActiveTintColor,
    drawerInactiveTintColor: Colors.InactiveTintColor,
    drawerLabelStyle: {
      marginLeft: -2,
      fontSize: 15,
    },
    drawerType: "slide",
    headerStyle: {
      height: 60, // Specify the height of your custom header
      backgroundColor: "rgba(0, 0, 0, 0.1)",
      elevation: 0,
      shadowOpacity: 0,
    },

    headerTitle: "title",
    // HERE IS THIS MAGIC LINE OF CODE

    headerTitleAlign: "center",

    // THAT'S ALL YOU NEED IN DN6 :)

    headerRight: () => (
      <Button
        onPress={() => alert("This is a button!")}
        title="Info"
        color="#fff"
      />
    ),
  }}
>

Upvotes: 7

jeet
jeet

Reputation: 157

headerTitleAlign property worked for aligning Title

screenOptionsProps = {
      screenOptions: {
      headerTitleAlign: 'center',
      headerTitle: () => {
        return (
          <View
            style={{
                height: dimensions.height * 0.1,
                width: dimensions.width - dimensions.width * 0.36,
                justifyContent: 'center',
                alignItems: 'center',
            }}>
            <Text>Title</Text>
          </View>
        );
      },
    },
  }

Upvotes: 0

acark
acark

Reputation: 44

If you want to center all of your titles you can use following parameters.

 const AppNavigator = createStackNavigator({
    Home: { screen: HomeScreen },
 }, 
 {
  defaultNavigationOptions: {
      title: 'Aligned Center',
      headerTitleAlign: 'center'
  }
});

For specific screen, you can use the following,

<AppStack.Screen
              name="MyScreen"
              component={MyComponent}
              options={{
                headerShown: true,
                headerStyle: {
                    textAlign:"center", 
                    flex:1 
                },
            
              }}
            />

Upvotes: 0

Related Questions