React Native Paper

Theme by Callstack

|

Updated: 20 May 2025

|

13651 Stars

Material Design for React Native (Android & iOS)

Categories

Overview

The react-native-paper project is an open-source library that allows developers to build mobile apps using React Native. It follows the material design guidelines and works on both iOS and Android platforms. The project is sponsored by Callstack and is made with love by React and React Native geeks.

Features

• Follows material design guidelines.
• Works on both iOS and Android platforms.
• Full theming support.
• Example app with Expo to see it in action.
• Demo apps available in both the Android and iOS stores.
• Figma and Sketch component kits provided by Material Design.
• Open source project that is always free to use.

Installation

To install react-native-paper, you can follow the getting started guide on their website. Here are the basic steps:

1. Install the package using npm or yarn:

npm install react-native-paper

2. Import the necessary components in your project:

import { Button, Text } from 'react-native-paper';

3. Use the components in your app code:

const App = () => (
  <View style={styles.container}>
    <Text>Hello World!</Text>
    <Button mode="outlined">Click Me</Button>
  </View>
);

4. Customize the theme by using the provided theming support:

import { Provider as PaperProvider } from 'react-native-paper';

const App = () => (
  <PaperProvider theme={customTheme}>
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <Button mode="contained" color="blue">Click Me</Button>
    </View>
  </PaperProvider>
);

5. Run your app using Expo or any other React Native development environment.

Summary

The react-native-paper project is a popular open-source library that provides developers with the tools to build mobile apps using React Native. It offers full theming support and follows material design guidelines, making it a suitable choice for creating visually appealing and user-friendly mobile applications. The project is sponsored by Callstack, a group of React and React Native geeks, and is always free to use. Developers can also take advantage of the provided component kits and demo apps to quickly prototype and test their applications.