@umituz/react-native-onboarding 2.6.3 → 2.6.4
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-onboarding",
|
|
3
|
-
"version": "2.6.
|
|
3
|
+
"version": "2.6.4",
|
|
4
4
|
"description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -91,36 +91,71 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
|
|
|
91
91
|
contentContainerStyle={styles.content}
|
|
92
92
|
showsVerticalScrollIndicator={false}
|
|
93
93
|
>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
94
|
+
{useGradient ? (
|
|
95
|
+
// Gradient kullanıldığında card olmadan direkt içerik
|
|
96
|
+
<>
|
|
97
|
+
{/* Icon */}
|
|
98
|
+
<View style={styles.iconContainer}>
|
|
99
|
+
{isEmoji ? (
|
|
100
|
+
<Text style={styles.icon}>{slide.icon}</Text>
|
|
101
|
+
) : (
|
|
102
|
+
<AtomicIcon
|
|
103
|
+
name={slide.icon as any}
|
|
104
|
+
customSize={48}
|
|
105
|
+
customColor="#FFFFFF"
|
|
106
|
+
/>
|
|
107
|
+
)}
|
|
108
|
+
</View>
|
|
109
|
+
|
|
110
|
+
{/* Title */}
|
|
111
|
+
<Text style={styles.title}>{slide.title}</Text>
|
|
112
|
+
|
|
113
|
+
{/* Description */}
|
|
114
|
+
{slide.description && (
|
|
115
|
+
<Text style={styles.description}>{slide.description}</Text>
|
|
105
116
|
)}
|
|
106
|
-
</View>
|
|
107
117
|
|
|
108
|
-
|
|
109
|
-
|
|
118
|
+
{/* Question */}
|
|
119
|
+
<View style={styles.questionContainer}>{renderQuestion()}</View>
|
|
110
120
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
121
|
+
{/* Validation hint */}
|
|
122
|
+
{question.validation?.required && !value && (
|
|
123
|
+
<Text style={styles.requiredHint}>* This field is required</Text>
|
|
124
|
+
)}
|
|
125
|
+
</>
|
|
126
|
+
) : (
|
|
127
|
+
// Normal modda card ile
|
|
128
|
+
<View style={styles.slideContent}>
|
|
129
|
+
{/* Icon */}
|
|
130
|
+
<View style={styles.iconContainer}>
|
|
131
|
+
{isEmoji ? (
|
|
132
|
+
<Text style={styles.icon}>{slide.icon}</Text>
|
|
133
|
+
) : (
|
|
134
|
+
<AtomicIcon
|
|
135
|
+
name={slide.icon as any}
|
|
136
|
+
customSize={48}
|
|
137
|
+
customColor={tokens.colors.textPrimary}
|
|
138
|
+
/>
|
|
139
|
+
)}
|
|
140
|
+
</View>
|
|
115
141
|
|
|
116
|
-
|
|
117
|
-
|
|
142
|
+
{/* Title */}
|
|
143
|
+
<Text style={styles.title}>{slide.title}</Text>
|
|
118
144
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
145
|
+
{/* Description */}
|
|
146
|
+
{slide.description && (
|
|
147
|
+
<Text style={styles.description}>{slide.description}</Text>
|
|
148
|
+
)}
|
|
149
|
+
|
|
150
|
+
{/* Question */}
|
|
151
|
+
<View style={styles.questionContainer}>{renderQuestion()}</View>
|
|
152
|
+
|
|
153
|
+
{/* Validation hint */}
|
|
154
|
+
{question.validation?.required && !value && (
|
|
155
|
+
<Text style={styles.requiredHint}>* This field is required</Text>
|
|
156
|
+
)}
|
|
157
|
+
</View>
|
|
158
|
+
)}
|
|
124
159
|
</ScrollView>
|
|
125
160
|
);
|
|
126
161
|
};
|
|
@@ -138,20 +173,19 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: b
|
|
|
138
173
|
alignItems: "center",
|
|
139
174
|
maxWidth: 500,
|
|
140
175
|
width: "100%",
|
|
141
|
-
|
|
142
|
-
backgroundColor: useGradient ? "transparent" : tokens.colors.surface,
|
|
176
|
+
backgroundColor: tokens.colors.surface,
|
|
143
177
|
padding: 30,
|
|
144
178
|
borderRadius: 24,
|
|
145
|
-
borderWidth:
|
|
146
|
-
borderColor:
|
|
179
|
+
borderWidth: 1,
|
|
180
|
+
borderColor: tokens.colors.borderLight,
|
|
147
181
|
shadowColor: tokens.colors.textPrimary,
|
|
148
182
|
shadowOffset: {
|
|
149
183
|
width: 0,
|
|
150
184
|
height: 4,
|
|
151
185
|
},
|
|
152
|
-
shadowOpacity:
|
|
186
|
+
shadowOpacity: 0.1,
|
|
153
187
|
shadowRadius: 8,
|
|
154
|
-
elevation:
|
|
188
|
+
elevation: 4,
|
|
155
189
|
},
|
|
156
190
|
iconContainer: {
|
|
157
191
|
width: 96,
|