@umituz/react-native-settings 4.20.20 → 4.20.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.20",
+  "version": "4.20.21",
   "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/screens/components/sections/CustomSettingsList.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import { SettingsSection } from "../../../components/SettingsSection";
+import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { CustomSettingsSection } from "../../types";
 
 interface CustomSettingsListProps {
@@ -24,6 +25,18 @@ export const CustomSettingsList: React.FC<CustomSettingsListProps> = ({
                     title={section.title}
                 >
                     {section.content}
+                    {!section.content && section.items?.map((item) => (
+                        <SettingsItemCard
+                            key={item.id}
+                            title={item.title}
+                            description={item.subtitle}
+                            icon={item.icon}
+                            onPress={item.onPress}
+                            rightIcon={item.rightIcon}
+                            iconBgColor={item.iconBgColor}
+                            iconColor={item.iconColor}
+                        />
+                    ))}
                 </SettingsSection>
             ))}
         </>

package/src/presentation/screens/types/CustomSection.ts

@@ -1,9 +1,27 @@
+import type { ReactNode } from "react";
+import type { IconName } from "@umituz/react-native-design-system";
+
 /**
- * Custom Settings Section Type
- * Allows apps to add custom sections to the settings screen
+ * Custom Settings Item
  */
-
-import type { ReactNode } from "react";
+export interface CustomSettingsItem {
+  /** Item unique ID */
+  id: string;
+  /** Item title */
+  title: string;
+  /** Optional subtitle or description */
+  subtitle?: string;
+  /** Icon name (Ionicons) */
+  icon: IconName;
+  /** Press handler */
+  onPress: () => void;
+  /** Optional right icon (Ionicons) */
+  rightIcon?: IconName;
+  /** Optional icon color */
+  iconColor?: string;
+  /** Optional icon background color */
+  iconBgColor?: string;
+}
 
 /**
  * Custom Settings Section
@@ -11,8 +29,10 @@ import type { ReactNode } from "react";
 export interface CustomSettingsSection {
   /** Section title */
   title: string;
-  /** Section content (React nodes) */
-  content: ReactNode;
+  /** Section content (React nodes) - takes priority over items */
+  content?: ReactNode;
+  /** List of settings items to render */
+  items?: CustomSettingsItem[];
   /** Section order (lower = higher in list) */
   order?: number;
   /** Section ID for identification */