Thursday 16 January 2020

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

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?



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

No comments:

Post a Comment