Skip to content
Get packs

Guide · Open source

How to use react-native-paper: setup, components and theming

Updated · written with AI from the project's own documentation and checked against our catalogue data

React Native Paper is a UI kit for React Native that provides customizable components following Google's Material Design guidelines. This guide explains what it is, what you need before starting, and how to get productive with its components and theming. By the end you will know where to find the official setup instructions, how the library adapts to Android and iOS, and how to decide whether it fits your project.

React Native Papercallstack/react-native-paper · ★ 14.5k · MIT

Quick start

  1. 1Confirm you have a React Native project. React Native Paper is built for React Native, so start with an existing project.
  2. 2Open the getting started guide. Follow the official installation instructions linked from the README.
  3. 3Review the example app. Run the Expo example Snack or read the code in the /example folder to see components in use.
  4. 4Browse the component reference. Find the components you need in the documentation and check their usage.
  5. 5Apply your theme. Use the theming guide to set colours and styles that match your brand.
  6. 6Check platform behaviour on Android and iOS. Test on both platforms, since the library adapts components to each platform's conventions.

What react-native-paper is and what it gives you

React Native Paper is a cross-platform UI kit. Its components are designed to be production-ready and, by default, follow Google's Material Design guidelines.

Instead of designing every button and form control from scratch, you start from a set of ready-made components that already look consistent. The library is written in TypeScript and is distributed under the MIT licence.

  • Customizable, production-ready components based on Material Design
  • Works on both iOS and Android, following platform adaptation guidelines
  • Full theming support so colours and styles can match your brand

What you need before you install react-native-paper

The main prerequisite is an existing React Native project. The library is built specifically for React Native, so it is not a fit for web-only or other non-React Native projects.

The project's README points to the official getting started guide for installation instructions. Follow that guide for the setup steps that match your project.

  • An existing React Native project
  • Node-based JavaScript tooling as used by your React Native setup
  • The official getting started guide for the install steps

Install and run the example app

The README's own command clones the repository. You can use it to read the source and the examples. The source code for the examples lives in the /example folder of the repository.

To see the components working before you add them to your app, the README suggests running the example app with Expo. It is published as a Snack, so you can open it in the browser.

  • Read the examples in the /example folder of the repository
  • Open the example Snack linked from the README to see components in action
  • Demo apps are also listed in the Android and iOS app stores
git clone https://github.com/callstack/react-native-paper

Use components and theming to match your brand

Components are the core of the library. The documentation describes each component and shows how to use it. Browse the component reference at the documentation site when you need a specific control.

Theming lets you adjust colours and styles so the app reflects your brand rather than the default Material look. The theming guide in the documentation explains how to do this.

  • Check the component reference in the documentation for usage details
  • Read the theming guide to change colours and styles
  • Use the official Material Design component kits from Figma or Sketch for design work

Know the limits before you commit

Because the defaults follow Material Design, teams that want a non-Material visual style will need heavy customization. Plan for that before choosing the library.

If you are considering alternatives, the comparable projects are NativeBase, React Native Elements, Tamagui and React Native UI Kitten. Compare them against your visual goals and your need for platform-specific behaviour.

  • Defaults are Material Design, so a very different look takes more work
  • Comparable projects include NativeBase, React Native Elements, Tamagui and React Native UI Kitten

What people use it for

  • Building a shared Android and iOS app with a single React Native codebase
  • Creating forms, buttons and other controls that look consistent without custom design work
  • Adjusting colours and styles to match an existing brand through theming
  • Prototyping screens with ready-made Material Design components

Frequently asked questions

Is react-native-paper free to use?

Yes. It is open source under the MIT licence, and the README states it will always remain free to use.

What are the requirements for react-native-paper?

You need a React Native project. The library is built specifically for React Native, so it does not apply to projects outside that ecosystem.

How do I install react-native-paper?

The README points to the official getting started guide for installation instructions. The only command the README lists is the one to clone the repository, which is useful for reading the examples.

Does react-native-paper work on iOS and Android?

Yes. The library works on both iOS and Android and follows platform adaptation guidelines so components suit each platform's conventions.

Can I change the look of react-native-paper components?

Yes. The library supports full theming, so you can adjust colours and styles to match your app's brand. The theming guide in the documentation covers the details.

What are alternatives to react-native-paper?

Comparable projects named in the analysis are NativeBase, React Native Elements, Tamagui and React Native UI Kitten. Pick based on whether you want Material Design defaults or a different visual style.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

React Native Paper suits React Native developers and teams who want ready-made Material Design components that work on both Android and iOS, with theming to adjust the look. It is a poor fit for non-React Native projects, for teams wanting a non-Material style with minimal customization, or for non-developers looking for a no-code tool.

Install options & downloads