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.
Material design for React Native.
Features
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.