@umituz/react-native-settings 4.16.19 → 4.16.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.16.19",
+  "version": "4.16.21",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/CloudSyncSetting.tsx

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

package/src/presentation/components/DevSettingsSection.tsx

@@ -9,17 +9,11 @@
 
 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",
@@ -107,7 +101,7 @@ export const DevSettingsSection: React.FC<DevSettingsProps> = ({
     <SettingsSection title={t.sectionTitle}>
       {customDevComponents.map((component) => component)}
       <SettingItem
-        icon={TrashIcon}
+        icon="trash-outline"
         title={t.clearTitle}
         value={t.clearDescription}
         onPress={handleClearData}

package/src/presentation/components/SettingItem.tsx

@@ -6,12 +6,11 @@
 
 import React from "react";
 import { View, Text, Pressable, StyleSheet, Switch } from "react-native";
-import { Feather } from "@expo/vector-icons";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
 
 export interface SettingItemProps {
-  /** Icon component from @expo/vector-icons */
-  icon: React.ComponentType<{ size?: number; color?: string; name?: string }>;
+  /** Icon name (Ionicons) */
+  icon: string;
   /** Main title text */
   title: string;
   /** Optional description/value text */
@@ -44,7 +43,7 @@ export interface SettingItemProps {
 }
 
 export const SettingItem: React.FC<SettingItemProps> = ({
-  icon: Icon,
+  icon,
   title,
   value,
   onPress,
@@ -61,7 +60,6 @@ export const SettingItem: React.FC<SettingItemProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
-  const spacing = tokens.spacing;
 
   return (
     <>
@@ -89,7 +87,11 @@ export const SettingItem: React.FC<SettingItemProps> = ({
               },
             ]}
           >
-            <Icon size={24} color={iconColor || colors.primary} />
+            <AtomicIcon
+              name={icon}
+              customSize={24}
+              customColor={iconColor || colors.primary}
+            />
           </View>
           <View style={styles.textContainer}>
             <Text
@@ -130,7 +132,11 @@ export const SettingItem: React.FC<SettingItemProps> = ({
               ios_backgroundColor={`${colors.textSecondary}30`}
             />
           ) : (
-            <Feather name="chevron-right" size={20} color={colors.textSecondary} />
+            <AtomicIcon
+              name="chevron-forward-outline"
+              customSize={20}
+              customColor={colors.textSecondary}
+            />
           )}
         </View>
       </Pressable>

package/src/presentation/components/StorageClearSetting.tsx

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