@umituz/react-native-settings 1.9.0 → 1.10.0

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 +2 -1
  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.0",
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
  <>
@@ -166,6 +167,6 @@ const styles = StyleSheet.create({
166
167
  },
167
168
  divider: {
168
169
  height: 1,
169
- marginLeft: 68,
170
+ marginLeft: 80,
170
171
  },
171
172
  });
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
  },