Skip to main content

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.

View boodoo vs 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.