@umituz/react-native-settings 4.21.19 → 4.21.21

package/package.json

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

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

@@ -3,12 +3,11 @@
  * Displays the list of about items organized in sections
  */
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { AboutSettingItem } from './AboutSettingItem';
 import { AppInfo } from '../../domain/entities/AppInfo';
 import { AboutConfig } from '../../domain/entities/AppInfo';
-
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export interface AboutContentProps {
   /** App information to display */
@@ -23,7 +22,7 @@ const AboutSectionHeader: React.FC<{ title: string }> = ({ title }) => {
   const colors = tokens.colors;
 
   return (
-    <Text style={[styles.sectionHeader, { color: colors.textSecondary }]}>{title}</Text>
+    <AtomicText style={[styles.sectionHeader, { color: colors.textSecondary }]}>{title}</AtomicText>
   );
 };
 

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

@@ -3,13 +3,8 @@
  * Displays app name, version, and description
  */
 import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ViewStyle,
-  TextStyle,
-} from 'react-native';
+import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 import { AppInfo } from '../../domain/entities/AppInfo';
 
 export interface AboutHeaderProps {
@@ -26,8 +21,6 @@ export interface AboutHeaderProps {
   testID?: string;
 }
 
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-
 export const AboutHeader: React.FC<AboutHeaderProps> = ({
   appInfo,
   containerStyle,
@@ -43,14 +36,14 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
 
   return (
     <View style={[styles.header, { borderBottomColor: colors.border }, containerStyle]} testID={testID}>
-      <Text style={[styles.appName, { color: colors.textPrimary }, titleStyle]}>{appInfo.name}</Text>
-      <Text style={[styles.version, { color: colors.textSecondary }, versionStyle]}>
+      <AtomicText style={[styles.appName, { color: colors.textPrimary }, titleStyle]}>{appInfo.name}</AtomicText>
+      <AtomicText style={[styles.version, { color: colors.textSecondary }, versionStyle]}>
         {versionPrefix} {appInfo.version}
-      </Text>
+      </AtomicText>
       {appInfo.description && (
-        <Text style={[styles.description, { color: colors.textSecondary }, descriptionStyle]}>
+        <AtomicText style={[styles.description, { color: colors.textSecondary }, descriptionStyle]}>
           {appInfo.description}
-        </Text>
+        </AtomicText>
       )}
     </View>
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useAppNavigation } from '@umituz/react-native-design-system';
 import { AboutConfig } from '../../domain/entities/AppInfo';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
@@ -21,7 +21,7 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
     description: propsDescription,
     sectionTitle: propsSectionTitle,
 }) => {
-    const navigation = useNavigation();
+    const navigation = useAppNavigation();
 
     const route = config?.route || config?.defaultRoute || 'About';
     const title = propsTitle || config?.title;

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

@@ -8,12 +8,11 @@ import React, { memo, useCallback } from 'react';
 import {
   TouchableOpacity,
   View,
-  Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
 } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 
 export interface AboutSettingItemProps {
   /** Icon component (any React component) */
@@ -86,11 +85,6 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = memo(({
     iconContainerStyle,
   ];
 
-  const chevronStyles = [
-    styles.chevron,
-    { color: chevronColor || colors.textSecondary },
-  ];
-
   return (
     <Container
       style={containerStyles}
@@ -101,23 +95,30 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = memo(({
       {icon && <View style={iconContainerStyles}>{icon}</View>}
 
       <View style={styles.content}>
-        <Text style={[styles.title, { color: colors.textPrimary }, titleStyle]}>
+        <AtomicText style={[styles.title, { color: colors.textPrimary }, titleStyle]}>
           {title}
-        </Text>
+        </AtomicText>
         {description && (
-          <Text style={[styles.description, { color: colors.textSecondary }, descriptionStyle]}>
+          <AtomicText style={[styles.description, { color: colors.textSecondary }, descriptionStyle]}>
             {description}
-          </Text>
+          </AtomicText>
         )}
       </View>
 
       {value && (
-        <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>
+        <AtomicText style={[styles.value, { color: colors.textSecondary }, valueStyle]}>
           {value}
-        </Text>
+        </AtomicText>
       )}
 
-      {showChevron && <Text style={chevronStyles}>›</Text>}
+      {showChevron && (
+        <AtomicIcon
+          name="chevron-right"
+          size={20}
+          customColor={chevronColor || colors.textSecondary}
+          style={styles.chevron}
+        />
+      )}
     </Container>
   );
 });
@@ -156,7 +157,6 @@ const getStyles = (tokens: any) => StyleSheet.create({
     maxWidth: '60%',
   },
   chevron: {
-    fontSize: 20,
-    fontWeight: '300',
+    marginLeft: 4,
   },
 });

package/src/domains/appearance/presentation/components/AppearanceSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useAppNavigation } from '@umituz/react-native-design-system';
 import { AppearanceSectionConfig } from '../../types';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
@@ -23,7 +23,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
     title: titleProp,
     description: descriptionProp,
 }) => {
-    const navigation = useNavigation();
+    const navigation = useAppNavigation();
 
     const route = config?.route || config?.defaultRoute || 'Appearance';
     const title = titleProp || config?.title;

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -6,12 +6,11 @@
  */
 
 import React, { useMemo, useCallback } from "react";
-// @ts-ignore - Optional peer dependency
-import { useNavigation } from "@react-navigation/native";
 import { 
   ScreenLayout, 
   useAppDesignTokens,
-  NavigationHeader
+  NavigationHeader,
+  useAppNavigation
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useAppearance, useAppearanceActions } from "../../hooks";
@@ -39,7 +38,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   showColorsSection = true,
   showPreviewSection = true,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
   const { themeMode } = useAppearance();

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

@@ -5,7 +5,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
 
 export interface FAQEmptyStateStyles {
@@ -55,7 +55,7 @@ export const FAQEmptyState: React.FC<FAQEmptyStateProps> = ({
 
     return (
         <View style={[styles.container, customStyles?.container]}>
-            <Text style={[styles.icon, customStyles?.icon]}>{icon}</Text>
+            <AtomicText style={[styles.icon, customStyles?.icon]}>{icon}</AtomicText>
             <AtomicText
                 type="headlineSmall"
                 color="textPrimary"

package/src/domains/gamification/components/AchievementCard.tsx

@@ -4,7 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
 
 export interface AchievementCardProps {
   title: string;
@@ -12,12 +13,10 @@ export interface AchievementCardProps {
   icon: React.ReactNode;
   isUnlocked: boolean;
   progress: number;
-  // Customization
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
   descriptionStyle?: TextStyle;
   progressBarStyle?: ViewStyle;
-  // Colors
   unlockedColor?: string;
   lockedColor?: string;
   backgroundColor?: string;
@@ -35,42 +34,50 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
   titleStyle,
   descriptionStyle,
   progressBarStyle,
-  unlockedColor = "#4CAF50",
-  lockedColor = "#666666",
-  backgroundColor = "#1A1A1A",
-  textColor = "#FFFFFF",
-  subtextColor = "#888888",
+  unlockedColor,
+  lockedColor,
+  backgroundColor,
+  textColor,
+  subtextColor,
 }) => {
-  const accentColor = isUnlocked ? unlockedColor : lockedColor;
+  const tokens = useAppDesignTokens();
+  
+  const finalUnlockedColor = unlockedColor || tokens.colors.success;
+  const finalLockedColor = lockedColor || tokens.colors.textDisabled;
+  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
+  const finalTextColor = textColor || tokens.colors.textPrimary;
+  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+  
+  const accentColor = isUnlocked ? finalUnlockedColor : finalLockedColor;
 
   return (
     <View
       style={[
         styles.container,
-        { backgroundColor, borderColor: `${accentColor}40` },
+        { backgroundColor: finalBackgroundColor, borderColor: withAlpha(accentColor, 0.4) },
         containerStyle,
       ]}
     >
-      <View style={[styles.iconContainer, { backgroundColor: `${accentColor}20` }]}>
+      <View style={[styles.iconContainer, { backgroundColor: withAlpha(accentColor, 0.2) }]}>
         {icon}
       </View>
 
       <View style={styles.content}>
-        <Text
+        <AtomicText
           style={[
             styles.title,
-            { color: isUnlocked ? textColor : subtextColor },
+            { color: isUnlocked ? finalTextColor : finalSubtextColor },
             titleStyle,
           ]}
         >
           {title}
-        </Text>
-        <Text style={[styles.description, { color: subtextColor }, descriptionStyle]}>
+        </AtomicText>
+        <AtomicText style={[styles.description, { color: finalSubtextColor }, descriptionStyle]}>
           {description}
-        </Text>
+        </AtomicText>
 
         {!isUnlocked && (
-          <View style={[styles.progressBar, { backgroundColor: `${lockedColor}40` }, progressBarStyle]}>
+          <View style={[styles.progressBar, { backgroundColor: withAlpha(finalLockedColor, 0.4) }, progressBarStyle]}>
             <View
               style={[
                 styles.progressFill,
@@ -82,8 +89,8 @@ export const AchievementCard: React.FC<AchievementCardProps> = ({
       </View>
 
       {isUnlocked && (
-        <View style={[styles.checkmark, { backgroundColor: unlockedColor }]}>
-          <Text style={styles.checkmarkText}>✓</Text>
+        <View style={[styles.checkmark, { backgroundColor: finalUnlockedColor }]}>
+          <AtomicText style={styles.checkmarkText}>✓</AtomicText>
         </View>
       )}
     </View>

package/src/domains/gamification/components/AchievementItem.tsx

@@ -4,13 +4,8 @@
  */
 
 import React from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  type ViewStyle,
-  type TextStyle,
-} from "react-native";
+import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
 
 export interface AchievementItemProps {
   title: string;
@@ -43,66 +38,73 @@ export const AchievementItem: React.FC<AchievementItemProps> = ({
   containerStyle,
   titleStyle,
   descriptionStyle,
-  accentColor = "#FFD700",
-  backgroundColor = "#1A1A1A",
-  textColor = "#FFFFFF",
-  subtextColor = "#888888",
-  lockedOpacity = 0.5,
+  accentColor,
+  backgroundColor,
+  textColor,
+  subtextColor,
+  lockedOpacity,
 }) => {
+  const tokens = useAppDesignTokens();
+  const finalAccentColor = accentColor || tokens.colors.primary;
+  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
+  const finalTextColor = textColor || tokens.colors.textPrimary;
+  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+  const finalLockedOpacity = lockedOpacity !== undefined ? lockedOpacity : 0.5;
+
   const progressPercent = Math.min((progress / threshold) * 100, 100);
 
   return (
     <View
       style={[
         styles.container,
-        { backgroundColor, opacity: isUnlocked ? 1 : lockedOpacity },
+        { backgroundColor: finalBackgroundColor, opacity: isUnlocked ? 1 : finalLockedOpacity },
         containerStyle,
       ]}
     >
       <View
-        style={[styles.iconContainer, { backgroundColor: `${accentColor}20` }]}
+        style={[styles.iconContainer, { backgroundColor: withAlpha(finalAccentColor, 0.2) }]}
       >
         {icon}
       </View>
 
       <View style={styles.content}>
         <View style={styles.header}>
-          <Text style={[styles.title, { color: textColor }, titleStyle]}>
+          <AtomicText style={[styles.title, { color: finalTextColor }, titleStyle]}>
             {title}
-          </Text>
+          </AtomicText>
           {isUnlocked && (
-            <View style={[styles.checkmark, { backgroundColor: accentColor }]}>
-              <Text style={styles.checkmarkText}>✓</Text>
+            <View style={[styles.checkmark, { backgroundColor: finalAccentColor }]}>
+              <AtomicText style={styles.checkmarkText}>✓</AtomicText>
             </View>
           )}
         </View>
 
-        <Text
-          style={[styles.description, { color: subtextColor }, descriptionStyle]}
+        <AtomicText
+          style={[styles.description, { color: finalSubtextColor }, descriptionStyle]}
           numberOfLines={2}
         >
           {description}
-        </Text>
+        </AtomicText>
 
         {!isUnlocked && (
           <View style={styles.progressContainer}>
             <View
-              style={[styles.progressBar, { backgroundColor: `${accentColor}30` }]}
+              style={[styles.progressBar, { backgroundColor: withAlpha(finalAccentColor, 0.3) }]}
             >
               <View
                 style={[
                   styles.progressFill,
                   {
-                    backgroundColor: accentColor,
+                    backgroundColor: finalAccentColor,
                     width: `${progressPercent}%`,
                   },
                 ]}
               />
             </View>
             {progressLabel && (
-              <Text style={[styles.progressText, { color: subtextColor }]}>
+              <AtomicText style={[styles.progressText, { color: finalSubtextColor }]}>
                 {progressLabel}
-              </Text>
+              </AtomicText>
             )}
           </View>
         )}

package/src/domains/gamification/components/AchievementToast.tsx

@@ -4,20 +4,19 @@
  */
 
 import React, { useEffect, useRef } from "react";
-import { View, Text, StyleSheet, Animated, type ViewStyle, type TextStyle } from "react-native";
+import { View, StyleSheet, Animated, type ViewStyle, type TextStyle } from "react-native";
+import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
 
 export interface AchievementToastProps {
   visible: boolean;
   title: string;
-  label: string; // e.g., "Achievement Unlocked!" - from app translations
+  label: string;
   icon: React.ReactNode;
   onDismiss: () => void;
   duration?: number;
-  // Customization
   containerStyle?: ViewStyle;
   labelStyle?: TextStyle;
   titleStyle?: TextStyle;
-  // Colors
   backgroundColor?: string;
   textColor?: string;
   labelColor?: string;
@@ -33,12 +32,17 @@ export const AchievementToast: React.FC<AchievementToastProps> = ({
   containerStyle,
   labelStyle,
   titleStyle,
-  backgroundColor = "#FFD700",
-  textColor = "#000000",
-  labelColor = "#00000080",
+  backgroundColor,
+  textColor,
+  labelColor,
 }) => {
+  const tokens = useAppDesignTokens();
   const translateY = useRef(new Animated.Value(-100)).current;
 
+  const finalBackgroundColor = backgroundColor || tokens.colors.primary;
+  const finalTextColor = textColor || tokens.colors.onPrimary;
+  const finalLabelColor = labelColor || withAlpha(finalTextColor, 0.5);
+
   useEffect(() => {
     if (visible) {
       Animated.sequence([
@@ -69,15 +73,15 @@ export const AchievementToast: React.FC<AchievementToastProps> = ({
         containerStyle,
       ]}
     >
-      <View style={[styles.toast, { backgroundColor }]}>
+      <View style={[styles.toast, { backgroundColor: finalBackgroundColor }]}>
         <View style={styles.iconContainer}>{icon}</View>
         <View style={styles.content}>
-          <Text style={[styles.label, { color: labelColor }, labelStyle]}>
+          <AtomicText style={[styles.label, { color: finalLabelColor }, labelStyle]}>
             {label}
-          </Text>
-          <Text style={[styles.title, { color: textColor }, titleStyle]}>
+          </AtomicText>
+          <AtomicText style={[styles.title, { color: finalTextColor }, titleStyle]}>
             {title}
-          </Text>
+          </AtomicText>
         </View>
       </View>
     </Animated.View>

package/src/domains/gamification/components/GamificationScreen/AchievementsList.tsx

@@ -3,7 +3,8 @@
  */
 
 import React from "react";
-import { View, Text, type TextStyle } from "react-native";
+import { View, type TextStyle } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
 import { AchievementItem } from "../AchievementItem";
 import { styles } from "./styles";
 import type { AchievementItemProps } from "../AchievementItem";
@@ -43,14 +44,14 @@ export const AchievementsList: React.FC<AchievementsListProps> = ({
 
   return (
     <View style={styles.section}>
-      <Text style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}>
+      <AtomicText style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}>
         {achievementsTitle}
-      </Text>
+      </AtomicText>
 
       {achievements.length === 0 && emptyAchievementsText ? (
-        <Text style={[styles.emptyText, { color: subtextColor }]}>
+        <AtomicText style={[styles.emptyText, { color: subtextColor }]}>
           {emptyAchievementsText}
-        </Text>
+        </AtomicText>
       ) : (
         <>
           {/* Unlocked achievements first */}

package/src/domains/gamification/components/GamificationScreen/Header.tsx

@@ -3,7 +3,8 @@
  */
 
 import React from "react";
-import { View, Text, type ViewStyle, type TextStyle } from "react-native";
+import { View, type ViewStyle, type TextStyle } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
 import { styles } from "./styles";
 
 export interface HeaderProps {
@@ -21,9 +22,9 @@ export const Header: React.FC<HeaderProps> = ({
 }) => {
   return (
     <View style={[styles.header, headerStyle]}>
-      <Text style={[styles.title, { color: textColor }, titleStyle]}>
+      <AtomicText style={[styles.title, { color: textColor }, titleStyle]}>
         {title}
-      </Text>
+      </AtomicText>
     </View>
   );
 };

package/src/domains/gamification/components/GamificationScreen/StatsGrid.tsx

@@ -3,7 +3,8 @@
  */
 
 import React from "react";
-import { View, Text, type TextStyle } from "react-native";
+import { View, type TextStyle } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
 import { StatsCard } from "../StatsCard";
 import { styles } from "./styles";
 import type { StatsCardProps } from "../StatsCard";
@@ -31,9 +32,9 @@ export const StatsGrid: React.FC<StatsGridProps> = ({
 
   return (
     <View style={styles.section}>
-      <Text style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}>
+      <AtomicText style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}>
         {statsTitle}
-      </Text>
+      </AtomicText>
       <View style={styles.statsGrid}>
         {stats.map((stat, index) => (
           <StatsCard