@umituz/react-native-settings 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/screens/SettingsScreen.tsx

@@ -13,10 +13,12 @@
 
 import React, { useMemo } from 'react';
 import { List, Divider } from 'react-native-paper';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useNavigation } from '@react-navigation/native';
-import { useTheme } from '@umituz/react-native-design-system-theme';
-import { ScreenLayout } from '@umituz/react-native-design-system';
+import { useTheme, useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { ScreenLayout, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
 import { SettingItem } from '../components/SettingItem';
 import { getLanguageByCode, useLocalization } from '@umituz/react-native-localization';
 import { SettingsConfig } from './types';
@@ -76,6 +78,8 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 }) => {
   const navigation = useNavigation();
   const { theme, themeMode } = useTheme();
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
   const { currentLanguage, t } = useLocalization();
 
   const currentLang = getLanguageByCode(currentLanguage);
@@ -125,6 +129,12 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
     navigation.navigate('Notifications' as never);
   };
 
+  const handleClose = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    }
+  };
+
   // Debug: Log features to help diagnose empty screen issues
   /* eslint-disable-next-line no-console */
   if (__DEV__) {
@@ -138,6 +148,28 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 
   return (
     <ScreenLayout testID="settings-screen" hideScrollIndicator>
+      {/* Header with Close Button */}
+      <View style={[
+        styles.header, 
+        { 
+          borderBottomColor: theme.colors.borderLight,
+          backgroundColor: theme.colors.surface,
+          paddingTop: insets.top,
+        }
+      ]}>
+        <AtomicText type="headlineLarge" style={{ color: theme.colors.textPrimary, flex: 1 }}>
+          {t('navigation.settings') || 'Settings'}
+        </AtomicText>
+        <TouchableOpacity
+          onPress={handleClose}
+          style={styles.closeButton}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          testID="close-settings-button"
+        >
+          <AtomicIcon name="X" size="lg" color="textPrimary" />
+        </TouchableOpacity>
+      </View>
+
       {/* Appearance Section */}
       {features.appearance && (
         <List.Section style={{ marginBottom: 8 }}>
@@ -208,3 +240,20 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingBottom: 12,
+    paddingTop: 12,
+    borderBottomWidth: 1,
+    zIndex: 1000,
+  },
+  closeButton: {
+    padding: 8,
+    marginLeft: 8,
+  },
+});
+