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

---

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.

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!

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š 💻

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