@umituz/react-native-settings 4.16.18 → 4.16.20

package/package.json

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

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/SettingsErrorBoundary.tsx

@@ -7,6 +7,7 @@ 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;
@@ -63,15 +64,19 @@ interface ErrorBoundaryFallbackProps {
 
 const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
   error,
-  fallbackTitle = "error_boundary.title",
-  fallbackMessage = "error_boundary.message"
+  fallbackTitle,
+  fallbackMessage
 }) => {
   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
-    ? `error_boundary.dev_message: ${error.message}`
-    : fallbackMessage;
+    ? `${t("error_boundary.dev_message")}: ${error.message}`
+    : (fallbackMessage || t("error_boundary.message"));
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>