How can I center the title in Appbar.Header in react-native-paper?

react-navigation allows passing a component for title instead of a string, so we can do the same thing here:

I wrote an example that accepts a custom title component and can be used wherever we want:

import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';

const ContentTitle = ({ title, style }) => (
  <Appbar.Content
    title={<Text style={style}> {title} </Text>}
    style={{ alignItems: 'center' }}
  />
);

const App = () => (
  <Appbar.Header> 
    <Appbar.Action icon="close" onPress={() => this.close()} />
    <ContentTitle title={'Title'} style={{color:'white'}} />
    <Button mode="text" onPress={() => this.submit()}>
      DONE
    </Button>
  </Appbar.Header>
);

export default App;

You can check: https://snack.expo.io/r1VyfH1WL

There is 2 approach for this.

First, The Appbar.Content has marginLeft applied to it. So, you just need to set the marginLeft to 0.

<Appbar.Header>
  <Appbar.BackAction />
  <Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
  // Put empty action here or any action you would like to have
  <Appbar.Action/>
</Appbar.Header>

Sadly, this approach only allowed one menu action on the right. (or have an equal amount of actions both left and right, but I think only one menu action will be on the left side, that is back button)

Second, make the Appbar.Content has an absolute position. And yes, keep the marginLeft to 0.

<Appbar.Content title='Title' 
  style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }} 
  titleStyle={{ alignSelf: 'center' }} />

We need to set the zIndex to -1 (or lower) so the button/menu action is clickable. This way, you can have more than one menu actions.

The first way is simple but limited, while the second way is powerful but more code to write.

You have to use titleStyle instead of style to center the text. The below code is working for me.

<Appbar.Header>
  <Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>

There is also a similar subtitleStyle for styling the subtitle. Check the docs for more info.