@umituz/react-native-settings 1.3.7 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -33,7 +33,6 @@
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-localization": "latest",
-    "react-native-paper": "^5.12.3",
     "expo-linear-gradient": "~14.0.0"
   },
   "devDependencies": {

package/src/presentation/components/SettingItem.tsx

@@ -12,8 +12,7 @@
  */
 
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { List } from 'react-native-paper';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
@@ -63,114 +62,198 @@ export const SettingItem: React.FC<SettingItemProps> = ({
     ? (iconGradient as unknown as readonly [string, string, ...string[]])
     : [tokens.colors.surface, tokens.colors.surface] as const;
 
-  // Render gradient icon container for left prop
-  const renderLeft = (props: any) => (
-    <View style={styles.leftContainer}>
-      <LinearGradient
-        colors={gradientColors}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}
-        style={styles.iconContainer}
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={disabled}
+        activeOpacity={0.7}
+        style={[styles.listItem, disabled && styles.disabled]}
+        testID={testID}
       >
-        <AtomicIcon name={icon} size="md" color="primary" />
-      </LinearGradient>
-    </View>
-  );
-
-  // Render right side content for right prop
-  const renderRight = (props: any) => {
-    if (rightElement) {
-      return <View style={styles.rightContainer}>{rightElement}</View>;
-    }
-
-    if (value) {
-      return (
-        <View style={styles.rightContainer}>
-          <AtomicText type="bodyMedium" color="secondary" style={styles.value} numberOfLines={2}>
-            {value}
-          </AtomicText>
+        {/* Left: Gradient Icon */}
+        <View style={styles.leftContainer}>
+          <LinearGradient
+            colors={gradientColors}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={styles.iconContainer}
+          >
+            <AtomicIcon name={icon} size="md" customColor="#FFFFFF" />
+          </LinearGradient>
         </View>
-      );
-    }
 
-    // Show chevron if onPress exists and not explicitly disabled
-    if ((showChevron ?? true) && onPress) {
-      return (
-        <View style={styles.rightContainer}>
-          <AtomicIcon name="ChevronRight" size="sm" color="secondary" style={styles.chevron} />
+        {/* Center: Title and Description */}
+        <View style={styles.contentContainer}>
+          <AtomicText
+            type="bodyLarge"
+            color={disabled ? "textDisabled" : "onSurface"}
+            style={styles.title}
+            numberOfLines={2}
+            ellipsizeMode="tail"
+          >
+            {title}
+          </AtomicText>
+          {description && (
+            <AtomicText
+              type="bodySmall"
+              color="textSecondary"
+              style={styles.description}
+              numberOfLines={2}
+              ellipsizeMode="tail"
+            >
+              {description}
+            </AtomicText>
+          )}
         </View>
-      );
-    }
 
-    return null;
-  };
+        {/* Right: Value, Chevron, or Custom Element */}
+        {rightElement ? (
+          <View style={styles.rightContainer}>{rightElement}</View>
+        ) : value ? (
+          <View style={styles.rightContainer}>
+            <AtomicText
+              type="bodyMedium"
+              color="textSecondary"
+              style={styles.value}
+              numberOfLines={2}
+              textAlign="right"
+            >
+              {value}
+            </AtomicText>
+          </View>
+        ) : (showChevron ?? true) ? (
+          <View style={styles.rightContainer}>
+            <AtomicIcon
+              name="ChevronRight"
+              size="sm"
+              color="textSecondary"
+              style={styles.chevron}
+            />
+          </View>
+        ) : null}
+      </TouchableOpacity>
+    );
+  }
 
   return (
-    <List.Item
-      title={title}
-      description={description}
-      left={renderLeft}
-      right={renderRight}
-      onPress={onPress}
-      disabled={disabled}
+    <View
+      style={[styles.listItem, disabled && styles.disabled]}
       testID={testID}
-      style={styles.listItem}
-      titleStyle={styles.title}
-      descriptionStyle={styles.description}
-      titleNumberOfLines={2}
-      titleEllipsizeMode="tail"
-      descriptionNumberOfLines={2}
-      descriptionEllipsizeMode="tail"
-    />
+    >
+      {/* Left: Gradient Icon */}
+      <View style={styles.leftContainer}>
+        <LinearGradient
+          colors={gradientColors}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.iconContainer}
+        >
+          <AtomicIcon name={icon} size="md" customColor="#FFFFFF" />
+        </LinearGradient>
+      </View>
+
+      {/* Center: Title and Description */}
+      <View style={styles.contentContainer}>
+        <AtomicText
+          type="bodyLarge"
+          color={disabled ? "textDisabled" : "onSurface"}
+          style={styles.title}
+          numberOfLines={2}
+          ellipsizeMode="tail"
+        >
+          {title}
+        </AtomicText>
+        {description && (
+          <AtomicText
+            type="bodySmall"
+            color="textSecondary"
+            style={styles.description}
+            numberOfLines={2}
+            ellipsizeMode="tail"
+          >
+            {description}
+          </AtomicText>
+        )}
+      </View>
+
+      {/* Right: Value, Chevron, or Custom Element */}
+      {rightElement ? (
+        <View style={styles.rightContainer}>{rightElement}</View>
+      ) : value ? (
+        <View style={styles.rightContainer}>
+          <AtomicText
+            type="bodyMedium"
+            color="textSecondary"
+            style={styles.value}
+            numberOfLines={2}
+            textAlign="right"
+          >
+            {value}
+          </AtomicText>
+        </View>
+      ) : null}
+    </View>
   );
 };
 
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     listItem: {
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
-      minHeight: 64,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      minHeight: 72,
+    },
+    disabled: {
+      opacity: 0.5,
     },
     leftContainer: {
       marginRight: tokens.spacing.md,
       justifyContent: 'center',
     },
     iconContainer: {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
+      width: 48,
+      height: 48,
+      borderRadius: 24,
       alignItems: 'center',
       justifyContent: 'center',
       overflow: 'hidden',
       borderWidth: 1,
-      borderColor: `${tokens.colors.primary}20`,
+      borderColor: `${tokens.colors.primary}15`,
+    },
+    contentContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      minWidth: 0,
     },
     title: {
       fontSize: tokens.typography.bodyLarge.fontSize,
       fontWeight: '600',
-      color: tokens.colors.textPrimary,
       flexShrink: 1,
+      lineHeight: tokens.typography.bodyLarge.fontSize * 1.4,
     },
     description: {
       fontSize: tokens.typography.bodySmall.fontSize,
-      color: tokens.colors.textSecondary,
-      marginTop: tokens.spacing.xs,
-      opacity: 0.8,
+      marginTop: tokens.spacing.xs / 2,
+      opacity: 0.7,
       flexShrink: 1,
+      lineHeight: tokens.typography.bodySmall.fontSize * 1.4,
     },
     rightContainer: {
       justifyContent: 'center',
       alignItems: 'flex-end',
+      marginLeft: tokens.spacing.md,
       maxWidth: '50%',
       flexShrink: 0,
     },
     value: {
       fontWeight: '500',
-      textAlign: 'right',
+      lineHeight: tokens.typography.bodyMedium.fontSize * 1.4,
     },
     chevron: {
-      opacity: 0.6,
+      opacity: 0.5,
     },
   });
 

package/src/presentation/screens/AppearanceScreen.tsx

@@ -11,11 +11,10 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { List } from 'react-native-paper';
 
 import { useNavigation } from '@react-navigation/native';
 import { useTheme, useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system-theme';
-import { AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { AtomicText, ScreenLayout, SectionHeader, SectionContainer } from '@umituz/react-native-design-system';
 import { useLocalization, getLanguageByCode } from '@umituz/react-native-localization';
 import { SettingItem } from '../components/SettingItem';
 
@@ -51,8 +50,8 @@ export const AppearanceScreen: React.FC = () => {
       </View>
 
       {/* Language Section */}
-      <List.Section>
-        <List.Subheader style={{ color: tokens.colors.textSecondary }}>{t('settings.language')}</List.Subheader>
+      <SectionContainer>
+        <SectionHeader>{t('settings.language')}</SectionHeader>
         <SettingItem
           icon="Languages"
           iconGradient={((tokens.colors as any).settingGradients?.language as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
@@ -61,11 +60,11 @@ export const AppearanceScreen: React.FC = () => {
           onPress={handleLanguagePress}
           testID="language-button"
         />
-      </List.Section>
+      </SectionContainer>
 
       {/* Theme Section */}
-      <List.Section>
-        <List.Subheader style={{ color: tokens.colors.textSecondary }}>{t('settings.appearance.darkMode')}</List.Subheader>
+      <SectionContainer>
+        <SectionHeader>{t('settings.appearance.darkMode')}</SectionHeader>
         <SettingItem
           icon={themeMode === 'dark' ? 'Moon' : 'Sun'}
           iconGradient={
@@ -78,7 +77,7 @@ export const AppearanceScreen: React.FC = () => {
           onPress={handleThemeToggle}
           testID="theme-button"
         />
-      </List.Section>
+      </SectionContainer>
     </ScreenLayout>
   );
 };

package/src/presentation/screens/SettingsScreen.tsx

@@ -12,13 +12,12 @@
  */
 
 import React, { useMemo } from 'react';
-import { List, Divider } from 'react-native-paper';
 import { DeviceEventEmitter, Alert, View, TouchableOpacity, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useNavigation, CommonActions } from '@react-navigation/native';
 import { useTheme, useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import { ScreenLayout, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
+import { ScreenLayout, AtomicIcon, AtomicText, SectionHeader, SectionContainer, AtomicDivider } from '@umituz/react-native-design-system';
 import { SettingItem } from '../components/SettingItem';
 import { getLanguageByCode, useLocalization } from '@umituz/react-native-localization';
 import { SettingsConfig } from './types';
@@ -261,14 +260,14 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
           testID="close-settings-button"
         >
-          <AtomicIcon name="X" size="lg" color="textPrimary" />
+          <AtomicIcon name="X" size="lg" color="primary" />
         </TouchableOpacity>
       </View>
 
       {/* Appearance Section */}
       {features.appearance && (
-        <List.Section style={{ marginBottom: 8 }}>
-          <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.appearance')}</List.Subheader>
+        <SectionContainer>
+          <SectionHeader>{t('settings.sections.appearance')}</SectionHeader>
           <SettingItem
             icon="Palette"
             iconGradient={theme.colors.settingGradients.themeLight as unknown as string[]}
@@ -277,13 +276,13 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
             onPress={handleAppearancePress}
             testID="appearance-button"
           />
-        </List.Section>
+        </SectionContainer>
       )}
 
       {/* General Section - Notifications */}
       {features.notifications && (
-        <List.Section style={{ marginBottom: 8 }}>
-          <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.general')}</List.Subheader>
+        <SectionContainer>
+          <SectionHeader>{t('settings.sections.general')}</SectionHeader>
           <SettingItem
             icon="Bell"
             iconGradient={theme.colors.settingGradients.notifications as unknown as string[]}
@@ -292,13 +291,13 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
             onPress={handleNotificationsPress}
             testID="notifications-button"
           />
-        </List.Section>
+        </SectionContainer>
       )}
 
       {/* Development/Test: Show Onboarding */}
       {__DEV__ && useOnboardingStore && (
-        <List.Section style={{ marginBottom: 8 }}>
-          <List.Subheader style={{ color: theme.colors.textSecondary }}>Development</List.Subheader>
+        <SectionContainer>
+          <SectionHeader>Development</SectionHeader>
           <SettingItem
             icon="Play"
             iconGradient={theme.colors.settingGradients.info as unknown as string[]}
@@ -307,13 +306,13 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
             onPress={handleShowOnboarding}
             testID="show-onboarding-button"
           />
-        </List.Section>
+        </SectionContainer>
       )}
 
       {/* About & Legal Section */}
       {(features.about || features.legal) && (
-        <List.Section style={{ marginBottom: 8 }}>
-          <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.about')}</List.Subheader>
+        <SectionContainer>
+          <SectionHeader>{t('settings.sections.about')}</SectionHeader>
           {features.about && (
             <SettingItem
               icon="Info"
@@ -324,7 +323,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
               testID="about-button"
             />
           )}
-          {features.about && features.legal && <Divider />}
+          {features.about && features.legal && <AtomicDivider />}
           {features.legal && (
             <SettingItem
               icon="FileText"
@@ -335,16 +334,16 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
               testID="legal-button"
             />
           )}
-        </List.Section>
+        </SectionContainer>
       )}
 
       {/* Fallback: Show message if no features are enabled */}
       {!hasAnyFeatures && (
-        <List.Section>
-          <List.Subheader style={{ color: theme.colors.textSecondary }}>
+        <SectionContainer>
+          <SectionHeader>
             {t('settings.noOptionsAvailable') || 'No settings available'}
-          </List.Subheader>
-        </List.Section>
+          </SectionHeader>
+        </SectionContainer>
       )}
     </ScreenLayout>
   );