How To Center Header Title In React Native?

Hello Friends, how are you all?
I hope you all are ok.

In this post I am going to tell you 2 different ways to center header title in react native. So let's start with it.
First option is using stack navigator.

1) Stack Navigator: 
  • We can do title center using stack navigator. I am using react navigation 5 here. Try to add header align like this:
  <Stack.Navigator
      initialRouteName="Home"screenOptions={{headerTitleAlign: 'center'}}>
      <Stack.Screen
        name="Home"
        component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
This code will change header alignment to center for all the screens in the stack because we are giving screenOptions in Stack Navigator.
  • Other way is to add header alignment for specific screen like this:
<Stack.Navigator
      initialRouteName="Home">
      <Stack.Screen
        name="Home" 
        component={HomeScreen} 
       options={{headerTitleAlign: 'center'}}/>
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
2) NativeBase UI:
If you are using native base ui header tag then you can align header title to center like this:
<Container>
      <Header>
        <Left style={{flex: 0.1}} />
        <Body style={{flex: 1, alignItems: 'center'}}>
          <Title>Home</Title>
        </Body>
        <Right style={{flex: 0.1}} />
      </Header>
      <Content>
        <Text>
          // Content Here
        </Text>
      </Content>
    </Container>
I have attached the link from youtube channel too. Please find the video here.


I find those two ways very helpful personally. You can choose any one of them which suits you. I hope you like tutorial on how to align header title center in the React Native app for Android and iOS. If you have any questions or you want to get a tutorial on some topic, you can comment below.

There will be more posts coming soon. Stay tuned! Bye. 🙂

Post a Comment

0 Comments