@umituz/react-native-settings 4.20.0 → 4.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.0",
+  "version": "4.20.2",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -39,14 +39,14 @@
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
-    "@umituz/react-native-auth": "*",
-    "@umituz/react-native-design-system": "*",
-    "@umituz/react-native-localization": "*",
-    "@umituz/react-native-notifications": "*",
-    "@umituz/react-native-onboarding": "*",
-    "@umituz/react-native-sentry": "*",
-    "@umituz/react-native-storage": "*",
-    "@umituz/react-native-tanstack": "*",
+    "@umituz/react-native-auth": "latest",
+    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-notifications": "latest",
+    "@umituz/react-native-onboarding": "latest",
+    "@umituz/react-native-sentry": "latest",
+    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-tanstack": "latest",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-safe-area-context": ">=4.0.0",
@@ -67,18 +67,18 @@
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@umituz/react-native-auth": "^3.2.0",
-    "@umituz/react-native-design-system": "^2.5.1",
-    "@umituz/react-native-filesystem": "^2.1.7",
-    "@umituz/react-native-firebase": "^1.13.28",
-    "@umituz/react-native-haptics": "^1.0.3",
-    "@umituz/react-native-localization": "*",
-    "@umituz/react-native-notifications": "*",
-    "@umituz/react-native-onboarding": "*",
-    "@umituz/react-native-sentry": "^1.4.2",
-    "@umituz/react-native-storage": "*",
-    "@umituz/react-native-tanstack": "*",
-    "@umituz/react-native-uuid": "^1.2.2",
+    "@umituz/react-native-auth": "latest",
+    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-filesystem": "latest",
+    "@umituz/react-native-firebase": "latest",
+    "@umituz/react-native-haptics": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-notifications": "latest",
+    "@umituz/react-native-onboarding": "latest",
+    "@umituz/react-native-sentry": "latest",
+    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-tanstack": "latest",
+    "@umituz/react-native-uuid": "latest",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-native": "^5.0.0",

package/src/domains/about/presentation/components/AboutContent.tsx

@@ -19,6 +19,7 @@ export interface AboutContentProps {
 
 const AboutSectionHeader: React.FC<{ title: string }> = ({ title }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   return (
@@ -30,6 +31,8 @@ export const AboutContent: React.FC<AboutContentProps> = ({
   appInfo,
   config,
 }) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const hasContactInfo = appInfo.developer || appInfo.contactEmail || appInfo.websiteUrl;
   const hasMoreInfo = appInfo.moreAppsUrl;
 
@@ -86,7 +89,7 @@ export const AboutContent: React.FC<AboutContentProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   content: {
     paddingVertical: 8,
   },
@@ -94,7 +97,7 @@ const styles = StyleSheet.create({
     marginBottom: 24,
   },
   sectionHeader: {
-    fontSize: 13,
+    fontSize: tokens.typography.labelSmall.responsiveFontSize,
     fontWeight: '600',
     marginBottom: 8,
     paddingHorizontal: 16,

package/src/domains/about/presentation/components/AboutHeader.tsx

@@ -38,6 +38,7 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   return (
@@ -55,7 +56,7 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   header: {
     alignItems: 'center',
     paddingVertical: 24,
@@ -63,16 +64,16 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
   },
   appName: {
-    fontSize: 24,
+    fontSize: tokens.typography.headlineMedium.responsiveFontSize,
     fontWeight: 'bold',
     marginBottom: 4,
   },
   version: {
-    fontSize: 16,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
     marginBottom: 8,
   },
   description: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     textAlign: 'center',
     lineHeight: 20,
   },

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -64,6 +64,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   chevronColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   // Memoize container type to prevent unnecessary re-renders
@@ -79,7 +80,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       disabled && styles.disabled,
       containerStyle
     ];
-  }, [disabled, containerStyle, colors.surface]);
+  }, [disabled, containerStyle, colors.surface, styles]);
 
   // Memoize icon container styles
   const iconContainerStyles = useMemo(() => {
@@ -87,7 +88,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       styles.iconContainer,
       iconContainerStyle
     ];
-  }, [iconContainerStyle]);
+  }, [iconContainerStyle, styles]);
 
   // Memoize chevron styles
   const chevronStyles = useMemo(() => {
@@ -95,7 +96,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       styles.chevron,
       { color: chevronColor || colors.textSecondary }
     ];
-  }, [chevronColor, colors.textSecondary]);
+  }, [chevronColor, colors.textSecondary, styles]);
 
   // Memoize press handler to prevent unnecessary re-renders
   const handlePress = useCallback(() => {
@@ -129,7 +130,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
         )}
       </View>
     );
-  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary]);
+  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary, styles]);
 
   // Memoize value rendering
   const renderValue = useMemo(() => {
@@ -140,7 +141,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
     return (
       <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>{value}</Text>
     );
-  }, [value, valueStyle, colors.textSecondary]);
+  }, [value, valueStyle, colors.textSecondary, styles]);
 
   // Memoize chevron rendering
   const renderChevron = useMemo(() => {
@@ -168,7 +169,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -187,15 +188,15 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   title: {
-    fontSize: 16,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
     fontWeight: '500',
   },
   description: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
     marginTop: 2,
   },
   value: {
-    fontSize: 16,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
     marginRight: 8,
     flexShrink: 1,
     textAlign: 'right',

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -52,6 +52,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   const { appInfo, loading, error } = useAboutInfo({
@@ -91,7 +92,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
         {footerComponent}
       </View>
     );
-  }, [footerComponent, colors.border]);
+  }, [footerComponent, colors.border, styles]);
 
   // Memoize content rendering
   const renderContent = useCallback(() => {
@@ -114,7 +115,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
       { backgroundColor: colors.backgroundPrimary },
       containerStyle
     ];
-  }, [containerStyle, colors.backgroundPrimary]);
+  }, [containerStyle, colors.backgroundPrimary, styles]);
 
   const texts = config.texts || {};
 
@@ -173,7 +174,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   container: {
     flex: 1,
   },
@@ -184,12 +185,12 @@ const styles = StyleSheet.create({
   },
   loadingText: {
     textAlign: 'center',
-    fontSize: 16,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     marginTop: 20,
   },
   errorText: {
     textAlign: 'center',
-    fontSize: 16,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     marginTop: 20,
   },
 });

package/src/domains/disclaimer/presentation/components/DisclaimerCard.tsx

@@ -104,12 +104,12 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     title: {
       flex: 1,
       fontWeight: tokens.typography.labelLarge.fontWeight as any,
-      fontSize: tokens.typography.labelLarge.fontSize,
+      fontSize: tokens.typography.labelLarge.responsiveFontSize,
     },
 
     shortMessage: {
       lineHeight: 18,
       paddingLeft: 52, // Align with title (40px icon + 12px margin)
-      fontSize: 13,
+      fontSize: 13, // Or tokens.typography.bodySmall.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -96,6 +96,6 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
 
     modalText: {
       lineHeight: 24,
-      fontSize: 15,
+      fontSize: 15, // or tokens.typography.bodyMedium.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -68,7 +68,7 @@ export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
               },
             ]}
           >
-            <AtomicIcon name={iconName as any} color="warning" size="lg" />
+            <AtomicIcon name={iconName as any} color="warning" size="xl" />
           </View>
         </View>
 

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

@@ -47,7 +47,7 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
                 input: {
                     flex: 1,
                     height: '100%',
-                    fontSize: 16,
+                    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
                     color: tokens.colors.textPrimary,
                 },
             }),
@@ -57,7 +57,7 @@ export const FAQSearchBar: React.FC<FAQSearchBarProps> = ({
     return (
         <View style={[styles.container, customStyles?.container]}>
             <View style={styles.iconContainer}>
-                <AtomicIcon name="search" size={18} color="textSecondary" />
+                <AtomicIcon name="search" size="md" color="textSecondary" />
             </View>
             <TextInput
                 style={[styles.input, customStyles?.input]}

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

@@ -30,6 +30,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     isSubmitting = false,
 }) => {
     const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
     const [selectedType, setSelectedType] = useState<FeedbackType>(initialType || texts.feedbackTypes[0].type);
     const [rating, setRating] = useState<FeedbackRating>(5);
     const [description, setDescription] = useState("");
@@ -142,7 +143,8 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
     container: {
         width: "100%",
     },
@@ -181,7 +183,7 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         borderRadius: 8,
         padding: 12,
-        fontSize: 16,
+        fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     submitButton: {
         width: "100%",

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

@@ -32,6 +32,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
     texts,
 }) => {
     const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
 
     return (
         <BaseModal visible={visible} onClose={onClose}>
@@ -77,7 +78,8 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
 };
 
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
     safeArea: {
         flex: 1,
     },

package/src/domains/legal/presentation/screens/PrivacyPolicyScreen.tsx

@@ -71,12 +71,13 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   
   // Use cached styles
   const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
     return StyleCacheService.getCachedStyles(
       'PrivacyPolicyScreen',
-      'privacy-policy-styles',
-      createPrivacyPolicyStyles
+      cacheKey,
+      () => createPrivacyPolicyStyles(tokens)
     );
-  }, []);
+  }, [tokens]);
 
   // Memoize URL press handler to prevent child re-renders
   const handleUrlPress = React.useCallback(async () => {
@@ -170,7 +171,7 @@ export const PrivacyPolicyScreen: React.FC<PrivacyPolicyScreenProps> = React.mem
   );
 });
 
-const createPrivacyPolicyStyles = () => {
+const createPrivacyPolicyStyles = (tokens: any) => {
   return StyleSheet.create({
     container: {
       flex: 1,
@@ -187,6 +188,7 @@ const createPrivacyPolicyStyles = () => {
     },
     text: {
       lineHeight: 24,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
       marginTop: 32,
@@ -195,6 +197,7 @@ const createPrivacyPolicyStyles = () => {
     urlText: {
       marginBottom: 16,
       textAlign: "center",
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
       marginTop: 8,

package/src/domains/legal/presentation/screens/TermsOfServiceScreen.tsx

@@ -71,12 +71,13 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   
   // Use cached styles
   const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
     return StyleCacheService.getCachedStyles(
       'TermsOfServiceScreen',
-      'terms-of-service-styles',
-      createTermsOfServiceStyles
+      cacheKey,
+      () => createTermsOfServiceStyles(tokens)
     );
-  }, []);
+  }, [tokens]);
 
   // Memoize URL press handler to prevent child re-renders
   const handleUrlPress = React.useCallback(async () => {
@@ -170,7 +171,7 @@ export const TermsOfServiceScreen: React.FC<TermsOfServiceScreenProps> = React.m
   );
 });
 
-const createTermsOfServiceStyles = () => {
+const createTermsOfServiceStyles = (tokens: any) => {
   return StyleSheet.create({
     container: {
       flex: 1,
@@ -187,6 +188,7 @@ const createTermsOfServiceStyles = () => {
     },
     text: {
       lineHeight: 24,
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlContainer: {
       marginTop: 32,
@@ -195,6 +197,7 @@ const createTermsOfServiceStyles = () => {
     urlText: {
       marginBottom: 16,
       textAlign: "center",
+      fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     },
     urlButton: {
       marginTop: 8,

package/src/domains/rating/presentation/components/StarRating.tsx

@@ -24,10 +24,14 @@ export const StarRating: React.FC<StarRatingProps> = ({
     style,
 }) => {
     const tokens = useAppDesignTokens();
+    const styles = getStyles(tokens);
     const [internalRating, setInternalRating] = useState(rating);
 
     const filledColor = activeColor || tokens.colors.warning || "#FFD700";
     const emptyColor = inactiveColor || tokens.colors.border || "#E0E0E0";
+    
+    // Scale the size
+    const responsiveSize = size;
 
     const handlePress = (index: number) => {
         if (disabled) return;
@@ -48,7 +52,7 @@ export const StarRating: React.FC<StarRatingProps> = ({
                 >
                     <AtomicIcon
                         name={index < (onRatingChange ? internalRating : rating) ? "star" : "star-outline"}
-                        customSize={size}
+                        customSize={responsiveSize}
                         customColor={index < (onRatingChange ? internalRating : rating) ? filledColor : emptyColor}
                     />
                 </TouchableOpacity>
@@ -57,7 +61,8 @@ export const StarRating: React.FC<StarRatingProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
     container: {
         flexDirection: "row",
         alignItems: "center",

package/src/domains/video-tutorials/index.ts

@@ -4,5 +4,6 @@
 
 export * from "./types";
 export * from "./presentation/screens/VideoTutorialsScreen";
+export * from "./presentation/components/VideoTutorialCard";
 export * from "./presentation/hooks";
 export * from "./infrastructure/services/video-tutorial.service";

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

@@ -20,6 +20,7 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
   horizontal = false,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
 
   const formatDuration = (seconds: number): string => {
     const minutes = Math.floor(seconds / 60);
@@ -107,7 +108,8 @@ export const VideoTutorialCard: React.FC<VideoTutorialCardProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
   container: {
     borderRadius: 12,
     borderWidth: 1,
@@ -158,20 +160,20 @@ const styles = StyleSheet.create({
     padding: 12,
   },
   title: {
-    fontSize: 16,
+    fontSize: tokens.typography.titleMedium.responsiveFontSize,
     fontWeight: "600",
     marginBottom: 6,
   },
   horizontalTitle: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
   },
   description: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     lineHeight: 20,
     marginBottom: 8,
   },
   horizontalDescription: {
-    fontSize: 12,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
     lineHeight: 16,
     marginBottom: 6,
   },
@@ -183,9 +185,11 @@ const styles = StyleSheet.create({
   category: {
     fontSize: 12,
     textTransform: "capitalize",
+    fontWeight: "500",
   },
   difficulty: {
     fontSize: 12,
     textTransform: "capitalize",
+    fontWeight: "500",
   },
 });

package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -68,6 +68,7 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
       customFeaturedTutorials,
     }) => {
       const tokens = useAppDesignTokens();
+      const styles = getStyles(tokens);
 
       const featuredQuery = useFeaturedTutorials(maxFeaturedCount);
       const allQuery = useVideoTutorials();
@@ -169,9 +170,10 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> =
     },
   );
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
   title: {
-    fontSize: 24,
+    fontSize: tokens.typography.headlineLarge.responsiveFontSize,
     fontWeight: "600",
     marginBottom: 24,
   },
@@ -179,7 +181,7 @@ const styles = StyleSheet.create({
     marginBottom: 24,
   },
   sectionTitle: {
-    fontSize: 18,
+    fontSize: tokens.typography.titleLarge.responsiveFontSize,
     fontWeight: "500",
     marginBottom: 12,
   },