React Native Paper Patterns

Quick Guide: React Native Paper v5+ provides Material Design 3 (Material You) components for React Native. Wrap your app in PaperProvider (MD3 is the default). Use useTheme() to access colors/fonts. Wrap Dialogs in Portal. Use the babel plugin for production bundle optimization. For BottomNavigation with React Navigation, use BottomNavigation.Bar as a custom tabBar (the old createMaterialBottomTabNavigator is deprecated). On Android 12+, use expo-material3-theme for system dynamic colors.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST wrap your app root in PaperProvider - all Paper components require the provider context to function)

(You MUST wrap Dialog, Menu, and similar overlay components in Portal - without it they render inline instead of above other content)

(You MUST use useTheme() to access theme colors and fonts in components - never hardcode Material Design color values)

(You MUST add react-native-paper/babel to production plugins for bundle optimization - without it the entire library is included)