@umituz/react-native-appearance

@umituz/react-native-appearance

Universal appearance management package for React Native apps with theme mode switching and custom color customization.

Features

• 🎨 Theme Mode Management: Light/Dark mode switching with persistent storage
• 🎯 Custom Colors: Customize primary, secondary, accent, and button colors
• 💾 Persistent Storage: Settings saved using AsyncStorage
• 🔧 Type-Safe: Full TypeScript support
• 🎪 SOLID Architecture: Clean separation of concerns
• 🚀 Production Ready: Battle-tested and optimized

Installation

npm install @umituz/react-native-appearance

Quick Start

import {
  AppearanceScreen,
  useAppearance,
  appearanceService,
} from "@umituz/react-native-appearance";

// Use the screen
<AppearanceScreen />

// Or use hooks in your custom component
const MyComponent = () => {
  const { themeMode, setThemeMode, customColors } = useAppearance();

  return (
    // Your custom UI
  );
};

// Initialize in your app
useEffect(() => {
  appearanceService.initialize();
}, []);

API Reference

Components

AppearanceScreen

Complete appearance settings screen with theme mode selection and custom colors.

import { AppearanceScreen } from "@umituz/react-native-appearance";

<AppearanceScreen />

Hooks

useAppearance()

Access appearance state and actions.

const {
  themeMode,           // 'light' | 'dark'
  customColors,        // CustomThemeColors | undefined
  isInitialized,       // boolean
  setThemeMode,        // (mode: ThemeMode) => Promise<void>
  toggleTheme,         // () => Promise<void>
  setCustomColors,     // (colors: CustomThemeColors) => Promise<void>
  resetCustomColors,   // () => Promise<void>
  reset,               // () => Promise<void>
} = useAppearance();

useAppearanceActions()

Presentation actions for appearance management.

const {
  localCustomColors,    // CustomThemeColors
  handleThemeSelect,    // (mode: ThemeMode) => Promise<void>
  handleColorChange,    // (key: keyof CustomThemeColors, color: string) => void
  handleResetColors,    // () => void
} = useAppearanceActions();

Service

appearanceService

Business logic layer for appearance management.

import { appearanceService } from "@umituz/react-native-appearance";

// Initialize
await appearanceService.initialize();

// Get current theme
const theme = appearanceService.getThemeMode();

// Set theme
await appearanceService.setThemeMode('dark');

Types

import type {
  ThemeMode,           // 'light' | 'dark'
  CustomThemeColors,   // { primary?: string, secondary?: string, ... }
  AppearanceSettings,  // { themeMode: ThemeMode, customColors?: CustomThemeColors }
  AppearanceState,     // { settings: AppearanceSettings, isInitialized: boolean }
} from "@umituz/react-native-appearance";

Architecture

This package follows SOLID principles with clean separation of concerns:

• Types: Pure type definitions
• Infrastructure: Storage and state management
• Presentation: UI components and screens
• Hooks: Presentation layer logic
• Service: Business logic layer

Dependencies

This package requires these peer dependencies:

• @umituz/react-native-alert
• @umituz/react-native-design-system
• @umituz/react-native-design-system-theme
• @umituz/react-native-localization
• @umituz/react-native-storage
• zustand
• react
• react-native

License

MIT