welcome to XRM blog

Keep in touch with latest CRM/ERP articles

To remain competitive your organisation must be efficient across the business process spectrum. To do so you need to take sound decisions based on a balance between the cost and risk. To do so you will be heavily dependent on your content management in itself needs...

image
Blog

React Native + React Native Paper: App Bar Header

By Himanshu Yadav on 4/24/2020

- 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

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

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>

  );

}


 


Blog Calendar
Blog Calendar List
2020 Apr  10  3
2020 Feb  18  4
2020 Jan  22  7
2019 Dec  15  4
2019 Nov  11  1
2019 Jan  31  3
2018 Dec  31  4
2018 Nov  66  3
2018 Oct  12  3
2018 Sep  192  11
2018 Aug  6  2
2018 Jun  11  1
2018 Jan  53  2
2017 Sep  544  5
2017 Aug  17  1
2017 Jul  17  2
2017 Jun  51  2
2017 May  21  1
2017 Apr  32  2
2017 Mar  118  4
2017 Feb  411  4
2016 Dec  177  3
2016 Nov  367  8
2016 Oct  240  10
2016 Sep  362  6
2016 Aug  39  1
2016 Jun  1754  6
2016 May  104  3
2016 Jan  70  2
2015 Dec  392  6
2015 Nov  4  1
2015 Oct  13  1
2015 Sep  1320  6
2015 Aug  13  1
2015 Jul  124  2
2015 Jun  10  1
2015 May  20  1
2015 Apr  28  3
2015 Mar  78  3
2015 Jan  5195  4
2014 Dec  17  1
2014 Nov  2212  4
2014 Oct  63  1
2014 Sep  104  2
2014 Aug  3993  1
2014 Jul  46  2
2014 Apr  2459  12
2014 Mar  284  19
2014 Feb  237  8
2014 Jan  1510  16
2013 Dec  21  2
2013 Nov  635  2
2013 Oct  250  3
2013 Sep  11  1
2013 Aug  37  3
2013 Jul  207  1
2013 Apr  49  6
2013 Mar  1827  10
2013 Feb  302  4
2013 Jan  262  2
2012 Nov  32  2
2012 Oct  444  10
Tag Cloud
Interested in our services? Still not sure about project details? get a quote