React Native Paper ·

Material design for React Native.

Features

• Follows material design guidelines
• Works on both iOS and Android following platform adaptation guidelines
• Full theming support

Currently supported React Native version: >= 0.50.3

Try it out

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

Getting Started

Installation

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

yarn add react-native-paper react-native-vector-icons

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

Usage

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.

Example:

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 (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

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.

Customization

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.

Example:

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

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'tomato',
    primaryDark: color('tomato').darken(0.2).rgb().string(),
    accent: 'yellow',
  },
};

function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

Components

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