@rubixscript/react-native-onboarding 1.0.0 → 1.1.0

package/src/components/SimpleOnboardingScreen.tsx

@@ -0,0 +1,266 @@
+/**  METADATA
+ * @component SimpleOnboardingScreen
+ * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
+ *
+ * @props
+ * - onComplete: () => void - Handler called when onboarding is finished
+ * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - primaryColor: string - Primary color for buttons and active dots (default: '#FF6B6B')
+ * - backgroundColor: string - Background color of the screen (default: '#F6F6F6')
+ * - iconBackgroundColor: string - Background color for icon container (default: 'rgba(255, 107, 107, 0.1)')
+ * - textColor: string - Color for titles (default: '#000000')
+ * - descriptionColor: string - Color for descriptions (default: '#666666')
+ * - buttonTextNext: string - Text for next button (default: 'Next')
+ * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - testID?: string - Test identifier for testing
+ *
+ * @states
+ * - currentIndex: number - Current onboarding screen index
+ *
+ * @features
+ * - Step-by-step app introduction
+ * - Interactive animations
+ * - Feature highlights
+ * - Progress indication
+ * - Fully customizable styling
+ *
+ * @dependencies
+ * - react-native-reanimated: For animations
+ * - @expo/vector-icons: For UI icons
+ * - react-native components
+ */
+
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  FlatList,
+  Platform,
+  StatusBar,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { BlurView } from 'expo-blur';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import Animated, { FadeIn } from 'react-native-reanimated';
+
+const { width } = Dimensions.get('window');
+
+export interface SimpleSlide {
+  id: string;
+  title: string;
+  description: string;
+  icon: keyof typeof MaterialCommunityIcons.glyphMap;
+}
+
+const defaultSlides: SimpleSlide[] = [
+  {
+    id: '1',
+    title: 'Focus Timer',
+    description: 'Stay productive with our Pomodoro timer. Work in focused intervals for better results.',
+    icon: 'timer-outline',
+  },
+  {
+    id: '2',
+    title: 'Task Management',
+    description: 'Organize your tasks efficiently. Track progress and set priorities with ease.',
+    icon: 'checkbox-marked-circle-outline',
+  },
+  {
+    id: '3',
+    title: 'Statistics',
+    description: 'Monitor your productivity with detailed statistics and insights.',
+    icon: 'chart-line',
+  },
+];
+
+interface SimpleOnboardingScreenProps {
+  onComplete: () => Promise<void>;
+  slides?: SimpleSlide[];
+  primaryColor?: string;
+  backgroundColor?: string;
+  iconBackgroundColor?: string;
+  textColor?: string;
+  descriptionColor?: string;
+  buttonTextNext?: string;
+  buttonTextDone?: string;
+  testID?: string;
+}
+
+export default function SimpleOnboardingScreen({
+  onComplete,
+  slides = defaultSlides,
+  primaryColor = '#FF6B6B',
+  backgroundColor = '#F6F6F6',
+  iconBackgroundColor = 'rgba(255, 107, 107, 0.1)',
+  textColor = '#000000',
+  descriptionColor = '#666666',
+  buttonTextNext = 'Next',
+  buttonTextDone = 'Get Started',
+  testID,
+}: SimpleOnboardingScreenProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const flatListRef = useRef<FlatList>(null);
+
+  const renderSlide = ({ item }: { item: SimpleSlide }) => (
+    <View style={styles.slide}>
+      <Animated.View
+        entering={FadeIn.duration(500)}
+        style={[styles.iconContainer, { backgroundColor: iconBackgroundColor }]}
+      >
+        <MaterialCommunityIcons
+          name={item.icon}
+          size={80}
+          color={textColor}
+        />
+      </Animated.View>
+      <Text style={[styles.title, { color: textColor }]}>
+        {item.title}
+      </Text>
+      <Text style={[styles.description, { color: descriptionColor }]}>
+        {item.description}
+      </Text>
+    </View>
+  );
+
+  const handleNext = () => {
+    if (currentIndex < slides.length - 1) {
+      flatListRef.current?.scrollToIndex({
+        index: currentIndex + 1,
+        animated: true,
+      });
+      setCurrentIndex(currentIndex + 1);
+    } else {
+      onComplete();
+    }
+  };
+
+  return (
+    <SafeAreaView testID={testID} style={[styles.container, { backgroundColor }]} edges={['top', 'bottom']}>
+      <StatusBar
+        barStyle="dark-content"
+        backgroundColor="transparent"
+        translucent
+      />
+
+      <FlatList
+        ref={flatListRef}
+        data={slides}
+        renderItem={renderSlide}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onMomentumScrollEnd={(event) => {
+          const index = Math.round(event.nativeEvent.contentOffset.x / width);
+          setCurrentIndex(index);
+        }}
+      />
+
+      <BlurView
+        intensity={80}
+        tint="light"
+        style={styles.footer}
+      >
+        <View style={styles.pagination}>
+          {slides.map((_, index) => (
+            <View
+              key={index}
+              style={[
+                styles.paginationDot,
+                index === currentIndex && styles.paginationDotActive,
+                index === currentIndex && { backgroundColor: primaryColor },
+              ]}
+            />
+          ))}
+        </View>
+
+        <TouchableOpacity
+          style={[styles.button, { backgroundColor: primaryColor }]}
+          onPress={handleNext}
+        >
+          <Text style={styles.buttonText}>
+            {currentIndex === slides.length - 1 ? buttonTextDone : buttonTextNext}
+          </Text>
+        </TouchableOpacity>
+      </BlurView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  slide: {
+    width,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 40,
+  },
+  iconContainer: {
+    width: 160,
+    height: 160,
+    borderRadius: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 40,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: '700',
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: 17,
+    textAlign: 'center',
+    lineHeight: 24,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  pagination: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  paginationDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+  },
+  paginationDotActive: {
+    width: 20,
+  },
+  button: {
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+    borderRadius: 24,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 17,
+    fontWeight: '600',
+  },
+});

package/src/components/index.ts

@@ -1,5 +1,7 @@
-export { Pagination } from './Pagination';
-export { NavigationButton, NavigationButtons } from './NavigationButtons';
-export { Onboarding, useOnboarding } from './Onboarding';
-
-export { default } from './Onboarding';
+export { Pagination } from './Pagination';
+export { NavigationButton, NavigationButtons } from './NavigationButtons';
+export { Onboarding, useOnboarding } from './Onboarding';
+export { default as SimpleOnboardingScreen } from './SimpleOnboardingScreen';
+export type { SimpleSlide } from './SimpleOnboardingScreen';
+
+export { default } from './Onboarding';

package/src/index.ts

@@ -1,65 +1,69 @@
-// Main Component
-export { Onboarding, useOnboarding } from './components/Onboarding';
-
-// Slide Components
-export {
-  ImageSlide,
-  IconSlide,
-  FormSlide,
-  VideoSlide,
-  SlideRenderer,
-} from './slides';
-
-// UI Components
-export {
-  Pagination,
-  NavigationButton,
-  NavigationButtons,
-} from './components';
-
-// Themes & Presets
-export {
-  onepageTheme,
-  zaprecipeTheme,
-  pomodoTheme,
-  modernTheme,
-  minimalTheme,
-  gradientTheme,
-  onepagePreset,
-  zaprecipePreset,
-  pomodoPreset,
-  modernPreset,
-  minimalPreset,
-  gradientPreset,
-  getTheme,
-  getPreset,
-  mergeTheme,
-} from './themes';
-
-// Types
-export type {
-  SlideType,
-  BaseSlideData,
-  ImageSlideData,
-  IconSlideData,
-  FormSlideData,
-  VideoSlideData,
-  CustomSlideData,
-  SlideData,
-  OnboardingTheme,
-  NavigationStyle,
-  NavigationConfig,
-  AnimationType,
-  AnimationConfig,
-  StorageConfig,
-  OnboardingConfig,
-  OnboardingProps,
-  FormSlideCustomProps,
-  PaginationProps,
-  NavigationButtonProps,
-  OnboardingPreset,
-  PresetConfig,
-} from './types';
-
-// Default export
-export { default } from './components/Onboarding';
+// Main Component
+export { Onboarding, useOnboarding } from './components/Onboarding';
+
+// Simple Onboarding Screen - A simple, customizable onboarding component
+export { SimpleOnboardingScreen } from './components';
+export type { SimpleSlide } from './components';
+
+// Slide Components
+export {
+  ImageSlide,
+  IconSlide,
+  FormSlide,
+  VideoSlide,
+  SlideRenderer,
+} from './slides';
+
+// UI Components
+export {
+  Pagination,
+  NavigationButton,
+  NavigationButtons,
+} from './components';
+
+// Themes & Presets
+export {
+  onepageTheme,
+  zaprecipeTheme,
+  pomodoTheme,
+  modernTheme,
+  minimalTheme,
+  gradientTheme,
+  onepagePreset,
+  zaprecipePreset,
+  pomodoPreset,
+  modernPreset,
+  minimalPreset,
+  gradientPreset,
+  getTheme,
+  getPreset,
+  mergeTheme,
+} from './themes';
+
+// Types
+export type {
+  SlideType,
+  BaseSlideData,
+  ImageSlideData,
+  IconSlideData,
+  FormSlideData,
+  VideoSlideData,
+  CustomSlideData,
+  SlideData,
+  OnboardingTheme,
+  NavigationStyle,
+  NavigationConfig,
+  AnimationType,
+  AnimationConfig,
+  StorageConfig,
+  OnboardingConfig,
+  OnboardingProps,
+  FormSlideCustomProps,
+  PaginationProps,
+  NavigationButtonProps,
+  OnboardingPreset,
+  PresetConfig,
+} from './types';
+
+// Default export
+export { default } from './components/Onboarding';