@umituz/react-native-settings 1.10.1 → 1.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/presentation/components/UserProfileHeader.tsx +44 -30
  3. package/src/presentation/screens/SettingsScreen.tsx +56 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "1.10.1",
3
+ "version": "1.10.3",
4
4
  "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/presentation/components/UserProfileHeader.tsx CHANGED
@@ -5,9 +5,10 @@
5
5
  */
6
6
 
7
7
  import React from "react";
8
- import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
8
+ import { View, TouchableOpacity, StyleSheet, Image } from "react-native";
9
9
  import { ChevronRight } from "lucide-react-native";
10
10
  import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
11
+ import { AtomicText } from "@umituz/react-native-design-system-atoms";
11
12
  import { useNavigation } from "@react-navigation/native";
12
13
 
13
14
  export interface UserProfileHeaderProps {
@@ -58,34 +59,42 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
58
59
  style={[
59
60
  styles.container,
60
61
  {
61
- backgroundColor: colors.backgroundPrimary,
62
- borderColor: colors.borderLight,
62
+ backgroundColor: colors.surface,
63
+ paddingHorizontal: spacing.md,
64
+ paddingVertical: spacing.md,
65
+ marginHorizontal: spacing.md,
63
66
  },
64
67
  ]}
65
68
  onPress={handlePress}
66
69
  activeOpacity={0.7}
67
70
  >
68
71
  <View style={styles.content}>
69
- <Image
70
- source={{ uri: finalAvatarUrl }}
71
- style={[styles.avatar, { borderColor: `${colors.primary}40` }]}
72
- />
73
- <View style={styles.textContainer}>
74
- <Text
75
- style={[styles.name, { color: colors.textPrimary }]}
72
+ <View style={[styles.avatarContainer, { borderColor: `${colors.primary}30` }]}>
73
+ <Image
74
+ source={{ uri: finalAvatarUrl }}
75
+ style={styles.avatar}
76
+ />
77
+ </View>
78
+ <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
79
+ <AtomicText
80
+ type="headlineSmall"
81
+ style={[styles.name, { color: colors.textPrimary, marginBottom: spacing.xs }]}
76
82
  numberOfLines={1}
77
83
  >
78
84
  {finalDisplayName}
79
- </Text>
80
- <Text
85
+ </AtomicText>
86
+ <AtomicText
87
+ type="bodySmall"
81
88
  style={[styles.id, { color: colors.textSecondary }]}
82
89
  numberOfLines={1}
83
90
  >
84
- ID: {finalUserId.substring(0, 8)}...
85
- </Text>
91
+ ID: {finalUserId.substring(0, 10)}...
92
+ </AtomicText>
86
93
  </View>
87
94
  </View>
88
- <ChevronRight size={20} color={colors.textSecondary} />
95
+ <View style={[styles.chevronContainer, { marginLeft: spacing.sm }]}>
96
+ <ChevronRight size={22} color={colors.textSecondary} strokeWidth={2.5} />
97
+ </View>
89
98
  </TouchableOpacity>
90
99
  );
91
100
  };
@@ -95,37 +104,42 @@ const styles = StyleSheet.create({
95
104
  flexDirection: "row",
96
105
  alignItems: "center",
97
106
  justifyContent: "space-between",
98
- paddingHorizontal: 20,
99
- paddingVertical: 20,
100
- marginHorizontal: 16,
101
107
  marginTop: 0,
102
108
  marginBottom: 0,
103
- borderRadius: 16,
104
- borderWidth: 1,
109
+ borderRadius: 20,
110
+ minHeight: 80,
105
111
  },
106
112
  content: {
107
113
  flexDirection: "row",
108
114
  alignItems: "center",
109
115
  flex: 1,
110
116
  },
117
+ avatarContainer: {
118
+ width: 64,
119
+ height: 64,
120
+ borderRadius: 32,
121
+ borderWidth: 2,
122
+ overflow: "hidden",
123
+ backgroundColor: "transparent",
124
+ },
111
125
  avatar: {
112
- width: 56,
113
- height: 56,
114
- borderRadius: 28,
115
- borderWidth: 2.5,
126
+ width: "100%",
127
+ height: "100%",
116
128
  },
117
129
  textContainer: {
118
- marginLeft: 16,
119
130
  flex: 1,
120
131
  },
121
132
  name: {
122
- fontSize: 16,
123
- fontWeight: "600",
124
- marginBottom: 4,
133
+ fontWeight: "700",
125
134
  },
126
135
  id: {
127
- fontSize: 12,
128
- fontWeight: "400",
136
+ fontWeight: "500",
137
+ opacity: 0.7,
138
+ },
139
+ chevronContainer: {
140
+ justifyContent: "center",
141
+ alignItems: "center",
129
142
  },
130
143
  });
131
144
 
145
+
package/src/presentation/screens/SettingsScreen.tsx CHANGED
@@ -4,13 +4,14 @@
4
4
  */
5
5
 
6
6
  import React from "react";
7
- import { View, ScrollView, StatusBar, StyleSheet } from "react-native";
7
+ import { View, ScrollView, StatusBar, StyleSheet, TouchableOpacity } from "react-native";
8
8
  import { useSafeAreaInsets } from "react-native-safe-area-context";
9
9
  import { useNavigation } from "@react-navigation/native";
10
10
  import {
11
11
  useDesignSystemTheme,
12
12
  useAppDesignTokens,
13
13
  } from "@umituz/react-native-design-system-theme";
14
+ import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
14
15
  import { useLocalization } from "@umituz/react-native-localization";
15
16
  import { SettingsFooter } from "../components/SettingsFooter";
16
17
  import { UserProfileHeader } from "../components/UserProfileHeader";
@@ -41,6 +42,10 @@ export interface SettingsScreenProps {
41
42
  footerText?: string;
42
43
  /** Custom sections to render */
43
44
  customSections?: CustomSettingsSection[];
45
+ /** Show close button in header */
46
+ showCloseButton?: boolean;
47
+ /** Custom close handler */
48
+ onClose?: () => void;
44
49
  }
45
50
 
46
51
  export const SettingsScreen: React.FC<SettingsScreenProps> = ({
@@ -50,6 +55,8 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
50
55
  showFooter = true,
51
56
  footerText,
52
57
  customSections = [],
58
+ showCloseButton = false,
59
+ onClose,
53
60
  }) => {
54
61
  const navigation = useNavigation();
55
62
  const { themeMode } = useDesignSystemTheme();
@@ -71,16 +78,49 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
71
78
  features.legal ||
72
79
  customSections.length > 0;
73
80
 
81
+ const handleClose = () => {
82
+ if (onClose) {
83
+ onClose();
84
+ } else {
85
+ navigation.goBack();
86
+ }
87
+ };
88
+
74
89
  return (
75
90
  <View style={[styles.container, { backgroundColor: colors.backgroundPrimary }]}>
76
91
  <StatusBar barStyle={isDark ? "light-content" : "dark-content"} />
77
92
 
93
+ {showCloseButton && (
94
+ <View
95
+ style={[
96
+ styles.closeButtonContainer,
97
+ {
98
+ paddingTop: insets.top + spacing.xs,
99
+ paddingRight: spacing.md,
100
+ },
101
+ ]}
102
+ >
103
+ <TouchableOpacity
104
+ onPress={handleClose}
105
+ style={[
106
+ styles.closeButton,
107
+ {
108
+ backgroundColor: colors.surface,
109
+ },
110
+ ]}
111
+ hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
112
+ >
113
+ <AtomicIcon name="X" size="lg" color="primary" />
114
+ </TouchableOpacity>
115
+ </View>
116
+ )}
117
+
78
118
  <ScrollView
79
119
  style={styles.scrollView}
80
120
  contentContainerStyle={[
81
121
  styles.scrollContent,
82
122
  {
83
- paddingTop: insets.top + spacing.md,
123
+ paddingTop: showCloseButton ? spacing.md : insets.top + spacing.md,
84
124
  paddingBottom: spacing.xxxl + spacing.xl,
85
125
  paddingHorizontal: 0,
86
126
  },
@@ -152,6 +192,20 @@ const styles = StyleSheet.create({
152
192
  container: {
153
193
  flex: 1,
154
194
  },
195
+ closeButtonContainer: {
196
+ position: "absolute",
197
+ top: 0,
198
+ right: 0,
199
+ zIndex: 10,
200
+ alignItems: "flex-end",
201
+ },
202
+ closeButton: {
203
+ width: 44,
204
+ height: 44,
205
+ borderRadius: 22,
206
+ justifyContent: "center",
207
+ alignItems: "center",
208
+ },
155
209
  scrollView: {
156
210
  flex: 1,
157
211
  },