node package manager


React Native Paper · Build Status Version MIT License Chat

Material design for React Native.


Currently supported React Native version: >= 0.50.3

Try it out

Run the example app with Expo to see it in action.

Getting Started


Open a Terminal in your project's folder and run,

npm install --save react-native-paper react-native-vector-icons

After installation, you'll need to link react-native-vector-icons.


Wrap your root component in Provider from react-native-paper. It's a good idea to wrap the component which is passed to AppRegistry.registerComponent.


import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';
function Main() {
  return (
      <App />
AppRegistry.registerComponent('main', () => Main);

The PaperProvider component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.


You can provide a custom theme to customize the colors, fonts etc. with the Provider component. Check the default theme to see what customization options are supported.


import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
const theme = {
  colors: {
    primary: 'tomato',
    primaryDark: color('tomato').darken(0.2).rgb().string(),
    accent: 'yellow',
function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />


Check all the components and its usage in our docs page.