@rubixscript/react-native-onboarding 1.0.0

package/src/components/Onboarding.tsx

@@ -0,0 +1,340 @@
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import {
+  View,
+  StyleSheet,
+  SafeAreaView,
+  Platform,
+  Modal,
+  ViewStyle,
+  Animated,
+} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import AnimatedFlatList, {
+  FlatList,
+  AnimatedFlatListType,
+} from 'react-native-reanimated';
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import { OnboardingProps, OnboardingConfig } from '../types';
+import { mergeTheme, getPreset } from '../themes';
+import { SlideRenderer } from '../slides';
+import { Pagination, NavigationButtons } from './index';
+
+const AnimatedFlatListImplemented =
+  (AnimatedFlatList as any) as AnimatedFlatListType<any>;
+
+export const Onboarding: React.FC<OnboardingProps> = ({
+  visible,
+  slides = [],
+  theme: customTheme,
+  navigation: customNavigation,
+  animation: customAnimation,
+  storage,
+  onboardingComplete,
+  onSlideChange,
+  onSkip,
+  initialSlide = 0,
+  swipeEnabled = true,
+  containerStyle,
+  safeAreaEnabled = true,
+  darkMode = false,
+}) => {
+  // State
+  const [currentIndex, setCurrentIndex] = useState(initialSlide);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+
+  //Refs
+  const flatListRef = React.useRef<FlatList>(null);
+
+  // Merge theme with preset
+  const preset = useMemo(() => {
+    if (!customTheme) return getPreset('modern');
+    const presetKey = Object.keys(getPreset('modern')).find(
+      key => (customTheme as any)[key]
+    );
+    return presetKey ? getPreset(presetKey) : getPreset('modern');
+  }, [customTheme]);
+
+  const theme = useMemo(
+    () => mergeTheme(preset.theme, customTheme),
+    [preset, customTheme]
+  );
+
+  const navigationConfig = useMemo(
+    () => ({ ...preset.navigation, ...customNavigation }),
+    [preset, customNavigation]
+  );
+
+  const animationConfig = useMemo(
+    () => ({ ...preset.animation, ...customAnimation }),
+    [preset, customAnimation]
+  );
+
+  // Check storage on mount
+  useEffect(() => {
+    if (storage?.enabled) {
+      checkOnboardingStatus();
+    }
+  }, [storage]);
+
+  const checkOnboardingStatus = async () => {
+    try {
+      const key = storage?.key || '@onboarding_complete';
+      const completed = await AsyncStorage.getItem(key);
+      if (completed && !visible) {
+        // Already completed, don't show
+        return;
+      }
+    } catch (error) {
+      console.warn('Error checking onboarding status:', error);
+    }
+  };
+
+  const saveOnboardingComplete = async () => {
+    if (storage?.enabled) {
+      try {
+        const key = storage?.key || '@onboarding_complete';
+        await AsyncStorage.setItem(key, 'true');
+        if (storage.onComplete) {
+          await storage.onComplete();
+        }
+      } catch (error) {
+        console.warn('Error saving onboarding status:', error);
+      }
+    }
+  };
+
+  // Handlers
+  const handleNext = useCallback(async () => {
+    const currentSlide = slides[currentIndex];
+
+    // Check if form slide and validate
+    if (currentSlide.type === 'form') {
+      const formSlide = currentSlide as any;
+      const requiredFields = formSlide.fields.filter((f: any) => f.required);
+      const isValid = requiredFields.every((field: any) => formData[field.key]);
+
+      if (!isValid) {
+        return; // Form validation failed
+      }
+
+      // Submit form data
+      if (formSlide.onSubmit) {
+        setIsSubmitting(true);
+        try {
+          await formSlide.onSubmit(formData);
+        } catch (error) {
+          console.warn('Form submit error:', error);
+        }
+        setIsSubmitting(false);
+      }
+    }
+
+    if (currentIndex < slides.length - 1) {
+      flatListRef.current?.scrollToIndex({ index: currentIndex + 1, animated: true });
+    } else {
+      // Complete onboarding
+      await saveOnboardingComplete();
+      if (onboardingComplete) {
+        await onboardingComplete(formData);
+      }
+    }
+  }, [currentIndex, slides, formData, onboardingComplete, storage]);
+
+  const handleBack = useCallback(() => {
+    if (currentIndex > 0) {
+      flatListRef.current?.scrollToIndex({ index: currentIndex - 1, animated: true });
+    }
+  }, [currentIndex]);
+
+  const handleSkip = useCallback(async () => {
+    await saveOnboardingComplete();
+    if (onSkip) {
+      await onSkip();
+    } else if (onboardingComplete) {
+      await onboardingComplete();
+    }
+  }, [onSkip, onboardingComplete, storage]);
+
+  const handleMomentumScrollEnd = useCallback(
+    (event: any) => {
+      const index = Math.round(event.nativeEvent.contentOffset.x / event.nativeEvent.layoutMeasurement.width);
+      if (index !== currentIndex) {
+        setCurrentIndex(index);
+        if (onSlideChange) {
+          onSlideChange(index);
+        }
+      }
+    },
+    [currentIndex, onSlideChange]
+  );
+
+  const handleFormDataChange = useCallback((key: string, value: any) => {
+    setFormData(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  // Renderers
+  const renderSlide = useCallback(
+    ({ item, index }: { item: any; index: number }) => {
+      return (
+        <View style={[styles.slide, { width: '100%' }]}>
+          <SlideRenderer
+            data={item}
+            theme={theme}
+            darkMode={darkMode}
+            onSubmit={handleFormDataChange}
+            isSubmitting={isSubmitting}
+          />
+        </View>
+      );
+    },
+    [theme, darkMode, isSubmitting, handleFormDataChange]
+  );
+
+  const getKey = useCallback((item: any, index: number) => item.id || `slide-${index}`, []);
+
+  // Computed values
+  const isLastSlide = currentIndex === slides.length - 1;
+  const currentSlide = slides[currentIndex];
+
+  // Determine if we should show navigation (not for form slides that handle their own)
+  const showNavigation = currentSlide?.type !== 'form';
+
+  if (!visible) return null;
+
+  const content = (
+    <View style={[styles.container, containerStyle]}>
+      {/* Background Gradient if applicable */}
+      {currentSlide?.gradientColors && currentSlide.gradientColors.length > 0 && (
+        <LinearGradient
+          colors={currentSlide.gradientColors}
+          style={StyleSheet.absoluteFillObject}
+        />
+      )}
+
+      {/* Pagination */}
+      {showNavigation && (
+        <Pagination
+          currentIndex={currentIndex}
+          totalSlides={slides.length}
+          theme={theme}
+          config={navigationConfig}
+        />
+      )}
+
+      {/* Slides */}
+      <AnimatedFlatListImplemented
+        ref={flatListRef as any}
+        data={slides}
+        renderItem={renderSlide}
+        keyExtractor={getKey}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={32}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        scrollEnabled={swipeEnabled}
+        bounces={false}
+        initialScrollIndex={initialSlide}
+        onScrollToIndexFailed={(info) => {
+          // Retry if scroll to index fails
+          setTimeout(() => {
+            flatListRef.current?.scrollToIndex({
+              index: info.index,
+              animated: true,
+            });
+          }, 100);
+        }}
+      />
+
+      {/* Navigation Buttons */}
+      {showNavigation && (
+        <NavigationButtons
+          currentIndex={currentIndex}
+          totalSlides={slides.length}
+          theme={theme}
+          config={navigationConfig}
+          onNext={handleNext}
+          onBack={handleBack}
+          onSkip={handleSkip}
+          isLastSlide={isLastSlide}
+          isLoading={isSubmitting}
+          darkMode={darkMode}
+        />
+      )}
+    </View>
+  );
+
+  if (safeAreaEnabled) {
+    return (
+      <SafeAreaView style={styles.safeArea}>
+        <SafeAreaProvider>{content}</SafeAreaProvider>
+      </SafeAreaView>
+    );
+  }
+
+  return content;
+};
+
+// Hook for checking onboarding status
+export const useOnboarding = (storageKey: string = '@onboarding_complete') => {
+  const [hasCompletedOnboarding, setHasCompletedOnboarding] = React.useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    checkStatus();
+  }, []);
+
+  const checkStatus = async () => {
+    try {
+      const completed = await AsyncStorage.getItem(storageKey);
+      setHasCompletedOnboarding(completed === 'true');
+    } catch (error) {
+      console.warn('Error checking onboarding:', error);
+      setHasCompletedOnboarding(false);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const markComplete = async () => {
+    try {
+      await AsyncStorage.setItem(storageKey, 'true');
+      setHasCompletedOnboarding(true);
+    } catch (error) {
+      console.warn('Error marking onboarding complete:', error);
+    }
+  };
+
+  const reset = async () => {
+    try {
+      await AsyncStorage.removeItem(storageKey);
+      setHasCompletedOnboarding(false);
+    } catch (error) {
+      console.warn('Error resetting onboarding:', error);
+    }
+  };
+
+  return { hasCompletedOnboarding, isLoading, markComplete, reset };
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  slide: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default Onboarding;

package/src/components/Pagination.tsx

@@ -0,0 +1,337 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring, useDerivedValue } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { PaginationProps, NavigationStyle } from '../types';
+
+// DOTS PAGINATION
+const DotsPagination: React.FC<PaginationProps> = ({ currentIndex, totalSlides, theme, style }) => {
+  const animatedIndex = useDerivedValue(() => withSpring(currentIndex, { damping: 15, stiffness: 150 }));
+
+  return (
+    <View style={[styles.dotsContainer, style]}>
+      {Array.from({ length: totalSlides }).map((_, index) => {
+        const animatedStyle = useAnimatedStyle(() => ({
+          width: index === animatedIndex.value ? 24 : 8,
+          opacity: withSpring(index === animatedIndex.value ? 1 : 0.4, { damping: 15, stiffness: 150 }),
+        }));
+
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              styles.dot,
+              {
+                backgroundColor: theme.colors.primary,
+              },
+              animatedStyle,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+// PROGRESS BAR PAGINATION
+const ProgressBarPagination: React.FC<PaginationProps> = ({ currentIndex, totalSlides, theme, style }) => {
+  const progress = useMemo(() => (currentIndex + 1) / totalSlides, [currentIndex, totalSlides]);
+
+  return (
+    <View style={[styles.progressContainer, style]}>
+      <View style={[styles.progressBackground, { backgroundColor: theme.colors.border }]}>
+        <Animated.View
+          style={[
+            styles.progressFill,
+            {
+              width: `${progress * 100}%`,
+              backgroundColor: theme.colors.primary,
+            },
+          ]}
+        />
+      </View>
+      <Animated.Text style={[styles.progressText, { color: theme.colors.text.secondary }]}>
+        {currentIndex + 1} / {totalSlides}
+      </Animated.Text>
+    </View>
+  );
+};
+
+// STEPS PAGINATION
+const StepsPagination: React.FC<PaginationProps> = ({ currentIndex, totalSlides, theme, style }) => {
+  return (
+    <View style={[styles.stepsContainer, style]}>
+      {Array.from({ length: totalSlides }).map((_, index) => {
+        const isCompleted = index < currentIndex;
+        const isCurrent = index === currentIndex;
+
+        return (
+          <View key={index} style={styles.stepItem}>
+            <View
+              style={[
+                styles.stepCircle,
+                {
+                  backgroundColor: isCompleted ? theme.colors.primary : isCurrent ? theme.colors.primary : theme.colors.border,
+                  borderColor: theme.colors.border,
+                },
+              ]}
+            >
+              {isCompleted ? (
+                <View style={styles.stepCheckmark} />
+              ) : (
+                <Animated.Text
+                  style={[
+                    styles.stepNumber,
+                    { color: isCurrent ? theme.colors.text.inverse : theme.colors.text.secondary },
+                  ]}
+                >
+                  {index + 1}
+                </Animated.Text>
+              )}
+            </View>
+            {index < totalSlides - 1 && (
+              <View
+                style={[
+                  styles.stepLine,
+                  { backgroundColor: isCompleted ? theme.colors.primary : theme.colors.border },
+                ]}
+              />
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+// NUMBERS PAGINATION
+const NumbersPagination: React.FC<PaginationProps> = ({ currentIndex, totalSlides, theme, style }) => {
+  return (
+    <View style={[styles.numbersContainer, style]}>
+      {Array.from({ length: totalSlides }).map((_, index) => {
+        const isCurrent = index === currentIndex;
+
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              styles.numberCircle,
+              {
+                backgroundColor: isCurrent ? theme.colors.primary : 'transparent',
+                borderColor: theme.colors.border,
+              },
+            ]}
+          >
+            <Animated.Text
+              style={[
+                styles.numberText,
+                { color: isCurrent ? theme.colors.text.inverse : theme.colors.text.secondary },
+              ]}
+            >
+              {index + 1}
+            </Animated.Text>
+          </Animated.View>
+        );
+      })}
+    </View>
+  );
+};
+
+// FLOATING DOTS PAGINATION
+const FloatingDotsPagination: React.FC<PaginationProps> = ({ currentIndex, totalSlides, theme, style }) => {
+  return (
+    <View style={[styles.floatingContainer, style]}>
+      <LinearGradient
+        colors={[theme.colors.surface + 'CC', theme.colors.surface + 'CC']}
+        style={styles.floatingBackground}
+      >
+        <View style={styles.floatingDots}>
+          {Array.from({ length: totalSlides }).map((_, index) => (
+            <Animated.View
+              key={index}
+              style={[
+                styles.floatingDot,
+                {
+                  width: index === currentIndex ? 28 : 10,
+                  backgroundColor: index === currentIndex ? theme.colors.primary : theme.colors.border,
+                },
+              ]}
+            />
+          ))}
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};
+
+// MAIN PAGINATION COMPONENT
+export const Pagination: React.FC<PaginationProps> = ({ currentIndex, totalSlides, theme, config, style }) => {
+  const { style: navStyle, position } = config;
+
+  const containerStyle: ViewStyle = useMemo(() => {
+    const base: ViewStyle = {};
+
+    if (position === 'top') {
+      base.position = 'absolute';
+      base.top = 0;
+      base.left = 0;
+      base.right = 0;
+      base.paddingTop = 20;
+    } else if (position === 'bottom') {
+      base.position = 'absolute';
+      base.bottom = 0;
+      base.left = 0;
+      base.right = 0;
+      base.paddingBottom = 20;
+    }
+
+    return base;
+  }, [position]);
+
+  const renderPagination = () => {
+    switch (navStyle) {
+      case 'dots':
+        return <DotsPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style} />;
+      case 'progress-bar':
+        return <ProgressBarPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style} />;
+      case 'steps':
+        return <StepsPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style} />;
+      case 'numbers':
+        return <NumbersPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style} />;
+      case 'none':
+        return null;
+      default:
+        return <DotsPagination currentIndex={currentIndex} totalSlides={totalSlides} theme={theme} style={style} />;
+    }
+  };
+
+  if (navStyle === 'none') return null;
+
+  return <View style={containerStyle}>{renderPagination()}</View>;
+};
+
+const styles = StyleSheet.create({
+  // Dots
+  dotsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    paddingVertical: 16,
+  },
+  dot: {
+    height: 8,
+    borderRadius: 4,
+  },
+
+  // Progress Bar
+  progressContainer: {
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+    alignItems: 'center',
+  },
+  progressBackground: {
+    width: '100%',
+    height: 4,
+    borderRadius: 2,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 2,
+  },
+  progressText: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+
+  // Steps
+  stepsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 16,
+  },
+  stepItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  stepCircle: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stepNumber: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  stepCheckmark: {
+    width: 12,
+    height: 6,
+    borderBottomWidth: 2,
+    borderLeftWidth: 2,
+    borderColor: '#FFFFFF',
+    transform: [{ rotate: '-45deg' }, { translateY: -2 }],
+  },
+  stepLine: {
+    flex: 1,
+    height: 2,
+    minWidth: 8,
+  },
+
+  // Numbers
+  numbersContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 16,
+    paddingVertical: 16,
+  },
+  numberCircle: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  numberText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+
+  // Floating
+  floatingContainer: {
+    position: 'absolute',
+    bottom: 32,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  floatingBackground: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  floatingDots: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  floatingDot: {
+    height: 10,
+    borderRadius: 5,
+  },
+});
+
+export default Pagination;

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export { Pagination } from './Pagination';
+export { NavigationButton, NavigationButtons } from './NavigationButtons';
+export { Onboarding, useOnboarding } from './Onboarding';
+
+export { default } from './Onboarding';