@umituz/react-native-settings 4.16.21 → 4.17.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.16.21",
+  "version": "4.17.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "echo 'TypeScript validation passed'",
-    "lint": "echo 'Lint passed'",
-    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "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'"
   },

package/src/presentation/components/CloudSyncSetting.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useCallback } from "react";
+import { Feather } from "@expo/vector-icons";
 import { SettingItem } from "./SettingItem";
 import type { SettingItemProps } from "./SettingItem";
 
@@ -45,7 +46,7 @@ export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
 
   return (
     <SettingItem
-      icon="cloud-outline"
+      icon={(props) => <Feather name={"cloud" as any} {...props} />}
       title={title || "cloud_sync"}
       value={displayDescription}
       onPress={onPress}

package/src/presentation/components/DevSettingsSection.tsx

@@ -9,11 +9,17 @@
 
 import React from "react";
 import { Alert } from "react-native";
+import { Feather } from "@expo/vector-icons";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { storageRepository } from "@umituz/react-native-storage";
 import { SettingsSection } from "./SettingsSection";
 import { SettingItem } from "./SettingItem";
 
+// Icon wrapper for SettingItem compatibility
+const TrashIcon: React.FC<{ size?: number; color?: string }> = ({ size = 24, color }) => (
+  <Feather name="trash-2" size={size} color={color} />
+);
+
 // Default texts (English only - DEV feature)
 const DEFAULT_TEXTS = {
   sectionTitle: "Developer",
@@ -101,7 +107,7 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
     <SettingsSection title={t.sectionTitle}>
       {customDevComponents.map((component) => component)}
       <SettingItem
-        icon="trash-outline"
+        icon={TrashIcon}
         title={t.clearTitle}
         value={t.clearDescription}
         onPress={handleClearData}

package/src/presentation/components/SettingItem.tsx

@@ -6,10 +6,13 @@
 
 import React from "react";
 import { View, Text, Pressable, StyleSheet, Switch } from "react-native";
-import { AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import {
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
 
 export interface SettingItemProps {
-  /** Icon name (Ionicons) */
+  /** Icon name for AtomicIcon */
   icon: string;
   /** Main title text */
   title: string;
@@ -60,6 +63,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
+  const spacing = tokens.spacing;
 
   return (
     <>
@@ -89,7 +93,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
           >
             <AtomicIcon
               name={icon}
-              customSize={24}
+              size={24}
               customColor={iconColor || colors.primary}
             />
           </View>
@@ -128,13 +132,13 @@ export const SettingItem: React.FC<SettingItemProps> = ({
                 false: `${colors.textSecondary}30`,
                 true: colors.primary,
               }}
-              thumbColor={switchThumbColor || "#FFFFFF"}
+              thumbColor={switchThumbColor || colors.onPrimary || "#FFFFFF"}
               ios_backgroundColor={`${colors.textSecondary}30`}
             />
           ) : (
             <AtomicIcon
-              name="chevron-forward-outline"
-              customSize={20}
+              name="chevron-right"
+              size={20}
               customColor={colors.textSecondary}
             />
           )}

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -7,7 +7,6 @@ import React, { Component, ReactNode } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
-import { useLocalization } from '@umituz/react-native-localization';
 
 interface Props {
   children: ReactNode;
@@ -64,19 +63,15 @@ interface ErrorBoundaryFallbackProps {
 
 const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
   error,
-  fallbackTitle,
-  fallbackMessage
+  fallbackTitle = "error_boundary.title",
+  fallbackMessage = "error_boundary.message"
 }) => {
   const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
-  const title = __DEV__ && error?.message
-    ? t("error_boundary.dev_title")
-    : (fallbackTitle || t("error_boundary.title"));
 
+  const title = __DEV__ && error?.message ? "error_boundary.dev_title" : fallbackTitle;
   const message = __DEV__ && error?.message
-    ? `${t("error_boundary.dev_message")}: ${error.message}`
-    : (fallbackMessage || t("error_boundary.message"));
+    ? `error_boundary.dev_message: ${error.message}`
+    : fallbackMessage;
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>

package/src/presentation/components/StorageClearSetting.tsx

@@ -5,6 +5,7 @@
  */
 
 import React from "react";
+import { Feather } from "@expo/vector-icons";
 import { SettingItem } from "./SettingItem";
 
 export interface StorageClearSettingProps {
@@ -36,7 +37,7 @@ export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
 
   return (
     <SettingItem
-      icon="trash-outline"
+      icon={(props) => <Feather name={"trash-2" as any} {...props} />}
       title={defaultTitle}
       value={defaultDescription}
       onPress={onPress}