0

I am using react native paper library for Appbar.

It is nice when I am showing Title and back and and menu is disabled.

Problem occurred when I enable back icon. Text slightly moving to right

here title is okay

In next image problem is showing - Title moved slightly

And the code I have done is,

const ContentTitle = ({ title, style }) => (
 <Appbar.Content
      title={<Text style={style}> {title} </Text>}
      style={{ alignItems: 'center' }}
 />
`<Appbar.Header 
    style={{ backgroundColor: CONSTANTS.COLOR.BASE_COLOR }}>
     <Appbar.BackAction color="white" onPress={() => this.props.navigation.pop()} />
      <ContentTitle titleStyle={{ textAlign: 'center' }} title={'History'} style={{ color: 'white', alignSelf: 'centered' }} />
</Appbar.Header>`);

What changes should I do to place title in center when back icon is enabled?

NB: Basically I am getting this problem for android device.

Exigente05
  • 2,161
  • 3
  • 22
  • 42

1 Answers1

1

You can set appbar.BackAction to style={{ position: "absolute" }}

buddemat
  • 4,552
  • 14
  • 29
  • 49
Matt
  • 115
  • 1
  • 15