How to install react-native-paper library in react native project?

React-native-paper is a community package which is used to add material design theme in mobile apps. It works in both Android and iOS applications.

In this article we will see how to install react-native-paper and it’s dependency libraries.

Installation

Step 1: Install react-native-paper library

Use the below command to install the library. I am including both npm and yarn commands.

// Yarn 👇 
yarn add react-native-paper

// Npm 👇 
npm install react-native-paper

Step 2: Install react-native-vector-icons and link it

// Npm 👇 
npm install react-native-vector-icons

// Yarn 👇 
yarn add react-native-vector-icons

// Linking (If required) 👇 
react-native link react-native-vector-icons

How to include paper in project files?

If you are not using Redux, then wrap the <App> component inside the <Provider> component from react-native-paper. Like this –

import * as React from 'react';
import { AppRegistry } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { name as appName } from './app.json';
import App from './src/App';

export default function Main() {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);

If you are using Redux, then wrap the paper provider in redux provider, so that the state can be managed over paper too.

import * as React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { Provider as StoreProvider } from 'react-redux';
import App from './src/App';
import store from './store';

export default function Main() {
  return (
    <StoreProvider store={store}>
      <PaperProvider>
        <App />
      </PaperProvider>
    </StoreProvider>
  );
}

AppRegistry.registerComponent(appName, () => Main);