React Native Paper

It is a high-quality, standard compliant Material Design library that you can use in all major scenerios. If you are a programmer and have no design skills but you want to build an app with good design, here is a better way to do it. It is to use component libraries or use react-native-paper. React Native Paper has a collection of customizable production ready components for React Native. It follows Google’s Material Design guidelines and keeps a standard. It is very helpful to build an application with a good UI and implement the standard design principles. 

                                   To install react-native-paper open your terminal and type the following command.

yarn add react-native-paper
Or
npm install react-native-paper

If you are working on a Vanilla React Native project install and link react-native-vector-icons to your application. React native paper internally uses some MaterialCommunity Icons pack so make sure you have them.

yarn add react-native-vector-icons
react-native link react-native-vector-icons

If you are using babel.config.js or babelrc file in the app, confirm that it has babel-present-expo in it. You can use babel plugin for removing the modules you don't use to reduce bundle size. It automatically rewrites import statements to import only the used modules. Add this plugin react-native-paper/babel to plugins in babel.config.js file. This will be like given below. 

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

Using react-native-paper

To use react-natve-paper wrap your root components in Provider from react-native-paper. If your project is in Vanilla React add it in a component passed to AppRegistry.registerComponent. The paperProvider component will provide themes to all components in the framework. It will work as a portal to components which are rendered at top level.  

Here is how to use react-native-paper when you have another provider.

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>

  );

}


The following is an example of how to provide a custom theme.


import * as React from 'react';

import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';

import App from './src/App';


const theme = {

  ...DefaultTheme,

  colors: {

    ...DefaultTheme.colors,

    primary: 'tomato',

    accent: 'yellow',

  },

};


export default function Main() {

  return (

    <PaperProvider theme={theme}>

      <App />

    </PaperProvider>

  );

}