React Native Paper — Material Design Components for React Native

Introduction

React Native Paper is a collection of customizable, production-ready components for React Native that follow Google's Material Design 3 specification. Maintained by Callstack, it supports Android, iOS, and web through react-native-web. The library focuses on accessibility and theming out of the box.

What React Native Paper Does

• Provides 30+ Material Design 3 components (Button, Card, TextInput, FAB, etc.)
• Ships a theming engine for light and dark modes with automatic color scheme adaptation
• Supports dynamic color theming based on Material You on Android 12+
• Integrates with React Navigation for consistent app bars and bottom navigation
• Renders on web via react-native-web without additional configuration

Architecture Overview

Each component is a self-contained React Native module that reads theme values from a React context provided by PaperProvider. The theming layer follows the Material Design 3 token system, mapping design tokens to component styles. Surface components handle elevation through shadow calculations on iOS and Android, while accessibility props are baked into each component's implementation.

Self-Hosting & Configuration

• Install the package and its peer dependencies (safe-area-context, vector-icons)
• Wrap the app root with PaperProvider to inject the theme context
• Customize themes by merging overrides into the default light or dark theme
• Use Babel plugin for optional tree shaking of unused components
• Works with Expo (managed and bare workflows) without ejecting

Key Features

• Full Material Design 3 (Material You) specification compliance
• Built-in dark mode with automatic contrast adjustments
• Comprehensive TypeScript definitions for all components and theme tokens
• Accessible by default with proper ARIA roles and screen reader support
• Maintained by Callstack with 13k+ GitHub stars and regular releases

Comparison with Similar Tools

• NativeBase — more components but was sunsetted in favor of gluestack-ui; Paper remains actively maintained
• React Native Elements — community-driven with its own design; Paper follows Material Design closely
• Tamagui — universal UI with compiler optimizations; Paper focuses specifically on Material Design compliance
• Gluestack UI — NativeBase successor with a performance focus; Paper has a longer track record and larger community

FAQ

Q: Does React Native Paper work with Expo? A: Yes. It works with both managed and bare Expo workflows without ejecting.

Q: Can I use custom fonts with Paper components? A: Yes. Pass a custom fonts configuration to the theme object to override the default typography.

Q: Does it support Material Design 3? A: Yes. Version 5.x implements the full Material Design 3 specification including dynamic color.

Q: Is web rendering supported? A: Yes. Components render on the web through react-native-web with no extra configuration required.

Sources

• https://github.com/callstack/react-native-paper
• https://callstack.github.io/react-native-paper/