{"slug":"mobile-ui-components-react-native-paper","title":"mobile-ui-components-react-native-paper","summary":"React Native Paper v5+ - Material Design 3 theming, PaperProvider, key components, dynamic color, accessibility, tree-shaking, custom fonts, navigation integration","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-29T15:28:16.806459Z","repo":{"url":"https://github.com/agents-inc/skills","stars":24,"forks":8,"license":"MIT","updatedAt":"2026-09-07T17:50:55Z"},"bodyHtml":"<hr>\n<h2>name: mobile-ui-components-react-native-paper\ndescription: React Native Paper v5+ - Material Design 3 theming, PaperProvider, key components, dynamic color, accessibility, tree-shaking, custom fonts, navigation integration</h2>\n<h1>React Native Paper Patterns</h1>\n<blockquote>\n<p><strong>Quick Guide:</strong> React Native Paper v5+ provides Material Design 3 (Material You) components for React Native. Wrap your app in <code>PaperProvider</code> (MD3 is the default). Use <code>useTheme()</code> to access colors/fonts. Wrap Dialogs in <code>Portal</code>. Use the babel plugin for production bundle optimization. For BottomNavigation with React Navigation, use <code>BottomNavigation.Bar</code> as a custom <code>tabBar</code> (the old <code>createMaterialBottomTabNavigator</code> is deprecated). On Android 12+, use <code>expo-material3-theme</code> for system dynamic colors.</p>\n</blockquote>\n<hr>\n<p>&lt;critical_requirements&gt;</p>\n<h2>CRITICAL: Before Using This Skill</h2>\n<blockquote>\n<p><strong>All code must follow project conventions in CLAUDE.md</strong> (kebab-case, named exports, import ordering, <code>import type</code>, named constants)</p>\n</blockquote>\n<p><strong>(You MUST wrap your app root in <code>PaperProvider</code> - all Paper components require the provider context to function)</strong></p>\n<p><strong>(You MUST wrap Dialog, Menu, and similar overlay components in <code>Portal</code> - without it they render inline instead of above other content)</strong></p>\n<p><strong>(You MUST use <code>useTheme()</code> to access theme colors and fonts in components - never hardcode Material Design color values)</strong></p>\n<p><strong>(You MUST add <code>react-native-paper/babel</code> to production plugins for bundle optimization - without it the entire library is included)</strong></p>\n<p>&lt;/critical_requirements&gt;</p>\n<hr>\n<p><strong>Auto-detection:</strong> React Native Paper, react-native-paper, PaperProvider, MD3LightTheme, MD3DarkTheme, useTheme, Portal, FAB, Appbar, BottomNavigation, SegmentedButtons, configureFonts, adaptNavigationTheme, Card, Dialog, Snackbar, TextInput, Button mode, Surface, Chip, Searchbar, ActivityIndicator, Banner, Divider, ProgressBar, Switch, RadioButton, Checkbox, DataTable, Tooltip, Badge, Menu, Drawer.Item</p>\n<p><strong>When to use:</strong></p>\n<ul>\n<li>Setting up PaperProvider with custom MD3 themes (light, dark, dynamic color)</li>\n<li>Using Paper components (Button, Card, TextInput, FAB, Appbar, Dialog, Snackbar, SegmentedButtons)</li>\n<li>Integrating Paper's BottomNavigation.Bar with React Navigation bottom tabs</li>\n<li>Configuring custom fonts with <code>configureFonts</code> for MD3 typography</li>\n<li>Implementing Android 12+ dynamic color theming</li>\n<li>Bridging Paper and React Navigation themes with <code>adaptNavigationTheme</code></li>\n</ul>\n<p><strong>Key patterns covered:</strong></p>\n<ul>\n<li>PaperProvider setup and MD3 theming (light, dark, custom, dynamic color)</li>\n<li>Component usage: Button modes, Card variants, TextInput modes, FAB sizes/variants, Dialog with Portal</li>\n<li>BottomNavigation.Bar integration with React Navigation v7 bottom tabs</li>\n<li>Custom fonts with <code>configureFonts</code> and TypeScript custom text variants</li>\n<li>Bundle optimization with <code>react-native-paper/babel</code> plugin</li>\n<li>Accessibility patterns (built-in a11y props, screen reader support)</li>\n</ul>\n<p><strong>When NOT to use:</strong></p>\n<ul>\n<li>General React Native component architecture (not Paper-specific)</li>\n<li>Navigation patterns beyond BottomNavigation integration (not Paper-specific)</li>\n<li>Custom animations or gestures (not a UI component library concern)</li>\n</ul>\n<p><strong>Detailed Resources:</strong></p>\n<ul>\n<li><a href=\"examples/core.md\">examples/core.md</a> - PaperProvider setup, theming, custom fonts, babel plugin, dynamic color</li>\n<li><a href=\"examples/components.md\">examples/components.md</a> - Button, Card, TextInput, FAB, Appbar, Dialog, Snackbar, SegmentedButtons</li>\n<li><a href=\"examples/navigation-integration.md\">examples/navigation-integration.md</a> - BottomNavigation.Bar with React Navigation, adaptNavigationTheme, Drawer integration</li>\n<li><a href=\"reference.md\">reference.md</a> - Component decision framework, theme color roles, MD3 typography scale</li>\n</ul>\n<hr>\n\n<hr>\n\n<hr>\n<p>&lt;decision_framework&gt;</p>\n<h2>Decision Framework</h2>\n<h3>Component Selection</h3>\n<pre><code>What type of action does the user perform?\n├─ Primary action on screen → FAB (icon=\"plus\" or extended with label)\n├─ High-emphasis button → Button mode=\"contained\"\n├─ Medium-emphasis button → Button mode=\"outlined\" or \"contained-tonal\"\n├─ Low-emphasis button → Button mode=\"text\"\n└─ Segmented choice → SegmentedButtons\n\nWhat type of content container?\n├─ Tappable entry point → Card mode=\"elevated\" with onPress\n├─ Informational group → Card mode=\"outlined\" (non-interactive)\n├─ Elevated surface → Surface elevation={2}\n└─ Dismissable message → Snackbar (with optional action)\n\nWhat type of text input?\n├─ Dense form (many fields) → TextInput mode=\"flat\"\n├─ Prominent input (few fields) → TextInput mode=\"outlined\"\n└─ Search → Searchbar component\n\nWhat type of navigation bar?\n├─ Top of screen → Appbar.Header with Appbar.Content + Appbar.Action\n├─ Bottom tabs (with React Navigation) → BottomNavigation.Bar as tabBar\n└─ Screen header with back → Appbar.Header with Appbar.BackAction\n</code></pre>\n<h3>Theming Decision</h3>\n<pre><code>Do you need custom brand colors?\n├─ YES → Extend MD3LightTheme/MD3DarkTheme with your colors\n└─ NO → Use default PaperProvider (MD3 applied automatically)\n\nDo you need Android 12+ system colors?\n├─ YES → Use expo-material3-theme's useMaterial3Theme hook\n└─ NO → Use your static custom theme\n\nDo you need custom fonts?\n├─ YES → Use configureFonts({ config: fontConfig })\n│   └─ Need custom text variants? → Use customText&lt;'myVariant'&gt;()\n└─ NO → Default MD3 typography (Roboto/System/sans-serif) is applied\n\nDo you need to bridge Paper + React Navigation themes?\n├─ YES → Use adaptNavigationTheme() to unify color schemes\n└─ NO → Configure each provider's theme independently\n</code></pre>\n<p>&lt;/decision_framework&gt;</p>\n<hr>\n<p>&lt;red_flags&gt;</p>\n<h2>RED FLAGS</h2>\n<p><strong>High Priority Issues:</strong></p>\n<ul>\n<li><strong>Missing <code>PaperProvider</code> at app root</strong> - All Paper components silently fall back to unstyled defaults without the provider. Symptoms: wrong colors, missing ripples, broken Dialogs.</li>\n<li><strong>Dialog without <code>Portal</code> wrapper</strong> - Dialog renders inline in the component tree and gets clipped by parent containers or hidden behind navigation headers.</li>\n<li><strong>Hardcoding MD3 color values</strong> - Use <code>theme.colors.primary</code>, <code>theme.colors.surface</code>, etc. via <code>useTheme()</code>. Hardcoded hex values break when the theme changes (dark mode, dynamic color, brand update).</li>\n<li><strong>Missing babel plugin in production</strong> - Without <code>react-native-paper/babel</code>, the entire library is bundled regardless of which components you import.</li>\n<li><strong>Using deprecated <code>createMaterialBottomTabNavigator</code></strong> - Deprecated since v5.14. Use <code>@react-navigation/bottom-tabs</code> with <code>BottomNavigation.Bar</code> as custom <code>tabBar</code> instead.</li>\n</ul>\n<p><strong>Medium Priority Issues:</strong></p>\n<ul>\n<li>Using <code>require()</code> instead of ES2015 <code>import</code> for Paper components - the babel plugin only optimizes <code>import</code> statements</li>\n<li>Not providing <code>onDismiss</code> callback on Dialog - users cannot close the dialog with back button or outside tap</li>\n<li>Overriding component <code>accessibilityRole</code> without reason - Paper components have correct roles by default</li>\n<li>Using <code>mode=\"contained\"</code> for all buttons - use appropriate emphasis levels (text, outlined, contained-tonal, contained)</li>\n<li>Not switching theme based on system color scheme - leads to always-light or always-dark UI regardless of user preference</li>\n</ul>\n<p><strong>Gotchas &amp; Edge Cases:</strong></p>\n<ul>\n<li><code>useTheme()</code> returns the default theme if called outside <code>PaperProvider</code> - no error thrown, just wrong colors</li>\n<li>TextInput label floats over outline in some edge cases (known issue) - apply <code>outlineStyle</code> padding workaround</li>\n<li><code>Snackbar</code> renders at bottom of its parent by default - wrap in <code>Portal</code> to display as a true overlay above tab bars</li>\n<li><code>Dialog</code> does not support scrollable content by default - use <code>Dialog.ScrollArea</code> for long content instead of wrapping in ScrollView</li>\n<li><code>Card.Cover</code> images have no default aspect ratio - set explicit height or use <code>resizeMode</code></li>\n<li>Android <code>StatusBar</code> does not automatically adapt to Paper theme - manually set <code>StatusBar</code> <code>backgroundColor</code> / <code>barStyle</code></li>\n<li>Variable fonts may not render correctly on all platforms - install each weight as a separate <code>.ttf</code> file</li>\n<li><code>FAB.Group</code> visibility: set <code>visible={true}</code> explicitly - it defaults to <code>true</code> but can silently become <code>false</code> if parent re-renders with stale props</li>\n<li>MD2 mode (<code>version: 2</code>) and MD3 cannot coexist in the same provider - choose one per <code>PaperProvider</code></li>\n<li><code>react-native-safe-area-context</code> is a required peer dependency since v5 - install it even if not using SafeAreaView directly</li>\n</ul>\n<p>&lt;/red_flags&gt;</p>\n<hr>\n<p>&lt;critical_reminders&gt;</p>\n<h2>CRITICAL REMINDERS</h2>\n<blockquote>\n<p><strong>All code must follow project conventions in CLAUDE.md</strong></p>\n</blockquote>\n<p><strong>(You MUST wrap your app root in <code>PaperProvider</code> - all Paper components require the provider context to function)</strong></p>\n<p><strong>(You MUST wrap Dialog, Menu, and similar overlay components in <code>Portal</code> - without it they render inline instead of above other content)</strong></p>\n<p><strong>(You MUST use <code>useTheme()</code> to access theme colors and fonts in components - never hardcode Material Design color values)</strong></p>\n<p><strong>(You MUST add <code>react-native-paper/babel</code> to production plugins for bundle optimization - without it the entire library is included)</strong></p>\n<p><strong>Failure to follow these rules will cause unstyled components, invisible dialogs, broken dark mode, and bloated bundles.</strong></p>\n<p>&lt;/critical_reminders&gt;</p>\n","files":[{"path":"examples/components.md","sizeBytes":9667,"isText":true},{"path":"examples/core.md","sizeBytes":8170,"isText":true},{"path":"examples/navigation-integration.md","sizeBytes":7010,"isText":true},{"path":"reference.md","sizeBytes":8139,"isText":true},{"path":"SKILL.md","sizeBytes":15910,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-29T15:31:27.695443Z","sha256":"F4B2F34627A80B594256004A47A43FB97A021424391AC790BFC76D1F29CDC4FD","sizeBytes":16795},"review":null,"source":{"repositoryUrl":"https://github.com/agents-inc/skills","path":"dist/plugins/mobile-ui-components-react-native-paper/skills/mobile-ui-components-react-native-paper","license":"MIT","commit":"3a51ef571e996b18294bf776d53dbdad26de0617","subtreeSha":"2E3861A6E5DA87FE732B4CD9DCFFD90A2F0A1E58F4745868323282D500B36DE8","lastSyncedAt":"2026-09-29T15:27:48.914434Z"},"reviewedAt":"2026-09-29T15:38:06.869111Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/agents-inc/skills/tree/main/dist/plugins/mobile-ui-components-react-native-paper/skills/mobile-ui-components-react-native-paper"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install agents-inc-skills@llmmart"},{"target":"git","command":"git clone https://github.com/agents-inc/skills.git"}]}