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

user_5840313 0
Viewed 8554

As you can see in the docs, the default positioning for the title in react-native-paper is left-aligned. I've seen multiple questions and answers about how to implement a centered title both for Android Native as well as React Native's StackNavigator, but I am having no luck pulling off the same effect with react-native-paper.

So far I have tried using the style parameter in Appbar.Header to pass in { textAlign: 'center' } or { flexDirection: 'row', justifyContent: 'space-between' }, but nothing seems to work. I'm not very impressed with react-native-paper's lack of documentation on overrides, but I still hope there's a way to do what I'm looking for.

const styles = { header: { textAlign: 'center' }}

<Appbar.Header style={styles.header}>
  <Appbar.Action icon="close" onPress={() => this.close()} />
  <Appbar.Content title={title} />
  <Button mode="text" onPress={() => this.submit()}>
    DONE
  </Button>
</Appbar.Header>

Considering title accept a node, it can be used to display a react component.

How can I force center the title on all devices?

material-design react-native reactjs css javascript
6 Answers

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

user_39521800

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.

user_14155820

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.

user_114887900

For 'react-native-paper', this snippet worked for me:

<Button    
style = {{justifyContent: 'center'}}
>
Press
</Button>
user_117376590

This should align both text/node title:

    <Appbar.Content
      title={<Text>title</Text>}
      style={{ alignItems: 'center' }}
    />

See https://snack.expo.io/rJUBIR6lU

user_56488830 
 <Appbar>
    <Appbar.Content titleStyle={{alignSelf: 'center'}} title='something'  />
  </Appbar>
user_130146410
Related