@umituz/react-native-onboarding 2.6.0 → 2.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/QuestionSlide.tsx

@@ -19,15 +19,17 @@ export interface QuestionSlideProps {
   slide: OnboardingSlide;
   value: any;
   onChange: (value: any) => void;
+  useGradient?: boolean;
 }
 
 export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   slide,
   value,
   onChange,
+  useGradient = false,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
+  const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
   const { question } = slide;
 
   if (!question) {
@@ -98,7 +100,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
             <AtomicIcon
               name={slide.icon as any}
               customSize={48}
-              customColor={tokens.colors.textPrimary}
+              customColor={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
             />
           )}
         </View>
@@ -123,7 +125,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: boolean) =>
   StyleSheet.create({
     content: {
       flexGrow: 1,
@@ -136,31 +138,35 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       alignItems: "center",
       maxWidth: 500,
       width: "100%",
-      // Add background for readability with theme colors
-      backgroundColor: tokens.colors.surface,
+      // Gradient kullanıldığında tamamen şeffaf, değilse solid
+      backgroundColor: useGradient ? "transparent" : tokens.colors.surface,
       padding: 30,
       borderRadius: 24,
-      borderWidth: 1,
-      borderColor: tokens.colors.borderLight,
+      borderWidth: useGradient ? 0 : 1,
+      borderColor: useGradient ? "transparent" : tokens.colors.borderLight,
       shadowColor: tokens.colors.textPrimary,
       shadowOffset: {
         width: 0,
         height: 4,
       },
-      shadowOpacity: 0.1,
+      shadowOpacity: useGradient ? 0 : 0.1,
       shadowRadius: 8,
-      elevation: 4,
+      elevation: useGradient ? 0 : 4,
     },
     iconContainer: {
       width: 96,
       height: 96,
       borderRadius: 48,
-      backgroundColor: withAlpha(tokens.colors.primary, 0.2),
+      backgroundColor: useGradient
+        ? "rgba(255, 255, 255, 0.25)"
+        : withAlpha(tokens.colors.primary, 0.2),
       alignItems: "center",
       justifyContent: "center",
       marginBottom: 24,
       borderWidth: 2,
-      borderColor: withAlpha(tokens.colors.primary, 0.4),
+      borderColor: useGradient
+        ? "rgba(255, 255, 255, 0.4)"
+        : withAlpha(tokens.colors.primary, 0.4),
     },
     icon: {
       fontSize: 48,
@@ -168,13 +174,13 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     title: {
       fontSize: 24,
       fontWeight: "bold",
-      color: tokens.colors.textPrimary,
+      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
       textAlign: "center",
       marginBottom: 12,
     },
     description: {
       fontSize: 15,
-      color: tokens.colors.textSecondary,
+      color: useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary,
       textAlign: "center",
       lineHeight: 22,
       marginBottom: 24,
@@ -185,7 +191,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     },
     requiredHint: {
       fontSize: 13,
-      color: tokens.colors.textSecondary,
+      color: useGradient ? "rgba(255, 255, 255, 0.8)" : tokens.colors.textSecondary,
       fontStyle: "italic",
       marginTop: 12,
     },

package/src/presentation/screens/OnboardingScreen.tsx

@@ -229,6 +229,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
             slide={currentSlide}
             value={currentAnswer}
             onChange={setCurrentAnswer}
+            useGradient={useGradient}
           />
         ) : (
           <OnboardingSlideComponent slide={currentSlide} />