|
| 1 | +# React Native Paper |
| 2 | + |
| 3 | +> Material Design components for React Native. |
| 4 | +> See the full documentation at: https://callstack.github.io/react-native-paper/ |
| 5 | + |
| 6 | +## Getting Started |
| 7 | + |
| 8 | +- Install: npm install react-native-paper react-native-safe-area-context |
| 9 | +- Wrap your app with PaperProvider |
| 10 | +- Default theme is Material You (MD3); set theme.version: 2 for MD2 |
| 11 | +- Requires React Native 0.72+ and React 18+ |
| 12 | + |
| 13 | +## Guides |
| 14 | + |
| 15 | +- Getting Started: https://callstack.github.io/react-native-paper/docs/guides/getting-started |
| 16 | +- Theming: https://callstack.github.io/react-native-paper/docs/guides/theming |
| 17 | +- Icons: https://callstack.github.io/react-native-paper/docs/guides/icons |
| 18 | +- Fonts: https://callstack.github.io/react-native-paper/docs/guides/fonts |
| 19 | +- React Native Web: https://callstack.github.io/react-native-paper/docs/guides/react-native-web |
| 20 | +- Migration to v5: https://callstack.github.io/react-native-paper/docs/guides/migration-guide-to-5.0 |
| 21 | +- Recommended Libraries: https://callstack.github.io/react-native-paper/docs/guides/recommended-libraries |
| 22 | +- Contributing: https://callstack.github.io/react-native-paper/docs/guides/contributing |
| 23 | +- Bottom Navigation: https://callstack.github.io/react-native-paper/docs/guides/bottom-navigation |
| 24 | +- Ripple Effect: https://callstack.github.io/react-native-paper/docs/guides/ripple-effect |
| 25 | + |
| 26 | +## Components |
| 27 | + |
| 28 | +- ActivityIndicator: https://callstack.github.io/react-native-paper/docs/components/ActivityIndicator |
| 29 | +- Appbar: https://callstack.github.io/react-native-paper/docs/components/Appbar |
| 30 | +- Avatar: https://callstack.github.io/react-native-paper/docs/components/Avatar |
| 31 | +- Badge: https://callstack.github.io/react-native-paper/docs/components/Badge |
| 32 | +- Banner: https://callstack.github.io/react-native-paper/docs/components/Banner |
| 33 | +- BottomNavigation: https://callstack.github.io/react-native-paper/docs/components/BottomNavigation |
| 34 | +- Button: https://callstack.github.io/react-native-paper/docs/components/Button |
| 35 | +- Card: https://callstack.github.io/react-native-paper/docs/components/Card |
| 36 | +- Checkbox: https://callstack.github.io/react-native-paper/docs/components/Checkbox |
| 37 | +- Chip: https://callstack.github.io/react-native-paper/docs/components/Chip |
| 38 | +- DataTable: https://callstack.github.io/react-native-paper/docs/components/DataTable |
| 39 | +- Dialog: https://callstack.github.io/react-native-paper/docs/components/Dialog |
| 40 | +- Divider: https://callstack.github.io/react-native-paper/docs/components/Divider |
| 41 | +- Drawer: https://callstack.github.io/react-native-paper/docs/components/Drawer |
| 42 | +- FAB: https://callstack.github.io/react-native-paper/docs/components/FAB |
| 43 | +- HelperText: https://callstack.github.io/react-native-paper/docs/components/HelperText |
| 44 | +- IconButton: https://callstack.github.io/react-native-paper/docs/components/IconButton |
| 45 | +- Icon: https://callstack.github.io/react-native-paper/docs/components/Icon |
| 46 | +- List: https://callstack.github.io/react-native-paper/docs/components/List |
| 47 | +- Menu: https://callstack.github.io/react-native-paper/docs/components/Menu |
| 48 | +- Modal: https://callstack.github.io/react-native-paper/docs/components/Modal |
| 49 | +- Portal: https://callstack.github.io/react-native-paper/docs/components/Portal |
| 50 | +- ProgressBar: https://callstack.github.io/react-native-paper/docs/components/ProgressBar |
| 51 | +- RadioButton: https://callstack.github.io/react-native-paper/docs/components/RadioButton |
| 52 | +- Searchbar: https://callstack.github.io/react-native-paper/docs/components/Searchbar |
| 53 | +- SegmentedButtons: https://callstack.github.io/react-native-paper/docs/components/SegmentedButtons |
| 54 | +- Snackbar: https://callstack.github.io/react-native-paper/docs/components/Snackbar |
| 55 | +- Surface: https://callstack.github.io/react-native-paper/docs/components/Surface |
| 56 | +- Switch: https://callstack.github.io/react-native-paper/docs/components/Switch |
| 57 | +- Text: https://callstack.github.io/react-native-paper/docs/components/Text |
| 58 | +- TextInput: https://callstack.github.io/react-native-paper/docs/components/TextInput |
| 59 | +- TouchableRipple: https://callstack.github.io/react-native-paper/docs/components/TouchableRipple |
| 60 | +- Tooltip: https://callstack.github.io/react-native-paper/docs/components/Tooltip |
| 61 | + |
| 62 | +## Theming |
| 63 | + |
| 64 | +- Theme object accepts colors, dark, roundness, fonts, animation, and version properties |
| 65 | +- Use useTheme() hook or ThemeProvider for nested theme overrides |
| 66 | +- MD3 (Material You) is the default; set version: 2 for MD2 compatibility |
| 67 | +- See theming guide: https://callstack.github.io/react-native-paper/docs/guides/theming |
| 68 | + |
| 69 | +## Provider Pattern |
| 70 | + |
| 71 | +- Wrap root component with PaperProvider (required) |
| 72 | +- PaperProvider accepts an optional theme prop |
| 73 | +- Supports theming with React Navigation via react-native-paper theming integration |
| 74 | + |
| 75 | +## Important Notes |
| 76 | + |
| 77 | +- This is a cross-platform library (iOS, Android, web) |
| 78 | +- Built with TypeScript |
| 79 | +- MIT licensed |
| 80 | +- Maintained by Callstack |
0 commit comments