explaingit

callstack/react-native-paper

★ 14,370TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

Ready-made Material Design UI components for React Native, drop in buttons, cards, dialogs, and more for iOS and Android with full theming and dark mode support.

Mindmap

mindmap
  root((react-native-paper))
    What it does
      Material Design components
      Theming support
      Dark mode
    Tech Stack
      TypeScript
      React Native
      JavaScript
    Use Cases
      Mobile app UI
      Cross-platform apps
      Rapid prototyping
    Audience
      Mobile developers
      React Native teams
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add Material Design buttons, cards, and dialogs to a React Native app without designing them from scratch.

USE CASE 2

Switch your entire app between light and dark modes by changing a single theme configuration object.

USE CASE 3

Build a cross-platform mobile app for iOS and Android with a consistent, polished visual style out of the box.

USE CASE 4

Prototype a mobile app UI quickly using pre-built, production-tested components without custom styling.

Tech stack

TypeScriptReact NativeJavaScript

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial apps, as long as you keep the copyright notice.

In plain English

React Native Paper is an open-source library of user interface components for building mobile apps using React Native. React Native is a framework that lets you write one codebase in JavaScript or TypeScript and run it on both iOS and Android. React Native Paper adds a ready-made set of visual components, such as buttons, cards, dialogs, navigation bars, and form inputs, all styled according to Material Design, which is Google's system of guidelines for creating consistent, visually coherent app interfaces. The value of a component library like this is that developers do not have to design and build common UI elements from scratch for every app. Instead, they import components from the library, configure them with options, and drop them into their layouts. Because Paper follows Material Design, the resulting apps look polished and familiar to users who are accustomed to Android and Google apps, while also adapting appropriately for iOS. The library includes full theming support, meaning you can adjust colors, typography, and other visual properties across your entire app by changing a central theme configuration. Components adapt to both light and dark modes. The library is described as production-ready, meaning it has been used in real apps and is maintained to a level of stability suitable for shipping to users. React Native Paper is maintained by Callstack, a consulting and development company specializing in React and React Native. The project is free to use under the MIT license. Demo apps showing the components in action are available in both the Google Play Store and the Apple App Store, and an interactive Expo-based example can be tested directly in a browser without setting up a development environment.

Copy-paste prompts

Prompt 1
Using react-native-paper, build a screen with a top app bar, a scrollable list of cards, and a floating action button that follows Material Design guidelines.
Prompt 2
Set up a custom theme in react-native-paper that uses my brand colors and supports both light and dark mode automatically.
Prompt 3
Build a login form using react-native-paper TextInput and Button components with validation error messages shown below each field.
Prompt 4
Show me how to implement a confirmation dialog with react-native-paper Portal that appears on a button press and dismisses on confirm or cancel.
Prompt 5
Convert this plain React Native View-based layout to use react-native-paper components, keeping the same functionality.
Open on GitHub → Explain another repo

← callstack on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.