@umituz/react-native-settings 4.19.0 → 4.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.19.0",
+  "version": "4.19.2",
   "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",
@@ -88,4 +88,4 @@
     "@react-native-firebase/firestore": "^23.7.0",
     "firebase": "^12.7.0"
   }
-}
+}

package/src/domains/appearance/presentation/components/AppearanceSection.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
 import { AppearanceSectionConfig } from '../../types';
+import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
 export interface AppearanceSectionProps {
     config?: AppearanceSectionConfig;
@@ -24,17 +24,11 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
     description: descriptionProp,
 }) => {
     const navigation = useNavigation();
-    const tokens = useResponsiveDesignTokens();
-    const colors = tokens.colors;
 
     const route = config?.route || config?.defaultRoute || 'Appearance';
-    // Use props first, then config, then strict empty string to avoid hardcoded English
     const title = titleProp || config?.title;
     const description = descriptionProp || config?.description;
 
-    // Only display section title if provided
-    const displaySectionTitle = sectionTitle || title;
-
     const handlePress = () => {
         if (onPress) {
             onPress();
@@ -46,94 +40,14 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
     if (!title) return null;
 
     return (
-        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
-            {!!displaySectionTitle && (
-                <View style={styles.headerContainer}>
-                    <AtomicText
-                        type="titleMedium"
-                        color="primary"
-                    >
-                        {displaySectionTitle}
-                    </AtomicText>
-                </View>
-            )}
-            <Pressable
-                style={({ pressed }) => [
-                    styles.itemContainer,
-                    {
-                        backgroundColor: pressed ? `${colors.primary}08` : 'transparent',
-                    },
-                ]}
-                onPress={handlePress}
-            >
-                <View style={styles.content}>
-                    <View
-                        style={[
-                            styles.iconContainer,
-                            { backgroundColor: `${colors.primary}15` },
-                        ]}
-                    >
-                        <AtomicIcon name="color-palette" size="lg" color="primary" />
-                    </View>
-                    <View style={styles.textContainer}>
-                        <AtomicText
-                            type="bodyLarge"
-                            color="primary"
-                            numberOfLines={1}
-                            style={{ marginBottom: 4 }}
-                        >
-                            {title}
-                        </AtomicText>
-                        {!!description && (
-                            <AtomicText
-                                type="bodyMedium"
-                                color="secondary"
-                                numberOfLines={2}
-                            >
-                                {description}
-                            </AtomicText>
-                        )}
-                    </View>
-                    <AtomicIcon name="chevron-forward" size="md" color="secondary" />
-                </View>
-            </Pressable>
-        </View>
+        <SettingsItemCard
+            title={title}
+            description={description}
+            icon="color-palette"
+            onPress={handlePress}
+            containerStyle={containerStyle}
+            sectionTitle={sectionTitle}
+        />
     );
 };
 
-const styles = StyleSheet.create({
-    sectionContainer: {
-        marginBottom: 16,
-        borderRadius: 12,
-        overflow: 'hidden',
-    },
-    headerContainer: {
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: 8,
-    },
-    itemContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 16,
-        minHeight: 72,
-    },
-    content: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    iconContainer: {
-        width: 48,
-        height: 48,
-        borderRadius: 12,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 16,
-    },
-    textContainer: {
-        flex: 1,
-        marginRight: 8,
-    },
-});

package/src/index.ts

@@ -72,6 +72,9 @@ export type {
 export { SettingItem } from './presentation/components/SettingItem';
 export type { SettingItemProps } from './presentation/components/SettingItem';
 
+export { SettingsItemCard } from './presentation/components/SettingsItemCard';
+export type { SettingsItemCardProps } from './presentation/components/SettingsItemCard';
+
 export { SettingsSection } from './presentation/components/SettingsSection';
 export type { SettingsSectionProps } from './presentation/components/SettingsSection';
 

package/src/presentation/components/SettingsItemCard.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { View, Pressable, StyleSheet, ViewStyle } from "react-native";
+import {
+    useResponsiveDesignTokens,
+    AtomicIcon,
+    AtomicText,
+    type IconName,
+} from "@umituz/react-native-design-system";
+
+export interface SettingsItemCardProps {
+    /** Item title */
+    title: string;
+    /** Optional description or current value */
+    description?: string;
+    /** Icon name from AtomicIcon */
+    icon: IconName;
+    /** On press handler */
+    onPress: () => void;
+    /** Optional container style */
+    containerStyle?: ViewStyle;
+    /** Optional section title (shows above the card) */
+    sectionTitle?: string;
+    /** Optional right icon (defaults to chevron-forward) */
+    rightIcon?: IconName;
+    /** Optional icon background color (defaults to primary with opacity) */
+    iconBgColor?: string;
+    /** Optional icon color */
+    iconColor?: string;
+}
+
+/**
+ * SettingsItemCard
+ *
+ * A premium, consistent card for settings items used across all apps.
+ * Follows the visual style of the Appearance section.
+ */
+export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
+    title,
+    description,
+    icon,
+    onPress,
+    containerStyle,
+    sectionTitle,
+    rightIcon = "chevron-forward",
+    iconBgColor,
+    iconColor,
+}) => {
+    const tokens = useResponsiveDesignTokens();
+    const colors = tokens.colors;
+
+    const defaultIconBg = iconBgColor || `${colors.primary}15`;
+    const defaultIconColor = iconColor || colors.primary;
+
+    return (
+        <View
+            style={[
+                styles.sectionContainer,
+                { backgroundColor: colors.surface },
+                containerStyle,
+            ]}
+        >
+            {!!sectionTitle && (
+                <View style={styles.headerContainer}>
+                    <AtomicText type="titleMedium" color="primary">
+                        {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" />
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: "hidden",
+    },
+    headerContainer: {
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 8,
+    },
+    itemContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        minHeight: 72,
+    },
+    content: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    iconContainer: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 16,
+    },
+    textContainer: {
+        flex: 1,
+        marginRight: 8,
+    },
+});

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

@@ -86,6 +86,8 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
     >
       {showUserProfile && <ProfileSectionLoader userProfile={userProfile} />}
 
+      <CustomSettingsList customSections={customSections} />
+
       <FeatureSettingsSection normalizedConfig={normalizedConfig} features={features} />
 
       <IdentitySettingsSection normalizedConfig={normalizedConfig} features={features} />
@@ -94,8 +96,6 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
 
       {features.disclaimer && <DisclaimerSetting />}
 
-      <CustomSettingsList customSections={customSections} />
-
       {!hasAnyFeatures && (
         <View style={styles.emptyContainer}>
           <SettingsSection title={config?.emptyStateText || t("settings.noOptionsAvailable")}>

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

@@ -1,8 +1,9 @@
 import React from "react";
+import { useNavigation } from "@react-navigation/native";
 import { AppearanceSection } from "../../../../domains/appearance/presentation/components/AppearanceSection";
-import { LanguageSection } from "@umituz/react-native-localization";
 import { NotificationsSection } from "@umituz/react-native-notifications";
 import { useLocalization } from "@umituz/react-native-localization";
+import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
 
 interface FeatureSettingsSectionProps {
@@ -18,7 +19,13 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   normalizedConfig,
   features,
 }) => {
-  const { t } = useLocalization();
+  const { t, currentLanguage } = useLocalization();
+  const navigation = useNavigation();
+
+  const handleLanguagePress = () => {
+    const route = normalizedConfig.language.config?.route || "LanguageSelection";
+    navigation.navigate(route as never);
+  };
 
   return (
     <>
@@ -34,14 +41,12 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
       )}
 
       {features.language && (
-        <LanguageSection
-          config={{
-            ...normalizedConfig.language.config,
-            title: t("settings.languageSelection.title"),
-            description:
-              normalizedConfig.language.config?.description ||
-              t("settings.languageSelection.description"),
-          }}
+        <SettingsItemCard
+          title={t("settings.languageSelection.title")}
+          description={currentLanguage || "English"}
+          icon="globe-outline"
+          onPress={handleLanguagePress}
+          sectionTitle={t("settings.languageSelection.title")}
         />
       )}