@umituz/react-native-settings 1.9.0 → 1.10.1

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/presentation/components/SettingItem.tsx +9 -7
  3. package/src/presentation/components/SettingsSection.tsx +8 -5
  4. package/src/presentation/components/UserProfileHeader.tsx +9 -8
  5. package/src/presentation/screens/SettingsScreen.tsx +10 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "1.9.0",
3
+ "version": "1.10.1",
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/SettingItem.tsx CHANGED
@@ -49,6 +49,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
49
49
  }) => {
50
50
  const tokens = useAppDesignTokens();
51
51
  const colors = tokens.colors;
52
+ const spacing = tokens.spacing;
52
53
 
53
54
  return (
54
55
  <>
@@ -130,8 +131,9 @@ const styles = StyleSheet.create({
130
131
  flexDirection: "row",
131
132
  alignItems: "center",
132
133
  justifyContent: "space-between",
133
- paddingHorizontal: 16,
134
- paddingVertical: 14,
134
+ paddingHorizontal: 20,
135
+ paddingVertical: 18,
136
+ minHeight: 64,
135
137
  },
136
138
  content: {
137
139
  flexDirection: "row",
@@ -139,12 +141,12 @@ const styles = StyleSheet.create({
139
141
  flex: 1,
140
142
  },
141
143
  iconContainer: {
142
- width: 40,
143
- height: 40,
144
- borderRadius: 8,
144
+ width: 44,
145
+ height: 44,
146
+ borderRadius: 12,
145
147
  justifyContent: "center",
146
148
  alignItems: "center",
147
- marginRight: 12,
149
+ marginRight: 16,
148
150
  },
149
151
  textContainer: {
150
152
  flex: 1,
@@ -166,6 +168,6 @@ const styles = StyleSheet.create({
166
168
  },
167
169
  divider: {
168
170
  height: 1,
169
- marginLeft: 68,
171
+ marginLeft: 80,
170
172
  },
171
173
  });
package/src/presentation/components/SettingsSection.tsx CHANGED
@@ -20,6 +20,7 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
20
20
  }) => {
21
21
  const tokens = useAppDesignTokens();
22
22
  const colors = tokens.colors;
23
+ const spacing = tokens.spacing;
23
24
 
24
25
  return (
25
26
  <View style={styles.container}>
@@ -40,18 +41,20 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
40
41
 
41
42
  const styles = StyleSheet.create({
42
43
  container: {
43
- marginBottom: 24,
44
+ marginTop: 0,
45
+ marginBottom: 32,
44
46
  },
45
47
  title: {
46
- fontSize: 12,
48
+ fontSize: 11,
47
49
  fontWeight: "700",
48
50
  textTransform: "uppercase",
49
- letterSpacing: 1,
51
+ letterSpacing: 1.2,
50
52
  paddingHorizontal: 16,
51
- paddingBottom: 8,
53
+ paddingBottom: 12,
54
+ marginBottom: 0,
52
55
  },
53
56
  content: {
54
- borderRadius: 12,
57
+ borderRadius: 16,
55
58
  marginHorizontal: 16,
56
59
  overflow: "hidden",
57
60
  },
package/src/presentation/components/UserProfileHeader.tsx CHANGED
@@ -36,6 +36,7 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
36
36
  const tokens = useAppDesignTokens();
37
37
  const navigation = useNavigation();
38
38
  const colors = tokens.colors;
39
+ const spacing = tokens.spacing;
39
40
 
40
41
  const finalDisplayName = displayName || (isGuest ? "Guest" : "User");
41
42
  const finalUserId = userId || "Unknown";
@@ -94,12 +95,12 @@ const styles = StyleSheet.create({
94
95
  flexDirection: "row",
95
96
  alignItems: "center",
96
97
  justifyContent: "space-between",
97
- paddingHorizontal: 16,
98
- paddingVertical: 16,
98
+ paddingHorizontal: 20,
99
+ paddingVertical: 20,
99
100
  marginHorizontal: 16,
100
101
  marginTop: 0,
101
102
  marginBottom: 0,
102
- borderRadius: 12,
103
+ borderRadius: 16,
103
104
  borderWidth: 1,
104
105
  },
105
106
  content: {
@@ -108,13 +109,13 @@ const styles = StyleSheet.create({
108
109
  flex: 1,
109
110
  },
110
111
  avatar: {
111
- width: 48,
112
- height: 48,
113
- borderRadius: 24,
114
- borderWidth: 2,
112
+ width: 56,
113
+ height: 56,
114
+ borderRadius: 28,
115
+ borderWidth: 2.5,
115
116
  },
116
117
  textContainer: {
117
- marginLeft: 12,
118
+ marginLeft: 16,
118
119
  flex: 1,
119
120
  },
120
121
  name: {
package/src/presentation/screens/SettingsScreen.tsx CHANGED
@@ -59,6 +59,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
59
59
 
60
60
  const isDark = themeMode === "dark";
61
61
  const colors = tokens.colors;
62
+ const spacing = tokens.spacing;
62
63
 
63
64
  const normalizedConfig = normalizeSettingsConfig(config);
64
65
  const features = useFeatureDetection(normalizedConfig, navigation);
@@ -79,14 +80,15 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
79
80
  contentContainerStyle={[
80
81
  styles.scrollContent,
81
82
  {
82
- paddingTop: insets.top + 16,
83
- paddingBottom: 100,
83
+ paddingTop: insets.top + spacing.md,
84
+ paddingBottom: spacing.xxxl + spacing.xl,
85
+ paddingHorizontal: 0,
84
86
  },
85
87
  ]}
86
88
  showsVerticalScrollIndicator={false}
87
89
  >
88
90
  {showUserProfile && (
89
- <>
91
+ <View style={styles.profileContainer}>
90
92
  <UserProfileHeader
91
93
  displayName={userProfile?.displayName}
92
94
  userId={userProfile?.userId}
@@ -95,8 +97,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
95
97
  accountSettingsRoute={userProfile?.accountSettingsRoute}
96
98
  onPress={userProfile?.onPress}
97
99
  />
98
- <View style={{ height: 24 }} />
99
- </>
100
+ </View>
100
101
  )}
101
102
 
102
103
  {features.appearance && (
@@ -157,6 +158,10 @@ const styles = StyleSheet.create({
157
158
  scrollContent: {
158
159
  flexGrow: 1,
159
160
  },
161
+ profileContainer: {
162
+ marginBottom: 32,
163
+ paddingHorizontal: 0,
164
+ },
160
165
  emptyContainer: {
161
166
  paddingVertical: 24,
162
167
  },