@umituz/react-native-settings 5.4.25 → 5.4.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.4.25",
+  "version": "5.4.27",
   "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/faqs/presentation/screens/FAQScreen.tsx

@@ -5,11 +5,11 @@
  */
 
 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 { View, StyleSheet, ViewStyle, TextStyle, FlatList } from 'react-native';
 import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
 import { NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
 import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
+import { useResponsive } from '@umituz/react-native-design-system/responsive';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';
@@ -50,8 +50,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
 }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
-  const { width: windowWidth } = useWindowDimensions();
-  const contentMaxWidth = useMemo(() => getContentMaxWidth(windowWidth), [windowWidth]);
+  const responsive = useResponsive();
   const { searchQuery, setSearchQuery, filteredCategories, hasResults } = useFAQSearch(categories);
   const { isExpanded, toggleExpansion } = useFAQExpansion();
 
@@ -82,7 +81,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
 
   // Render search bar as list header
   const ListHeader = useMemo(() => (
-    <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
+    <View style={{ alignSelf: 'center', width: '100%', maxWidth: responsive.maxContentWidth }}>
       <View style={[styles.searchBar, customStyles?.header]}>
         <FAQSearchBar
           value={searchQuery}
@@ -100,10 +99,10 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
         />
       )}
     </View>
-  ), [searchQuery, hasResults, searchPlaceholder, emptySearchTitle, emptySearchMessage, customStyles, tokens, contentMaxWidth]);
+  ), [searchQuery, hasResults, searchPlaceholder, emptySearchTitle, emptySearchMessage, customStyles, tokens, responsive.maxContentWidth]);
 
   const renderCategory = useCallback(({ item }: { item: FAQCategory }) => (
-    <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
+    <View style={{ alignSelf: 'center', width: '100%', maxWidth: responsive.maxContentWidth }}>
       <FAQCategoryComponent
         category={item}
         isExpanded={isExpanded}
@@ -111,7 +110,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
         styles={customStyles?.category}
       />
     </View>
-  ), [contentMaxWidth, isExpanded, toggleExpansion, customStyles?.category]);
+  ), [responsive.maxContentWidth, isExpanded, toggleExpansion, customStyles?.category]);
 
   return (
     <ScreenLayout

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

@@ -11,6 +11,7 @@ import {
   AtomicIcon,
 } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useResponsive } from "@umituz/react-native-design-system/responsive";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { ICON_PATHS } from "../../../../utils/iconPaths";
@@ -28,6 +29,7 @@ interface FeatureRequestScreenProps {
 
 export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ config, texts }) => {
   const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
   const navigation = useAppNavigation();
   const { requests, userVotes, isLoading, vote, submitRequest: _submitRequest, userId } = useFeatureRequests();
 
@@ -130,6 +132,41 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
 
   const tabs = useMemo(() => (['all', 'my', 'roadmap'] as const), []);
 
+  const styles = useMemo(() => StyleSheet.create({
+    container: { padding: responsive.horizontalPadding },
+    header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: responsive.horizontalPadding, paddingVertical: responsive.verticalPadding },
+    headerTitle: { fontSize: responsive.getFontSize(20), fontWeight: '800' },
+    addButton: { width: 36, height: 36, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+    tabsContainer: { flexDirection: 'row', paddingHorizontal: responsive.horizontalPadding, borderBottomWidth: 1, borderBottomColor: 'rgba(255,255,255,0.05)' },
+    tab: { paddingVertical: responsive.verticalPadding, paddingHorizontal: responsive.horizontalPadding, borderBottomWidth: 2, borderBottomColor: 'transparent' },
+    tabLabel: { fontSize: responsive.getFontSize(14), fontWeight: '600', color: 'rgba(255,255,255,0.5)' },
+    banner: { flexDirection: 'row', alignItems: 'center', padding: responsive.horizontalPadding, borderRadius: 16, borderWidth: 1, gap: 12, marginBottom: responsive.verticalPadding },
+    bannerIconContainer: { position: 'relative' },
+    pulseDot: { position: 'absolute', top: 0, right: 0, width: 8, height: 8, borderRadius: 4, backgroundColor: '#10b981' },
+    bannerTitle: { fontSize: responsive.getFontSize(14), fontWeight: '700' },
+    bannerSub: { fontSize: responsive.getFontSize(12) },
+    sectionTitle: { fontSize: responsive.getFontSize(18), fontWeight: '700', marginBottom: responsive.horizontalPadding },
+    listContent: { gap: responsive.horizontalPadding, paddingBottom: responsive.verticalPadding * 2 },
+    card: { flexDirection: 'row', padding: responsive.horizontalPadding, borderRadius: 16, borderWidth: 1, gap: 12 },
+    voteColumn: { alignItems: 'center', gap: 4, width: 40 },
+    voteCount: { fontSize: responsive.getFontSize(13), fontWeight: '800' },
+    cardContent: { flex: 1, gap: 8 },
+    cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 },
+    cardTitle: { fontSize: responsive.getFontSize(15), fontWeight: '700', flex: 1 },
+    statusBadge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 8, borderWidth: 1 },
+    statusText: { fontSize: responsive.getFontSize(9), fontWeight: '900' },
+    cardDescription: { fontSize: responsive.getFontSize(13), lineHeight: 18 },
+    cardFooter: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 },
+    platformText: { fontSize: responsive.getFontSize(10), fontWeight: '600' },
+    commentCount: { fontSize: responsive.getFontSize(11) },
+    floatingHint: { position: 'absolute', bottom: 40, right: responsive.horizontalPadding, zIndex: 100 },
+    hintBadge: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 8 },
+    hintText: { color: '#fff', fontSize: responsive.getFontSize(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: responsive.getFontSize(14), fontWeight: '500' },
+  }), [responsive.horizontalPadding, responsive.verticalPadding, responsive.getFontSize]);
+
   const header = useMemo(() => (
     <View style={styles.header}>
       <AtomicText style={styles.headerTitle}>{screenTitle}</AtomicText>
@@ -236,38 +273,3 @@ export const FeatureRequestScreen: React.FC<FeatureRequestScreenProps> = ({ conf
     </ScreenLayout>
   );
 };
-
-const styles = StyleSheet.create({
-  container: { padding: 16 },
-  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16, paddingVertical: 12 },
-  headerTitle: { fontSize: 20, fontWeight: '800' },
-  addButton: { width: 36, height: 36, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
-  tabsContainer: { flexDirection: 'row', paddingHorizontal: 16, borderBottomWidth: 1, borderBottomColor: 'rgba(255,255,255,0.05)' },
-  tab: { paddingVertical: 12, paddingHorizontal: 16, borderBottomWidth: 2, borderBottomColor: 'transparent' },
-  tabLabel: { fontSize: 14, fontWeight: '600', color: 'rgba(255,255,255,0.5)' },
-  banner: { flexDirection: 'row', alignItems: 'center', padding: 16, borderRadius: 16, borderWidth: 1, gap: 12, marginBottom: 20 },
-  bannerIconContainer: { position: 'relative' },
-  pulseDot: { position: 'absolute', top: 0, right: 0, width: 8, height: 8, borderRadius: 4, backgroundColor: '#10b981' },
-  bannerTitle: { fontSize: 14, fontWeight: '700' },
-  bannerSub: { fontSize: 12 },
-  sectionTitle: { fontSize: 18, fontWeight: '700', marginBottom: 16 },
-  listContent: { gap: 12, paddingBottom: 40 },
-  card: { flexDirection: 'row', padding: 16, borderRadius: 16, borderWidth: 1, gap: 12 },
-  voteColumn: { alignItems: 'center', gap: 4, width: 40 },
-  voteCount: { fontSize: 13, fontWeight: '800' },
-  cardContent: { flex: 1, gap: 8 },
-  cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 },
-  cardTitle: { fontSize: 15, fontWeight: '700', flex: 1 },
-  statusBadge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 8, borderWidth: 1 },
-  statusText: { fontSize: 9, fontWeight: '900' },
-  cardDescription: { fontSize: 13, lineHeight: 18 },
-  cardFooter: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 },
-  platformText: { fontSize: 10, fontWeight: '600' },
-  commentCount: { fontSize: 11 },
-  floatingHint: { position: 'absolute', bottom: 40, right: 16, zIndex: 100 },
-  hintBadge: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 8 },
-  hintText: { color: '#fff', 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/domains/video-tutorials/presentation/components/VideoTutorialCard.tsx

@@ -7,6 +7,7 @@ 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 { useResponsive } from "@umituz/react-native-design-system/responsive";
 import type { VideoTutorial } from "../../types";
 
 const formatDuration = (seconds: number): string => {
@@ -27,7 +28,8 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = React.memo(({
   horizontal = false,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
+  const responsive = useResponsive();
+  const styles = useMemo(() => getStyles(tokens, responsive, horizontal), [tokens, responsive, horizontal]);
 
   return (
     <TouchableOpacity
@@ -86,22 +88,28 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = React.memo(({
   );
 });
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => StyleSheet.create({
-  container: { borderRadius: 12, borderWidth: 1, marginBottom: 12, overflow: "hidden" },
-  horizontalContainer: { width: 280, marginRight: 12, marginBottom: 0 },
-  imageContainer: { position: "relative" },
-  thumbnail: { width: "100%", height: 180 },
-  horizontalThumbnail: { height: 140 },
-  durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, backgroundColor: "rgba(0,0,0,0.7)" },
-  durationText: { color: tokens.colors.textInverse },
-  featuredBadge: { position: "absolute", top: 8, left: 8, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 },
-  featuredText: { fontWeight: "600" },
-  content: { padding: 12 },
-  title: { fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
-  horizontalTitle: {},
-  description: { marginBottom: 8 },
-  horizontalDescription: { marginBottom: 6 },
-  metadata: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
-  category: { textTransform: "capitalize", fontWeight: "500" },
-  difficulty: { textTransform: "capitalize", fontWeight: "500" },
-});
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, responsive: ReturnType<typeof useResponsive>, horizontal: boolean) => {
+  const horizontalWidth = responsive.isTabletDevice ? 320 : 280;
+  const thumbnailHeight = responsive.isTabletDevice ? 200 : 180;
+  const horizontalThumbnailHeight = responsive.isTabletDevice ? 160 : 140;
+
+  return StyleSheet.create({
+    container: { borderRadius: 12, borderWidth: 1, marginBottom: responsive.verticalPadding, overflow: "hidden" },
+    horizontalContainer: { width: horizontalWidth, marginRight: responsive.horizontalPadding, marginBottom: 0 },
+    imageContainer: { position: "relative" },
+    thumbnail: { width: "100%", height: thumbnailHeight },
+    horizontalThumbnail: { height: horizontalThumbnailHeight },
+    durationBadge: { position: "absolute", bottom: 8, right: 8, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, backgroundColor: "rgba(0,0,0,0.7)" },
+    durationText: { color: tokens.colors.textInverse },
+    featuredBadge: { position: "absolute", top: 8, left: 8, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4 },
+    featuredText: { fontWeight: "600" },
+    content: { padding: responsive.horizontalPadding },
+    title: { fontWeight: "600", marginBottom: 6, color: tokens.colors.textPrimary },
+    horizontalTitle: {},
+    description: { marginBottom: 8 },
+    horizontalDescription: { marginBottom: 6 },
+    metadata: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+    category: { textTransform: "capitalize", fontWeight: "500" },
+    difficulty: { textTransform: "capitalize", fontWeight: "500" },
+  });
+};