npm package: @loudpacks/theme-native
Description: React Native theme picker modal with live theme previews
Author: Noted
Latest version: 0.2.0

# @loudpacks/theme-native

React Native theme picker modal with live theme previews.

## Installation

```bash
npm install @loudpacks/theme-native @loudpacks/theme-core
# or
pnpm add @loudpacks/theme-native @loudpacks/theme-core
# or
yarn add @loudpacks/theme-native @loudpacks/theme-core
```

## Requirements

- React ≥18.0.0
- React Native ≥0.72.0

## Features

- 🎨 Live theme previews with light/dark mode toggle
- 📱 Native Modal with slide animation
- 🎯 Auto-derives modal colors from current theme
- 🔄 Pressable theme cards with visual feedback
- 📐 Safe area handling for iOS notches
- ♿ Full accessibility support with native components
- ✅ Fully tested with 25+ test cases

## Usage

```tsx
import { ThemePickerModal } from '@loudpacks/theme-native';
import type { ThemeDefinitions } from '@loudpacks/theme-core';

const themes: ThemeDefinitions = {
  monochrome: {
    displayName: 'Monochrome',
    description: 'Clean monochrome design',
    light: {
      background: '#fafafa',
      surface: '#ffffff',
      text: '#1a1a1a',
      // ... other color definitions
    },
    dark: {
      background: '#121212',
      surface: '#1e1e1e',
      text: '#f5f5f5',
      // ... other color definitions
    },
  },
  // ... more themes
};

function App() {
  const [showPicker, setShowPicker] = useState(false);
  const [currentTheme, setCurrentTheme] = useState('monochrome');
  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light');

  const currentColors = themes[currentTheme][colorScheme];

  return (
    <>
      <Button
        title="Change Theme"
        onPress={() => setShowPicker(true)}
      />

      <ThemePickerModal
        visible={showPicker}
        onClose={() => setShowPicker(false)}
        currentTheme={currentTheme}
        onSelectTheme={setCurrentTheme}
        themes={themes}
        initialPreviewMode={colorScheme}
        currentColors={{
          background: currentColors.background,
          text: currentColors.text,
          border: currentColors.border,
          tint: currentColors.tint,
        }}
        config={{
          showPreviewToggle: true,
          closeOnSelect: true,
        }}
      />
    </>
  );
}
```

## Components

### ThemePickerModal

The main modal component for selecting themes.

**Props:**
- `visible` (boolean): Controls modal visibility
- `onClose` (() => void): Callback when modal is closed
- `currentTheme` (string): Currently selected theme key
- `onSelectTheme` ((themeKey: string) => void): Callback when theme is selected
- `themes` (ThemeDefinitions): Object containing all available themes
- `initialPreviewMode` ('light' | 'dark', optional): Initial preview mode
- `headerTitle` (string, optional): Modal header text
- `currentColors` (object): Current theme colors for styling the modal
- `config` (object, optional): Configuration options

### ThemeCard

Individual theme preview card component.

**Props:**
- `themeKey` (string): Theme identifier
- `theme` (ThemeMetadata): Theme data
- `isSelected` (boolean): Whether this theme is currently selected
- `previewMode` ('light' | 'dark'): Which color scheme to preview
- `onSelect` (() => void): Callback when card is pressed

## Configuration Options

```typescript
{
  showPreviewToggle: boolean;  // Show light/dark toggle (default: true)
  closeOnSelect: boolean;      // Close modal after selection (default: false)
  gridColumns: number;         // Number of columns (default: 2)
}
```

## Examples

See the [examples](./examples) directory for complete working examples including:
- Basic theme picker setup
- Persistent theme storage with AsyncStorage
- System color scheme detection

## License

MIT