@umituz/react-native-settings 4.23.72 → 4.23.74

package/package.json

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

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -4,29 +4,20 @@
  * Fully configurable and generic
  * Optimized for performance and memory safety
  */
-import React, { useMemo, useCallback } from 'react';
-import {
-  View,
-  StyleSheet,
-  ScrollView,
-  ViewStyle,
-  TextStyle,
-} from 'react-native';
-import { AboutHeader } from '../components/AboutHeader';
-import { AboutContent } from '../components/AboutContent';
-import { AboutConfig } from '../../domain/entities/AppInfo';
+import React from 'react';
+import { AboutScreenContainer } from './AboutScreenContainer';
 
 export interface AboutScreenProps {
   /** Configuration for the about screen */
-  config: AboutConfig;
+  config: import('../../domain/entities/AppInfo').AboutConfig;
   /** Custom container style */
-  containerStyle?: ViewStyle;
+  containerStyle?: import('react-native').ViewStyle;
   /** Custom header style */
-  headerStyle?: ViewStyle;
+  headerStyle?: import('react-native').ViewStyle;
   /** Custom title style */
-  titleStyle?: TextStyle;
+  titleStyle?: import('react-native').TextStyle;
   /** Custom version style */
-  versionStyle?: TextStyle;
+  versionStyle?: import('react-native').TextStyle;
   /** Show app header with name and version */
   showHeader?: boolean;
   /** Custom header component */
@@ -37,160 +28,6 @@ export interface AboutScreenProps {
   testID?: string;
 }
 
-import { useAboutInfo } from '../hooks/useAboutInfo';
-import { useAppDesignTokens, AtomicText, type DesignTokens } from '@umituz/react-native-design-system';
-
-export const AboutScreen: React.FC<AboutScreenProps> = ({
-  config,
-  containerStyle,
-  headerStyle,
-  titleStyle,
-  versionStyle,
-  showHeader = true,
-  headerComponent,
-  footerComponent,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-  const colors = tokens.colors;
-
-  const { appInfo, loading, error } = useAboutInfo({
-    autoInit: true,
-    initialConfig: config,
-  });
-
-  // Memoize header rendering to prevent unnecessary re-renders
-  const renderHeader = useCallback(() => {
-    if (headerComponent) {
-      return headerComponent;
-    }
-
-    if (!showHeader || !appInfo) {
-      return null;
-    }
-
-    return (
-      <AboutHeader
-        appInfo={appInfo}
-        containerStyle={headerStyle}
-        titleStyle={titleStyle}
-        versionStyle={versionStyle}
-        versionPrefix={config.texts?.versionPrefix}
-      />
-    );
-  }, [headerComponent, showHeader, appInfo, headerStyle, titleStyle, versionStyle, config.texts?.versionPrefix]);
-
-  // Memoize footer rendering
-  const renderFooter = useCallback(() => {
-    if (!footerComponent) {
-      return null;
-    }
-
-    return (
-      <View style={[styles.footer, { borderTopColor: colors.border }]}>
-        {footerComponent}
-      </View>
-    );
-  }, [footerComponent, colors.border, styles]);
-
-  // Memoize content rendering
-  const renderContent = useCallback(() => {
-    if (!appInfo) {
-      return null;
-    }
-
-    return (
-      <AboutContent
-        appInfo={appInfo}
-        config={config}
-      />
-    );
-  }, [appInfo, config]);
-
-  // Memoize container style to prevent unnecessary re-renders
-  const containerStyles = useMemo(() => {
-    return [
-      styles.container,
-      { backgroundColor: colors.backgroundPrimary },
-      containerStyle
-    ];
-  }, [containerStyle, colors.backgroundPrimary, styles]);
-
-  const texts = config.texts || {};
-
-  if (loading) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="textSecondary"
-          style={styles.loadingText}
-        >
-          {texts.loading}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="error"
-          style={styles.errorText}
-        >
-          {texts.errorPrefix} {error}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  if (!appInfo) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="textSecondary"
-          style={styles.errorText}
-        >
-          {texts.noInfo}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  return (
-    <ScrollView
-      style={containerStyles}
-      testID={testID}
-      contentContainerStyle={{ paddingBottom: 32 }}
-    >
-      {renderHeader()}
-      {renderContent()}
-      {renderFooter()}
-    </ScrollView>
-  );
-};
-
-const getStyles = (tokens: DesignTokens) => StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  footer: {
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    borderTopWidth: 1,
-  },
-  loadingText: {
-    textAlign: 'center',
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    marginTop: 20,
-  },
-  errorText: {
-    textAlign: 'center',
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    marginTop: 20,
-  },
-});
+export const AboutScreen: React.FC<AboutScreenProps> = (props) => {
+  return <AboutScreenContainer {...props} />;
+};

package/src/domains/about/presentation/screens/AboutScreenContainer.tsx

@@ -0,0 +1,109 @@
+/**
+ * AboutScreen Container Component
+ * Handles business logic and state management for About screen
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AboutScreenContent } from './AboutScreenContent';
+import { useAboutInfo } from '../hooks/useAboutInfo';
+import { useAppDesignTokens, AtomicText, type DesignTokens } from '@umituz/react-native-design-system';
+import type { AboutScreenProps } from './AboutScreen';
+
+export const AboutScreenContainer: React.FC<AboutScreenProps> = ({
+  config,
+  containerStyle,
+  headerStyle,
+  titleStyle,
+  versionStyle,
+  showHeader = true,
+  headerComponent,
+  footerComponent,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  const { appInfo, loading, error } = useAboutInfo({
+    autoInit: true,
+    initialConfig: config,
+  });
+
+  const containerStyles = React.useMemo(() => {
+    return [
+      styles.container,
+      { backgroundColor: tokens.colors.backgroundPrimary },
+      containerStyle
+    ];
+  }, [containerStyle, tokens.colors.backgroundPrimary, styles]);
+
+  const texts = config.texts || {};
+
+  if (loading) {
+    return (
+      <View style={containerStyles} testID={testID}>
+        <AtomicText
+          type="bodyMedium"
+          color="textSecondary"
+          style={styles.statusText}
+        >
+          {texts.loading}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={containerStyles} testID={testID}>
+        <AtomicText
+          type="bodyMedium"
+          color="error"
+          style={styles.statusText}
+        >
+          {texts.errorPrefix} {error}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  if (!appInfo) {
+    return (
+      <View style={containerStyles} testID={testID}>
+        <AtomicText
+          type="bodyMedium"
+          color="textSecondary"
+          style={styles.statusText}
+        >
+          {texts.noInfo}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  return (
+    <AboutScreenContent
+      appInfo={appInfo}
+      config={config}
+      containerStyle={containerStyle}
+      headerStyle={headerStyle}
+      titleStyle={titleStyle}
+      versionStyle={versionStyle}
+      showHeader={showHeader}
+      headerComponent={headerComponent}
+      footerComponent={footerComponent}
+      testID={testID}
+      _tokens={tokens}
+    />
+  );
+};
+
+const getStyles = (tokens: DesignTokens) => StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  statusText: {
+    textAlign: 'center',
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+    marginTop: 20,
+  },
+});

package/src/domains/about/presentation/screens/AboutScreenContent.tsx

@@ -0,0 +1,122 @@
+/**
+ * AboutScreen Content Component
+ * Pure presentational component for About screen
+ * No business logic, only rendering
+ */
+import React, { useMemo, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import { AboutHeader } from '../components/AboutHeader';
+import { AboutContent } from '../components/AboutContent';
+import { AboutConfig, AppInfo } from '../../domain/entities/AppInfo';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+import type { AboutScreenProps } from './AboutScreen';
+
+export interface AboutScreenContentProps extends Omit<AboutScreenProps, 'config'> {
+  /** App info data */
+  appInfo: AppInfo;
+  /** Configuration for the about screen */
+  config: AboutConfig;
+  /** Design tokens */
+  _tokens: DesignTokens;
+}
+
+export const AboutScreenContent: React.FC<AboutScreenContentProps> = ({
+  appInfo,
+  config,
+  containerStyle,
+  headerStyle,
+  titleStyle,
+  versionStyle,
+  showHeader = true,
+  headerComponent,
+  footerComponent,
+  testID,
+  _tokens,
+}) => {
+  const styles = getStyles(_tokens);
+  const colors = _tokens.colors;
+
+  // Memoize header rendering to prevent unnecessary re-renders
+  const renderHeader = useCallback(() => {
+    if (headerComponent) {
+      return headerComponent;
+    }
+
+    if (!showHeader || !appInfo) {
+      return null;
+    }
+
+    return (
+      <AboutHeader
+        appInfo={appInfo}
+        containerStyle={headerStyle}
+        titleStyle={titleStyle}
+        versionStyle={versionStyle}
+        versionPrefix={config.texts?.versionPrefix}
+      />
+    );
+  }, [headerComponent, showHeader, appInfo, headerStyle, titleStyle, versionStyle, config.texts?.versionPrefix]);
+
+  // Memoize footer rendering
+  const renderFooter = useCallback(() => {
+    if (!footerComponent) {
+      return null;
+    }
+
+    return (
+      <View style={[styles.footer, { borderTopColor: colors.border }]}>
+        {footerComponent}
+      </View>
+    );
+  }, [footerComponent, colors.border, styles]);
+
+  // Memoize content rendering
+  const renderContent = useCallback(() => {
+    if (!appInfo) {
+      return null;
+    }
+
+    return (
+      <AboutContent
+        appInfo={appInfo}
+        config={config}
+      />
+    );
+  }, [appInfo, config]);
+
+  // Memoize container style to prevent unnecessary re-renders
+  const containerStyles = useMemo(() => {
+    return [
+      styles.container,
+      { backgroundColor: colors.backgroundPrimary },
+      containerStyle
+    ];
+  }, [containerStyle, colors.backgroundPrimary, styles]);
+
+  return (
+    <ScrollView
+      style={containerStyles}
+      testID={testID}
+      contentContainerStyle={{ paddingBottom: 32 }}
+    >
+      {renderHeader()}
+      {renderContent()}
+      {renderFooter()}
+    </ScrollView>
+  );
+};
+
+const getStyles = (_tokens: DesignTokens) => StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  footer: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+  },
+});

package/src/domains/dev/presentation/screens/EnvViewerScreen.tsx

@@ -4,16 +4,16 @@
  * DEV-only feature with hardcoded English text
  */
 
-import React, { useState } from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
+import React, { useState, useMemo } from "react";
+import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicIcon,
   AtomicTouchable,
   useAppDesignTokens,
-  useSafeAreaInsets,
   useAppNavigation,
   AlertService,
+  ScreenLayout,
   NavigationHeader,
 } from "@umituz/react-native-design-system";
 import * as Clipboard from "expo-clipboard";
@@ -26,7 +26,6 @@ export interface EnvViewerScreenProps {
 
 export const EnvViewerScreen: React.FC<EnvViewerScreenProps> = ({ config }) => {
   const tokens = useAppDesignTokens();
-  const { bottom } = useSafeAreaInsets();
   const navigation = useAppNavigation();
   const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set());
 
@@ -94,62 +93,64 @@ export const EnvViewerScreen: React.FC<EnvViewerScreenProps> = ({ config }) => {
     );
   };
 
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <NavigationHeader title="Environment Variables" onBackPress={() => navigation.goBack()} />
-
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{ paddingBottom: bottom + tokens.spacing.lg }}
-      >
-        {config.environmentName && (
-          <View style={[styles.infoCard, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-            <AtomicText type="labelSmall" color="textSecondary">
-              Environment
-            </AtomicText>
-            <AtomicText type="titleMedium" color="textPrimary">
-              {config.environmentName}
-            </AtomicText>
-          </View>
-        )}
+  const header = useMemo(() => (
+    <NavigationHeader title="Environment Variables" onBackPress={() => navigation.goBack()} />
+  ), [navigation]);
 
-        {config.version && (
-          <View style={[styles.infoCard, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-            <AtomicText type="labelSmall" color="textSecondary">
-              Version
-            </AtomicText>
-            <AtomicText type="titleMedium" color="textPrimary">
-              {config.version}
-              {config.buildNumber && ` (${config.buildNumber})`}
-            </AtomicText>
-          </View>
-        )}
-
-        <View style={styles.section}>
-          <AtomicText type="titleMedium" color="textPrimary" style={{ marginBottom: tokens.spacing.md }}>
-            Configuration
+  return (
+    <ScreenLayout
+      scrollable={true}
+      header={header}
+      hideScrollIndicator={false}
+      contentContainerStyle={styles.scrollContent}
+    >
+      {config.environmentName && (
+        <View style={[styles.infoCard, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+          <AtomicText type="labelSmall" color="textSecondary">
+            Environment
+          </AtomicText>
+          <AtomicText type="titleMedium" color="textPrimary">
+            {config.environmentName}
           </AtomicText>
-          {config.variables.map(renderVariable)}
         </View>
+      )}
 
-        <View style={[styles.warningCard, { backgroundColor: tokens.colors.errorContainer }]}>
-          <AtomicIcon name="alert-circle" size="sm" color="error" />
-          <AtomicText
-            type="bodySmall"
-            color="error"
-            style={{ marginLeft: tokens.spacing.sm, flex: 1 }}
-          >
-            This screen is only visible in development mode. Never share sensitive values.
+      {config.version && (
+        <View style={[styles.infoCard, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+          <AtomicText type="labelSmall" color="textSecondary">
+            Version
+          </AtomicText>
+          <AtomicText type="titleMedium" color="textPrimary">
+            {config.version}
+            {config.buildNumber && ` (${config.buildNumber})`}
           </AtomicText>
         </View>
-      </ScrollView>
-    </View>
+      )}
+
+      <View style={styles.section}>
+        <AtomicText type="titleMedium" color="textPrimary" style={{ marginBottom: tokens.spacing.md }}>
+          Configuration
+        </AtomicText>
+        {config.variables.map(renderVariable)}
+      </View>
+
+      <View style={[styles.warningCard, { backgroundColor: tokens.colors.errorContainer }]}>
+        <AtomicIcon name="alert-circle" size="sm" color="error" />
+        <AtomicText
+          type="bodySmall"
+          color="error"
+          style={{ marginLeft: tokens.spacing.sm, flex: 1 }}
+        >
+          This screen is only visible in development mode. Never share sensitive values.
+        </AtomicText>
+      </View>
+    </ScreenLayout>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
+  scrollContent: {
+    paddingBottom: 20,
   },
   infoCard: {
     padding: 16,

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -13,10 +13,8 @@
  */
 
 import React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
+import { View, StyleSheet } from 'react-native';
+import { useAppDesignTokens, withAlpha, ScreenLayout } from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import type { IconName } from '@umituz/react-native-design-system';
 import { useLocalization } from '../../../localization';
@@ -49,52 +47,42 @@ export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
   const displayContent = content || t(contentKey);
 
   return (
-    <SafeAreaView
-      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+    <ScreenLayout
+      scrollable={true}
       edges={['bottom']}
+      contentContainerStyle={styles.scrollContent}
+      hideScrollIndicator={false}
     >
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Icon Header */}
-        <View style={styles.iconHeader}>
-          <View
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: withAlpha(tokens.colors.warning, 0.1),
-                borderColor: withAlpha(tokens.colors.warning, 0.3),
-              },
-            ]}
-          >
-            <AtomicIcon name={iconName as IconName} color="warning" size="xl" />
-          </View>
+      {/* Icon Header */}
+      <View style={styles.iconHeader}>
+        <View
+          style={[
+            styles.iconContainer,
+            {
+              backgroundColor: withAlpha(tokens.colors.warning, 0.1),
+              borderColor: withAlpha(tokens.colors.warning, 0.3),
+            },
+          ]}
+        >
+          <AtomicIcon name={iconName as IconName} color="warning" size="xl" />
         </View>
+      </View>
 
-        {/* Title */}
-        <AtomicText type="headlineMedium" color="primary" style={styles.title}>
-          {displayTitle}
-        </AtomicText>
+      {/* Title */}
+      <AtomicText type="headlineMedium" color="primary" style={styles.title}>
+        {displayTitle}
+      </AtomicText>
 
-        {/* Content */}
-        <AtomicText type="bodyMedium" color="secondary" style={styles.content}>
-          {displayContent}
-        </AtomicText>
-      </ScrollView>
-    </SafeAreaView>
+      {/* Content */}
+      <AtomicText type="bodyMedium" color="secondary" style={styles.content}>
+        {displayContent}
+      </AtomicText>
+    </ScreenLayout>
   );
 };
 
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    scrollView: {
-      flex: 1,
-    },
     scrollContent: {
       padding: tokens.spacing.lg,
       paddingTop: tokens.spacing.xl,