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