6 steps to get started with React Native Paper in react native

Developing React Native boilerplate with React Native Paper

Under the Hood

While working on a React Native project you have to depend on a third party for UI elements. I’ve covered a story for the Top 5 UI libraries for react-native and in today’s story we will develop a boilerplate for the first UI library that is react-native-paper.

Overview

Let me start with React Native Paper. It is the react-native UI library with almost 10K Github stars. Developed by Callstack a Europe based react native development company. React Native Paper provides almost all the required UI elements with in-built theme support. It is easy to install and easy to customize the theme with pre-installed react-native-vector-icons to help you work with icons in react-native.

Getting Started

The first and foremost step is to install the library and wrap its HOC to the root of our react-native project, similar, to what we used to do in react applications or while working with Redux.

yarn add react-native-paper

Import the Provider HOC exported by react-native-paper and wrap it to the root element of our project. I prefer to do these steps in the App.js file which is the entry file of our react-native project.

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

const App = () => { 
 return ( 
  <PaperProvider> 
    <App /> 
  </PaperProvider> 
)};

export default App;

Extending default theme

Remember I told you earlier that “react-native-paper provides a way to customize the theme” accordingly. Paper provides you with a default theme object containing the entire theme object so we can create a new theme while extending the default theme. Once the extended theme is created we just have to provide our new theme object to the PaperProvider HOC as a prop name theme only.

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

const App = () => {    
 const theme = {       ...DefaultTheme,       colors: {                 ...DefaultTheme.colors,               primary: '#3498db',               accent: '#f1c40f',           },    };    return (       <PaperProvider theme={theme}>         <App />       </PaperProvider>      );};

export default App;

Final Product

There is no such final product I’ve developed but we have created a boilerplate out of it. The whole idea of writing these codes is to provide boilerplates with world-class professionally accepted architecture to help developers learn from it. You can grab more such boilerplates from here.

https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogsMobile/React%20Native%20Paper%20Boilerplate

see you in the next one

Shrey