RNP Components
Button
Brief: Differences in sizes, variants, and semantic usage for call-to-action controls.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Explicit small / medium / large sizes; semantics for filled, tonal, elevated, and text buttons; prescribes spacing and motion. | Single default button with modes: text, contained, outlined, elevated; limited built-in size variants and semantic mapping. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Appbar
Brief: Structure, layout variants, and scroll/overlay behaviors for app bars.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Multiple top app bar variants (centered, short, medium, large) with defined scroll behaviors and responsive layout rules. | Opinionated compact app bar with basic variants; lacks full set of Material Design 3 layout behaviors and windowing adjustments. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
TextInput
Brief: States, density, helper text, label motion, and leading/trailing decorations.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Prescribes filled / outlined / dense styles, label motion, helper/error text placement, and density tokens. | Provides basic text input variants; requires additional animation, density tokens, and helper/error behaviors to match Material Design 3. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Card
Brief: Surface treatments, media/header areas, elevation, and corner variants.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines elevation levels, tonal and filled card variants, and clear media/header/content patterns. | Simpler card component with basic surface and content areas; needs mapping for elevation, corner radius, and tonal variants. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
FAB
Brief: Sizes, extended vs icon modes, tonal treatment, and motion.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Specifies multiple sizes, extended labels, tonal alternatives, and motion/transition guidance. | Supports floating action button patterns (smaller/regular) but lacks full extended/tonal semantics and motion presets. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
BottomNavigation
Brief: Label behavior, active indicator, and shifting animations.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines labeled/unlabeled modes, active indicator styles, and animation details for shifting items. | Implements core bottom navigation; requires custom active indicator and refined motion for parity with Material Design 3. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Drawer
Brief: Modal versus permanent drawers, scrim behavior, and large-screen variants.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Covers modal, dismissible, and permanent drawer types with responsive behavior and hierarchy patterns. | Drawer component focuses on list-style items and modal drawers; needs layout patterns for persistent/responsive drawer variants. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Icon
Brief: Symbol sets, sizing, filled/outlined variants, and mapping to platform systems.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Specifies iconography system, recommended sizes, weights, and filled/outlined variants for consistent language. | Uses vector icons (commonly Google Material Icons); requires curated mapping to Material Design 3 symbol weights and alternate platform symbol sets. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Checkbox / RadioButton / Switch
Brief: Control states, touch targets, and motion for selection controls.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Token-driven sizes, defined state transitions (hover/focus/pressed), and required touch target guidance. | Provides checkbox, radio, and switch components but needs supplemental states, motion, and enforced accessible touch targets. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Menu
Brief: Positioning, anchoring, elevation, and minimum/maximum sizing rules.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines anchor behavior, min/max widths, elevation, and scrim interactions for menus. | Basic menu implementation; requires improved positioning logic, z-index handling, and elevation parity. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Snackbar
Brief: Timing, placement, action layout, and accessibility announcements.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Prescribes timing, motion, tonal variants, and action layout with accessibility guidance. | Covers core snackbar features; needs consistent durations, action placement rules, and accessibility announcement patterns. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
ActivityIndicator / ProgressBar (RNP) / Progress indicators (M3)
Brief: Linear and circular indicators, determinate vs indeterminate motion, and timing/easing.
| | Material Design 3 | React Native Paper |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------- |
| Key Differences | Two types: linear and circular; expressive options (track height, wave shape); determinate and indeterminate modes; accessibility end-stop. | Offers circular and linear components; used as drop-in for RN ActivityIndicator with props for animating, color, size, and theming. |
| Color: | Compatible with dynamic color and semantic token mapping; configurable active/track colors (expressive palettes). | color prop available; defaults to theme.colors.primary; can override via theme prop or pass a color string. |
| Elevation: | Not applicable for progress indicators (visual layering via surfaces). | Not applicable. |
| Size: | Configurable thickness/track height (examples include a Thick 8dp track) and scalable visual sizes; used contained or uncontained. | size prop: 'small' | 'large' | number(default'small'). |
| Interactive States | Determinate vs indeterminate behaviors; motion guidance (easing, end-stop), recommended for short waits and pull-to-refresh patterns. | animating boolean controls visibility; hidesWhenStopped defaults to true; styling via style or theme for visual tokens. |
| Typography: | N/A (visual indicator) | N/A |
Dialog
Brief: Spacing, scrim behavior, variants (alert/confirmation/full-screen), and focus handling.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines dialog variants, motion, scrim/backdrop behavior, and focus management expectations. | Basic dialog component with content/actions; needs variant mapping, focus trap/accessibility improvements, and consistent action ordering. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Surface
Brief: Elevation tokens, tonal surfaces, and cross-platform shadow consistency.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Requires programmatic elevation and tonal surface scales, dynamic overlays (Android), and consistent elevation semantics. | Uses an elevation property and surface component; needs a programmatic color/elevation scale and platform-consistent shadow mapping. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Button
Brief: Differences in sizes, variants, and semantic usage for call-to-action controls.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Explicit small / medium / large sizes; semantics for filled, tonal, elevated, and text buttons; prescribes spacing and motion. | Single default button with modes: text, contained, outlined, elevated; limited built-in size variants and semantic mapping. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Appbar
Brief: Structure, layout variants, and scroll/overlay behaviors for app bars.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Multiple top app bar variants (centered, short, medium, large) with defined scroll behaviors and responsive layout rules. | Opinionated compact app bar with basic variants; lacks full set of Material Design 3 layout behaviors and windowing adjustments. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
TextInput
Brief: States, density, helper text, label motion, and leading/trailing decorations.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Prescribes filled / outlined / dense styles, label motion, helper/error text placement, and density tokens. | Provides basic text input variants; requires additional animation, density tokens, and helper/error behaviors to match Material Design 3. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Card
Brief: Surface treatments, media/header areas, elevation, and corner variants.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines elevation levels, tonal and filled card variants, and clear media/header/content patterns. | Simpler card component with basic surface and content areas; needs mapping for elevation, corner radius, and tonal variants. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
FAB
Brief: Sizes, extended vs icon modes, tonal treatment, and motion.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Specifies multiple sizes, extended labels, tonal alternatives, and motion/transition guidance. | Supports floating action button patterns (smaller/regular) but lacks full extended/tonal semantics and motion presets. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
BottomNavigation
Brief: Label behavior, active indicator, and shifting animations.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines labeled/unlabeled modes, active indicator styles, and animation details for shifting items. | Implements core bottom navigation; requires custom active indicator and refined motion for parity with Material Design 3. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Drawer
Brief: Modal versus permanent drawers, scrim behavior, and large-screen variants.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Covers modal, dismissible, and permanent drawer types with responsive behavior and hierarchy patterns. | Drawer component focuses on list-style items and modal drawers; needs layout patterns for persistent/responsive drawer variants. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Icon
Brief: Symbol sets, sizing, filled/outlined variants, and mapping to platform systems.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Specifies iconography system, recommended sizes, weights, and filled/outlined variants for consistent language. | Uses vector icons (commonly Google Material Icons); requires curated mapping to Material Design 3 symbol weights and alternate platform symbol sets. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Checkbox / RadioButton / Switch
Brief: Control states, touch targets, and motion for selection controls.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Token-driven sizes, defined state transitions (hover/focus/pressed), and required touch target guidance. | Provides checkbox, radio, and switch components but needs supplemental states, motion, and enforced accessible touch targets. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Menu
Brief: Positioning, anchoring, elevation, and minimum/maximum sizing rules.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines anchor behavior, min/max widths, elevation, and scrim interactions for menus. | Basic menu implementation; requires improved positioning logic, z-index handling, and elevation parity. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Snackbar
Brief: Timing, placement, action layout, and accessibility announcements.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Prescribes timing, motion, tonal variants, and action layout with accessibility guidance. | Covers core snackbar features; needs consistent durations, action placement rules, and accessibility announcement patterns. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
ActivityIndicator / ProgressBar
Brief: Linear and circular indicators, determinate vs indeterminate motion, and timing/easing.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Specifies determinate and indeterminate behaviors, sizing tokens, and motion easing. | Provides circular activity indicator and linear progress; requires timing, easing, and token alignment for parity. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Dialog
Brief: Spacing, scrim behavior, variants (alert/confirmation/full-screen), and focus handling.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Defines dialog variants, motion, scrim/backdrop behavior, and focus management expectations. | Basic dialog component with content/actions; needs variant mapping, focus trap/accessibility improvements, and consistent action ordering. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Surface
Brief: Elevation tokens, tonal surfaces, and cross-platform shadow consistency.
| Material Design 3 | React Native Paper | |
|---|---|---|
| Key Differences | Requires programmatic elevation and tonal surface scales, dynamic overlays (Android), and consistent elevation semantics. | Uses an elevation property and surface component; needs a programmatic color/elevation scale and platform-consistent shadow mapping. |
| Typography: | M3 tokens (display/headline/body/label) | RNP presets; map to M3 |
Typography
Brief: Scale, weights, responsive sizes, and mapping to platform fonts.
| Material Design 3 | React Native Paper | Notes |
|---|---|---|
| Rich token set for display, headline, body, and label styles with responsive sizing recommendations. | Exposes typography presets; requires mapping to Material Design 3 token sets, platform fonts, and responsive tokenization. | |
| Button | Brief: size/variant differences. RNP: Button. M3: Button. | RNP: single default size with modes (text, contained, outlined, elevated). M3: explicit small/medium/large, tonal/filled/elevated semantics — requires extra theming and size tokens. |
| Top App Bar / Appbar | Brief: structure and overlay behaviour. RNP: Appbar. M3: Top app bar. | RNP Appbar is opinionated and compact; M3 has variants (centered/short/medium/large) and scroll behaviors — needs layout and windowing adjustments. |
| Text Input / TextField | Brief: states, density, helper text. RNP: TextInput. M3: Text field. | RNP supports basic variants; M3 prescribes filled/outlined/dense, leading/trailing icons, and label motion — requires animation and density tokens. |
| Card | Brief: surface treatment, header/media areas. RNP: Card. M3: Card. | M3 cards have elevation, corner, and tonal variants; RNP card is simpler — needs consistent elevation/shadow tokens and corner radius mapping. |
| FAB (Floating Action Button) | Brief: sizes, extended vs icon. RNP: FAB. M3: Floating action button. | RNP supports small/regular/large-ish patterns but lacks full M3 extended/tonal semantics and motion — requires additional variants and transitions. |
| Bottom Navigation | Brief: shifting labels, active indicator. RNP: BottomNavigation. M3: Bottom navigation. | M3 specifies labeled/unlabeled, active indicator, and animation details; RNP provides basics — needs custom active indicator and motion fidelity. |
| Navigation Drawer / Drawer | Brief: modal vs permanent, scrim, header area. RNP: Drawer. M3: Navigation drawer. | RNP drawer covers list-style items; M3 includes hierarchy, avatars, and responsive drawer types — requires layout patterns for large-screen variants. |
| Icons / Iconography | Brief: symbol set and sizing. RNP: Icon uses vector/icon fonts: Iconography guide. M3: Iconography. | RNP typically uses Google Material Icons but mapping to M3 symbol weights, sizes, and outlined/filled variants must be curated; iOS SF symbol parity missing. |
| Checkbox / Radio / Switch | Brief: control states and touch targets. RNP: Checkbox, RadioButton, Switch. M3: Checkbox, Radio, Switch. | Visual states (focus/hover/pressed) and motion differ; M3 defines token-driven sizes and state transitions — RNP needs supplemental states and accessible touch-target enforcement. |
| Menu / Dropdown | Brief: positioning, elevation, anchor behavior. RNP: Menu. M3: Menu. | M3 menus define min/max width, anchor behaviors and scrim; RNP menu is basic — requires positioning logic, z-index, and surface/elevation parity. |
| Snackbar / Toast | Brief: timing, actions, placement. RNP: Snackbar. M3: Snackbar. | M3 includes behavior, motion, and tonal variants; RNP covers basics — needs consistency for action layout, durations, and accessibility announcements. |
| Progress / Activity Indicator | Brief: linear vs circular semantics and determinate variants. RNP: ActivityIndicator, ProgressBar. M3: Progress indicator. | RNP provides circular and linear; M3 prescribes indeterminate/determinate motion and sizing tokens — requires timing/easing parity and color tokens. |
| Dialog / Modal | Brief: header/content/actions spacing and scrim. RNP: Dialog. M3: Dialog. | M3 defines alert/confirmation/full-screen variants and motion; RNP dialog is basic — needs variant mapping, accessibility focus trap, and consistent action order. |
| Surface / Elevation / Shadows | Brief: elevation tokens and tonal surfaces. RNP: Surface. M3: Elevation / Surface. | RNP uses elevation prop; M3 requires distinct tonal surfaces and dynamic elevation overlays (esp. Android) — needs a programmatic color/elevation scale and shadow consistency across platforms. |
| Typography | Brief: scale, weights, variable fonts. RNP: Typography. M3: Typography. | RNP exposes presets; M3 specifies a richer token set (display/headline/body/label) and responsive sizing — requires mapping to platform fonts and responsive tokenization. |