@rocapine/react-native-onboarding-ui 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/UI/Pages/MediaContent/Renderer.tsx

@@ -14,15 +14,13 @@ type ContentProps = {
 const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentProps) => {
   // Validate the schema
   const validatedData = MediaContentStepTypeSchema.parse(step);
-  const { mediaSource, title, description } = validatedData.payload;
+  const { mediaSource, title, description, layoutStyle = "default" } = validatedData.payload;
 
   const renderMedia = () => {
     if (mediaSource.type === "image") {
-      // Check if it's a local path or URL
       if ("localPathId" in mediaSource) {
-        // TODO: Map localPathId to actual local image path
         return (
-          <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+          <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
             <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>
               Image: {mediaSource.localPathId}
             </Text>
@@ -30,36 +28,92 @@ const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: Co
         );
       } else if ("url" in mediaSource) {
         return (
-          <Image
-            source={{ uri: mediaSource.url }}
-            style={styles.mediaImage}
-            resizeMode="cover"
-          />
+          <View style={styles.mediaContainer}>
+            <Image source={{ uri: mediaSource.url }} style={styles.mediaImage} resizeMode="cover" />
+          </View>
         );
       }
     } else if (mediaSource.type === "lottie") {
-      // TODO: Implement Lottie animation support
       return (
-        <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
           <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Lottie Animation</Text>
         </View>
       );
     } else if (mediaSource.type === "rive") {
-      // Rive animation placeholder
       return (
-        <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
           <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Rive Animation</Text>
         </View>
       );
     }
 
     return (
-      <View style={[styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
+      <View style={[styles.mediaContainer, styles.mediaPlaceholder, { backgroundColor: theme.colors.neutral.lowest }]}>
         <Text style={[getTextStyle(theme, "body"), styles.placeholderText, { color: theme.colors.text.disable }]}>Media</Text>
       </View>
     );
   };
 
+  const renderTextBlock = () => (
+    <>
+      <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
+      {description && <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>{description}</Text>}
+    </>
+  );
+
+  const renderContent = () => {
+    switch (layoutStyle) {
+      case "media_bottom":
+        return (
+          <ScrollView
+            contentContainerStyle={[styles.scrollContent, { paddingTop: 0 }]}
+            showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
+          >
+            <View style={[styles.container, styles.containerSpaceBetween]}>
+              <View style={styles.textBlock}>{renderTextBlock()}</View>
+              <View style={styles.flexSpacer} />
+              {renderMedia()}
+            </View>
+          </ScrollView>
+        );
+
+      case "media_top":
+        return (
+          <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
+          >
+            <View style={styles.container}>
+              {renderMedia()}
+              {renderTextBlock()}
+            </View>
+          </ScrollView>
+        );
+
+      case "default":
+      default:
+        return (
+          <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
+          >
+            <View style={[styles.container, styles.containerCenter]}>
+              <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
+              {renderMedia()}
+              {description && (
+                <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>
+                  {description}
+                </Text>
+              )}
+            </View>
+          </ScrollView>
+        );
+    }
+  };
+
   return (
     <OnboardingTemplate
       step={step}
@@ -67,22 +121,7 @@ const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: Co
       theme={theme}
       button={{ text: validatedData.continueButtonLabel }}
     >
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-        alwaysBounceVertical={false}
-      >
-        <View style={styles.container}>
-          {/* Title */}
-          <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
-
-          {/* Media Content */}
-          <View style={styles.mediaContainer}>{renderMedia()}</View>
-
-          {/* Description/Subtitle */}
-          {description && <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>{description}</Text>}
-        </View>
-      </ScrollView>
+      {renderContent()}
     </OnboardingTemplate>
   );
 };
@@ -99,13 +138,28 @@ const styles = StyleSheet.create({
     gap: 24,
     alignItems: "center",
   },
+  containerCenter: {
+    justifyContent: "center",
+  },
+  containerSpaceBetween: {
+    justifyContent: "flex-start",
+    paddingTop: 32,
+  },
+  flexSpacer: {
+    flex: 0.4,
+  },
+  textBlock: {
+    gap: 8,
+    alignItems: "center",
+    width: "100%",
+  },
   title: {
     textAlign: "center",
     letterSpacing: -0.76,
   },
   mediaContainer: {
     width: "100%",
-    height: 400,
+    aspectRatio: 1,
     borderRadius: 32,
     overflow: "hidden",
   },

package/src/UI/Pages/MediaContent/types.ts

@@ -5,11 +5,16 @@ import {
   SocialProofSchema,
 } from "../types";
 
+export const MediaContentLayoutStyleSchema = z
+  .enum(["default", "media_top", "media_bottom"])
+  .default("default");
+
 export const MediaContentStepPayloadSchema = z.object({
   mediaSource: MediaSourceSchema,
   title: z.string(),
   description: z.string().nullish(),
   socialProof: SocialProofSchema.nullish(),
+  layoutStyle: MediaContentLayoutStyleSchema.optional(),
 });
 
 export const MediaContentStepTypeSchema = z.object({