@umituz/react-native-settings 5.3.75 → 5.3.77

package/dist/utils/iconPaths.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Common Icon SVG Paths
+ *
+ * Centralized SVG paths for frequently used icons
+ * Works without external icon libraries
+ */
+export declare const ICON_PATHS: {
+    readonly 'chevron-up': "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z";
+    readonly 'chevron-down': "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z";
+    readonly 'chevron-forward': "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z";
+    readonly 'chevron-back': "M15.41 7.41L10.83 12l4.58 4.59L14 18l-6-6 6-6z";
+    readonly 'arrow-right': "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z";
+    readonly 'arrow-forward': "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z";
+    readonly 'arrow-left': "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z";
+    readonly close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
+    readonly checkmark: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
+    readonly 'checkmark-circle': "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";
+    readonly plus: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z";
+    readonly search: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z";
+    readonly star: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z";
+    readonly 'alert-circle': "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z";
+    readonly 'information-circle': "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z";
+    readonly warning: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z";
+    readonly 'chatbubble-outline': "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z";
+    readonly mail: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z";
+    readonly time: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z";
+    readonly moon: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z";
+    readonly users: "M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z";
+    readonly person: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z";
+    readonly create: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z";
+    readonly trash: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z";
+    readonly share: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z";
+    readonly globe: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z";
+    readonly settings: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z";
+    readonly heart: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z";
+    readonly 'heart-outline': "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z";
+    readonly notifications: "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z";
+    readonly 'notifications-off': "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm0-18c.83 0 1.5.67 1.5 1.5 0 .24-.05.46-.14.67l.94.94C14.74 6.57 15 5.82 15 5c0-1.66-1.34-3-3-3-.82 0-1.57.26-2.18.69l.95.95c.2-.09.43-.14.67-.14zM2.81 2.81L1.39 4.22l2.68 2.68C3.06 8.08 2.38 9.5 2.12 11H4.14c.24-1.12.76-2.13 1.48-2.96l1.94 1.94c-.06.34-.1.69-.1 1.02 0 2.48 1.51 4.5 4 4.5.33 0 .68-.04 1.02-.1l4.23 4.23c-.66.32-1.39.51-2.17.51-2.48 0-4.5-2.02-4.5-4.5h-2c0 2.93 1.81 5.45 4.38 6.51l2.5 2.5 1.41-1.41L2.81 2.81z";
+};
+export type IconPathName = keyof typeof ICON_PATHS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.3.75",
+  "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/appearance/presentation/components/ColorPicker.tsx

@@ -10,6 +10,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { isDev } from "../../../../utils/devUtils";
+import { ICON_PATHS } from "../../../../utils/iconPaths";
 
 interface ColorPickerProps {
   label: string;
@@ -64,7 +65,11 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
           accessibilityHint={`Select ${color} color`}
         >
           {isSelected && (
-            <AtomicIcon name="checkmark" size="sm" customColor={tokens.colors.textInverse} />
+            <AtomicIcon
+              svgPath={ICON_PATHS['checkmark']}
+              customSize={16}
+              customColor={tokens.colors.textInverse}
+            />
           )}
         </TouchableOpacity>
       );

package/src/domains/faqs/presentation/components/FAQItem.tsx

@@ -27,6 +27,10 @@ export interface FAQItemProps {
     styles?: FAQItemStyles;
 }
 
+// SVG paths for chevron icons
+const CHEVRON_UP_PATH = "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z";
+const CHEVRON_DOWN_PATH = "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z";
+
 export const FAQItemComponent: React.FC<FAQItemProps> = React.memo(({
     item,
     isExpanded,
@@ -96,9 +100,9 @@ export const FAQItemComponent: React.FC<FAQItemProps> = React.memo(({
                 </View>
                 <View style={styles.iconContainer}>
                     <AtomicIcon
-                        name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                        size={20}
-                        color={isExpanded ? "onPrimary" : "secondary"}
+                        svgPath={isExpanded ? CHEVRON_UP_PATH : CHEVRON_DOWN_PATH}
+                        customSize={20}
+                        customColor={isExpanded ? tokens.colors.onPrimary : tokens.colors.secondary}
                     />
                 </View>
             </TouchableOpacity>

package/src/domains/faqs/presentation/components/FAQSearchBar.tsx

@@ -8,6 +8,7 @@ import React, { useMemo } from 'react';
 import { View, TextInput, StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import { AtomicIcon } from '@umituz/react-native-design-system/atoms';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
+import { ICON_PATHS } from '../../../../utils/iconPaths';
 
 export interface FAQSearchBarStyles {
     container?: ViewStyle;
@@ -58,7 +59,11 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     return (
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.iconContainer}>
-                <AtomicIcon name="search" size="md" color="secondary" />
+                <AtomicIcon
+                    svgPath={ICON_PATHS['search']}
+                    customSize={20}
+                    customColor={tokens.colors.secondary}
+                />
             </View>
             <TextInput
                 style={[styles.input, customStyles?.input]}

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -5,10 +5,10 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
+import { View, StyleSheet, ViewStyle, TextStyle, useWindowDimensions, FlatList } from 'react-native';
 import { getContentMaxWidth } from '@umituz/react-native-design-system/device';
 import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
-import { useAppNavigation } from '@umituz/react-native-design-system/molecules';
+import { NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
@@ -43,6 +43,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   searchPlaceholder,
   emptySearchTitle,
   emptySearchMessage,
+  headerTitle,
   onBack,
   renderHeader,
   styles: customStyles,
@@ -75,45 +76,59 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     }
   };
 
-  const header = renderHeader ? renderHeader({ onBack: handleBack }) : null;
+  const header = renderHeader ? renderHeader({ onBack: handleBack }) : (
+    <NavigationHeader title={headerTitle} onBackPress={handleBack} />
+  );
+
+  // Render search bar as list header
+  const ListHeader = useMemo(() => (
+    <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
+      <View style={[styles.searchBar, customStyles?.header]}>
+        <FAQSearchBar
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          placeholder={searchPlaceholder}
+          styles={customStyles?.searchBar}
+        />
+      </View>
+
+      {searchQuery && !hasResults && (
+        <FAQEmptyState
+          title={emptySearchTitle}
+          message={emptySearchMessage}
+          styles={customStyles?.emptyState}
+        />
+      )}
+    </View>
+  ), [searchQuery, hasResults, searchPlaceholder, emptySearchTitle, emptySearchMessage, customStyles, tokens, contentMaxWidth]);
+
+  const renderCategory = ({ item }: { item: FAQCategory }) => (
+    <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
+      <FAQCategoryComponent
+        category={item}
+        isExpanded={isExpanded}
+        onToggleItem={toggleExpansion}
+        styles={customStyles?.category}
+      />
+    </View>
+  );
 
   return (
     <ScreenLayout
       edges={['top', 'bottom', 'left', 'right']}
-      scrollable={true}
+      scrollable={false}
       header={header}
-      contentContainerStyle={customStyles?.content}
     >
-      <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
-        <View style={[styles.searchBar, customStyles?.header]}>
-          <FAQSearchBar
-            value={searchQuery}
-            onChangeText={setSearchQuery}
-            placeholder={searchPlaceholder}
-            styles={customStyles?.searchBar}
-          />
-        </View>
-
-        {searchQuery && !hasResults ? (
-          <FAQEmptyState
-            title={emptySearchTitle}
-            message={emptySearchMessage}
-            styles={customStyles?.emptyState}
-          />
-        ) : (
-          filteredCategories.map((cat) => (
-            <FAQCategoryComponent
-              key={cat.id}
-              category={cat}
-              isExpanded={isExpanded}
-              onToggleItem={toggleExpansion}
-              styles={customStyles?.category}
-            />
-          ))
-        )}
-
-        <View style={styles.footer} />
-      </View>
+      <FlatList
+        data={filteredCategories}
+        renderItem={renderCategory}
+        keyExtractor={(item) => item.id}
+        ListHeaderComponent={hasResults ? ListHeader : null}
+        ListEmptyComponent={!hasResults ? ListHeader : null}
+        ListFooterComponent={<View style={styles.footer} />}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
+      />
     </ScreenLayout>
   );
 };

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 {
@@ -13,6 +13,7 @@ import {
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { FeedbackModal } from "../components/FeedbackModal";
+import { ICON_PATHS } from "../../../../utils/iconPaths";
 import { useFeatureRequests } from "../../infrastructure/useFeatureRequests";
 import type { FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import type { FeatureRequestItem } from "../../domain/entities/FeatureRequestEntity";
@@ -82,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);
@@ -91,22 +92,30 @@ 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 (
       <View key={item.id} style={[styles.card, { backgroundColor: tokens.colors.surfaceSecondary, borderColor: tokens.colors.borderLight }]}>
         <View style={styles.voteColumn}>
           <TouchableOpacity onPress={() => vote(item.id, 'up')}>
-            <AtomicIcon name="chevron-up" size="md" color={voted === 'up' ? "primary" : "textSecondary"} />
+            <AtomicIcon
+              svgPath={ICON_PATHS['chevron-up']}
+              customSize={20}
+              customColor={voted === 'up' ? tokens.colors.primary : tokens.colors.textSecondary}
+            />
           </TouchableOpacity>
           <AtomicText style={[styles.voteCount, { color: voted === 'up' ? tokens.colors.primary : tokens.colors.textPrimary }]}>
             {item.votes}
           </AtomicText>
           <TouchableOpacity onPress={() => vote(item.id, 'down')}>
-            <AtomicIcon name="chevron-down" size="md" color={voted === 'down' ? "primary" : "textSecondary"} />
+            <AtomicIcon
+              svgPath={ICON_PATHS['chevron-down']}
+              customSize={20}
+              customColor={voted === 'down' ? tokens.colors.primary : tokens.colors.textSecondary}
+            />
           </TouchableOpacity>
         </View>
 
@@ -135,19 +144,27 @@ 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
         style={[styles.addButton, { backgroundColor: tokens.colors.primary }]}
         onPress={() => setIsModalVisible(true)}
       >
-        <AtomicIcon name="plus" size="sm" color="onPrimary" />
+        <AtomicIcon
+          svgPath={ICON_PATHS['plus']}
+          customSize={16}
+          customColor={tokens.colors.onPrimary}
+        />
       </TouchableOpacity>
     </View>
-  );
+  ), [screenTitle, tokens.colors.primary, tokens.colors.onPrimary]);
 
   if (isLoading) {
     return (
@@ -162,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)}
@@ -175,35 +192,50 @@ 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 name="users" size="lg" color="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}>
-            <AtomicIcon name="chatbubble-outline" size="xl" color="textTertiary" />
+            <AtomicText style={styles.sectionTitle}>{trendingTitle}</AtomicText>
+          </View>
+        }
+        ListEmptyComponent={
+          <View style={[styles.emptyState, { paddingHorizontal: tokens.spacing.md }]}>
+            <AtomicIcon
+              svgPath={ICON_PATHS['chatbubble-outline']}
+              customSize={32}
+              customColor={tokens.colors.textTertiary}
+            />
             <AtomicText style={[styles.emptyText, { color: tokens.colors.textTertiary }]}>
               {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,

package/src/utils/iconPaths.ts

@@ -0,0 +1,59 @@
+/**
+ * Common Icon SVG Paths
+ *
+ * Centralized SVG paths for frequently used icons
+ * Works without external icon libraries
+ */
+
+export const ICON_PATHS = {
+  // Navigation
+  'chevron-up': "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",
+  'chevron-down': "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z",
+  'chevron-forward': "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z",
+  'chevron-back': "M15.41 7.41L10.83 12l4.58 4.59L14 18l-6-6 6-6z",
+  'arrow-right': "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",
+  'arrow-forward': "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",
+  'arrow-left': "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
+
+  // UI Elements
+  'close': "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+  'checkmark': "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
+  'checkmark-circle': "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",
+  'plus': "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",
+  'search': "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
+
+  // Status & Feedback
+  'star': "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+  'alert-circle': "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
+  'information-circle': "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
+  'warning': "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+
+  // Communication
+  'chatbubble-outline': "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",
+  'mail': "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z",
+
+  // Time & Notifications
+  'time': "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z",
+  'moon': "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z",
+
+  // Users & Social
+  'users': "M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z",
+  'person': "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
+
+  // Actions
+  'create': "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+  'trash': "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
+  'share': "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z",
+
+  // Misc
+  'globe': "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z",
+  'settings': "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z",
+  'heart': "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z",
+  'heart-outline': "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z",
+
+  // Notifications
+  'notifications': "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z",
+  'notifications-off': "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm0-18c.83 0 1.5.67 1.5 1.5 0 .24-.05.46-.14.67l.94.94C14.74 6.57 15 5.82 15 5c0-1.66-1.34-3-3-3-.82 0-1.57.26-2.18.69l.95.95c.2-.09.43-.14.67-.14zM2.81 2.81L1.39 4.22l2.68 2.68C3.06 8.08 2.38 9.5 2.12 11H4.14c.24-1.12.76-2.13 1.48-2.96l1.94 1.94c-.06.34-.1.69-.1 1.02 0 2.48 1.51 4.5 4 4.5.33 0 .68-.04 1.02-.1l4.23 4.23c-.66.32-1.39.51-2.17.51-2.48 0-4.5-2.02-4.5-4.5h-2c0 2.93 1.81 5.45 4.38 6.51l2.5 2.5 1.41-1.41L2.81 2.81z",
+} as const;
+
+export type IconPathName = keyof typeof ICON_PATHS;