@rubixscript/react-native-onboarding 1.1.2 → 1.2.0

package/dist/components/SimpleOnboardingScreen.d.ts

@@ -3,25 +3,35 @@
  * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
  *
  * @props
- * - onComplete: () => void - Handler called when onboarding is finished
+ * - onComplete: (userData?: UserData) => void - Handler called when onboarding is finished with optional user data
  * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - showForm: boolean - Whether to show a form slide at the end (default: true)
+ * - formFields: FormField[] - Custom form fields (optional, has default)
+ * - allowSkipForm: boolean - Allow skipping the form (default: true)
  * - 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')
+ * - inputBackgroundColor: string - Background color for form inputs (default: '#FFFFFF')
+ * - inputBorderColor: string - Border color for form inputs (default: '#E0E0E0')
  * - buttonTextNext: string - Text for next button (default: 'Next')
  * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - buttonTextSkip: string - Text for skip button (default: 'Skip')
+ * - buttonTextSubmit: string - Text for submit button (default: 'Get Started')
  * - testID?: string - Test identifier for testing
  *
  * @states
  * - currentIndex: number - Current onboarding screen index
+ * - formData: UserData - Form data collected from user
  *
  * @features
  * - Step-by-step app introduction
  * - Interactive animations
  * - Feature highlights
  * - Progress indication
+ * - User data collection (name, purpose)
+ * - Skip functionality
  * - Fully customizable styling
  *
  * @dependencies
@@ -37,18 +47,38 @@ export interface SimpleSlide {
     description: string;
     icon: keyof typeof MaterialCommunityIcons.glyphMap;
 }
+export interface FormField {
+    key: string;
+    label: string;
+    placeholder: string;
+    multiline?: boolean;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+}
+export interface UserData {
+    name?: string;
+    purpose?: string;
+    [key: string]: string | undefined;
+}
 interface SimpleOnboardingScreenProps {
-    onComplete: () => Promise<void>;
+    onComplete: (userData?: UserData) => Promise<void>;
     slides?: SimpleSlide[];
+    showForm?: boolean;
+    formFields?: FormField[];
+    allowSkipForm?: boolean;
     primaryColor?: string;
     backgroundColor?: string;
     iconBackgroundColor?: string;
     textColor?: string;
     descriptionColor?: string;
+    inputBackgroundColor?: string;
+    inputBorderColor?: string;
+    inputTextColor?: string;
     buttonTextNext?: string;
     buttonTextDone?: string;
+    buttonTextSkip?: string;
+    buttonTextSubmit?: string;
     testID?: string;
 }
-export default function SimpleOnboardingScreen({ onComplete, slides, primaryColor, backgroundColor, iconBackgroundColor, textColor, descriptionColor, buttonTextNext, buttonTextDone, testID, }: SimpleOnboardingScreenProps): React.JSX.Element;
+export default function SimpleOnboardingScreen({ onComplete, slides, showForm, formFields, allowSkipForm, primaryColor, backgroundColor, iconBackgroundColor, textColor, descriptionColor, inputBackgroundColor, inputBorderColor, inputTextColor, buttonTextNext, buttonTextDone, buttonTextSkip, buttonTextSubmit, testID, }: SimpleOnboardingScreenProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=SimpleOnboardingScreen.d.ts.map

package/dist/components/SimpleOnboardingScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleOnboardingScreen.d.ts","sourceRoot":"","sources":["../../src/components/SimpleOnboardingScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAK5D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,sBAAsB,CAAC,QAAQ,CAAC;CACpD;AAuBD,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,MAAsB,EACtB,YAAwB,EACxB,eAA2B,EAC3B,mBAAgD,EAChD,SAAqB,EACrB,gBAA4B,EAC5B,cAAuB,EACvB,cAA8B,EAC9B,MAAM,GACP,EAAE,2BAA2B,qBAuF7B"}
+{"version":3,"file":"SimpleOnboardingScreen.d.ts","sourceRoot":"","sources":["../../src/components/SimpleOnboardingScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAgBhD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAK5D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,sBAAsB,CAAC,QAAQ,CAAC;CACpD;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,YAAY,CAAC;CAChE;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACnC;AAuCD,UAAU,2BAA2B;IACnC,UAAU,EAAE,CAAC,QAAQ,CAAC,EAAE,QAAQ,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,MAAsB,EACtB,QAAe,EACf,UAA8B,EAC9B,aAAoB,EACpB,YAAwB,EACxB,eAA2B,EAC3B,mBAAgD,EAChD,SAAqB,EACrB,gBAA4B,EAC5B,oBAAgC,EAChC,gBAA4B,EAC5B,cAA0B,EAC1B,cAAuB,EACvB,cAA8B,EAC9B,cAAuB,EACvB,gBAAgC,EAChC,MAAM,GACP,EAAE,2BAA2B,qBAuL7B"}

package/dist/components/SimpleOnboardingScreen.js

@@ -3,25 +3,35 @@
  * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
  *
  * @props
- * - onComplete: () => void - Handler called when onboarding is finished
+ * - onComplete: (userData?: UserData) => void - Handler called when onboarding is finished with optional user data
  * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - showForm: boolean - Whether to show a form slide at the end (default: true)
+ * - formFields: FormField[] - Custom form fields (optional, has default)
+ * - allowSkipForm: boolean - Allow skipping the form (default: true)
  * - 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')
+ * - inputBackgroundColor: string - Background color for form inputs (default: '#FFFFFF')
+ * - inputBorderColor: string - Border color for form inputs (default: '#E0E0E0')
  * - buttonTextNext: string - Text for next button (default: 'Next')
  * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - buttonTextSkip: string - Text for skip button (default: 'Skip')
+ * - buttonTextSubmit: string - Text for submit button (default: 'Get Started')
  * - testID?: string - Test identifier for testing
  *
  * @states
  * - currentIndex: number - Current onboarding screen index
+ * - formData: UserData - Form data collected from user
  *
  * @features
  * - Step-by-step app introduction
  * - Interactive animations
  * - Feature highlights
  * - Progress indication
+ * - User data collection (name, purpose)
+ * - Skip functionality
  * - Fully customizable styling
  *
  * @dependencies
@@ -30,7 +40,7 @@
  * - react-native components
  */
 import React, { useRef, useState } from 'react';
-import { View, Text, StyleSheet, Dimensions, TouchableOpacity, FlatList, Platform, StatusBar, } from 'react-native';
+import { View, Text, StyleSheet, Dimensions, TouchableOpacity, FlatList, Platform, StatusBar, TextInput, KeyboardAvoidingView, ScrollView, } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { BlurView } from 'expo-blur';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
@@ -56,10 +66,33 @@ const defaultSlides = [
         icon: 'chart-line',
     },
 ];
-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, }) {
+const defaultFormFields = [
+    {
+        key: 'name',
+        label: 'What should we call you?',
+        placeholder: 'Enter your name',
+        autoCapitalize: 'words',
+    },
+    {
+        key: 'purpose',
+        label: 'What are you looking to use this app for?',
+        placeholder: 'e.g., Focus on work, Study, Track goals...',
+        multiline: true,
+        autoCapitalize: 'sentences',
+    },
+];
+export default function SimpleOnboardingScreen({ onComplete, slides = defaultSlides, showForm = true, formFields = defaultFormFields, allowSkipForm = true, primaryColor = '#FF6B6B', backgroundColor = '#F6F6F6', iconBackgroundColor = 'rgba(255, 107, 107, 0.1)', textColor = '#000000', descriptionColor = '#666666', inputBackgroundColor = '#FFFFFF', inputBorderColor = '#E0E0E0', inputTextColor = '#000000', buttonTextNext = 'Next', buttonTextDone = 'Get Started', buttonTextSkip = 'Skip', buttonTextSubmit = 'Get Started', testID, }) {
     const [currentIndex, setCurrentIndex] = useState(0);
+    const [formData, setFormData] = useState({});
     const flatListRef = useRef(null);
-    const renderSlide = ({ item }) => (<View style={styles.slide}>
+    // Create display data: info slides + optional form slide
+    const displaySlides = showForm
+        ? [...slides, { id: 'form', type: 'form' }]
+        : slides;
+    const totalSlides = displaySlides.length;
+    const isLastSlide = currentIndex === totalSlides - 1;
+    const isFormSlide = showForm && isLastSlide;
+    const renderInfoSlide = ({ item }) => (<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>
@@ -70,8 +103,41 @@ export default function SimpleOnboardingScreen({ onComplete, slides = defaultSli
         {item.description}
       </Text>
     </View>);
+    const renderFormSlide = () => (<KeyboardAvoidingView style={styles.slide} behavior="padding" keyboardVerticalOffset={100}>
+      <ScrollView style={styles.formContainer} contentContainerStyle={styles.formContentContainer} showsVerticalScrollIndicator={false}>
+        <Animated.View entering={FadeIn.duration(500)} style={[styles.iconContainer, { backgroundColor: iconBackgroundColor }]}>
+          <MaterialCommunityIcons name="account-outline" size={80} color={textColor}/>
+        </Animated.View>
+        <Text style={[styles.title, { color: textColor }]}>
+          Let's Get Started
+        </Text>
+        <Text style={[styles.formDescription, { color: descriptionColor }]}>
+          Tell us a bit about yourself (optional)
+        </Text>
+
+        {formFields.map((field) => (<View key={field.key} style={styles.inputWrapper}>
+            <Text style={[styles.inputLabel, { color: textColor }]}>
+              {field.label}
+            </Text>
+            <TextInput style={[
+                styles.input,
+                {
+                    backgroundColor: inputBackgroundColor,
+                    borderColor: inputBorderColor,
+                    color: inputTextColor,
+                },
+            ]} placeholder={field.placeholder} placeholderTextColor="#999999" value={formData[field.key] || ''} onChangeText={(text) => setFormData({ ...formData, [field.key]: text })} multiline={field.multiline} numberOfLines={field.multiline ? 4 : 1} autoCapitalize={field.autoCapitalize || 'sentences'}/>
+          </View>))}
+      </ScrollView>
+    </KeyboardAvoidingView>);
+    const renderSlide = ({ item, index }) => {
+        if (item.type === 'form') {
+            return renderFormSlide();
+        }
+        return renderInfoSlide({ item });
+    };
     const handleNext = () => {
-        if (currentIndex < slides.length - 1) {
+        if (currentIndex < totalSlides - 1) {
             flatListRef.current?.scrollToIndex({
                 index: currentIndex + 1,
                 animated: true,
@@ -79,31 +145,44 @@ export default function SimpleOnboardingScreen({ onComplete, slides = defaultSli
             setCurrentIndex(currentIndex + 1);
         }
         else {
-            onComplete();
+            // Submit form data
+            onComplete(formData);
         }
     };
+    const handleSkip = () => {
+        onComplete();
+    };
+    const isFormDataValid = () => {
+        return true; // Form is optional, so always valid
+    };
     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) => {
+      <FlatList ref={flatListRef} data={displaySlides} renderItem={renderSlide} horizontal pagingEnabled showsHorizontalScrollIndicator={false} onMomentumScrollEnd={(event) => {
             const index = Math.round(event.nativeEvent.contentOffset.x / width);
             setCurrentIndex(index);
-        }}/>
+        }} scrollEnabled={!isFormSlide}/>
 
       <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>
+        <View style={styles.footerContent}>
+          {isFormSlide && allowSkipForm ? (<TouchableOpacity style={styles.skipButton} onPress={handleSkip}>
+              <Text style={[styles.skipButtonText, { color: descriptionColor }]}>
+                {buttonTextSkip}
+              </Text>
+            </TouchableOpacity>) : (<View style={styles.pagination}>
+              {displaySlides.slice(0, showForm ? totalSlides - 1 : totalSlides).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>
+          <TouchableOpacity style={[styles.button, { backgroundColor: primaryColor }]} onPress={handleNext}>
+            <Text style={styles.buttonText}>
+              {isFormSlide ? buttonTextSubmit : isLastSlide ? buttonTextDone : buttonTextNext}
+            </Text>
+          </TouchableOpacity>
+        </View>
       </BlurView>
     </SafeAreaView>);
 }
@@ -136,6 +215,38 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         lineHeight: 24,
     },
+    formContainer: {
+        flex: 1,
+        width: '100%',
+    },
+    formContentContainer: {
+        alignItems: 'center',
+        paddingBottom: 100,
+    },
+    formDescription: {
+        fontSize: 17,
+        textAlign: 'center',
+        lineHeight: 24,
+        marginBottom: 32,
+    },
+    inputWrapper: {
+        width: '100%',
+        marginBottom: 20,
+    },
+    inputLabel: {
+        fontSize: 16,
+        fontWeight: '600',
+        marginBottom: 8,
+    },
+    input: {
+        width: '100%',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderRadius: 12,
+        borderWidth: 1,
+        fontSize: 16,
+        textAlignVertical: 'top',
+    },
     footer: {
         position: 'absolute',
         bottom: 0,
@@ -143,6 +254,8 @@ const styles = StyleSheet.create({
         right: 0,
         paddingHorizontal: 20,
         paddingVertical: 20,
+    },
+    footerContent: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
@@ -181,4 +294,12 @@ const styles = StyleSheet.create({
         fontSize: 17,
         fontWeight: '600',
     },
+    skipButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    skipButtonText: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
 });

package/dist/components/index.d.ts

@@ -2,6 +2,6 @@ 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 type { SimpleSlide, FormField, UserData } from './SimpleOnboardingScreen';
 export { default } from './Onboarding';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEjF,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Onboarding, useOnboarding } from './components/Onboarding';
 export { SimpleOnboardingScreen } from './components';
-export type { SimpleSlide } from './components';
+export type { SimpleSlide, FormField, UserData } from './components';
 export { ImageSlide, IconSlide, FormSlide, VideoSlide, SlideRenderer, } from './slides';
 export { Pagination, NavigationButton, NavigationButtons, } from './components';
 export { onepageTheme, zaprecipeTheme, pomodoTheme, modernTheme, minimalTheme, gradientTheme, onepagePreset, zaprecipePreset, pomodoPreset, modernPreset, minimalPreset, gradientPreset, getTheme, getPreset, mergeTheme, } from './themes';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,GACd,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAC;AAGlB,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,GACb,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGrE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,aAAa,GACd,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAC;AAGlB,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,SAAS,EACT,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,GACb,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubixscript/react-native-onboarding",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "A comprehensive React Native onboarding library with customizable slide types, animations, and themes",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/SimpleOnboardingScreen.tsx

@@ -3,25 +3,35 @@
  * @description A simple, beautiful onboarding screen with customizable slides, colors, and styling
  *
  * @props
- * - onComplete: () => void - Handler called when onboarding is finished
+ * - onComplete: (userData?: UserData) => void - Handler called when onboarding is finished with optional user data
  * - slides: SimpleSlide[] - Array of slides to display (optional, has default)
+ * - showForm: boolean - Whether to show a form slide at the end (default: true)
+ * - formFields: FormField[] - Custom form fields (optional, has default)
+ * - allowSkipForm: boolean - Allow skipping the form (default: true)
  * - 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')
+ * - inputBackgroundColor: string - Background color for form inputs (default: '#FFFFFF')
+ * - inputBorderColor: string - Border color for form inputs (default: '#E0E0E0')
  * - buttonTextNext: string - Text for next button (default: 'Next')
  * - buttonTextDone: string - Text for done button (default: 'Get Started')
+ * - buttonTextSkip: string - Text for skip button (default: 'Skip')
+ * - buttonTextSubmit: string - Text for submit button (default: 'Get Started')
  * - testID?: string - Test identifier for testing
  *
  * @states
  * - currentIndex: number - Current onboarding screen index
+ * - formData: UserData - Form data collected from user
  *
  * @features
  * - Step-by-step app introduction
  * - Interactive animations
  * - Feature highlights
  * - Progress indication
+ * - User data collection (name, purpose)
+ * - Skip functionality
  * - Fully customizable styling
  *
  * @dependencies
@@ -40,6 +50,9 @@ import {
   FlatList,
   Platform,
   StatusBar,
+  TextInput,
+  KeyboardAvoidingView,
+  ScrollView,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { BlurView } from 'expo-blur';
@@ -55,6 +68,20 @@ export interface SimpleSlide {
   icon: keyof typeof MaterialCommunityIcons.glyphMap;
 }
 
+export interface FormField {
+  key: string;
+  label: string;
+  placeholder: string;
+  multiline?: boolean;
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+}
+
+export interface UserData {
+  name?: string;
+  purpose?: string;
+  [key: string]: string | undefined;
+}
+
 const defaultSlides: SimpleSlide[] = [
   {
     id: '1',
@@ -76,35 +103,77 @@ const defaultSlides: SimpleSlide[] = [
   },
 ];
 
+const defaultFormFields: FormField[] = [
+  {
+    key: 'name',
+    label: 'What should we call you?',
+    placeholder: 'Enter your name',
+    autoCapitalize: 'words',
+  },
+  {
+    key: 'purpose',
+    label: 'What are you looking to use this app for?',
+    placeholder: 'e.g., Focus on work, Study, Track goals...',
+    multiline: true,
+    autoCapitalize: 'sentences',
+  },
+];
+
 interface SimpleOnboardingScreenProps {
-  onComplete: () => Promise<void>;
+  onComplete: (userData?: UserData) => Promise<void>;
   slides?: SimpleSlide[];
+  showForm?: boolean;
+  formFields?: FormField[];
+  allowSkipForm?: boolean;
   primaryColor?: string;
   backgroundColor?: string;
   iconBackgroundColor?: string;
   textColor?: string;
   descriptionColor?: string;
+  inputBackgroundColor?: string;
+  inputBorderColor?: string;
+  inputTextColor?: string;
   buttonTextNext?: string;
   buttonTextDone?: string;
+  buttonTextSkip?: string;
+  buttonTextSubmit?: string;
   testID?: string;
 }
 
 export default function SimpleOnboardingScreen({
   onComplete,
   slides = defaultSlides,
+  showForm = true,
+  formFields = defaultFormFields,
+  allowSkipForm = true,
   primaryColor = '#FF6B6B',
   backgroundColor = '#F6F6F6',
   iconBackgroundColor = 'rgba(255, 107, 107, 0.1)',
   textColor = '#000000',
   descriptionColor = '#666666',
+  inputBackgroundColor = '#FFFFFF',
+  inputBorderColor = '#E0E0E0',
+  inputTextColor = '#000000',
   buttonTextNext = 'Next',
   buttonTextDone = 'Get Started',
+  buttonTextSkip = 'Skip',
+  buttonTextSubmit = 'Get Started',
   testID,
 }: SimpleOnboardingScreenProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [formData, setFormData] = useState<UserData>({});
   const flatListRef = useRef<FlatList>(null);
 
-  const renderSlide = ({ item }: { item: SimpleSlide }) => (
+  // Create display data: info slides + optional form slide
+  const displaySlides = showForm
+    ? [...slides, { id: 'form', type: 'form' } as any]
+    : slides;
+
+  const totalSlides = displaySlides.length;
+  const isLastSlide = currentIndex === totalSlides - 1;
+  const isFormSlide = showForm && isLastSlide;
+
+  const renderInfoSlide = ({ item }: { item: SimpleSlide }) => (
     <View style={styles.slide}>
       <Animated.View
         entering={FadeIn.duration(500)}
@@ -125,18 +194,90 @@ export default function SimpleOnboardingScreen({
     </View>
   );
 
+  const renderFormSlide = () => (
+    <KeyboardAvoidingView
+      style={styles.slide}
+      behavior="padding"
+      keyboardVerticalOffset={100}
+    >
+      <ScrollView
+        style={styles.formContainer}
+        contentContainerStyle={styles.formContentContainer}
+        showsVerticalScrollIndicator={false}
+      >
+        <Animated.View
+          entering={FadeIn.duration(500)}
+          style={[styles.iconContainer, { backgroundColor: iconBackgroundColor }]}
+        >
+          <MaterialCommunityIcons
+            name="account-outline"
+            size={80}
+            color={textColor}
+          />
+        </Animated.View>
+        <Text style={[styles.title, { color: textColor }]}>
+          Let's Get Started
+        </Text>
+        <Text style={[styles.formDescription, { color: descriptionColor }]}>
+          Tell us a bit about yourself (optional)
+        </Text>
+
+        {formFields.map((field) => (
+          <View key={field.key} style={styles.inputWrapper}>
+            <Text style={[styles.inputLabel, { color: textColor }]}>
+              {field.label}
+            </Text>
+            <TextInput
+              style={[
+                styles.input,
+                {
+                  backgroundColor: inputBackgroundColor,
+                  borderColor: inputBorderColor,
+                  color: inputTextColor,
+                },
+              ]}
+              placeholder={field.placeholder}
+              placeholderTextColor="#999999"
+              value={formData[field.key] || ''}
+              onChangeText={(text) => setFormData({ ...formData, [field.key]: text })}
+              multiline={field.multiline}
+              numberOfLines={field.multiline ? 4 : 1}
+              autoCapitalize={field.autoCapitalize || 'sentences'}
+            />
+          </View>
+        ))}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+
+  const renderSlide = ({ item, index }: { item: any; index: number }) => {
+    if (item.type === 'form') {
+      return renderFormSlide();
+    }
+    return renderInfoSlide({ item });
+  };
+
   const handleNext = () => {
-    if (currentIndex < slides.length - 1) {
+    if (currentIndex < totalSlides - 1) {
       flatListRef.current?.scrollToIndex({
         index: currentIndex + 1,
         animated: true,
       });
       setCurrentIndex(currentIndex + 1);
     } else {
-      onComplete();
+      // Submit form data
+      onComplete(formData);
     }
   };
 
+  const handleSkip = () => {
+    onComplete();
+  };
+
+  const isFormDataValid = () => {
+    return true; // Form is optional, so always valid
+  };
+
   return (
     <SafeAreaView testID={testID} style={[styles.container, { backgroundColor }]} edges={['top', 'bottom']}>
       <StatusBar
@@ -147,7 +288,7 @@ export default function SimpleOnboardingScreen({
 
       <FlatList
         ref={flatListRef}
-        data={slides}
+        data={displaySlides}
         renderItem={renderSlide}
         horizontal
         pagingEnabled
@@ -156,6 +297,7 @@ export default function SimpleOnboardingScreen({
           const index = Math.round(event.nativeEvent.contentOffset.x / width);
           setCurrentIndex(index);
         }}
+        scrollEnabled={!isFormSlide}
       />
 
       <BlurView
@@ -163,27 +305,40 @@ export default function SimpleOnboardingScreen({
         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>
+        <View style={styles.footerContent}>
+          {isFormSlide && allowSkipForm ? (
+            <TouchableOpacity
+              style={styles.skipButton}
+              onPress={handleSkip}
+            >
+              <Text style={[styles.skipButtonText, { color: descriptionColor }]}>
+                {buttonTextSkip}
+              </Text>
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.pagination}>
+              {displaySlides.slice(0, showForm ? totalSlides - 1 : totalSlides).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>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: primaryColor }]}
+            onPress={handleNext}
+          >
+            <Text style={styles.buttonText}>
+              {isFormSlide ? buttonTextSubmit : isLastSlide ? buttonTextDone : buttonTextNext}
+            </Text>
+          </TouchableOpacity>
+        </View>
       </BlurView>
     </SafeAreaView>
   );
@@ -218,6 +373,38 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     lineHeight: 24,
   },
+  formContainer: {
+    flex: 1,
+    width: '100%',
+  },
+  formContentContainer: {
+    alignItems: 'center',
+    paddingBottom: 100,
+  },
+  formDescription: {
+    fontSize: 17,
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: 32,
+  },
+  inputWrapper: {
+    width: '100%',
+    marginBottom: 20,
+  },
+  inputLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  input: {
+    width: '100%',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderRadius: 12,
+    borderWidth: 1,
+    fontSize: 16,
+    textAlignVertical: 'top',
+  },
   footer: {
     position: 'absolute',
     bottom: 0,
@@ -225,6 +412,8 @@ const styles = StyleSheet.create({
     right: 0,
     paddingHorizontal: 20,
     paddingVertical: 20,
+  },
+  footerContent: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -263,4 +452,12 @@ const styles = StyleSheet.create({
     fontSize: 17,
     fontWeight: '600',
   },
+  skipButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  skipButtonText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
 });

package/src/components/index.ts

@@ -2,6 +2,6 @@ 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 type { SimpleSlide, FormField, UserData } from './SimpleOnboardingScreen';
 
 export { default } from './Onboarding';

package/src/index.ts

@@ -3,7 +3,7 @@ export { Onboarding, useOnboarding } from './components/Onboarding';
 
 // Simple Onboarding Screen - A simple, customizable onboarding component
 export { SimpleOnboardingScreen } from './components';
-export type { SimpleSlide } from './components';
+export type { SimpleSlide, FormField, UserData } from './components';
 
 // Slide Components
 export {