Migrate from React Native Paper to boodoo
Upgrade your React Native mobile app from React Native Paper to boodoo to eliminate heavy bundle bloat, remove icon linking headaches, and unlock modern cross-platform styling.
Want to see technical and bundle benchmarks first?
Explore our comprehensive head-to-head comparison between boodoo and React Native Paper.
The Two-Phase Migration Strategy
You do not need to rewrite your application overnight. We recommend a risk-free two-phase adoption:
Phase 1: Zero-Downtime Skinning via `boodoo/paper` (Day 1)
Apply Boodoo's brand colors, typography, elevations, and border curves directly into React Native Paper's Provider. All existing Paper components instantly inherit Boodoo styling:
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { boodooPaperLightTheme, boodooPaperDarkTheme } from 'boodoo/paper';
import { useColorScheme } from 'react-native';
export default function App() {
const isDark = useColorScheme() === 'dark';
const theme = isDark ? boodooPaperDarkTheme : boodooPaperLightTheme;
return (
<PaperProvider theme={theme}>
<YourExistingNavigation />
</PaperProvider>
);
}
Phase 2: Gradual Component Replacement via `boodoo/react-native`
As you build new features or optimize screens, replace heavy Paper components with Boodoo native primitives to slash runtime memory and bundle sizes:
// Before: React Native Paper
import { Button as PaperButton, Card as PaperCard } from 'react-native-paper';
// After: boodoo Native (Zero external dependencies, pure StyleSheet engine)
import { Button, Card, Badge, BoodooProvider } from 'boodoo/react-native';
export function ModernScreen() {
return (
<BoodooProvider theme="light">
<Card variant="elevated">
<Card.Title title="Ultra-Fast Screen" />
<Card.Content>
<Badge variant="success">Zero Bloat</Badge>
</Card.Content>
<Card.Actions>
<Button variant="primary" size="sm" onPress={() => console.log('Saved!')}>
Save
</Button>
</Card.Actions>
</Card>
</BoodooProvider>
);
}
Component & Prop Mapping Guide
| React Native Paper | boodoo Native | Key Advantages |
|---|---|---|
<Button mode="contained"> |
<Button variant="primary"> |
Intuitive sizing (sm, md, lg) and modern variants (soft, outline, ghost) |
<Card mode="elevated"> |
<Card variant="elevated"> |
Direct styling support without complicated nested theme overrides |
<Chip> |
<Badge variant="primary"> |
Lightweight status and tag indicators |
<TextInput mode="outlined"> |
<TextInput label="..."> |
Zero native font-linking friction; Expo Go compatible out of the box |
Cross-Platform Design Tokens Compatibility & Limitations
Boodoo's design tokens (boodoo/tokens) provide a single source of truth across Web and React Native:
| Token / Primitive Area | Cross-Platform Status | Compatibility Notes & Known Boundaries |
|---|---|---|
| Color Palette | 100% Shared | Hex values in tokens/tokens.json map directly to React Native styles and CSS custom properties (--boodoo-*). |
| Border Radii & Elevation | Supported | Numerical border-radius and shadow tokens map directly into React Native StyleSheet (iOS shadow props & Android elevation). |
| Spacing Scale | Supported | Pixel/number spacing values work seamlessly across View margins and paddings. |
| DOM-Specific CSS Utilities | Limitation | Web-specific CSS rules (e.g. position: fixed, backdrop-filter: blur(), CSS pseudo-selectors like :hover) cannot be consumed directly in React Native without platform wrappers. Use Pressable states or native modals instead. |
| Custom Mobile Icons | Recommendation | Boodoo native components intentionally do not bundle font assets or mandatory native dependencies. Teams can freely pair Boodoo with @expo/vector-icons, SVG icons, or Lucide React Native without conflict. |