react-native-paper/docs/pages/1.getting-started.md

title, permalink

title	permalink
Getting Started	index

Installation

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.

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 * as 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 * as React from 'react';
import { AppRegistry } from 'react-native';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import color from 'color';
import App from './src/App';

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>
  );
}