noboarding 1.0.6-beta → 1.0.8

package/lib/OnboardingFlow.js

@@ -74,7 +74,7 @@ const detectEnvironment = () => {
         return 'test';
     return 'production';
 };
-const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, baseUrl, initialVariables, customComponents, onUserIdGenerated, }) => {
+const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, baseUrl, initialVariables, customComponents, onUserIdGenerated, loadingComponent, }) => {
     // Determine which API key to use
     const getApiKey = () => {
         // If dual keys provided, use environment detection
@@ -268,6 +268,9 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
         }
     };
     if (loading) {
+        if (loadingComponent) {
+            return <>{loadingComponent}</>;
+        }
         return (<react_native_1.View style={styles.centerContainer}>
         <react_native_1.ActivityIndicator size="large" color="#007AFF"/>
         <react_native_1.Text style={styles.loadingText}>Loading...</react_native_1.Text>

package/lib/components/ElementRenderer.js

@@ -179,7 +179,7 @@ const ElementRenderer = ({ elements, analytics, screenId, onNavigate, onDismiss,
 };
 exports.ElementRenderer = ElementRenderer;
 const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables, onSetVariable, inputValues, setInputValues, staggerDelay = 0, resolveAssetUrl }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20;
     // Variable-based conditions — hide element if condition is not met
     if ((_a = element.conditions) === null || _a === void 0 ? void 0 : _a.show_if) {
         const shouldShow = (0, variableUtils_1.evaluateCondition)(element.conditions.show_if, variables);
@@ -447,13 +447,21 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
               {element.props.imageDescription}
             </react_native_1.Text>)}
         </react_native_1.View>);
-        case 'video':
-            // Video placeholder — actual implementation would use expo-av or react-native-video
-            // Resolve asset URL if present (for future implementation)
-            if ((_1 = element.props) === null || _1 === void 0 ? void 0 : _1.url) {
-                const resolvedUrl = resolveAssetUrl(element.props.url);
-                // TODO: Implement actual video player with resolvedUrl
+        case 'video': {
+            const videoUrl = ((_1 = element.props) === null || _1 === void 0 ? void 0 : _1.url) ? resolveAssetUrl(element.props.url) : null;
+            let VideoComponent = null;
+            try {
+                const expoAv = require('expo-av');
+                VideoComponent = expoAv.Video;
+            }
+            catch (_21) { }
+            if (VideoComponent && videoUrl) {
+                const resizeMode = ((_2 = element.props) === null || _2 === void 0 ? void 0 : _2.resizeMode) || 'contain';
+                return (<react_native_1.View style={[style, { backgroundColor: style.backgroundColor || '#1a1a1a', overflow: 'hidden' }]}>
+            <VideoComponent source={{ uri: videoUrl }} style={{ width: '100%', height: '100%' }} resizeMode={resizeMode} shouldPlay={((_3 = element.props) === null || _3 === void 0 ? void 0 : _3.autoPlay) !== false} isLooping={((_4 = element.props) === null || _4 === void 0 ? void 0 : _4.loop) !== false} isMuted={((_5 = element.props) === null || _5 === void 0 ? void 0 : _5.muted) !== false} useNativeControls={false}/>
+          </react_native_1.View>);
             }
+            // Fallback when expo-av is unavailable or no URL
             return (<react_native_1.View style={[
                     style,
                     {
@@ -463,17 +471,39 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
                     },
                 ]}>
           <react_native_1.Text style={{ fontSize: 48 }}>🎬</react_native_1.Text>
-          {((_2 = element.props) === null || _2 === void 0 ? void 0 : _2.videoDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#aaa', textAlign: 'center', padding: 8 }}>
+          {((_6 = element.props) === null || _6 === void 0 ? void 0 : _6.videoDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#aaa', textAlign: 'center', padding: 8 }}>
               {element.props.videoDescription}
             </react_native_1.Text>)}
         </react_native_1.View>);
-        case 'lottie':
-            // Lottie placeholder — actual implementation would use lottie-react-native
-            // Resolve asset URL if present (for future implementation)
-            if ((_3 = element.props) === null || _3 === void 0 ? void 0 : _3.url) {
-                const resolvedUrl = resolveAssetUrl(element.props.url);
-                // TODO: Implement actual Lottie player with resolvedUrl
+        }
+        case 'lottie': {
+            const lottieUrl = ((_7 = element.props) === null || _7 === void 0 ? void 0 : _7.url) ? resolveAssetUrl(element.props.url) : null;
+            let LottieView = null;
+            try {
+                LottieView = require('lottie-react-native').default;
             }
+            catch (_22) { }
+            if (LottieView && lottieUrl) {
+                // Decode base64 data URLs to get the Lottie JSON object
+                let lottieSource;
+                if (lottieUrl.startsWith('data:application/json;base64,')) {
+                    try {
+                        const base64Data = lottieUrl.replace('data:application/json;base64,', '');
+                        const jsonString = atob(base64Data);
+                        lottieSource = JSON.parse(jsonString);
+                    }
+                    catch (_23) {
+                        lottieSource = { uri: lottieUrl };
+                    }
+                }
+                else {
+                    lottieSource = { uri: lottieUrl };
+                }
+                return (<react_native_1.View style={[style, { backgroundColor: style.backgroundColor || '#f8f8ff', overflow: 'hidden' }]}>
+            <LottieView source={lottieSource} style={{ width: '100%', height: '100%' }} autoPlay={((_8 = element.props) === null || _8 === void 0 ? void 0 : _8.autoPlay) !== false} loop={((_9 = element.props) === null || _9 === void 0 ? void 0 : _9.loop) !== false} speed={((_10 = element.props) === null || _10 === void 0 ? void 0 : _10.speed) || 1}/>
+          </react_native_1.View>);
+            }
+            // Fallback when lottie-react-native is unavailable or no URL
             return (<react_native_1.View style={[
                     style,
                     {
@@ -483,23 +513,24 @@ const RenderNode = ({ element, toggledIds, groupSelections, onAction, variables,
                     },
                 ]}>
           <react_native_1.Text style={{ fontSize: 48 }}>✨</react_native_1.Text>
-          {((_4 = element.props) === null || _4 === void 0 ? void 0 : _4.animationDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#666', textAlign: 'center', padding: 8 }}>
+          {((_11 = element.props) === null || _11 === void 0 ? void 0 : _11.animationDescription) && (<react_native_1.Text style={{ fontSize: 11, color: '#666', textAlign: 'center', padding: 8 }}>
               {element.props.animationDescription}
             </react_native_1.Text>)}
         </react_native_1.View>);
+        }
         case 'input': {
             // Only apply default border if borderWidth is not explicitly defined (including 0)
             const inputStyle = style;
             const defaultInputStyle = {};
-            if (((_5 = element.style) === null || _5 === void 0 ? void 0 : _5.borderWidth) === undefined && ((_6 = element.style) === null || _6 === void 0 ? void 0 : _6.borderColor) === undefined) {
+            if (((_12 = element.style) === null || _12 === void 0 ? void 0 : _12.borderWidth) === undefined && ((_13 = element.style) === null || _13 === void 0 ? void 0 : _13.borderColor) === undefined) {
                 defaultInputStyle.borderWidth = 1;
                 defaultInputStyle.borderColor = '#E5E5E5';
             }
             // Get the variable name - use props.variable if specified, otherwise use element.id
-            const variableName = ((_7 = element.props) === null || _7 === void 0 ? void 0 : _7.variable) || element.id;
+            const variableName = ((_14 = element.props) === null || _14 === void 0 ? void 0 : _14.variable) || element.id;
             // Use local state value, or fall back to variables, or empty string
-            const currentValue = (_9 = (_8 = inputValues[variableName]) !== null && _8 !== void 0 ? _8 : variables[variableName]) !== null && _9 !== void 0 ? _9 : '';
-            return (<react_native_1.TextInput style={[defaultInputStyle, inputStyle]} placeholder={((_10 = element.props) === null || _10 === void 0 ? void 0 : _10.placeholder) || 'Enter text...'} keyboardType={getKeyboardType((_11 = element.props) === null || _11 === void 0 ? void 0 : _11.type)} secureTextEntry={((_12 = element.props) === null || _12 === void 0 ? void 0 : _12.type) === 'password'} autoCapitalize={((_13 = element.props) === null || _13 === void 0 ? void 0 : _13.type) === 'email' ? 'none' : 'sentences'} value={currentValue} onChangeText={(text) => {
+            const currentValue = (_16 = (_15 = inputValues[variableName]) !== null && _15 !== void 0 ? _15 : variables[variableName]) !== null && _16 !== void 0 ? _16 : '';
+            return (<react_native_1.TextInput style={[defaultInputStyle, inputStyle]} placeholder={((_17 = element.props) === null || _17 === void 0 ? void 0 : _17.placeholder) || 'Enter text...'} keyboardType={getKeyboardType((_18 = element.props) === null || _18 === void 0 ? void 0 : _18.type)} secureTextEntry={((_19 = element.props) === null || _19 === void 0 ? void 0 : _19.type) === 'password'} autoCapitalize={((_20 = element.props) === null || _20 === void 0 ? void 0 : _20.type) === 'email' ? 'none' : 'sentences'} value={currentValue} onChangeText={(text) => {
                     // Save to local state only - don't trigger parent re-render
                     setInputValues(prev => (Object.assign(Object.assign({}, prev), { [variableName]: text })));
                 }}/>);

package/lib/types.d.ts

@@ -233,4 +233,5 @@ export interface OnboardingFlowProps {
     initialVariables?: Record<string, any>;
     customComponents?: Record<string, React.ComponentType<CustomScreenProps>>;
     onUserIdGenerated?: (userId: string) => void;
+    loadingComponent?: React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noboarding",
-  "version": "1.0.6-beta",
+  "version": "1.0.8",
   "description": "Expo SDK for remote onboarding flow management",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,7 +31,9 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.19.0",
     "expo-linear-gradient": ">=12.0.0",
-    "@expo/vector-icons": ">=14.0.0"
+    "@expo/vector-icons": ">=14.0.0",
+    "expo-av": ">=14.0.0",
+    "lottie-react-native": ">=6.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.2.3",

package/src/OnboardingFlow.tsx

@@ -51,6 +51,7 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
   initialVariables,
   customComponents,
   onUserIdGenerated,
+  loadingComponent,
 }) => {
   // Determine which API key to use
   const getApiKey = (): string => {
@@ -285,6 +286,9 @@ export const OnboardingFlow: React.FC<OnboardingFlowProps> = ({
   };
 
   if (loading) {
+    if (loadingComponent) {
+      return <>{loadingComponent}</>;
+    }
     return (
       <View style={styles.centerContainer}>
         <ActivityIndicator size="large" color="#007AFF" />

package/src/components/ElementRenderer.tsx

@@ -591,13 +591,32 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
         </View>
       );
 
-    case 'video':
-      // Video placeholder — actual implementation would use expo-av or react-native-video
-      // Resolve asset URL if present (for future implementation)
-      if (element.props?.url) {
-        const resolvedUrl = resolveAssetUrl(element.props.url);
-        // TODO: Implement actual video player with resolvedUrl
+    case 'video': {
+      const videoUrl = element.props?.url ? resolveAssetUrl(element.props.url) : null;
+      let VideoComponent: any = null;
+      try {
+        const expoAv = require('expo-av');
+        VideoComponent = expoAv.Video;
+      } catch {}
+
+      if (VideoComponent && videoUrl) {
+        const resizeMode = element.props?.resizeMode || 'contain';
+        return (
+          <View style={[style, { backgroundColor: (style as ViewStyle).backgroundColor || '#1a1a1a', overflow: 'hidden' }]}>
+            <VideoComponent
+              source={{ uri: videoUrl }}
+              style={{ width: '100%', height: '100%' }}
+              resizeMode={resizeMode}
+              shouldPlay={element.props?.autoPlay !== false}
+              isLooping={element.props?.loop !== false}
+              isMuted={element.props?.muted !== false}
+              useNativeControls={false}
+            />
+          </View>
+        );
       }
+
+      // Fallback when expo-av is unavailable or no URL
       return (
         <View
           style={[
@@ -617,14 +636,44 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
           )}
         </View>
       );
+    }
 
-    case 'lottie':
-      // Lottie placeholder — actual implementation would use lottie-react-native
-      // Resolve asset URL if present (for future implementation)
-      if (element.props?.url) {
-        const resolvedUrl = resolveAssetUrl(element.props.url);
-        // TODO: Implement actual Lottie player with resolvedUrl
+    case 'lottie': {
+      const lottieUrl = element.props?.url ? resolveAssetUrl(element.props.url) : null;
+      let LottieView: any = null;
+      try {
+        LottieView = require('lottie-react-native').default;
+      } catch {}
+
+      if (LottieView && lottieUrl) {
+        // Decode base64 data URLs to get the Lottie JSON object
+        let lottieSource: any;
+        if (lottieUrl.startsWith('data:application/json;base64,')) {
+          try {
+            const base64Data = lottieUrl.replace('data:application/json;base64,', '');
+            const jsonString = atob(base64Data);
+            lottieSource = JSON.parse(jsonString);
+          } catch {
+            lottieSource = { uri: lottieUrl };
+          }
+        } else {
+          lottieSource = { uri: lottieUrl };
+        }
+
+        return (
+          <View style={[style, { backgroundColor: (style as ViewStyle).backgroundColor || '#f8f8ff', overflow: 'hidden' }]}>
+            <LottieView
+              source={lottieSource}
+              style={{ width: '100%', height: '100%' }}
+              autoPlay={element.props?.autoPlay !== false}
+              loop={element.props?.loop !== false}
+              speed={element.props?.speed || 1}
+            />
+          </View>
+        );
       }
+
+      // Fallback when lottie-react-native is unavailable or no URL
       return (
         <View
           style={[
@@ -644,6 +693,7 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
           )}
         </View>
       );
+    }
 
     case 'input': {
       // Only apply default border if borderWidth is not explicitly defined (including 0)

package/src/types.ts

@@ -300,4 +300,5 @@ export interface OnboardingFlowProps {
   initialVariables?: Record<string, any>; // seed the variable store
   customComponents?: Record<string, React.ComponentType<CustomScreenProps>>;
   onUserIdGenerated?: (userId: string) => void; // Called when user ID is generated for analytics
+  loadingComponent?: React.ReactNode; // Custom loading UI shown while fetching flow config
 }