Example of React Native Paper Installation Guide Chapter

Hello friends, This is our first tutorial on a new material style react native library React Native Paper. As we all know material style designs is very popular among mobile developers because of their rich and clean look. The material style design first introduced in Android with Java. Now most of users wants their mobile app designed into Material Look. So here comes our React Native Paper library comes in action. This library has amazing components covering almost our designing need. So from now on we would trying our best to cover their whole component section one by one. In today’s tutorial we would simply taught you How you can install the react native paper package using NPM and YARN. We would also share a simple source code with you. So in this tutorial we would learn about Example of React Native Paper Installation Guide Chapter – 1.

Contents in this project Example of React Native Paper Installation Guide Chapter – 1 :-

1. To Install React Native Paper in our react native project, Open your react native project Root directory location into Command Prompt in Windows and Terminal in MAC and execute below command.

<br />
npm install react-native-paper

1	npm install react–native–paper

<br />
yarn add react-native-paper

1	yarn add react–native–paper

I’m using NPM to install the package, You can use Yarn also as per your choice.

Screenshot :-

Screenshot after done installation :-

2. This library is using React Native Vector Icons, So we also have to install the Vector Icon package in our project. The vector icon package required some modification in internal files to work it properly with Android and iOS. I have already made a tutorial explaining full setup of React Native Vector Icons Here.

3. This Step is only for Android users. After installing all the things we have to clean and rebuilt our Gradlew file again. So execute below command.

<br />
cd android && gradlew clean && cd..

1	cd android && gradlew clean && cd..

4. This Step is only for iOS users. We have to Install PODS and connect with newly downloaded packages.

<br />
cd ios && pod install && cd ..

1	cd ios && pod install && cd ..

5. Now we are ready to go. Now for now I’m just sharing a simple code. In which we are creating only a button using React Native Paper package. But we will cover all of their components one by one in our upcoming tutorials. So stay tuned for more.

6. Complete Source Code for App.js file :-

<br />
import * as React from ‘react’;</p>
<p>import { Button, Provider as PaperProvider } from ‘react-native-paper’;</p>
<p>import { Alert, StyleSheet, SafeAreaView } from ‘react-native’;</p>
<p>export default function Main() {</p>
<p>  return (<br />
    <PaperProvider></p>
<p>      <SafeAreaView style={styles.MainContainer}></p>
<p>        <Button icon=”camera”<br />
          mode=”contained”<br />
          style={styles.buttonStyle}<br />
          onPress={() => Alert.alert(‘Button Pressed…’)}><br />
          Press me<br />
        </Button></p>
<p>      </SafeAreaView></p>
<p>    </PaperProvider><br />
  );<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>  buttonStyle: {<br />
    width: 200,<br />
    height: 45,<br />
    alignItems: ‘center’,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>});

import * as React from ‘react’;

import { Button, Provider as PaperProvider } from ‘react-native-paper’;

import { Alert, StyleSheet, SafeAreaView } from ‘react-native’;

export default function Main() {

return (

<Button icon=“camera”

mode=“contained”

style={styles.buttonStyle}

onPress={() => Alert.alert(‘Button Pressed…’)}>

Press me

</Button>

</SafeAreaView>

</PaperProvider>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

buttonStyle: {

width: 200,

height: 45,

alignItems: ‘center’,

justifyContent: ‘center’,

alignItems: ‘center’,

});

Screenshots :-

Example of React Native Paper Installation Guide Chapter – 1

Contents in this project Example of React Native Paper Installation Guide Chapter – 1 :-

Also Read :

Recent Posts

Search Here