# React Native Paper — Material Design Components for React Native

> A cross-platform UI component library implementing Material Design guidelines for React Native apps, maintained by Callstack with first-class TypeScript support.

## Install

Save in your project root:

# React Native Paper — Material Design Components for React Native

## Quick Use
```bash
npm install react-native-paper react-native-safe-area-context react-native-vector-icons
# Wrap your app with PaperProvider:
# import { PaperProvider } from 'react-native-paper';
# export default () => <PaperProvider><App /></PaperProvider>;
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-7887c4d3
Author: AI Open Source