welcome to XRM blog

- Create new expo project, open command prompt create a folder and execute below command
expo init beautifulappbar
- Open project into code editor (I’m using Visual Studio Code)
- Open Terminal and run below command
npm install react-native-paper
- Add below line to your current .js file
import { Appbar } from 'react-native-paper';
- Add below code to your function

export default function App() {
return (
<View>
<Appbar.Header>
<Appbar.Content
title="Title"
/>
</Appbar.Header>
</View>
);
}

That’s it, you can see output by executing command: expo start
You can also add more..,
You can set subtitle:

<Appbar.Content title="Title" subtitle="Subtitle"/>

You can also add icon buttons to header

Complete Code:

import React from 'react';

import { View } from 'react-native';

import { Appbar } from 'react-native-paper';

 

export default function App() {

  return (

    <View>

      <Appbar.Header>

        <Appbar.Content

          title="Title"

          subtitle="Subtitle"

        />

        <Appbar.Action icon="magnify" onPress={()=>console.log("Search..")} />

        <Appbar.Action icon="dots-vertical" onPress={()=>console.log("Show more..")} />

      </Appbar.Header>

    </View>

  );

}