@umituz/react-native-settings 5.3.73 → 5.3.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.3.73",
+  "version": "5.3.75",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-import { View, ScrollView } from "react-native";
+import { View, FlatList } from "react-native";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -153,10 +153,31 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     texts?.previewSectionDescription,
   ]);
 
-  const contentStyle = useMemo(() => ({
-    paddingHorizontal: tokens.spacing.lg,
-    paddingBottom: tokens.spacing['2xl'],
-  }), [tokens.spacing]);
+  // Prepare data for FlatList
+  const sectionsData = useMemo(() => {
+    const items: Array<{ id: string; component: React.ReactNode }> = [];
+
+    if (headerComponentMemo) {
+      items.push({ id: 'header', component: headerComponentMemo });
+    }
+    if (themeSectionMemo) {
+      items.push({ id: 'theme', component: themeSectionMemo });
+    }
+    if (colorsSectionMemo) {
+      items.push({ id: 'colors', component: colorsSectionMemo });
+    }
+    if (previewSectionMemo) {
+      items.push({ id: 'preview', component: previewSectionMemo });
+    }
+
+    return items;
+  }, [headerComponentMemo, themeSectionMemo, colorsSectionMemo, previewSectionMemo]);
+
+  const renderItem = useCallback(({ item }: { item: { id: string; component: React.ReactNode } }) => {
+    return <View style={{ paddingHorizontal: tokens.spacing.lg }}>{item.component}</View>;
+  }, [tokens.spacing.lg]);
+
+  const keyExtractor = useCallback((item: { id: string; component: React.ReactNode }) => item.id, []);
 
   return (
     <ScreenLayout
@@ -168,15 +189,15 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
         />
       }
     >
-      <ScrollView
+      <FlatList
+        data={sectionsData}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
         showsVerticalScrollIndicator={false}
-        contentContainerStyle={contentStyle}
-      >
-        {headerComponentMemo}
-        {themeSectionMemo}
-        {colorsSectionMemo}
-        {previewSectionMemo}
-      </ScrollView>
+        contentContainerStyle={{
+          paddingBottom: tokens.spacing['2xl'],
+        }}
+      />
     </ScreenLayout>
   );
 };

package/src/domains/localization/presentation/components/LanguageItem.tsx

@@ -31,6 +31,9 @@ interface LanguageItemProps {
   };
 }
 
+// SVG path for checkmark icon (works without external icon library)
+const CHECKMARK_PATH = "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z";
+
 export const LanguageItem: React.FC<LanguageItemProps> = ({
   item,
   isSelected,
@@ -113,7 +116,11 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
         </View>
       </View>
       {isSelected && (
-        <AtomicIcon name="checkmark-circle" size="md" color="primary" />
+        <AtomicIcon
+          svgPath={CHECKMARK_PATH}
+          customSize={24}
+          customColor={tokens.colors.primary}
+        />
       )}
     </TouchableOpacity>
   );