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.
reactnativepaper.com

---

React Native Paper is the cross-platform UI kit library containing a collection of customizable and production-ready components, which by default are following and respecting the Google’s Material Design guidelines.

Getting Started

Refer to the getting started guide for instructions.

Documentation

Check the components and their usage in our documentation.

Features

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

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.

📲 You can also try out components in our demo apps available in the both stores Android and iOS.

Contributing

Read the contribution guidelines before contributing.

Figma and Sketch component kits

Use official component kits provided by Material Design.

Made with ❤️ at Callstack

react-native-paper is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [e-mail] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥

Contributors

Thanks goes to these wonderful people (emoji key):

Satyajit Sahoo 🤔 💻 📖	Ferran Negre 🤔 💻	Dawid 🤔 💻 📖	Kacper Wiszczuk 🤔 💻	Luke Walczak 💻 📖	Ahmed Elhanafy 🤔 💻	K. P. Sroka 💻 📖
Iyad Thayyil 💻 📖	Julian Hundeloh 💻 📖	Grzegorz Gawrysiak 💻 📖	Luís 💻	Rajendran Nadar 💻	Brent Vatne 💻	Jakub Beneš 💻
Paweł Szymański 💻 📖	Kuba 💻 🤔	jbinda 💻 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!