@umituz/react-native-settings 4.20.17 → 4.20.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.17",
+  "version": "4.20.19",
   "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,12 +46,41 @@ 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 }]}>
+                <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>
+            {shouldShowChevron && (
+                <AtomicIcon name={rightIcon} size="sm" color="secondary" />
+            )}
+        </View>
+    );
 
     return (
         <View
@@ -66,37 +97,23 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
                     </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>
     );
 };

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

@@ -1,10 +1,7 @@
 import React from "react";
-import {
-  ListItem,
-  AtomicBadge,
-} from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
-import { SettingsSection } from "../../../components/SettingsSection";
+import type { IconName } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { SubscriptionConfig } from "../../types";
 
 interface SubscriptionSettingsSectionProps {
@@ -16,16 +13,16 @@ 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 (
-    <SettingsSection title={config.sectionTitle || t("settings.sections.subscription")}>
-      <ListItem
-        title={config.title || t("settings.subscription.title")}
-        subtitle={config.description || t("settings.subscription.description")}
-        leftIcon={config.icon || "star"}
-        onPress={config.onPress}
-      />
-    </SettingsSection>
+    <SettingsItemCard
+      title={config.title || t("settings.subscription.title")}
+      description={config.description || t("settings.subscription.description")}
+      icon={(config.icon || "star") as IconName}
+      onPress={config.onPress}
+      sectionTitle={config.sectionTitle || t("settings.sections.subscription")}
+    />
   );
 };