@umituz/react-native-settings 1.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 Ümit UZ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,194 @@
+# @umituz/react-native-settings
+
+Settings management for React Native apps - user preferences, theme, language, notifications.
+
+## Features
+
+- ✅ **User Settings Management** - Theme, language, notifications, privacy settings
+- ✅ **Zustand State Management** - Global settings state with Zustand
+- ✅ **Persistent Storage** - Uses @umituz/react-native-storage for persistence
+- ✅ **Settings Screens** - Pre-built settings screens (Settings, Appearance, Language Selection)
+- ✅ **Setting Components** - Reusable setting item components
+- ✅ **Type-Safe** - Full TypeScript support
+
+## Installation
+
+```bash
+npm install @umituz/react-native-settings
+```
+
+## Peer Dependencies
+
+```bash
+npm install zustand @umituz/react-native-storage @umituz/react-native-design-system @umituz/react-native-design-system-theme @umituz/react-native-localization @umituz/react-native-notifications react-native-paper expo-linear-gradient
+```
+
+## Usage
+
+### Basic Settings Hook
+
+```tsx
+import { useSettings } from '@umituz/react-native-settings';
+
+const MyComponent = () => {
+  const { settings, loading, updateSettings, loadSettings } = useSettings();
+
+  useEffect(() => {
+    loadSettings('user123');
+  }, []);
+
+  const handleThemeChange = async () => {
+    await updateSettings({ theme: 'dark' });
+  };
+
+  return (
+    <View>
+      <Text>Current Theme: {settings?.theme}</Text>
+      <Button onPress={handleThemeChange}>Toggle Theme</Button>
+    </View>
+  );
+};
+```
+
+### Settings Screen
+
+```tsx
+import { SettingsScreen } from '@umituz/react-native-settings';
+
+// In your navigation stack
+<Stack.Screen name="Settings" component={SettingsScreen} />
+```
+
+### Appearance Screen
+
+```tsx
+import { AppearanceScreen } from '@umituz/react-native-settings';
+
+// In your navigation stack
+<Stack.Screen name="Appearance" component={AppearanceScreen} />
+```
+
+### Language Selection Screen
+
+```tsx
+import { LanguageSelectionScreen } from '@umituz/react-native-settings';
+
+// In your navigation stack
+<Stack.Screen name="LanguageSelection" component={LanguageSelectionScreen} />
+```
+
+### Setting Item Component
+
+```tsx
+import { SettingItem } from '@umituz/react-native-settings';
+
+<SettingItem
+  icon="Palette"
+  title="Theme"
+  description="Change app theme"
+  value="Dark"
+  onPress={() => navigation.navigate('Appearance')}
+  iconGradient={['#FF6B6B', '#4ECDC4']}
+/>
+```
+
+### Disclaimer Setting Component
+
+```tsx
+import { DisclaimerSetting } from '@umituz/react-native-settings';
+
+// In AboutScreen
+<DisclaimerSetting />
+```
+
+## API Reference
+
+### `useSettings()`
+
+React hook for accessing settings state.
+
+**Returns:**
+- `settings: UserSettings | null` - Current settings
+- `loading: boolean` - Loading state
+- `error: string | null` - Error message
+- `loadSettings(userId: string)` - Load settings for user
+- `updateSettings(updates: Partial<UserSettings>)` - Update settings
+- `resetSettings(userId: string)` - Reset to default settings
+- `clearError()` - Clear error state
+
+### `useSettingsStore()`
+
+Direct access to Zustand store.
+
+### `SettingsScreen`
+
+Main settings screen component with sections for Appearance, General, About & Legal.
+
+### `AppearanceScreen`
+
+Appearance settings screen with language and theme controls.
+
+### `LanguageSelectionScreen`
+
+Language selection screen with search functionality.
+
+### `SettingItem`
+
+Reusable setting item component with gradient icons and Material Design styling.
+
+**Props:**
+- `icon: IconName` - Icon name from Lucide library
+- `title: string` - Main title text
+- `description?: string` - Optional description
+- `value?: string` - Optional value to display on right
+- `onPress?: () => void` - Callback when pressed
+- `showChevron?: boolean` - Show chevron arrow (default: true if onPress exists)
+- `rightElement?: React.ReactNode` - Custom right element
+- `iconGradient?: string[]` - Gradient colors for icon background
+- `disabled?: boolean` - Disable item
+- `testID?: string` - Test ID
+
+### `DisclaimerSetting`
+
+Disclaimer component for health/wellness apps with modal display.
+
+## Types
+
+- `UserSettings` - User settings interface
+- `SettingsError` - Settings error interface
+- `SettingsResult<T>` - Result type for settings operations
+- `ISettingsRepository` - Repository interface
+
+## UserSettings Interface
+
+```typescript
+interface UserSettings {
+  userId: string;
+  theme: 'light' | 'dark' | 'auto';
+  language: string;
+  notificationsEnabled: boolean;
+  emailNotifications: boolean;
+  pushNotifications: boolean;
+  soundEnabled: boolean;
+  vibrationEnabled: boolean;
+  privacyMode: boolean;
+  updatedAt: Date;
+}
+```
+
+## Important Notes
+
+⚠️ **Storage**: This package uses `@umituz/react-native-storage` for all storage operations. Make sure to install it as a peer dependency.
+
+⚠️ **Navigation**: Settings screens require navigation setup. Make sure to add them to your navigation stack.
+
+⚠️ **Translations**: Settings screens require i18n translations. Make sure to provide translations for settings keys.
+
+## License
+
+MIT
+
+## Author
+
+Ümit UZ <umit@umituz.com>
+

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@umituz/react-native-settings",
+  "version": "1.1.0",
+  "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "react-native",
+    "settings",
+    "preferences",
+    "user-settings",
+    "theme",
+    "language",
+    "notifications"
+  ],
+  "author": "Ümit UZ <umit@umituz.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-settings"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "zustand": "^5.0.2",
+    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-notifications": "latest",
+    "react-native-paper": "^5.12.3",
+    "expo-linear-gradient": "~14.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-native": "^0.73.0",
+    "react": "^18.2.0",
+    "react-native": "^0.74.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/domain/repositories/ISettingsRepository.ts

@@ -0,0 +1,58 @@
+/**
+ * Settings Repository Interface
+ *
+ * Defines contracts for settings persistence and retrieval
+ * Pure business logic - no dependencies on external frameworks
+ */
+
+export interface UserSettings {
+  userId: string;
+  theme: 'light' | 'dark' | 'auto';
+  language: string;
+  notificationsEnabled: boolean;
+  emailNotifications: boolean;
+  pushNotifications: boolean;
+  soundEnabled: boolean;
+  vibrationEnabled: boolean;
+  privacyMode: boolean;
+  updatedAt: Date;
+}
+
+export interface SettingsError extends Error {
+  code: 'LOAD_FAILED' | 'SAVE_FAILED' | 'NOT_FOUND' | 'INVALID_DATA';
+}
+
+export type SettingsResult<T> = {
+  success: true;
+  data: T;
+} | {
+  success: false;
+  error: SettingsError;
+};
+
+/**
+ * Settings Repository Interface
+ * Repository pattern for settings management
+ */
+export interface ISettingsRepository {
+  /**
+   * Load user settings from persistent storage
+   */
+  loadSettings(userId: string): Promise<SettingsResult<UserSettings>>;
+
+  /**
+   * Save user settings to persistent storage
+   */
+  saveSettings(settings: Partial<UserSettings>): Promise<SettingsResult<UserSettings>>;
+
+  /**
+   * Reset settings to default values
+   */
+  resetSettings(userId: string): Promise<SettingsResult<UserSettings>>;
+
+  /**
+   * Get default settings for a user
+   */
+  getDefaultSettings(userId: string): UserSettings;
+}
+

package/src/index.ts

@@ -0,0 +1,45 @@
+/**
+ * @umituz/react-native-settings - Public API
+ *
+ * Settings management for React Native apps
+ * User preferences, theme, language, notifications
+ *
+ * Usage:
+ *   import { useSettings, useSettingsStore, SettingsScreen, AppearanceScreen, LanguageSelectionScreen, SettingItem, DisclaimerSetting } from '@umituz/react-native-settings';
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Repository Interfaces
+// =============================================================================
+
+export type {
+  ISettingsRepository,
+  UserSettings,
+  SettingsError,
+  SettingsResult,
+} from './domain/repositories/ISettingsRepository';
+
+// =============================================================================
+// INFRASTRUCTURE LAYER - Storage
+// =============================================================================
+
+export {
+  useSettingsStore,
+  useSettings,
+} from './infrastructure/storage/SettingsStore';
+
+// =============================================================================
+// PRESENTATION LAYER - Screens
+// =============================================================================
+
+export { SettingsScreen } from './presentation/screens/SettingsScreen';
+export { AppearanceScreen } from './presentation/screens/AppearanceScreen';
+export { LanguageSelectionScreen } from './presentation/screens/LanguageSelectionScreen';
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { SettingItem } from './presentation/components/SettingItem';
+export { DisclaimerSetting } from './presentation/components/DisclaimerSetting';
+

package/src/infrastructure/storage/SettingsStore.ts

@@ -0,0 +1,143 @@
+/**
+ * Settings Store - Zustand State Management
+ *
+ * Global settings state for app preferences
+ * Manages theme, language, notifications, and privacy settings
+ *
+ * DDD ARCHITECTURE: Uses @umituz/react-native-storage for all storage operations
+ * - Type-safe storage with StorageKey enum
+ * - Result pattern for error handling
+ * - Single source of truth for all storage
+ */
+
+import { create } from 'zustand';
+import { storageRepository, StorageKey, createUserKey, unwrap } from '@umituz/react-native-storage';
+import type { UserSettings } from '../../domain/repositories/ISettingsRepository';
+
+interface SettingsStore {
+  // State
+  settings: UserSettings | null;
+  loading: boolean;
+  error: string | null;
+
+  // Actions
+  loadSettings: (userId: string) => Promise<void>;
+  updateSettings: (updates: Partial<UserSettings>) => Promise<void>;
+  resetSettings: (userId: string) => Promise<void>;
+  clearError: () => void;
+}
+
+const DEFAULT_OFFLINE_USER_ID = 'offline_user';
+
+const getDefaultSettings = (userId: string): UserSettings => ({
+  userId,
+  theme: 'auto',
+  language: 'en-US',
+  notificationsEnabled: true,
+  emailNotifications: true,
+  pushNotifications: true,
+  soundEnabled: true,
+  vibrationEnabled: true,
+  privacyMode: false,
+  updatedAt: new Date(),
+});
+
+export const useSettingsStore = create<SettingsStore>((set, get) => ({
+  settings: null,
+  loading: false,
+  error: null,
+
+  loadSettings: async (userId: string) => {
+    set({ loading: true, error: null });
+
+    const defaultSettings = getDefaultSettings(userId);
+    const storageKey = createUserKey(StorageKey.SETTINGS, userId);
+
+    // ✅ DRY: Storage domain handles JSON parse, error handling
+    const result = await storageRepository.getItem<UserSettings>(storageKey, defaultSettings);
+    const data = unwrap(result, defaultSettings);
+
+    // ✅ CLEAN CODE: Auto-save defaults if not exists
+    if (!result.success) {
+      await storageRepository.setItem(storageKey, defaultSettings);
+    }
+
+    set({
+      settings: data,
+      loading: false,
+      error: null,
+    });
+  },
+
+  updateSettings: async (updates: Partial<UserSettings>) => {
+    const { settings } = get();
+
+    // ✅ CLEAN CODE: Auto-initialize if settings not loaded
+    if (!settings) {
+      await get().loadSettings(DEFAULT_OFFLINE_USER_ID);
+    }
+
+    // ✅ DEFENSIVE: Verify settings loaded successfully
+    const currentSettings = get().settings;
+    if (!currentSettings) {
+      set({ error: 'Failed to initialize settings' });
+      return;
+    }
+
+    set({ loading: true, error: null });
+
+    const updatedSettings: UserSettings = {
+      ...currentSettings,
+      ...updates,
+      updatedAt: new Date(),
+    };
+
+    const storageKey = createUserKey(StorageKey.SETTINGS, currentSettings.userId);
+
+    // ✅ DRY: Storage domain replaces JSON.stringify + AsyncStorage + try/catch
+    const result = await storageRepository.setItem(storageKey, updatedSettings);
+
+    set({
+      settings: result.success ? updatedSettings : currentSettings,
+      loading: false,
+      error: null,
+    });
+  },
+
+  resetSettings: async (userId: string) => {
+    set({ loading: true, error: null });
+
+    const defaultSettings = getDefaultSettings(userId);
+    const storageKey = createUserKey(StorageKey.SETTINGS, userId);
+
+    // ✅ DRY: Storage domain replaces JSON.stringify + AsyncStorage + try/catch
+    const result = await storageRepository.setItem(storageKey, defaultSettings);
+
+    set({
+      settings: result.success ? defaultSettings : get().settings,
+      loading: false,
+      error: null,
+    });
+  },
+
+  clearError: () => set({ error: null }),
+}));
+
+/**
+ * Hook for accessing settings state
+ */
+export const useSettings = () => {
+  const { settings, loading, error, loadSettings, updateSettings, resetSettings, clearError } =
+    useSettingsStore();
+
+  return {
+    settings,
+    loading,
+    error,
+    loadSettings,
+    updateSettings,
+    resetSettings,
+    clearError,
+  };
+};
+

package/src/presentation/components/DisclaimerSetting.tsx

@@ -0,0 +1,196 @@
+/**
+ * DisclaimerSetting Component
+ *
+ * Displays health/wellness app disclaimer with important legal notice
+ * Used in About screens for apps that require medical/health disclaimers
+ *
+ * Features:
+ * - Tappable card that opens full disclaimer modal
+ * - Warning icon with background color
+ * - Internationalized title and message
+ * - Full-screen modal with scrollable content
+ * - NO shadows (CLAUDE.md compliance)
+ * - Universal across iOS, Android, Web (NO Platform.OS checks)
+ *
+ * Usage:
+ * - Import and use in AboutScreen
+ * - Requires translations: settings.disclaimer.title, settings.disclaimer.message, settings.disclaimer.shortMessage
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Modal,
+  ScrollView,
+} from 'react-native';
+
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system-theme';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useLocalization } from '@umituz/react-native-localization';
+
+type DesignTokens = ReturnType<typeof useAppDesignTokens>;
+
+export const DisclaimerSetting: React.FC = () => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[
+          styles.container,
+          { backgroundColor: withAlpha(tokens.colors.warning, 0.1) },
+        ]}
+        onPress={() => setModalVisible(true)}
+        activeOpacity={0.7}
+        testID="disclaimer-setting"
+      >
+        {/* Icon and Title Row */}
+        <View style={styles.headerRow}>
+          <View
+            style={[
+              styles.iconContainer,
+              {
+                backgroundColor: withAlpha(tokens.colors.warning, 0.2),
+                borderColor: withAlpha(tokens.colors.warning, 0.4),
+                borderWidth: 1,
+              },
+            ]}
+          >
+            <AtomicIcon name="AlertTriangle" color="warning" />
+          </View>
+          <AtomicText type="bodyLarge" color="primary" style={styles.title}>
+            {t('settings.disclaimer.title')}
+          </AtomicText>
+          <AtomicIcon name="ArrowRight" color="secondary" size="sm" />
+        </View>
+
+        {/* Short Message */}
+        <AtomicText
+          type="bodySmall"
+          color="secondary"
+          style={styles.shortMessage}
+        >
+          {t('settings.disclaimer.shortMessage')}
+        </AtomicText>
+      </TouchableOpacity>
+
+      {/* Full Disclaimer Modal */}
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        presentationStyle="pageSheet"
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View
+          style={[
+            styles.modalContainer,
+            { backgroundColor: tokens.colors.backgroundPrimary },
+          ]}
+        >
+          {/* Modal Header */}
+          <View
+            style={[
+              styles.modalHeader,
+              { borderBottomColor: tokens.colors.borderLight },
+            ]}
+          >
+            <AtomicText type="headlineMedium" color="primary">
+              {t('settings.disclaimer.title')}
+            </AtomicText>
+            <TouchableOpacity
+              onPress={() => setModalVisible(false)}
+              testID="close-disclaimer-modal"
+            >
+              <AtomicIcon name="X" color="primary" size="md" />
+            </TouchableOpacity>
+          </View>
+
+          {/* Scrollable Content */}
+          <ScrollView
+            style={styles.modalContent}
+            contentContainerStyle={styles.modalContentContainer}
+          >
+            <AtomicText
+              type="bodyMedium"
+              color="primary"
+              style={styles.modalText}
+            >
+              {t('settings.disclaimer.message')}
+            </AtomicText>
+          </ScrollView>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+const getStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.md,
+      marginHorizontal: tokens.spacing.md,
+      marginTop: 8,
+      marginBottom: 8,
+      borderRadius: 12,
+    },
+
+    headerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+
+    iconContainer: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 12,
+    },
+
+    title: {
+      flex: 1,
+      fontWeight: tokens.typography.labelLarge.fontWeight as any,
+      fontSize: tokens.typography.labelLarge.fontSize,
+    },
+
+    shortMessage: {
+      lineHeight: 18,
+      paddingLeft: 52, // Align with title (40px icon + 12px margin)
+      fontSize: 13,
+    },
+
+    modalContainer: {
+      flex: 1,
+    },
+
+    modalHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+    },
+
+    modalContent: {
+      flex: 1,
+    },
+
+    modalContentContainer: {
+      padding: 20,
+    },
+
+    modalText: {
+      lineHeight: 24,
+      fontSize: 15,
+    },
+  });
+

package/src/presentation/components/SettingItem.tsx

@@ -0,0 +1,176 @@
+/**
+ * SettingItem Component - Paper List.Item Wrapper with Custom Styling
+ *
+ * Modern settings item built on React Native Paper:
+ * - Wraps Paper List.Item for Material Design compliance
+ * - Custom gradient icon backgrounds (LinearGradient)
+ * - Lucide icons integration (AtomicIcon)
+ * - Automatic theme-aware styling
+ * - Built-in ripple effects
+ * - Accessibility support
+ * - Fixed title truncation with proper layout constraints
+ */
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { List } from 'react-native-paper';
+import { LinearGradient } from 'expo-linear-gradient';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import type { IconName } from '@umituz/react-native-design-system';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+interface SettingItemProps {
+  /** Icon name from Lucide library */
+  icon: IconName;
+  /** Main title text */
+  title: string;
+  /** Optional description text */
+  description?: string;
+  /** Optional value to display on the right */
+  value?: string;
+  /** Callback when pressed */
+  onPress?: () => void;
+  /** Show chevron arrow on right (default: true if onPress exists) */
+  showChevron?: boolean;
+  /** Right element to display instead of chevron/value */
+  rightElement?: React.ReactNode;
+  /** Gradient colors for icon background */
+  iconGradient?: string[];
+  /** Make item look disabled */
+  disabled?: boolean;
+  /** Test ID for E2E testing */
+  testID?: string;
+}
+
+export const SettingItem: React.FC<SettingItemProps> = ({
+  icon,
+  title,
+  description,
+  value,
+  onPress,
+  showChevron,
+  rightElement,
+  iconGradient,
+  disabled = false,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  // Gradient colors for icon background
+  const gradientColors: readonly [string, string, ...string[]] = (iconGradient && iconGradient.length >= 2) 
+    ? (iconGradient as unknown as readonly [string, string, ...string[]])
+    : [tokens.colors.surface, tokens.colors.surface] as const;
+
+  // Render gradient icon container for left prop
+  const renderLeft = (props: any) => (
+    <View style={styles.leftContainer}>
+      <LinearGradient
+        colors={gradientColors}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.iconContainer}
+      >
+        <AtomicIcon name={icon} size="md" color="primary" />
+      </LinearGradient>
+    </View>
+  );
+
+  // Render right side content for right prop
+  const renderRight = (props: any) => {
+    if (rightElement) {
+      return <View style={styles.rightContainer}>{rightElement}</View>;
+    }
+
+    if (value) {
+      return (
+        <View style={styles.rightContainer}>
+          <AtomicText type="bodyMedium" color="secondary" style={styles.value} numberOfLines={2}>
+            {value}
+          </AtomicText>
+        </View>
+      );
+    }
+
+    // Show chevron if onPress exists and not explicitly disabled
+    if ((showChevron ?? true) && onPress) {
+      return (
+        <View style={styles.rightContainer}>
+          <AtomicIcon name="ChevronRight" size="sm" color="secondary" style={styles.chevron} />
+        </View>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <List.Item
+      title={title}
+      description={description}
+      left={renderLeft}
+      right={renderRight}
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      style={styles.listItem}
+      titleStyle={styles.title}
+      descriptionStyle={styles.description}
+      titleNumberOfLines={2}
+      titleEllipsizeMode="tail"
+      descriptionNumberOfLines={2}
+      descriptionEllipsizeMode="tail"
+    />
+  );
+};
+
+const getStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    listItem: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      minHeight: 64,
+    },
+    leftContainer: {
+      marginRight: tokens.spacing.md,
+      justifyContent: 'center',
+    },
+    iconContainer: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: `${tokens.colors.primary}20`,
+    },
+    title: {
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      fontWeight: '600',
+      color: tokens.colors.textPrimary,
+      flexShrink: 1,
+    },
+    description: {
+      fontSize: tokens.typography.bodySmall.fontSize,
+      color: tokens.colors.textSecondary,
+      marginTop: tokens.spacing.xs,
+      opacity: 0.8,
+      flexShrink: 1,
+    },
+    rightContainer: {
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+      maxWidth: '50%',
+      flexShrink: 0,
+    },
+    value: {
+      fontWeight: '500',
+      textAlign: 'right',
+    },
+    chevron: {
+      opacity: 0.6,
+    },
+  });
+

package/src/presentation/screens/AppearanceScreen.tsx

@@ -0,0 +1,98 @@
+/**
+ * Appearance Settings Screen
+ *
+ * Modern appearance settings with Paper List.Section:
+ * - React Native Paper List.Section pattern
+ * - Lucide icons (Languages, Moon, Sun)
+ * - Language + Theme settings combined
+ * - Dynamic icon based on theme mode
+ * - Material Design 3 compliance
+ */
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { List } from 'react-native-paper';
+
+import { useNavigation } from '@react-navigation/native';
+import { useTheme, useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { useLocalization, getLanguageByCode } from '@umituz/react-native-localization';
+import { SettingItem } from '../components/SettingItem';
+
+export const AppearanceScreen: React.FC = () => {
+  const { t, currentLanguage } = useLocalization();
+  const navigation = useNavigation();
+  const { themeMode, toggleTheme } = useTheme();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  const currentLang = getLanguageByCode(currentLanguage);
+  const languageDisplay = currentLang ? `${currentLang.flag} ${currentLang.nativeName}` : 'English';
+  const themeDisplay = themeMode === 'dark' ? t('settings.darkMode') : t('settings.lightMode');
+
+  const handleLanguagePress = () => {
+    navigation.navigate('LanguageSelection' as never);
+  };
+
+  const handleThemeToggle = () => {
+    toggleTheme();
+  };
+
+  return (
+    <ScreenLayout testID="appearance-screen" hideScrollIndicator>
+      {/* Header */}
+      <View style={styles.header}>
+        <AtomicText type="headlineLarge" color="primary">
+          {t('settings.appearance.title')}
+        </AtomicText>
+        <AtomicText type="bodyMedium" color="secondary" style={styles.headerSubtitle}>
+          {t('settings.appearance.themeDescription')}
+        </AtomicText>
+      </View>
+
+      {/* Language Section */}
+      <List.Section>
+        <List.Subheader style={{ color: tokens.colors.textSecondary }}>{t('settings.language')}</List.Subheader>
+        <SettingItem
+          icon="Languages"
+          iconGradient={((tokens.colors as any).settingGradients?.language as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
+          title={t('settings.language')}
+          value={languageDisplay}
+          onPress={handleLanguagePress}
+          testID="language-button"
+        />
+      </List.Section>
+
+      {/* Theme Section */}
+      <List.Section>
+        <List.Subheader style={{ color: tokens.colors.textSecondary }}>{t('settings.appearance.darkMode')}</List.Subheader>
+        <SettingItem
+          icon={themeMode === 'dark' ? 'Moon' : 'Sun'}
+          iconGradient={
+            themeMode === 'dark'
+              ? (((tokens.colors as any).settingGradients?.themeDark as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary])
+              : (((tokens.colors as any).settingGradients?.themeLight as unknown as string[]) || [tokens.colors.secondary, tokens.colors.primary])
+          }
+          title={t('settings.appearance.darkMode')}
+          value={themeDisplay}
+          onPress={handleThemeToggle}
+          testID="theme-button"
+        />
+      </List.Section>
+    </ScreenLayout>
+  );
+};
+
+const getStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    header: {
+      paddingBottom: tokens.spacing.lg,
+      paddingTop: tokens.spacing.md,
+    },
+    headerSubtitle: {
+      marginTop: tokens.spacing.sm,
+      lineHeight: 20,
+      opacity: 0.8,
+    },
+  });
+

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -0,0 +1,203 @@
+/**
+ * Language Selection Screen
+ *
+ * Language picker with search functionality
+ *
+ * App Factory - Universal Language Selector
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  TextInput,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTheme, useAppDesignTokens, withAlpha, STATIC_TOKENS, type DesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicIcon, AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { useLocalization, searchLanguages, Language, LANGUAGES } from '@umituz/react-native-localization';
+
+/**
+ * Language Selection Screen Component
+ */
+export const LanguageSelectionScreen: React.FC = () => {
+  const navigation = useNavigation();
+  const { t, currentLanguage, setLanguage } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCode, setSelectedCode] = useState(currentLanguage);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const filteredLanguages = useMemo(() => {
+    return searchLanguages(searchQuery);
+  }, [searchQuery]);
+
+  const handleLanguageSelect = async (code: string) => {
+    setSelectedCode(code);
+    await setLanguage(code);
+    navigation.goBack();
+  };
+
+  const renderLanguageItem = ({ item }: { item: Language }) => {
+    const isSelected = selectedCode === item.code;
+
+    return (
+      <TouchableOpacity
+        style={StyleSheet.flatten([
+          styles.languageItem,
+          {
+            borderColor: isSelected
+              ? tokens.colors.primary
+              : tokens.colors.borderLight,
+            backgroundColor: isSelected
+              ? withAlpha(tokens.colors.primary, 0.1)
+              : tokens.colors.surface,
+          },
+        ])}
+        onPress={() => handleLanguageSelect(item.code)}
+        activeOpacity={0.7}
+      >
+        <View style={styles.languageContent}>
+          <AtomicText style={StyleSheet.flatten([STATIC_TOKENS.typography.headingLarge, styles.flag])}>
+            {item.flag}
+          </AtomicText>
+          <View style={styles.languageText}>
+            <AtomicText
+              style={StyleSheet.flatten([
+                STATIC_TOKENS.typography.bodyMedium,
+                styles.nativeName,
+              ])}
+            >
+              {item.nativeName}
+            </AtomicText>
+            <AtomicText style={StyleSheet.flatten([{ color: tokens.colors.textSecondary }])}>
+              {item.name}
+            </AtomicText>
+          </View>
+        </View>
+        {isSelected && (
+          <AtomicIcon
+            name="CircleCheck"
+            size="md"
+            color="primary"
+          />
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <ScreenLayout scrollable={false} testID="language-selection-screen">
+      {/* Search Input */}
+      <View
+        style={StyleSheet.flatten([
+          styles.searchContainer,
+          {
+            borderColor: isFocused ? tokens.colors.primary : tokens.colors.borderLight,
+            borderWidth: isFocused ? 2 : 1.5,
+            backgroundColor: tokens.colors.surface,
+          },
+        ])}
+      >
+        <AtomicIcon
+          name="Search"
+          size="md"
+          color="secondary"
+          style={styles.searchIcon}
+        />
+        <TextInput
+          style={StyleSheet.flatten([styles.searchInput, { color: tokens.colors.textPrimary }])}
+          placeholder={t('settings.languageSelection.searchPlaceholder')}
+          placeholderTextColor={tokens.colors.textSecondary}
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+        {searchQuery.length > 0 && (
+          <TouchableOpacity
+            onPress={() => setSearchQuery('')}
+            style={styles.clearButton}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <AtomicIcon
+              name="X"
+              size="sm"
+              color="secondary"
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Language List */}
+      <FlatList
+        data={filteredLanguages}
+        renderItem={renderLanguageItem}
+        keyExtractor={item => item.code}
+        contentContainerStyle={styles.listContent}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      />
+    </ScreenLayout>
+  );
+};
+
+const styles = StyleSheet.create({
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginBottom: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: STATIC_TOKENS.borders.radius.lg,
+  },
+  searchIcon: {
+    marginRight: 8,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: STATIC_TOKENS.typography.bodyMedium.fontSize,
+    padding: 0,
+    fontWeight: '500',
+  },
+  clearButton: {
+    padding: STATIC_TOKENS.spacing.xs,
+  },
+  listContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 32,
+  },
+  languageItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: STATIC_TOKENS.spacing.md,
+    borderRadius: STATIC_TOKENS.borders.radius.lg,
+    borderWidth: 2,
+    marginBottom: 8,
+  },
+  languageContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    gap: 16,
+  },
+  flag: {
+    fontSize: STATIC_TOKENS.typography.headingLarge.fontSize,
+  },
+  languageText: {
+    flex: 1,
+    gap: 2,
+  },
+  nativeName: {
+    fontWeight: '600',
+  },
+});
+
+export default LanguageSelectionScreen;
+

package/src/presentation/screens/SettingsScreen.tsx

@@ -0,0 +1,106 @@
+/**
+ * Settings Screen
+ *
+ * Modern settings with Paper List.Section pattern:
+ * - React Native Paper List.Section + List.Subheader
+ * - Organized sections (Appearance, General, About & Legal)
+ * - Paper Divider for visual separation
+ * - Material Design 3 compliance
+ * - OFFLINE MODE: No account, premium, feedback, or donation
+ * - Optimized spacing for better visual density
+ */
+
+import React from 'react';
+import { List, Divider } from 'react-native-paper';
+
+import { useNavigation } from '@react-navigation/native';
+import { useTheme } from '@umituz/react-native-design-system-theme';
+import { ScreenLayout } from '@umituz/react-native-design-system';
+import { SettingItem } from '../components/SettingItem';
+import { getLanguageByCode, useLocalization } from '@umituz/react-native-localization';
+import { notificationService } from '@umituz/react-native-notifications';
+import { useTranslation } from 'react-i18next';
+
+export const SettingsScreen: React.FC = () => {
+  const navigation = useNavigation();
+  const { theme, themeMode } = useTheme();
+  const { currentLanguage } = useLocalization();
+  const { t } = useTranslation();
+
+  const currentLang = getLanguageByCode(currentLanguage);
+  const languageDisplay = currentLang ? `${currentLang.flag} ${currentLang.nativeName}` : 'English';
+  const themeDisplay = themeMode === 'dark' ? t('settings.darkMode') : t('settings.lightMode');
+
+  const handleAppearancePress = () => {
+    navigation.navigate('Appearance' as never);
+  };
+
+  const handleAboutPress = () => {
+    navigation.navigate('About' as never);
+  };
+
+  const handleLegalPress = () => {
+    navigation.navigate('Legal' as never);
+  };
+
+  const handleNotificationsPress = async () => {
+    const hasPermissions = await notificationService.hasPermissions();
+    if (!hasPermissions) {
+      await notificationService.requestPermissions();
+    }
+    navigation.navigate('Notifications' as never);
+  };
+
+  return (
+    <ScreenLayout testID="settings-screen" hideScrollIndicator>
+      {/* Appearance Section */}
+      <List.Section style={{ marginBottom: 8 }}>
+        <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.appearance')}</List.Subheader>
+        <SettingItem
+          icon="Palette"
+          iconGradient={theme.colors.settingGradients.themeLight as unknown as string[]}
+          title={t('settings.appearance.title')}
+          description={t('settings.appearance.themeDescription')}
+          onPress={handleAppearancePress}
+          testID="appearance-button"
+        />
+      </List.Section>
+
+      {/* General Section */}
+      <List.Section style={{ marginBottom: 8 }}>
+        <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.general')}</List.Subheader>
+        <SettingItem
+          icon="Bell"
+          iconGradient={theme.colors.settingGradients.notifications as unknown as string[]}
+          title={t('settings.notifications.title')}
+          description={t('settings.notifications.description')}
+          onPress={handleNotificationsPress}
+          testID="notifications-button"
+        />
+      </List.Section>
+
+      {/* About & Legal Section */}
+      <List.Section style={{ marginBottom: 8 }}>
+        <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.about')}</List.Subheader>
+        <SettingItem
+          icon="Info"
+          iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+          title={t('settings.about.title')}
+          description={t('settings.about.description')}
+          onPress={handleAboutPress}
+          testID="about-button"
+        />
+        <Divider />
+        <SettingItem
+          icon="FileText"
+          iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+          title={t('settings.legal.title')}
+          description={t('settings.legal.description')}
+          onPress={handleLegalPress}
+          testID="legal-button"
+        />
+      </List.Section>
+    </ScreenLayout>
+  );
+};
+