@umituz/react-native-settings 5.3.76 → 5.3.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.3.76",
+  "version": "5.3.77",
   "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/feedback/presentation/screens/FeatureRequestScreen.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import {
   View,
   StyleSheet,
   TouchableOpacity,
-  ScrollView,
+  FlatList,
   ActivityIndicator,
 } from "react-native";
 import {
@@ -83,7 +83,7 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
     }
   };
 
-  const filteredRequests = (() => {
+  const filteredRequests = useMemo(() => {
     switch (activeTab) {
       case 'my':
         return requests.filter(r => r.createdBy === userId);
@@ -92,9 +92,9 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
       default:
         return requests;
     }
-  })();
+  }, [requests, activeTab, userId]);
 
-  const renderRequestCard = (item: FeatureRequestItem) => {
+  const renderRequestCard = useCallback(({ item }: { item: FeatureRequestItem }) => {
     const voted = userVotes[item.id] || null;
 
     return (
@@ -144,9 +144,13 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
         </View>
       </View>
     );
-  };
+  }, [userVotes, vote, tokens.colors, getStatusColor, statusLabels, t]);
+
+  const keyExtractor = useCallback((item: FeatureRequestItem) => item.id, []);
 
-  const header = (
+  const tabs = useMemo(() => (['all', 'my', 'roadmap'] as const), []);
+
+  const header = useMemo(() => (
     <View style={styles.header}>
       <AtomicText style={styles.headerTitle}>{screenTitle}</AtomicText>
       <TouchableOpacity
@@ -160,7 +164,7 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
         />
       </TouchableOpacity>
     </View>
-  );
+  ), [screenTitle, tokens.colors.primary, tokens.colors.onPrimary]);
 
   if (isLoading) {
     return (
@@ -175,7 +179,7 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
   return (
     <ScreenLayout header={header} edges={['top', 'bottom']}>
       <View style={styles.tabsContainer}>
-        {(['all', 'my', 'roadmap'] as const).map((tab) => (
+        {tabs.map((tab) => (
           <TouchableOpacity
             key={tab}
             onPress={() => setActiveTab(tab)}
@@ -188,28 +192,34 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
         ))}
       </View>
 
-      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
-        <View style={[styles.banner, { backgroundColor: tokens.colors.primary + '10', borderColor: tokens.colors.primary + '20' }]}>
-          <View style={styles.bannerIconContainer}>
-            <AtomicIcon
-              svgPath={ICON_PATHS['users']}
-              customSize={24}
-              customColor={tokens.colors.primary}
-            />
-            <View style={styles.pulseDot} />
-          </View>
-          <View>
-            <AtomicText style={styles.bannerTitle}>{bannerTitle}</AtomicText>
-            <AtomicText style={[styles.bannerSub, { color: tokens.colors.textSecondary }]}>
-              {bannerSub}
-            </AtomicText>
-          </View>
-        </View>
-
-        <AtomicText style={styles.sectionTitle}>{trendingTitle}</AtomicText>
+      <FlatList
+        data={filteredRequests}
+        renderItem={renderRequestCard}
+        keyExtractor={(item) => item.id}
+        ListHeaderComponent={
+          <View style={styles.container}>
+            <View style={[styles.banner, { backgroundColor: tokens.colors.primary + '10', borderColor: tokens.colors.primary + '20' }]}>
+              <View style={styles.bannerIconContainer}>
+                <AtomicIcon
+                  svgPath={ICON_PATHS['users']}
+                  customSize={24}
+                  customColor={tokens.colors.primary}
+                />
+                <View style={styles.pulseDot} />
+              </View>
+              <View>
+                <AtomicText style={styles.bannerTitle}>{bannerTitle}</AtomicText>
+                <AtomicText style={[styles.bannerSub, { color: tokens.colors.textSecondary }]}>
+                  {bannerSub}
+                </AtomicText>
+              </View>
+            </View>
 
-        {filteredRequests.length === 0 ? (
-          <View style={styles.emptyState}>
+            <AtomicText style={styles.sectionTitle}>{trendingTitle}</AtomicText>
+          </View>
+        }
+        ListEmptyComponent={
+          <View style={[styles.emptyState, { paddingHorizontal: tokens.spacing.md }]}>
             <AtomicIcon
               svgPath={ICON_PATHS['chatbubble-outline']}
               customSize={32}
@@ -219,12 +229,13 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
               {t.empty || "No requests yet. Be the first!"}
             </AtomicText>
           </View>
-        ) : (
-          <View style={styles.listContent}>
-            {filteredRequests.map(renderRequestCard)}
-          </View>
-        )}
-      </ScrollView>
+        }
+        contentContainerStyle={styles.listContent}
+        showsVerticalScrollIndicator={false}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        windowSize={5}
+      />
 
       {isModalVisible && (
         <FeedbackModal

package/src/domains/notifications/reminders/presentation/screens/ReminderListScreen.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
 import { AtomicText, AtomicIcon, AtomicSpinner } from '@umituz/react-native-design-system/atoms';
 import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
@@ -54,10 +54,45 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
 
   const fab = canAddMore ? (
     <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
-      <AtomicIcon name="add" size="md" color="onPrimary" />
+      <AtomicIcon
+        svgPath="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+        customSize={20}
+        customColor={tokens.colors.onPrimary}
+      />
       <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
     </TouchableOpacity>
-  ) : undefined;
+  ) : null;
+
+  const renderEmptyState = useCallback(() => (
+    <View style={styles.emptyContainer}>
+      <View style={styles.emptyIconContainer}>
+        <AtomicIcon
+          svgPath="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 18c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+          customSize={48}
+          customColor={tokens.colors.secondary}
+        />
+      </View>
+      <AtomicText type="bodyLarge" style={styles.emptyTitle}>{translations.emptyTitle}</AtomicText>
+      <AtomicText type="bodySmall" style={styles.emptyDescription}>{translations.emptyDescription}</AtomicText>
+    </View>
+  ), [translations.emptyTitle, translations.emptyDescription, tokens.colors]);
+
+  const renderItem = useCallback(({ item }: { item: Reminder }) => (
+    <ReminderItem
+      reminder={item}
+      translations={{
+        frequencyOnce: translations.frequencyOnce,
+        frequencyDaily: translations.frequencyDaily,
+        frequencyWeekly: translations.frequencyWeekly,
+        frequencyMonthly: translations.frequencyMonthly,
+      }}
+      onToggle={handleToggle}
+      onEdit={onEditPress}
+      onDelete={handleDelete}
+    />
+  ), [translations, handleToggle, onEditPress, handleDelete]);
+
+  const keyExtractor = useCallback((item: Reminder) => item.id, []);
 
   if (isLoading) {
     return (
@@ -68,32 +103,20 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
   }
 
   return (
-    <ScreenLayout footer={fab} contentContainerStyle={styles.listContent}>
-      {reminders.length === 0 ? (
-        <View style={styles.emptyContainer}>
-          <View style={styles.emptyIconContainer}>
-            <AtomicIcon name="notifications-off" size="xl" color="secondary" />
-          </View>
-          <AtomicText type="bodyLarge" style={styles.emptyTitle}>{translations.emptyTitle}</AtomicText>
-          <AtomicText type="bodySmall" style={styles.emptyDescription}>{translations.emptyDescription}</AtomicText>
-        </View>
-      ) : (
-        reminders.map((reminder) => (
-          <ReminderItem
-            key={reminder.id}
-            reminder={reminder}
-            translations={{
-              frequencyOnce: translations.frequencyOnce,
-              frequencyDaily: translations.frequencyDaily,
-              frequencyWeekly: translations.frequencyWeekly,
-              frequencyMonthly: translations.frequencyMonthly,
-            }}
-            onToggle={handleToggle}
-            onEdit={onEditPress}
-            onDelete={handleDelete}
-          />
-        ))
-      )}
+    <ScreenLayout footer={fab} scrollable={false}>
+      <FlatList
+        data={reminders}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={renderEmptyState}
+        contentContainerStyle={reminders.length === 0 ? styles.listEmptyContent : styles.listContent}
+        showsVerticalScrollIndicator={false}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        initialNumToRender={8}
+        windowSize={5}
+      />
     </ScreenLayout>
   );
 };
@@ -101,6 +124,7 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
 const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     listContent: { padding: 16, flexGrow: 1 },
+    listEmptyContent: { flexGrow: 1 },
     emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 32, paddingTop: 100 },
     emptyIconContainer: {
       width: 80,