@umituz/react-native-settings 4.20.53 → 4.20.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.53",
+  "version": "4.20.55",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -4,7 +4,7 @@
  * Fully configurable and generic
  * Optimized for performance and memory safety
  */
-import React, { useMemo, useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import {
   TouchableOpacity,
   View,
@@ -13,6 +13,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export interface AboutSettingItemProps {
   /** Icon component (any React component) */
@@ -45,9 +46,7 @@ export interface AboutSettingItemProps {
   chevronColor?: string;
 }
 
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-
-export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
+export const AboutSettingItem: React.FC<AboutSettingItemProps> = memo(({
   icon,
   title,
   description,
@@ -67,107 +66,61 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   const styles = getStyles(tokens);
   const colors = tokens.colors;
 
-  // Memoize container type to prevent unnecessary re-renders
-  const Container = useMemo(() => {
-    return onPress ? TouchableOpacity : View;
-  }, [onPress]) as React.ComponentType<React.ComponentProps<typeof TouchableOpacity | typeof View>>;
-
-  // Memoize container styles
-  const containerStyles = useMemo(() => {
-    return [
-      styles.container,
-      { backgroundColor: colors.surface },
-      disabled && styles.disabled,
-      containerStyle
-    ];
-  }, [disabled, containerStyle, colors.surface, styles]);
+  const Container = onPress ? TouchableOpacity : View;
 
-  // Memoize icon container styles
-  const iconContainerStyles = useMemo(() => {
-    return [
-      styles.iconContainer,
-      iconContainerStyle
-    ];
-  }, [iconContainerStyle, styles]);
-
-  // Memoize chevron styles
-  const chevronStyles = useMemo(() => {
-    return [
-      styles.chevron,
-      { color: chevronColor || colors.textSecondary }
-    ];
-  }, [chevronColor, colors.textSecondary, styles]);
-
-  // Memoize press handler to prevent unnecessary re-renders
   const handlePress = useCallback(() => {
     if (onPress && !disabled) {
       onPress();
     }
   }, [onPress, disabled]);
 
-  // Memoize icon rendering
-  const renderIcon = useMemo(() => {
-    if (!icon) {
-      return null;
-    }
+  const containerStyles = [
+    styles.container,
+    { backgroundColor: colors.surface },
+    disabled && styles.disabled,
+    containerStyle,
+  ];
 
-    return (
-      <View style={iconContainerStyles}>
-        {icon}
-      </View>
-    );
-  }, [icon, iconContainerStyles]);
+  const iconContainerStyles = [
+    styles.iconContainer,
+    iconContainerStyle,
+  ];
+
+  const chevronStyles = [
+    styles.chevron,
+    { color: chevronColor || colors.textSecondary },
+  ];
+
+  return (
+    <Container
+      style={containerStyles}
+      onPress={handlePress}
+      disabled={disabled}
+      testID={testID}
+    >
+      {icon && <View style={iconContainerStyles}>{icon}</View>}
 
-  // Memoize content rendering
-  const renderContent = useMemo(() => {
-    return (
       <View style={styles.content}>
-        <Text style={[styles.title, { color: colors.textPrimary }, titleStyle]}>{title}</Text>
+        <Text style={[styles.title, { color: colors.textPrimary }, titleStyle]}>
+          {title}
+        </Text>
         {description && (
           <Text style={[styles.description, { color: colors.textSecondary }, descriptionStyle]}>
             {description}
           </Text>
         )}
       </View>
-    );
-  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary, styles]);
-
-  // Memoize value rendering
-  const renderValue = useMemo(() => {
-    if (!value) {
-      return null;
-    }
-
-    return (
-      <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>{value}</Text>
-    );
-  }, [value, valueStyle, colors.textSecondary, styles]);
-
-  // Memoize chevron rendering
-  const renderChevron = useMemo(() => {
-    if (!showChevron) {
-      return null;
-    }
 
-    return (
-      <Text style={chevronStyles}>›</Text>
-    );
-  }, [showChevron, chevronStyles]);
+      {value && (
+        <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>
+          {value}
+        </Text>
+      )}
 
-  return (
-    <Container
-      style={containerStyles}
-      onPress={handlePress}
-      disabled={disabled}
-      testID={testID}
-    >
-      {renderIcon}
-      {renderContent}
-      {renderValue}
-      {renderChevron}
+      {showChevron && <Text style={chevronStyles}>›</Text>}
     </Container>
   );
-};
+});
 
 const getStyles = (tokens: any) => StyleSheet.create({
   container: {
@@ -206,4 +159,4 @@ const getStyles = (tokens: any) => StyleSheet.create({
     fontSize: 20,
     fontWeight: '300',
   },
-});
+});

package/src/domains/about/presentation/hooks/useAboutInfo.ts

@@ -3,35 +3,18 @@
  * Provides reactive state management for About data
  * Optimized for performance and memory safety
  */
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { AppInfo, AboutConfig } from '../../domain/entities/AppInfo';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { AppInfo, AboutConfig } from '../../domain/entities/AppInfo';
 import { AboutRepository } from '../../infrastructure/repositories/AboutRepository';
-
-export interface UseAboutInfoOptions {
-  /** Initial configuration */
-  initialConfig?: AboutConfig;
-  /** Auto-initialize on mount */
-  autoInit?: boolean;
-}
-
-export interface UseAboutInfoReturn {
-  /** Current app info */
-  appInfo: AppInfo | null;
-  /** Loading state */
-  loading: boolean;
-  /** Error state */
-  error: string | null;
-  /** Initialize with config */
-  initialize: (config: AboutConfig) => Promise<void>;
-  /** Update with new config */
-  update: (config: AboutConfig) => Promise<void>;
-  /** Update app info */
-  updateAppInfo: (updates: Partial<AppInfo>) => Promise<void>;
-  /** Refresh current app info */
-  refresh: () => Promise<void>;
-  /** Reset to initial state */
-  reset: () => void;
-}
+import type { UseAboutInfoOptions, UseAboutInfoReturn } from './useAboutInfo.types';
+import {
+  setErrorIfMounted,
+  setLoadingIfMounted,
+  initializeAppInfo,
+  updateAppInfoConfig,
+  updateAppInfoPartial,
+  refreshAppInfo,
+} from './useAboutInfo.utils';
 
 export const useAboutInfo = (
   options: UseAboutInfoOptions = {}
@@ -42,161 +25,62 @@ export const useAboutInfo = (
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Prevent infinite loops and memory leaks
   const isInitializedRef = useRef(false);
   const isMountedRef = useRef(true);
 
-  const initialize = useCallback(async (config: AboutConfig, force = false) => {
-    // Prevent multiple initializations unless forced
-    if (isInitializedRef.current && !force) {
-      return;
-    }
-
-    // Check if component is still mounted
-    if (!isMountedRef.current) {
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const defaultAppInfo: AppInfo = {
-        name: config.appInfo?.name || '',
-        version: config.appInfo?.version || '1.0.0',
-        description: config.appInfo?.description,
-        developer: config.appInfo?.developer,
-        contactEmail: config.appInfo?.contactEmail,
-        websiteUrl: config.appInfo?.websiteUrl,
-        websiteDisplay: config.appInfo?.websiteDisplay,
-        moreAppsUrl: config.appInfo?.moreAppsUrl,
-      };
-
-      await repository.saveAppInfo(defaultAppInfo);
-
-      // Only update state if component is still mounted
-      if (isMountedRef.current) {
-        setAppInfo(defaultAppInfo);
-        isInitializedRef.current = true;
-      }
-    } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
-    } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
-    }
-  }, [repository]);
-
-  const update = useCallback(async (config: AboutConfig) => {
-    if (!isMountedRef.current) {
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const updatedAppInfo: AppInfo = {
-        name: config.appInfo?.name || '',
-        version: config.appInfo?.version || '1.0.0',
-        description: config.appInfo?.description,
-        developer: config.appInfo?.developer,
-        contactEmail: config.appInfo?.contactEmail,
-        websiteUrl: config.appInfo?.websiteUrl,
-        websiteDisplay: config.appInfo?.websiteDisplay,
-        moreAppsUrl: config.appInfo?.moreAppsUrl,
-      };
-
-      await repository.saveAppInfo(updatedAppInfo);
-
-      // Only update state if component is still mounted
-      if (isMountedRef.current) {
-        setAppInfo(updatedAppInfo);
-      }
-    } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
-    } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
+  const initialize = useCallback(
+    (config: AboutConfig) => initializeAppInfo(
+      config,
+      repository,
+      isMountedRef,
+      isInitializedRef,
+      setAppInfo,
+      setError,
+      setLoading
+    ),
+    [repository]
+  );
+
+  const update = useCallback(
+    (config: AboutConfig) => updateAppInfoConfig(
+      config,
+      repository,
+      isMountedRef,
+      setAppInfo,
+      setError,
+      setLoading
+    ),
+    [repository]
+  );
+
+  const updateAppInfoCallback = useCallback(
+    (updates: Partial<AppInfo>) => {
+      if (!appInfo) {
+        setErrorIfMounted(isMountedRef, setError, 'App info not initialized');
+        return Promise.resolve();
       }
-    }
-  }, [repository]);
-
-  const updateAppInfo = useCallback(async (updates: Partial<AppInfo>) => {
-    if (!appInfo || !isMountedRef.current) {
-      if (isMountedRef.current) {
-        setError('App info not initialized');
-      }
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const updatedInfo = await repository.updateAppInfo(updates);
-
-      // Only update state if component is still mounted
-      if (isMountedRef.current) {
-        setAppInfo(updatedInfo);
-      }
-    } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
-    } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
-    }
-  }, [repository, appInfo]);
-
-  const refresh = useCallback(async () => {
-    if (!isMountedRef.current || !appInfo) {
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const refreshedInfo = await repository.getAppInfo();
-
-      // Only update state if component is still mounted
-      if (isMountedRef.current) {
-        setAppInfo(refreshedInfo);
-      }
-    } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
-    } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
-    }
-  }, [repository, appInfo]);
+      return updateAppInfoPartial(
+        updates,
+        repository,
+        isMountedRef,
+        setAppInfo,
+        setError,
+        setLoading
+      );
+    },
+    [repository, appInfo]
+  );
+
+  const refresh = useCallback(
+    () => refreshAppInfo(
+      repository,
+      isMountedRef,
+      setAppInfo,
+      setError,
+      setLoading
+    ),
+    [repository]
+  );
 
   const reset = useCallback(() => {
     if (!isMountedRef.current) {
@@ -209,43 +93,36 @@ export const useAboutInfo = (
     isInitializedRef.current = false;
   }, []);
 
-  // Cleanup on unmount to prevent memory leaks
+  // Cleanup on unmount
   useEffect(() => {
     return () => {
       isMountedRef.current = false;
 
-      // Cleanup repository if it has destroy method
       if (repository && typeof repository.destroy === 'function') {
         repository.destroy();
       }
     };
   }, [repository]);
 
-
-
-  // Set initial config when provided (if autoInit is not explicitly false)
+  // Initialize with default config if provided
   useEffect(() => {
-    if (initialConfig && autoInit !== false && isMountedRef.current && !isInitializedRef.current) {
-      const defaultAppInfo: AppInfo = {
-        name: initialConfig.appInfo?.name || '',
-        version: initialConfig.appInfo?.version || '1.0.0',
-        description: initialConfig.appInfo?.description,
-        developer: initialConfig.appInfo?.developer,
-        contactEmail: initialConfig.appInfo?.contactEmail,
-        websiteUrl: initialConfig.appInfo?.websiteUrl,
-        websiteDisplay: initialConfig.appInfo?.websiteDisplay,
-        moreAppsUrl: initialConfig.appInfo?.moreAppsUrl,
-      };
-
+    if (
+      initialConfig &&
+      autoInit !== false &&
+      isMountedRef.current &&
+      !isInitializedRef.current
+    ) {
+      const { createDefaultAppInfo } = require('../../utils/AppInfoFactory');
+      const defaultAppInfo = createDefaultAppInfo(initialConfig);
       setAppInfo(defaultAppInfo);
       isInitializedRef.current = true;
     }
   }, [initialConfig, autoInit]);
 
-  // Auto-initialize with dependency optimization
+  // Auto-initialize if autoInit is true
   useEffect(() => {
     if (autoInit === true && initialConfig && isMountedRef.current) {
-      initialize(initialConfig, true);
+      initialize(initialConfig);
     }
   }, [autoInit, initialConfig, initialize]);
 
@@ -255,8 +132,11 @@ export const useAboutInfo = (
     error,
     initialize,
     update,
-    updateAppInfo,
+    updateAppInfo: updateAppInfoCallback,
     refresh,
     reset,
   };
-};
+};
+
+// Re-export types for convenience
+export type { UseAboutInfoOptions, UseAboutInfoReturn } from './useAboutInfo.types';

package/src/domains/about/presentation/hooks/useAboutInfo.types.ts

@@ -0,0 +1,32 @@
+/**
+ * useAboutInfo Hook Types
+ * Type definitions for about info hook
+ */
+
+import type { AppInfo, AboutConfig } from '../../domain/entities/AppInfo';
+
+export interface UseAboutInfoOptions {
+  /** Initial configuration */
+  initialConfig?: AboutConfig;
+  /** Auto-initialize on mount */
+  autoInit?: boolean;
+}
+
+export interface UseAboutInfoReturn {
+  /** Current app info */
+  appInfo: AppInfo | null;
+  /** Loading state */
+  loading: boolean;
+  /** Error state */
+  error: string | null;
+  /** Initialize with config */
+  initialize: (config: AboutConfig) => Promise<void>;
+  /** Update with new config */
+  update: (config: AboutConfig) => Promise<void>;
+  /** Update app info */
+  updateAppInfo: (updates: Partial<AppInfo>) => Promise<void>;
+  /** Refresh current app info */
+  refresh: () => Promise<void>;
+  /** Reset to initial state */
+  reset: () => void;
+}