React native paper Appbar.Header not styling properly

user_14570211 0
Viewed 1065

I am creating a chat app and I wanted to have a custom header. I am using React Navigation that is working fine and the header is functioning properly but not styling properly. I am using React Native Paper for custom header. My code is ( just copied from website to make sure that everyone thing works fine which obviously not ):

<Appbar.Header>
    <Appbar.BackAction />
    <Appbar.Content title="Title" subtitle="Subtitle" />
    <Appbar.Action icon="magnify" />
    <Appbar.Action icon="dots-vertical" />
</Appbar.Header>

It is supposed to work like this: Picture of header on React Native Paper website But on my Android Device it look like this: Picture of header on My Android Device

react-native reactjs
1 Answers

Add some padding to the Appbar.Header like this:

<Appbar.Header style={{padding:40}}>
    <Appbar.BackAction />
    <Appbar.Content title="Title" subtitle="Subtitle" />
    <Appbar.Action icon="magnify" />
    <Appbar.Action icon="dots-vertical" />
</Appbar.Header>

Working Example on Snack

user_98203150
Related