@umituz/react-native-settings 4.20.18 → 4.20.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.18",
+  "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/domains/faqs/presentation/components/FAQSection.tsx

@@ -32,7 +32,10 @@ export const FAQSection: React.FC<FAQSectionProps> = ({
     renderSection,
     renderItem,
 }) => {
-    if (!config.enabled || !config.title || !config.description) return null;
+    // onPress is required for FAQ section to be functional
+    if (!config.enabled || !config.title || !config.description || !config.onPress) {
+        return null;
+    }
 
     return (
         <>
@@ -41,7 +44,7 @@ export const FAQSection: React.FC<FAQSectionProps> = ({
                 children: renderItem({
                     title: config.description,
                     icon: 'help-circle',
-                    onPress: config.onPress || (() => {}),
+                    onPress: config.onPress,
                     isLast: true,
                 }),
             })}

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -116,12 +116,12 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     );
   };
 
-  if (renderHeader) {
+  if (renderHeader && onBack) {
     return (
       <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
         <View style={[styles.container, customStyles?.container]}>
           <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
-            {renderHeader({ onBack: onBack || (() => { }) })}
+            {renderHeader({ onBack })}
           </View>
           {renderContent()}
         </View>

package/src/presentation/components/SettingItem.tsx

@@ -110,7 +110,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
       title={title}
       description={value}
       icon={icon as any}
-      onPress={onPress || (() => { })}
+      onPress={onPress}
       iconColor={iconColor}
     />
   );

package/src/presentation/components/SettingsItemCard.tsx

@@ -14,18 +14,20 @@ export interface SettingsItemCardProps {
     description?: string;
     /** Icon name from AtomicIcon */
     icon: IconName;
-    /** On press handler */
-    onPress: () => void;
+    /** On press handler - if undefined, item is not clickable */
+    onPress?: () => void;
     /** Optional container style */
     containerStyle?: ViewStyle;
     /** Optional section title (shows above the card) */
     sectionTitle?: string;
-    /** Optional right icon (defaults to chevron-forward) */
+    /** Optional right icon (defaults to chevron-forward, hidden if not clickable) */
     rightIcon?: IconName;
     /** Optional icon background color (defaults to primary with opacity) */
     iconBgColor?: string;
     /** Optional icon color */
     iconColor?: string;
+    /** Show chevron even if not clickable */
+    showChevron?: boolean;
 }
 
 /**
@@ -44,59 +46,77 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     rightIcon = "chevron-forward",
     iconBgColor,
     iconColor,
+    showChevron,
 }) => {
     const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
     const defaultIconBg = iconBgColor || `${colors.primary}15`;
     const defaultIconColor = iconColor || colors.primary;
+    const isClickable = !!onPress;
+    const shouldShowChevron = showChevron ?? isClickable;
+
+    const renderContent = () => (
+        <View style={styles.content}>
+            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg, borderRadius: tokens.borderRadius.md }]}>
+                <AtomicIcon name={icon} size="lg" customColor={defaultIconColor} />
+            </View>
+            <View style={styles.textContainer}>
+                <AtomicText
+                    type="bodyLarge"
+                    color="onSurface"
+                    numberOfLines={1}
+                    style={{ marginBottom: tokens.spacing.xs }}
+                >
+                    {title}
+                </AtomicText>
+                {!!description && (
+                    <AtomicText type="bodyMedium" color="secondary" numberOfLines={2}>
+                        {description}
+                    </AtomicText>
+                )}
+            </View>
+            {shouldShowChevron && (
+                <AtomicIcon name={rightIcon} size="sm" color="secondary" />
+            )}
+        </View>
+    );
 
     return (
         <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>
             )}
-            <Pressable
-                style={({ pressed }) => [
-                    styles.itemContainer,
-                    {
-                        backgroundColor: pressed ? `${colors.primary}08` : "transparent",
-                    },
-                ]}
-                onPress={onPress}
-            >
-                <View style={styles.content}>
-                    <View style={[styles.iconContainer, { backgroundColor: defaultIconBg }]}>
-                        <AtomicIcon name={icon} size="lg" customColor={defaultIconColor} />
-                    </View>
-                    <View style={styles.textContainer}>
-                        <AtomicText
-                            type="bodyLarge"
-                            color="onSurface"
-                            numberOfLines={1}
-                            style={{ marginBottom: 4 }}
-                        >
-                            {title}
-                        </AtomicText>
-                        {!!description && (
-                            <AtomicText type="bodyMedium" color="secondary" numberOfLines={2}>
-                                {description}
-                            </AtomicText>
-                        )}
-                    </View>
-                    <AtomicIcon name={rightIcon} size="sm" color="secondary" />
+            {isClickable ? (
+                <Pressable
+                    style={({ pressed }) => [
+                        styles.itemContainer,
+                        {
+                            backgroundColor: pressed ? `${colors.primary}08` : "transparent",
+                        },
+                    ]}
+                    onPress={onPress}
+                >
+                    {renderContent()}
+                </Pressable>
+            ) : (
+                <View style={styles.itemContainer}>
+                    {renderContent()}
                 </View>
-            </Pressable>
+            )}
         </View>
     );
 };
@@ -104,7 +124,6 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
 const styles = StyleSheet.create({
     sectionContainer: {
         marginBottom: 16,
-        borderRadius: 12,
         overflow: "hidden",
     },
     headerContainer: {
@@ -127,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",
   },

package/src/presentation/screens/components/sections/ProfileSectionLoader.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
+import { useNavigation } from "@react-navigation/native";
 import { ProfileSection } from "@umituz/react-native-auth";
 import { useLocalization } from "@umituz/react-native-localization";
 
@@ -17,9 +18,18 @@ export interface ProfileSectionLoaderProps {
 
 export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ userProfile }) => {
     const { t } = useLocalization();
+    const navigation = useNavigation<any>();
 
     if (!userProfile) return null;
 
+    const handlePress = () => {
+        if (userProfile.onPress) {
+            userProfile.onPress();
+        } else if (userProfile.accountSettingsRoute) {
+            navigation.navigate(userProfile.accountSettingsRoute);
+        }
+    };
+
     return (
         <View style={styles.profileContainer}>
             <ProfileSection
@@ -30,7 +40,7 @@ export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = ({ user
                     avatarUrl: userProfile.avatarUrl,
                     accountSettingsRoute: userProfile.accountSettingsRoute,
                 }}
-                onPress={userProfile.onPress}
+                onPress={handlePress}
                 onSignIn={userProfile.onPress}
                 signInText={t("auth.signIn")}
                 anonymousText={t("settings.profile.anonymousName")}

package/src/presentation/screens/components/sections/SubscriptionSettingsSection.tsx

@@ -13,14 +13,15 @@ export const SubscriptionSettingsSection: React.FC<SubscriptionSettingsSectionPr
 }) => {
   const { t } = useLocalization();
 
-  if (!config) return null;
+  // onPress is required for subscription section to be functional
+  if (!config || !config.onPress) return null;
 
   return (
     <SettingsItemCard
       title={config.title || t("settings.subscription.title")}
       description={config.description || t("settings.subscription.description")}
       icon={(config.icon || "star") as IconName}
-      onPress={config.onPress || (() => {})}
+      onPress={config.onPress}
       sectionTitle={config.sectionTitle || t("settings.sections.subscription")}
     />
   );