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:
      initialRouteName="Home"screenOptions={{headerTitleAlign: 'center'}}>
        component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
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:
       options={{headerTitleAlign: 'center'}}/>
      <Stack.Screen name="Profile" component={ProfileScreen} />
2) NativeBase UI:
If you are using native base ui header tag then you can align header title to center like this:
        <Left style={{flex: 0.1}} />
        <Body style={{flex: 1, alignItems: 'center'}}>
        <Right style={{flex: 0.1}} />
          // Content Here
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