@umituz/react-native-settings 4.16.4 → 4.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.16.4",
+  "version": "4.16.5",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -30,6 +30,7 @@
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@umituz/react-native-about": "^1.11.3",
+    "@umituz/react-native-avatar": "*",
     "@umituz/react-native-appearance": "*",
     "@umituz/react-native-design-system": "*",
     "@umituz/react-native-design-system-atoms": "*",
@@ -64,6 +65,7 @@
     "@umituz/react-native-about": "^1.11.4",
     "@umituz/react-native-alert": "latest",
     "@umituz/react-native-appearance": "^2.0.2",
+    "@umituz/react-native-avatar": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
     "@umituz/react-native-design-system-molecules": "latest",

package/src/presentation/components/DevSettingsSection.tsx

@@ -38,11 +38,11 @@ const DEFAULT_TEXTS = {
 export interface DevSettingsProps {
   /** Enable dev settings section (default: true in __DEV__ mode) */
   enabled?: boolean;
-  /** Callback after storage is cleared - use this to reload the app */
+  /** Callback after storage is cleared - use this to reload the app and reset app state (e.g., onboarding) */
   onAfterClear?: () => Promise<void>;
   /** Custom texts (optional - defaults to English) */
   texts?: Partial<typeof DEFAULT_TEXTS>;
-  /** Custom dev components to render before the clear data button */
+  /** Custom dev components to render BEFORE the "Clear All Data" button (e.g., OnboardingResetSetting) */
   customDevComponents?: React.ReactNode[];
 }
 

package/src/presentation/components/UserProfileHeader.tsx

@@ -4,12 +4,13 @@
  * Works for both guest and authenticated users
  */
 
-import React, { useState, useCallback } from "react";
-import { View, TouchableOpacity, StyleSheet, Image } from "react-native";
+import React, { useCallback } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useNavigation } from "@react-navigation/native";
+import { Avatar } from "@umituz/react-native-avatar";
 
 export interface UserProfileHeaderProps {
   /** User display name */
@@ -50,16 +51,9 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   const navigation = useNavigation();
   const colors = tokens.colors;
   const spacing = tokens.spacing;
-  const [imageError, setImageError] = useState(false);
-
   const finalDisplayName = displayName || (isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : defaultUserDisplayName || "User");
   const avatarName = isAnonymous ? anonymousDisplayName || defaultAnonymousDisplayName || "Anonymous" : finalDisplayName;
 
-  const defaultAvatarService = avatarServiceUrl || "https://ui-avatars.com/api";
-  const finalAvatarUrl =
-    (imageError ? null : avatarUrl) ||
-    `${defaultAvatarService}/?name=${encodeURIComponent(avatarName)}&background=${colors.primary.replace("#", "")}&color=fff&size=64`;
-
   const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
@@ -84,24 +78,13 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   const content = (
     <>
       <View style={styles.content}>
-        <View style={[styles.avatarContainer, { borderColor: `${colors.primary}30` }]}>
-          {finalAvatarUrl ? (
-            <Image
-              source={{ uri: finalAvatarUrl }}
-              style={styles.avatar}
-              onError={() => setImageError(true)}
-            />
-          ) : (
-            <View style={[styles.avatarFallback, { backgroundColor: `${colors.primary}20` }]}>
-              <AtomicText
-                type="headlineMedium"
-                color="primary"
-                style={styles.avatarText}
-              >
-                {avatarName.charAt(0).toUpperCase()}
-              </AtomicText>
-            </View>
-          )}
+        <View style={styles.avatarContainer}>
+          <Avatar
+            uri={avatarUrl}
+            name={avatarName}
+            size="lg"
+            shape="circle"
+          />
         </View>
         <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
           <AtomicText
@@ -161,26 +144,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   avatarContainer: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    borderWidth: 2,
-    overflow: "hidden",
-    backgroundColor: "transparent",
-  },
-  avatar: {
-    width: "100%",
-    height: "100%",
-  },
-  avatarFallback: {
-    width: "100%",
-    height: "100%",
     justifyContent: "center",
     alignItems: "center",
   },
-  avatarText: {
-    fontWeight: "700",
-  },
   textContainer: {
     flex: 1,
   },