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

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.

The source code for the examples are under the /example folder.

Getting Started

Refer to the getting started guide for instructions.

Documentation

Check the components and their usage in our documentation.

Contributing

Read the contribution guidelines before contributing.