react-native-paper

What is react-native-paper?

react-native-paper is a high-quality, standard-compliant Material Design library that provides a set of customizable and easy-to-use components for building React Native applications. It aims to deliver a consistent and cohesive look and feel across different platforms.

What are react-native-paper's main functionalities?

Button

The Button component allows you to create buttons with various styles and behaviors. In this example, a button with a camera icon and 'contained' mode is created, which logs 'Pressed' when clicked.

import * as React from 'react';
import { Button } from 'react-native-paper';

const MyComponent = () => (
  <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>Press me</Button>
);

Card

The Card component is used to display information in a structured and visually appealing way. This example shows a card with a title and a paragraph of content.

import * as React from 'react';
import { Card, Title, Paragraph } from 'react-native-paper';

const MyComponent = () => (
  <Card>
    <Card.Content>
      <Title>Card Title</Title>
      <Paragraph>Card content goes here.</Paragraph>
    </Card.Content>
  </Card>
);

TextInput

The TextInput component provides a way to capture user input. This example demonstrates a text input field with a label 'Email' and a state to manage the input value.

import * as React from 'react';
import { TextInput } from 'react-native-paper';

const MyComponent = () => {
  const [text, setText] = React.useState('');

  return (
    <TextInput
      label="Email"
      value={text}
      onChangeText={text => setText(text)}
    />
  );
};

Appbar

The Appbar component is used to create a top navigation bar. This example includes a back action, a title with a subtitle, and two action icons.

import * as React from 'react';
import { Appbar } from 'react-native-paper';

const MyComponent = () => (
  <Appbar.Header>
    <Appbar.BackAction onPress={() => {}} />
    <Appbar.Content title="Title" subtitle="Subtitle" />
    <Appbar.Action icon="magnify" onPress={() => {}} />
    <Appbar.Action icon="dots-vertical" onPress={() => {}} />
  </Appbar.Header>
);

Other packages similar to react-native-paper

react-native-elements

react-native-elements is a UI toolkit for React Native that provides a set of customizable components. It is similar to react-native-paper but offers a different set of components and styling options. It is known for its ease of use and flexibility.

native-base

native-base is another UI component library for React Native that focuses on providing a consistent look and feel across different platforms. It offers a wide range of components and is highly customizable. Compared to react-native-paper, native-base provides more flexibility in terms of theming and component customization.

react-native-material-ui

react-native-material-ui is a library that implements Material Design guidelines for React Native. It provides a set of components that adhere to Material Design principles. While it is similar to react-native-paper, it may not be as feature-rich or actively maintained.

README

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',
    accent: 'yellow',
  },
};

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

Components

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