@umituz/react-native-settings 4.23.131 → 4.23.132
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-settings",
|
|
3
|
-
"version": "4.23.
|
|
3
|
+
"version": "4.23.132",
|
|
4
4
|
"description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* StatsCard Component - Modern Design
|
|
3
|
-
* Clean card-based stat display with emoji icons
|
|
3
|
+
* Clean card-based stat display with large emoji icons
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import React from "react";
|
|
7
7
|
import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
|
|
8
|
-
import { useAppDesignTokens, AtomicText, useResponsive } from "@umituz/react-native-design-system";
|
|
8
|
+
import { useAppDesignTokens, AtomicText, useResponsive, withAlpha } from "@umituz/react-native-design-system";
|
|
9
9
|
|
|
10
10
|
export interface StatsCardProps {
|
|
11
11
|
value: number;
|
|
@@ -35,7 +35,7 @@ export const StatsCard: React.FC<StatsCardProps> = ({
|
|
|
35
35
|
subtextColor,
|
|
36
36
|
}) => {
|
|
37
37
|
const tokens = useAppDesignTokens();
|
|
38
|
-
const { getFontSize } = useResponsive();
|
|
38
|
+
const { getFontSize, getIconSize } = useResponsive();
|
|
39
39
|
|
|
40
40
|
const finalAccentColor = accentColor || tokens.colors.primary;
|
|
41
41
|
const finalBackgroundColor = backgroundColor || tokens.colors.surface;
|
|
@@ -44,7 +44,7 @@ export const StatsCard: React.FC<StatsCardProps> = ({
|
|
|
44
44
|
const valueFontSize = getFontSize(48);
|
|
45
45
|
const suffixFontSize = getFontSize(16);
|
|
46
46
|
const labelFontSize = getFontSize(12);
|
|
47
|
-
const
|
|
47
|
+
const iconSize = getIconSize(56);
|
|
48
48
|
|
|
49
49
|
return (
|
|
50
50
|
<View style={[
|
|
@@ -61,17 +61,27 @@ export const StatsCard: React.FC<StatsCardProps> = ({
|
|
|
61
61
|
},
|
|
62
62
|
containerStyle
|
|
63
63
|
]}>
|
|
64
|
-
{/* Emoji Icon
|
|
64
|
+
{/* Emoji Icon in Circle */}
|
|
65
65
|
{icon && (
|
|
66
|
-
<
|
|
67
|
-
styles.
|
|
66
|
+
<View style={[
|
|
67
|
+
styles.iconContainer,
|
|
68
68
|
{
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
width: iconSize,
|
|
70
|
+
height: iconSize,
|
|
71
|
+
backgroundColor: withAlpha(finalAccentColor, 0.15),
|
|
72
|
+
borderRadius: iconSize / 2,
|
|
73
|
+
marginBottom: tokens.spacing.md,
|
|
71
74
|
}
|
|
72
75
|
]}>
|
|
73
|
-
{
|
|
74
|
-
|
|
76
|
+
<AtomicText style={[
|
|
77
|
+
styles.emoji,
|
|
78
|
+
{
|
|
79
|
+
fontSize: iconSize * 0.55,
|
|
80
|
+
}
|
|
81
|
+
]}>
|
|
82
|
+
{icon}
|
|
83
|
+
</AtomicText>
|
|
84
|
+
</View>
|
|
75
85
|
)}
|
|
76
86
|
|
|
77
87
|
{/* Large Value in Center */}
|
|
@@ -122,6 +132,10 @@ const styles = StyleSheet.create({
|
|
|
122
132
|
minWidth: "45%",
|
|
123
133
|
alignItems: "center",
|
|
124
134
|
},
|
|
135
|
+
iconContainer: {
|
|
136
|
+
justifyContent: "center",
|
|
137
|
+
alignItems: "center",
|
|
138
|
+
},
|
|
125
139
|
emoji: {
|
|
126
140
|
textAlign: "center",
|
|
127
141
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* StreakDisplay Component - Modern Design
|
|
3
|
-
* Clean card-based design with
|
|
3
|
+
* Clean card-based design with gradient fire icon
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import React from "react";
|
|
@@ -36,7 +36,7 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
|
|
|
36
36
|
subtextColor,
|
|
37
37
|
}) => {
|
|
38
38
|
const tokens = useAppDesignTokens();
|
|
39
|
-
const { getFontSize } = useResponsive();
|
|
39
|
+
const { getFontSize, getIconSize } = useResponsive();
|
|
40
40
|
|
|
41
41
|
const finalPrimaryColor = primaryColor || tokens.colors.primary;
|
|
42
42
|
const finalBackgroundColor = backgroundColor || tokens.colors.surface;
|
|
@@ -46,6 +46,7 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
|
|
|
46
46
|
const streakLabelSize = getFontSize(13);
|
|
47
47
|
const bestNumberSize = getFontSize(20);
|
|
48
48
|
const bestLabelSize = getFontSize(11);
|
|
49
|
+
const iconSize = getIconSize(48);
|
|
49
50
|
|
|
50
51
|
return (
|
|
51
52
|
<View style={[
|
|
@@ -64,7 +65,24 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
|
|
|
64
65
|
]}>
|
|
65
66
|
{/* Main Streak Section */}
|
|
66
67
|
<View style={styles.mainSection}>
|
|
67
|
-
|
|
68
|
+
{/* Fire Icon */}
|
|
69
|
+
<View style={[
|
|
70
|
+
styles.fireIcon,
|
|
71
|
+
{
|
|
72
|
+
width: iconSize,
|
|
73
|
+
height: iconSize,
|
|
74
|
+
backgroundColor: withAlpha(finalPrimaryColor, 0.15),
|
|
75
|
+
borderRadius: iconSize / 2,
|
|
76
|
+
}
|
|
77
|
+
]}>
|
|
78
|
+
<AtomicText style={[
|
|
79
|
+
styles.fireEmoji,
|
|
80
|
+
{ fontSize: iconSize * 0.6 }
|
|
81
|
+
]}>
|
|
82
|
+
🔥
|
|
83
|
+
</AtomicText>
|
|
84
|
+
</View>
|
|
85
|
+
|
|
68
86
|
<View style={styles.streakNumbers}>
|
|
69
87
|
<View style={styles.currentStreak}>
|
|
70
88
|
<AtomicText style={[
|
|
@@ -139,8 +157,12 @@ const styles = StyleSheet.create({
|
|
|
139
157
|
gap: 16,
|
|
140
158
|
flex: 1,
|
|
141
159
|
},
|
|
142
|
-
|
|
143
|
-
|
|
160
|
+
fireIcon: {
|
|
161
|
+
justifyContent: "center",
|
|
162
|
+
alignItems: "center",
|
|
163
|
+
},
|
|
164
|
+
fireEmoji: {
|
|
165
|
+
textAlign: "center",
|
|
144
166
|
},
|
|
145
167
|
streakNumbers: {
|
|
146
168
|
flex: 1,
|