@umituz/react-native-settings 4.20.19 → 4.20.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.19",
+  "version": "4.20.20",
   "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/presentation/components/SettingsItemCard.tsx

@@ -58,7 +58,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
 
     const renderContent = () => (
         <View style={styles.content}>
-            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg }]}>
+            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg, borderRadius: tokens.borderRadius.md }]}>
                 <AtomicIcon name={icon} size="lg" customColor={defaultIconColor} />
             </View>
             <View style={styles.textContainer}>
@@ -66,7 +66,7 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
                     type="bodyLarge"
                     color="onSurface"
                     numberOfLines={1}
-                    style={{ marginBottom: 4 }}
+                    style={{ marginBottom: tokens.spacing.xs }}
                 >
                     {title}
                 </AtomicText>
@@ -86,13 +86,16 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
         <View
             style={[
                 styles.sectionContainer,
-                { backgroundColor: colors.surface },
+                { 
+                    backgroundColor: colors.surface,
+                    borderRadius: tokens.borderRadius.lg,
+                },
                 containerStyle,
             ]}
         >
             {!!sectionTitle && (
                 <View style={styles.headerContainer}>
-                    <AtomicText type="titleMedium" color="primary">
+                    <AtomicText type="labelMedium" color="textSecondary" style={{ textTransform: 'uppercase' }}>
                         {sectionTitle}
                     </AtomicText>
                 </View>
@@ -121,7 +124,6 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
 const styles = StyleSheet.create({
     sectionContainer: {
         marginBottom: 16,
-        borderRadius: 12,
         overflow: "hidden",
     },
     headerContainer: {
@@ -144,7 +146,6 @@ const styles = StyleSheet.create({
     iconContainer: {
         width: 48,
         height: 48,
-        borderRadius: 12,
         justifyContent: "center",
         alignItems: "center",
         marginRight: 16,

package/src/presentation/screens/SettingsScreen.tsx

@@ -7,8 +7,8 @@ import React from "react";
 import { View, StatusBar, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
-  useDesignSystemTheme,
   useAppDesignTokens,
+  ScreenLayout,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -67,12 +67,8 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   devSettings,
 }) => {
   const navigation = useNavigation();
-  const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
 
-  const isDark = themeMode === "dark";
-  const colors = tokens.colors;
-
   const normalizedConfig = normalizeSettingsConfig(config);
   const features = useFeatureDetection(normalizedConfig, navigation, featureOptions);
 
@@ -80,11 +76,9 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   const shouldShowUserProfile = showUserProfile ?? features.userProfile;
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.backgroundPrimary }]}>
-      <StatusBar barStyle={isDark ? "light-content" : "dark-content"} />
-
-      <SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />
-
+    <ScreenLayout
+      header={<SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />}
+    >
       <SettingsErrorBoundary>
         <SettingsContent
           normalizedConfig={normalizedConfig}
@@ -99,7 +93,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           devSettings={devSettings}
         />
       </SettingsErrorBoundary>
-    </View>
+    </ScreenLayout>
   );
 };
 

package/src/presentation/screens/components/SettingsContent.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
@@ -56,7 +55,6 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   devSettings,
 }) => {
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
   const { t } = useLocalization();
 
   const hasAnyFeatures = useMemo(() =>
@@ -75,18 +73,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   );
 
   return (
-    <ScrollView
-      style={styles.scrollView}
-      contentContainerStyle={[
-        styles.scrollContent,
-        {
-          paddingTop: showCloseButton ? tokens.spacing.md : insets.top + tokens.spacing.md,
-          paddingBottom: tokens.spacing.xxxl + tokens.spacing.xl,
-          paddingHorizontal: tokens.spacing.md,
-        },
-      ]}
-      showsVerticalScrollIndicator={false}
-    >
+    <View style={styles.container}>
       {showUserProfile && <ProfileSectionLoader userProfile={userProfile} />}
 
       <CustomSettingsList customSections={customSections} />
@@ -120,12 +107,14 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
           versionLabel={t("settings.footer.version")}
         />
       )}
-    </ScrollView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  scrollView: { flex: 1 },
-  scrollContent: { flexGrow: 1 },
+  container: {
+    flex: 1,
+    paddingVertical: 16,
+  },
   emptyContainer: { paddingVertical: 24 },
 });

package/src/presentation/screens/components/SettingsHeader.tsx

@@ -4,11 +4,10 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { View, Pressable, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { AtomicIcon } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
 
 interface SettingsHeaderProps {
   showCloseButton?: boolean;
@@ -21,7 +20,7 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
 }) => {
   const navigation = useNavigation();
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
+  const { t } = useLocalization();
 
   const handleClose = () => {
     if (onClose) {
@@ -31,48 +30,40 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
     }
   };
 
-  if (!showCloseButton) {
-    return null;
-  }
-
   return (
-    <View
-      style={[
-        styles.closeButtonContainer,
-        {
-          paddingTop: insets.top + tokens.spacing.xs,
-          paddingRight: tokens.spacing.md,
-        },
-      ]}
-    >
-      <TouchableOpacity
-        onPress={handleClose}
-        style={[
-          styles.closeButton,
-          {
-            backgroundColor: tokens.colors.surface,
-          },
-        ]}
-        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-      >
-        <AtomicIcon name="x" size="lg" color="primary" />
-      </TouchableOpacity>
+    <View style={[styles.container, { padding: tokens.spacing.lg }]}>
+      <AtomicText style={tokens.typography.headingLarge}>
+        {t('settings.title')}
+      </AtomicText>
+      
+      {showCloseButton && (
+        <Pressable
+          onPress={handleClose}
+          style={({ pressed }) => [
+            styles.closeButton,
+            {
+              backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
+              borderRadius: tokens.borderRadius.full,
+            },
+          ]}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon name="close-outline" size="lg" color="textPrimary" />
+        </Pressable>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  closeButtonContainer: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    zIndex: 10,
-    alignItems: "flex-end",
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
   closeButton: {
     width: 44,
     height: 44,
-    borderRadius: 22,
     justifyContent: "center",
     alignItems: "center",
   },