@umituz/react-native-settings 5.3.38 → 5.3.40

package/dist/domains/feedback/presentation/components/FeedbackForm.styles.d.ts

@@ -16,11 +16,21 @@ export declare const getFeedbackFormStyles: (_tokens: ReturnType<typeof useAppDe
         paddingVertical: number;
         borderRadius: number;
         borderWidth: number;
-        gap: number;
+        marginRight: number;
     };
     ratingContainer: {
         alignItems: "center";
+        marginVertical: number;
+        paddingVertical: number;
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    ratingLabel: {
+        fontSize: number;
+        fontWeight: "900";
+        letterSpacing: number;
         marginBottom: number;
+        textTransform: "uppercase";
     };
     stars: {
         flexDirection: "row";
@@ -38,11 +48,15 @@ export declare const getFeedbackFormStyles: (_tokens: ReturnType<typeof useAppDe
         borderWidth: number;
         borderRadius: number;
         padding: number;
+        fontSize: number;
     };
     errorText: {
         marginTop: number;
+        fontWeight: "600";
     };
     submitButton: {
         width: "100%";
+        height: number;
+        borderRadius: number;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.3.38",
+  "version": "5.3.40",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/domains/feedback/domain/entities/FeatureRequestEntity.ts

@@ -0,0 +1,48 @@
+/**
+ * Feature Request Entity
+ * Represents a community feature request that all users can see and vote on
+ */
+
+export type FeatureRequestStatus = 'pending' | 'planned' | 'review' | 'completed' | 'dismissed';
+
+export type VoteType = 'up' | 'down';
+
+export interface FeatureRequestItem {
+  id: string;
+  title: string;
+  description: string;
+  type: string;
+  status: FeatureRequestStatus;
+  votes: number;
+  commentCount: number;
+  createdBy: string;
+  isAnonymous: boolean;
+  platform: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface FeatureRequestVote {
+  type: VoteType;
+  votedAt: string;
+}
+
+export interface FeatureRequestSubmitData {
+  title: string;
+  description: string;
+  type: string;
+  rating?: number;
+}
+
+export interface FeatureRequestDataProvider {
+  /** Fetch all feature requests */
+  fetchRequests: () => Promise<FeatureRequestItem[]>;
+  /** Fetch current user's votes */
+  fetchUserVotes: (userId: string) => Promise<Record<string, VoteType>>;
+  /** Vote on a feature request */
+  onVote: (requestId: string, userId: string, type: VoteType) => Promise<void>;
+  /** Submit a new feature request */
+  onSubmit: (data: FeatureRequestSubmitData) => Promise<void>;
+  /** Current user ID (can be anonymous UID) */
+  userId: string | null;
+}

package/src/domains/feedback/index.ts

@@ -1,6 +1,6 @@
 /**
  * Feedback Domain
- * User feedback, bug reports
+ * User feedback, bug reports, feature requests
  */
 
 export * from './presentation/components/FeedbackForm';
@@ -8,4 +8,5 @@ export * from './presentation/components/FeedbackModal';
 export * from './presentation/components/SupportSection';
 export * from './presentation/hooks/useFeedbackForm';
 export * from './domain/entities/FeedbackEntity';
+export * from './domain/entities/FeatureRequestEntity';
 export * from './domain/repositories/IFeedbackRepository';

package/src/domains/feedback/presentation/components/FeedbackForm.styles.ts

@@ -15,37 +15,51 @@ export const getFeedbackFormStyles = (_tokens: ReturnType<typeof useAppDesignTok
     typeButton: {
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 20,
-        borderWidth: 1,
-        gap: 6,
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        borderRadius: 24,
+        borderWidth: 1.5,
+        marginRight: 10,
     },
     ratingContainer: {
         alignItems: "center",
-        marginBottom: 24,
+        marginVertical: 32,
+        paddingVertical: 16,
+        backgroundColor: "rgba(255,255,255,0.02)",
+        borderRadius: 16,
+    },
+    ratingLabel: {
+        fontSize: 12,
+        fontWeight: "900",
+        letterSpacing: 1,
+        marginBottom: 16,
+        textTransform: "uppercase",
     },
     stars: {
         flexDirection: "row",
-        gap: 8,
+        gap: 12,
     },
     starButton: {
         padding: 4,
     },
     inputContainer: {
-        marginBottom: 24,
+        marginBottom: 32,
     },
     textArea: {
         textAlignVertical: "top",
-        minHeight: 120,
-        borderWidth: 1,
-        borderRadius: 8,
-        padding: 12,
+        minHeight: 140,
+        borderWidth: 1.5,
+        borderRadius: 16,
+        padding: 16,
+        fontSize: 15,
     },
     errorText: {
         marginTop: 8,
+        fontWeight: "600",
     },
     submitButton: {
         width: "100%",
+        height: 56,
+        borderRadius: 16,
     },
 });

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -67,7 +67,7 @@ const FeedbackRatingSection: React.FC<FeedbackRatingSectionProps> = ({
     tokens,
 }) => (
     <View style={styles.ratingContainer}>
-        <AtomicText type="bodyMedium" style={{ marginBottom: 8, color: tokens.colors.textSecondary }}>
+        <AtomicText style={[styles.ratingLabel, { color: tokens.colors.textSecondary }]}>
             {ratingLabel}
         </AtomicText>
         <View style={styles.stars}>

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

@@ -1,11 +1,11 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import {
   View,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
   FlatList,
-  Image,
+  ActivityIndicator,
 } from "react-native";
 import {
   AtomicText,
@@ -15,177 +15,230 @@ 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 type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
-
-interface FeatureRequest {
-  id: string;
-  title: string;
-  description: string;
-  votes: number;
-  status: 'planned' | 'review' | 'completed';
-  comments: number;
-  userAvatars: string[];
-  voted: 'up' | 'down' | null;
-}
+import type { FeedbackType } from "../../domain/entities/FeedbackEntity";
+import type {
+  FeatureRequestItem,
+  FeatureRequestDataProvider,
+  VoteType,
+} from "../../domain/entities/FeatureRequestEntity";
 
-const MOCK_REQUESTS: FeatureRequest[] = [
-  {
-    id: "1",
-    title: "AI Music Generation",
-    description: "Add the ability to generate background tracks for videos using simple text prompts or mood selectors.",
-    votes: 1250,
-    status: 'planned',
-    comments: 24,
-    userAvatars: ["https://i.pravatar.cc/100?u=1", "https://i.pravatar.cc/100?u=2"],
-    voted: null,
-  },
-  {
-    id: "2",
-    title: "Couple Video Templates",
-    description: "Specific cinematic transition templates designed for couples' vlogs and anniversary montages.",
-    votes: 842,
-    status: 'review',
-    comments: 8,
-    userAvatars: ["https://i.pravatar.cc/100?u=3"],
-    voted: null,
-  },
-  {
-    id: "3",
-    title: "4K Export Support",
-    description: "Allow users to export generated AI videos in high-quality 4K resolution.",
-    votes: 2100,
-    status: 'completed',
-    comments: 42,
-    userAvatars: ["https://i.pravatar.cc/100?u=4", "https://i.pravatar.cc/100?u=5"],
-    voted: null,
-  },
-  {
-    id: "4",
-    title: "Dark Mode Editor",
-    description: "Make the entire editing interface dark for better focus during late-night creative sessions.",
-    votes: 156,
-    status: 'planned',
-    comments: 5,
-    userAvatars: ["https://i.pravatar.cc/100?u=6"],
-    voted: null,
-  }
-];
+interface FeatureRequestScreenProps {
+  config?: {
+    translations?: Record<string, any>;
+    dataProvider?: FeatureRequestDataProvider;
+    onSubmit?: (data: any) => Promise<void>;
+  };
+  texts: any;
+}
 
-export const FeatureRequestScreen: React.FC<any> = ({ config, texts }) => {
+export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ config, texts }) => {
   const tokens = useAppDesignTokens();
-  const [requests, setRequests] = useState(MOCK_REQUESTS);
+  const dataProvider = config?.dataProvider;
+
+  const [requests, setRequests] = useState<FeatureRequestItem[]>([]);
+  const [userVotes, setUserVotes] = useState<Record<string, VoteType>>({});
+  const [isLoading, setIsLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<'all' | 'my' | 'roadmap'>('all');
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Use passed translations if available
   const t = config?.translations || {};
   const screenTitle = t.screen_title || "Feedback & Features";
   const trendingTitle = t.trending || "Trending Requests";
   const bannerTitle = t.banner?.title || "Community Active";
-  const bannerSub = t.banner?.subtitle || "1.2k users voting right now";
+  const bannerSub = t.banner?.subtitle || `${requests.length} feature requests`;
   const newIdeaLabel = t.new_idea || "NEW IDEA?";
-  
+
   const tabLabels = {
     all: t.tabs?.all || "All Requests",
     my: t.tabs?.my || "My Feedback",
     roadmap: t.tabs?.roadmap || "Roadmap",
   };
 
-  const statusLabels = {
+  const statusLabels: Record<string, string> = {
     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 handleVote = (id: string, type: 'up' | 'down') => {
+  const loadData = useCallback(async () => {
+    if (!dataProvider) {
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const [fetchedRequests, fetchedVotes] = await Promise.all([
+        dataProvider.fetchRequests(),
+        dataProvider.userId
+          ? dataProvider.fetchUserVotes(dataProvider.userId)
+          : Promise.resolve({} as Record<string, VoteType>),
+      ]);
+      setRequests(fetchedRequests);
+      setUserVotes(fetchedVotes);
+    } catch (error) {
+      if (__DEV__) console.warn("[FeatureRequestScreen] Failed to load data:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [dataProvider]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleVote = useCallback(async (id: string, type: VoteType) => {
+    if (!dataProvider?.userId || !dataProvider.onVote) return;
+
+    const previousVote = userVotes[id];
+    const isUndoVote = previousVote === type;
+
+    // Optimistic update
+    setUserVotes(prev => {
+      const next = { ...prev };
+      if (isUndoVote) {
+        delete next[id];
+      } else {
+        next[id] = type;
+      }
+      return next;
+    });
+
     setRequests(prev => prev.map(req => {
-      if (req.id === id) {
-        // Simplified voting logic for mock
-        let newVotes = req.votes;
-        if (req.voted === type) {
-          newVotes -= type === 'up' ? 1 : -1;
-          return { ...req, votes: newVotes, voted: null };
-        } else {
-          if (req.voted !== null) {
-            newVotes += type === 'up' ? 2 : -2;
-          } else {
-            newVotes += type === 'up' ? 1 : -1;
-          }
-          return { ...req, votes: newVotes, voted: type };
-        }
+      if (req.id !== id) return req;
+      let delta = 0;
+      if (isUndoVote) {
+        delta = type === 'up' ? -1 : 1;
+      } else if (previousVote) {
+        delta = type === 'up' ? 2 : -2;
+      } else {
+        delta = type === 'up' ? 1 : -1;
       }
-      return req;
+      return { ...req, votes: req.votes + delta };
     }));
-  };
 
-  const getStatusColor = (status: FeatureRequest['status']) => {
+    try {
+      await dataProvider.onVote(id, dataProvider.userId, type);
+    } catch (error) {
+      // Revert on failure
+      setUserVotes(prev => {
+        const next = { ...prev };
+        if (previousVote) {
+          next[id] = previousVote;
+        } else {
+          delete next[id];
+        }
+        return next;
+      });
+      loadData();
+      if (__DEV__) console.warn("[FeatureRequestScreen] Vote failed:", error);
+    }
+  }, [dataProvider, userVotes, loadData]);
+
+  const handleSubmit = useCallback(async (data: any) => {
+    if (!dataProvider?.onSubmit) return;
+
+    setIsSubmitting(true);
+    try {
+      await dataProvider.onSubmit({
+        title: data.title || "New Request",
+        description: data.description,
+        type: data.type || "feature_request",
+        rating: data.rating,
+      });
+      setIsModalVisible(false);
+      // Reload data to get the new request from the database
+      await loadData();
+    } catch (error) {
+      if (__DEV__) console.warn("[FeatureRequestScreen] Submit failed:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [dataProvider, loadData]);
+
+  const getStatusColor = (status: string) => {
     switch (status) {
       case 'planned': return '#3b82f6';
       case 'review': return '#f59e0b';
       case 'completed': return '#10b981';
+      case 'pending': return '#8b5cf6';
+      case 'dismissed': return '#ef4444';
       default: return tokens.colors.textSecondary;
     }
   };
 
-  const renderRequestItem = ({ item }: { item: FeatureRequest }) => (
-    <View style={[styles.card, { backgroundColor: tokens.colors.surfaceSecondary, borderColor: tokens.colors.borderLight }]}>
-      <View style={styles.voteColumn}>
-        <TouchableOpacity onPress={() => handleVote(item.id, 'up')}>
-          <AtomicIcon 
-            name="expand-less" 
-            size="md" 
-            color={item.voted === 'up' ? "primary" : "textSecondary" as any} 
-          />
-        </TouchableOpacity>
-        <AtomicText style={[styles.voteCount, { color: item.voted === 'up' ? tokens.colors.primary : tokens.colors.textPrimary }]}>
-          {item.votes}
-        </AtomicText>
-        <TouchableOpacity onPress={() => handleVote(item.id, 'down')}>
-          <AtomicIcon 
-            name="expand-more" 
-            size="md" 
-            color={item.voted === 'down' ? "primary" : "textSecondary" as any} 
-          />
-        </TouchableOpacity>
-      </View>
+  const filteredRequests = (() => {
+    switch (activeTab) {
+      case 'my':
+        return requests.filter(r => r.createdBy === dataProvider?.userId);
+      case 'roadmap':
+        return requests.filter(r => r.status === 'planned' || r.status === 'completed' || r.status === 'review');
+      default:
+        return requests;
+    }
+  })();
 
-      <View style={styles.cardContent}>
-        <View style={styles.cardHeader}>
-          <AtomicText style={styles.cardTitle}>{item.title}</AtomicText>
-          <View style={[styles.statusBadge, { backgroundColor: getStatusColor(item.status) + '20', borderColor: getStatusColor(item.status) + '40' }]}>
-            <AtomicText style={[styles.statusText, { color: getStatusColor(item.status) }]}>
-              {(statusLabels[item.status] || item.status).toUpperCase()}
-            </AtomicText>
-          </View>
+  const renderRequestItem = ({ item }: { item: FeatureRequestItem }) => {
+    const voted = userVotes[item.id] || null;
+
+    return (
+      <View style={[styles.card, { backgroundColor: tokens.colors.surfaceSecondary, borderColor: tokens.colors.borderLight }]}>
+        <View style={styles.voteColumn}>
+          <TouchableOpacity onPress={() => handleVote(item.id, 'up')}>
+            <AtomicIcon
+              name="chevron-up"
+              size="md"
+              color={voted === 'up' ? "primary" : "textSecondary" as any}
+            />
+          </TouchableOpacity>
+          <AtomicText style={[styles.voteCount, { color: voted === 'up' ? tokens.colors.primary : tokens.colors.textPrimary }]}>
+            {item.votes}
+          </AtomicText>
+          <TouchableOpacity onPress={() => handleVote(item.id, 'down')}>
+            <AtomicIcon
+              name="chevron-down"
+              size="md"
+              color={voted === 'down' ? "primary" : "textSecondary" as any}
+            />
+          </TouchableOpacity>
         </View>
-        
-        <AtomicText style={[styles.cardDescription, { color: tokens.colors.textSecondary }]}>
-          {item.description}
-        </AtomicText>
-
-        <View style={styles.cardFooter}>
-          <View style={styles.avatarGroup}>
-            {item.userAvatars.map((url, i) => (
-              <Image key={i} source={{ uri: url }} style={[styles.avatar, { borderColor: tokens.colors.surfaceSecondary }]} />
-            ))}
-            {item.comments > 5 && (
-              <View style={[styles.avatarMore, { backgroundColor: tokens.colors.surfaceVariant }]}>
-                <AtomicText style={styles.avatarMoreText}>+{item.comments}</AtomicText>
-              </View>
-            )}
+
+        <View style={styles.cardContent}>
+          <View style={styles.cardHeader}>
+            <AtomicText style={styles.cardTitle}>{item.title}</AtomicText>
+            <View style={[styles.statusBadge, { backgroundColor: getStatusColor(item.status) + '20', borderColor: getStatusColor(item.status) + '40' }]}>
+              <AtomicText style={[styles.statusText, { color: getStatusColor(item.status) }]}>
+                {(statusLabels[item.status] || item.status).toUpperCase()}
+              </AtomicText>
+            </View>
           </View>
-          <AtomicText style={[styles.commentCount, { color: tokens.colors.textTertiary }]}>
-            {item.comments} {t.comment_count?.replace('{{count}}', '') || 'comments'}
+
+          <AtomicText style={[styles.cardDescription, { color: tokens.colors.textSecondary }]}>
+            {item.description}
           </AtomicText>
+
+          <View style={styles.cardFooter}>
+            <View style={styles.platformBadge}>
+              <AtomicText style={[styles.platformText, { color: tokens.colors.textTertiary }]}>
+                {item.platform}
+              </AtomicText>
+            </View>
+            <AtomicText style={[styles.commentCount, { color: tokens.colors.textTertiary }]}>
+              {item.commentCount} {t.comment_count?.replace('{{count}}', '') || 'comments'}
+            </AtomicText>
+          </View>
         </View>
       </View>
-    </View>
-  );
+    );
+  };
 
   const header = (
     <View style={styles.header}>
       <AtomicText style={styles.headerTitle}>{screenTitle}</AtomicText>
-      <TouchableOpacity 
+      <TouchableOpacity
         style={[styles.addButton, { backgroundColor: tokens.colors.primary }]}
         onPress={() => setIsModalVisible(true)}
       >
@@ -194,11 +247,21 @@ export const FeatureRequestScreen: React.FC<any> = ({ config, texts }) => {
     </View>
   );
 
+  if (isLoading) {
+    return (
+      <ScreenLayout header={header} edges={['top', 'bottom']}>
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color={tokens.colors.primary} />
+        </View>
+      </ScreenLayout>
+    );
+  }
+
   return (
     <ScreenLayout header={header} edges={['top', 'bottom']}>
       <View style={styles.tabsContainer}>
         {(['all', 'my', 'roadmap'] as const).map((tab) => (
-          <TouchableOpacity 
+          <TouchableOpacity
             key={tab}
             onPress={() => setActiveTab(tab)}
             style={[styles.tab, activeTab === tab && { borderBottomColor: tokens.colors.primary }]}
@@ -226,44 +289,43 @@ export const FeatureRequestScreen: React.FC<any> = ({ config, texts }) => {
 
         <AtomicText style={styles.sectionTitle}>{trendingTitle}</AtomicText>
 
-        <FlatList
-          data={requests}
-          renderItem={renderRequestItem}
-          keyExtractor={item => item.id}
-          scrollEnabled={false}
-          contentContainerStyle={styles.listContent}
-        />
+        {filteredRequests.length === 0 ? (
+          <View style={styles.emptyState}>
+            <AtomicIcon name="chatbubble-outline" size="xl" color="textTertiary" />
+            <AtomicText style={[styles.emptyText, { color: tokens.colors.textTertiary }]}>
+              {t.empty || "No requests yet. Be the first!"}
+            </AtomicText>
+          </View>
+        ) : (
+          <FlatList
+            data={filteredRequests}
+            renderItem={renderRequestItem}
+            keyExtractor={item => item.id}
+            scrollEnabled={false}
+            contentContainerStyle={styles.listContent}
+          />
+        )}
       </ScrollView>
 
       {isModalVisible && (
         <FeedbackModal
           visible={isModalVisible}
           onClose={() => setIsModalVisible(false)}
-          onSubmit={async (data: any) => {
-            console.log("Submitted:", data);
-            setIsModalVisible(false);
-            // Add to mock list for "live" feel
-            const newReq: FeatureRequest = {
-              id: Date.now().toString(),
-              title: data.title || "New Request",
-              description: data.description,
-              votes: 1,
-              status: 'review',
-              comments: 0,
-              userAvatars: ["https://i.pravatar.cc/100?u=me"],
-              voted: 'up',
-            };
-            setRequests(prev => [newReq, ...prev]);
-          }}
+          title={texts?.title}
+          onSubmit={handleSubmit}
           texts={texts}
           initialType="feature_request"
+          isSubmitting={isSubmitting}
         />
       )}
 
       <View style={styles.floatingHint}>
-        <View style={[styles.hintBadge, { backgroundColor: tokens.colors.primary }]}>
+        <TouchableOpacity
+          style={[styles.hintBadge, { backgroundColor: tokens.colors.primary }]}
+          onPress={() => setIsModalVisible(true)}
+        >
           <AtomicText style={styles.hintText}>{newIdeaLabel}</AtomicText>
-        </View>
+        </TouchableOpacity>
       </View>
     </ScreenLayout>
   );
@@ -396,30 +458,14 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     marginTop: 4,
   },
-  avatarGroup: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  avatar: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    marginLeft: -8,
-  },
-  avatarMore: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: -8,
-    borderWidth: 2,
-    borderColor: 'transparent',
+  platformBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
   },
-  avatarMoreText: {
-    fontSize: 8,
-    fontWeight: '800',
+  platformText: {
+    fontSize: 10,
+    fontWeight: '600',
+    textTransform: 'uppercase',
   },
   commentCount: {
     fontSize: 11,
@@ -445,5 +491,21 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: '900',
     textTransform: 'uppercase',
-  }
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 100,
+  },
+  emptyState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+    gap: 12,
+  },
+  emptyText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
 });

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -14,6 +14,7 @@ import { translateFAQData } from "../utils/faqTranslator";
 import { useSettingsConfigFactory } from "../utils/settingsConfigFactory";
 import type { SettingsConfig, SettingsTranslations } from "../screens/types";
 import type { FeedbackFormData } from "../utils/config-creators";
+import type { FeatureRequestDataProvider } from "../../domains/feedback/domain/entities/FeatureRequestEntity";
 import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen, AccountConfig } from "../navigation/types";
 
 export interface SettingsFeatures {
@@ -35,6 +36,7 @@ export interface UseSettingsScreenConfigParams {
   faqData?: FAQData;
   isPremium: boolean;
   onFeedbackSubmit: (data: FeedbackFormData) => Promise<void>;
+  featureRequestDataProvider?: FeatureRequestDataProvider;
   additionalScreens?: AdditionalScreen[];
   features?: SettingsFeatures;
   translations?: SettingsTranslations;
@@ -52,7 +54,7 @@ export interface SettingsScreenConfigResult {
 export const useSettingsScreenConfig = (
   params: UseSettingsScreenConfigParams
 ): SettingsScreenConfigResult => {
-  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {}, translations } = params;
+  const { appInfo, faqData, isPremium, onFeedbackSubmit, featureRequestDataProvider, features = {}, translations } = params;
 
   const {
     notifications: showNotifications = true,
@@ -102,6 +104,15 @@ export const useSettingsScreenConfig = (
       translations,
     };
 
+    // Merge dataProvider into feedback config
+    if (featureRequestDataProvider && config.feedback) {
+      const existingFeedback = typeof config.feedback === 'object' ? config.feedback : { enabled: true };
+      config.feedback = {
+        ...existingFeedback,
+        dataProvider: featureRequestDataProvider,
+      };
+    }
+
     if (config.subscription && typeof config.subscription === 'object') {
       config.subscription = {
         ...config.subscription,
@@ -132,7 +143,7 @@ export const useSettingsScreenConfig = (
     }
 
     return config;
-  }, [baseSettingsConfig, translations]);
+  }, [baseSettingsConfig, translations, featureRequestDataProvider]);
 
   const userProfile = useMemo(() => createUserProfileDisplay({
     profileData: userProfileData,

package/src/presentation/navigation/hooks/useSettingsScreens.ts

@@ -133,8 +133,13 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
       title: videoTutorialConfig?.title || featureTranslations?.videoTutorial?.title || "",
     });
 
+    const feedbackConfig = typeof config?.feedback === 'object' ? config.feedback : undefined;
     const featureRequestScreen = createScreenWithProps("FeatureRequest", FeatureRequestScreen, {
-      config: config?.feedback,
+      config: {
+        ...feedbackConfig,
+        translations: translations?.feedback,
+        dataProvider: feedbackConfig?.dataProvider,
+      },
       texts: {
         feedbackTypes: [
           { type: 'general', label: translations?.feedbackModal?.types?.general || 'General' },
@@ -147,6 +152,17 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
         descriptionPlaceholder: translations?.feedbackModal?.descriptionPlaceholder || 'Tell us more...',
         submitButton: translations?.feedbackModal?.submitButton || 'Submit',
         submittingButton: translations?.feedbackModal?.submittingButton || 'Submitting...',
+        title: translations?.feedbackModal?.title || 'Submit Feedback',
+        defaultTitle: (type: string) => {
+          const titles: Record<string, string> = {
+            general: translations?.feedbackModal?.types?.general || type,
+            bug_report: translations?.feedbackModal?.types?.bugReport || type,
+            feature_request: translations?.feedbackModal?.types?.featureRequest || type,
+            improvement: translations?.feedbackModal?.types?.improvement || type,
+            other: translations?.feedbackModal?.types?.other || type,
+          };
+          return titles[type] || type;
+        },
       }
     });
 

package/src/presentation/screens/types/UserFeatureConfig.ts

@@ -5,6 +5,7 @@
 
 import type { FeatureVisibility } from "./BaseTypes";
 import type { FeedbackType } from "../../../domains/feedback/domain/entities/FeedbackEntity";
+import type { FeatureRequestDataProvider } from "../../../domains/feedback/domain/entities/FeatureRequestEntity";
 import type { FAQCategory } from "../../../domains/faqs/domain/entities/FAQEntity";
 import type { SettingsStackParamList } from "../../navigation/types";
 
@@ -44,6 +45,8 @@ export interface FeedbackConfig {
   onSubmit?: (data: { type: FeedbackType; rating: number; description: string; title: string }) => Promise<void>;
   /** Custom handler to open feedback screen (overrides default modal) */
   onPress?: () => void;
+  /** Data provider for feature request screen (fetching, voting, submitting) */
+  dataProvider?: FeatureRequestDataProvider;
 }
 
 /**