@umituz/react-native-settings 5.4.11 → 5.4.13

package/package.json

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

@@ -8,7 +8,6 @@ import React, { useCallback } from "react";
 import { Linking } from "react-native";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import type { FeedbackType } from "../../domain/entities/FeedbackEntity";
-import { isDev } from "../../../../utils/devUtils";
 
 export interface FeedbackConfig {
     enabled?: boolean;

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

@@ -11,12 +11,11 @@ import {
   AtomicIcon,
 } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { devWarn } from "../../../../utils/devUtils";
+import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 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 { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
+import type { FeedbackType } from "../../domain/entities/FeedbackEntity";
 import type { FeatureRequestItem } from "../../domain/entities/FeatureRequestEntity";
 import type { FeedbackFormTexts } from "../components/FeedbackFormProps";
 
@@ -29,11 +28,10 @@ interface FeatureRequestScreenProps {
 
 export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ config, texts }) => {
   const tokens = useAppDesignTokens();
-  const { requests, userVotes, isLoading, vote, submitRequest, userId } = useFeatureRequests();
+  const navigation = useAppNavigation();
+  const { requests, userVotes, isLoading, vote, submitRequest: _submitRequest, userId } = useFeatureRequests();
 
   const [activeTab, setActiveTab] = useState<'all' | 'my' | 'roadmap'>('all');
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const t = config?.translations || {};
   const screenTitle = t.screen_title || "Feedback & Features";
@@ -42,38 +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",
-  };
-
-  const handleSubmit = useCallback(async (data: { title?: string; description: string; type?: string; rating?: number }) => {
-    setIsSubmitting(true);
-    try {
-      await submitRequest({
-        title: data.title || "New Request",
-        description: data.description,
-        type: (data.type || "feature_request") as FeedbackType,
-        rating: data.rating as FeedbackRating,
-      });
-      setIsModalVisible(false);
-    } catch (error) {
-      devWarn("[FeatureRequestScreen] Submit failed:", error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [submitRequest]);
+  }), [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';
@@ -82,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) {
@@ -145,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), []);
 
@@ -154,7 +135,11 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
       <AtomicText style={styles.headerTitle}>{screenTitle}</AtomicText>
       <TouchableOpacity
         style={[styles.addButton, { backgroundColor: tokens.colors.primary }]}
-        onPress={() => setIsModalVisible(true)}
+        onPress={() => navigation.push('Feedback' as never, {
+          initialType: 'feature_request' as FeedbackType,
+          title: texts?.title,
+          texts: texts,
+        })}
       >
         <AtomicIcon
           svgPath={ICON_PATHS['plus']}
@@ -236,22 +221,14 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
         windowSize={5}
       />
 
-      {isModalVisible && (
-        <FeedbackModal
-          visible={isModalVisible}
-          onClose={() => setIsModalVisible(false)}
-          title={texts?.title}
-          onSubmit={handleSubmit}
-          texts={texts}
-          initialType="feature_request"
-          isSubmitting={isSubmitting}
-        />
-      )}
-
       <View style={styles.floatingHint}>
         <TouchableOpacity
           style={[styles.hintBadge, { backgroundColor: tokens.colors.primary }]}
-          onPress={() => setIsModalVisible(true)}
+          onPress={() => navigation.push('Feedback' as never, {
+            initialType: 'feature_request' as FeedbackType,
+            title: texts?.title,
+            texts: texts,
+          })}
         >
           <AtomicText style={styles.hintText}>{newIdeaLabel}</AtomicText>
         </TouchableOpacity>

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/rating/presentation/hooks/useAppRating.tsx

@@ -4,7 +4,7 @@
  * Lazy loads expo-store-review to reduce bundle size
  */
 
-import React, { useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import type {
   RatingConfig,
   UseAppRatingResult,

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" },