@umituz/react-native-settings 5.4.12 → 5.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.4.12",
+  "version": "5.4.13",
   "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

@@ -197,6 +197,10 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
         contentContainerStyle={{
           paddingBottom: tokens.spacing['2xl'],
         }}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={5}
+        windowSize={3}
+        initialNumToRender={3}
       />
     </ScreenLayout>
   );

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

@@ -4,7 +4,7 @@
  * Uses design system tokens for theming
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 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';
@@ -102,7 +102,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     </View>
   ), [searchQuery, hasResults, searchPlaceholder, emptySearchTitle, emptySearchMessage, customStyles, tokens, contentMaxWidth]);
 
-  const renderCategory = ({ item }: { item: FAQCategory }) => (
+  const renderCategory = useCallback(({ item }: { item: FAQCategory }) => (
     <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
       <FAQCategoryComponent
         category={item}
@@ -111,7 +111,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
         styles={customStyles?.category}
       />
     </View>
-  );
+  ), [contentMaxWidth, isExpanded, toggleExpansion, customStyles?.category]);
 
   return (
     <ScreenLayout
@@ -128,6 +128,10 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
         ListFooterComponent={<View style={styles.footer} />}
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: tokens.spacing.xl }}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        windowSize={5}
+        initialNumToRender={8}
       />
     </ScreenLayout>
   );

package/src/domains/feedback/presentation/screens/FeatureRequestScreen.tsx

@@ -12,7 +12,6 @@ import {
 } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
-import { devWarn } from "../../../../utils/devUtils";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { ICON_PATHS } from "../../../../utils/iconPaths";
 import { useFeatureRequests } from "../../infrastructure/useFeatureRequests";
@@ -30,7 +29,7 @@ interface FeatureRequestScreenProps {
 export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ config, texts }) => {
   const tokens = useAppDesignTokens();
   const navigation = useAppNavigation();
-  const { requests, userVotes, isLoading, vote, submitRequest, userId } = useFeatureRequests();
+  const { requests, userVotes, isLoading, vote, submitRequest: _submitRequest, userId } = useFeatureRequests();
 
   const [activeTab, setActiveTab] = useState<'all' | 'my' | 'roadmap'>('all');
 
@@ -41,21 +40,21 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
   const bannerSub = t.banner?.subtitle || `${requests.length} feature requests`;
   const newIdeaLabel = t.new_idea || "NEW IDEA?";
 
-  const tabLabels = {
+  const tabLabels = useMemo(() => ({
     all: t.tabs?.all || "All Requests",
     my: t.tabs?.my || "My Feedback",
     roadmap: t.tabs?.roadmap || "Roadmap",
-  };
+  }), [t.tabs?.all, t.tabs?.my, t.tabs?.roadmap]);
 
-  const statusLabels: Record<string, string> = {
+  const statusLabels = useMemo(() => ({
     planned: t.status?.planned || "Planned",
     review: t.status?.review || "Under Review",
     completed: t.status?.completed || "Completed",
     pending: t.status?.pending || "Pending",
     dismissed: t.status?.dismissed || "Dismissed",
-  };
+  }), [t.status?.planned, t.status?.review, t.status?.completed, t.status?.pending, t.status?.dismissed]);
 
-  const getStatusColor = (status: string) => {
+  const getStatusColor = useCallback((status: string) => {
     switch (status) {
       case 'planned': return '#3b82f6';
       case 'review': return '#f59e0b';
@@ -64,7 +63,7 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
       case 'dismissed': return '#ef4444';
       default: return tokens.colors.textSecondary;
     }
-  };
+  }, [tokens.colors.textSecondary]);
 
   const filteredRequests = useMemo(() => {
     switch (activeTab) {
@@ -127,7 +126,7 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
         </View>
       </View>
     );
-  }, [userVotes, vote, tokens.colors, getStatusColor, statusLabels, t]);
+  }, [userVotes, vote, tokens.colors, getStatusColor, statusLabels, t.comment_count]);
 
   const tabs = useMemo(() => (['all', 'my', 'roadmap'] as const), []);
 

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

@@ -35,7 +35,7 @@ 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> = ({
+export const LanguageItem: React.FC<LanguageItemProps> = React.memo(({
   item,
   isSelected,
   onSelect,
@@ -135,5 +135,5 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
       )}
     </TouchableOpacity>
   );
-};
+});
 

package/src/domains/notifications/reminders/presentation/components/ReminderItem.tsx

@@ -39,7 +39,7 @@ const getFrequencyIcon = (frequency: ReminderFrequency): string => {
   return icons[frequency] || 'notifications';
 };
 
-export const ReminderItem: React.FC<ReminderItemProps> = ({
+export const ReminderItem: React.FC<ReminderItemProps> = React.memo(({
   reminder,
   translations,
   onToggle,
@@ -97,7 +97,7 @@ export const ReminderItem: React.FC<ReminderItemProps> = ({
       </View>
     </View>
   );
-};
+});
 
 const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({

package/src/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx

@@ -3,31 +3,31 @@
  * Single Responsibility: Display individual video tutorial card
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, Image, StyleSheet, TouchableOpacity } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import type { VideoTutorial } from "../../types";
 
+const formatDuration = (seconds: number): string => {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+};
+
 interface VideoTutorialCardProps {
   readonly tutorial: VideoTutorial;
   readonly onPress: () => void;
   readonly horizontal?: boolean;
 }
 
-export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
+export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = React.memo(({
   tutorial,
   onPress,
   horizontal = false,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  const formatDuration = (seconds: number): string => {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = seconds % 60;
-    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
-  };
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
 
   return (
     <TouchableOpacity
@@ -84,7 +84,7 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
       </View>
     </TouchableOpacity>
   );
-};
+});
 
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => StyleSheet.create({
   container: { borderRadius: 12, borderWidth: 1, marginBottom: 12, overflow: "hidden" },