@rocapine/react-native-onboarding-ui 1.12.0 → 1.14.0

package/src/UI/Pages/ComposableScreen/elements/LottieElement.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { z } from "zod";
-import { View, Text, StyleSheet } from "react-native";
+import { Text, StyleSheet } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, dim } from "./shared";
 import { getTextStyle } from "../../../Theme/helpers";
+import { GradientBox } from "./GradientBox";
 
 export type LottieElementProps = BaseBoxProps & {
   source: string;
@@ -54,7 +55,7 @@ export const LottieElementComponent = ({ element, ctx }: Props): React.ReactElem
     minHeight: element.props.minHeight,
     maxHeight: element.props.maxHeight,
     opacity: element.props.opacity,
-    backgroundColor: element.props.backgroundColor,
+    backgroundColor: element.props.backgroundGradient ? undefined : element.props.backgroundColor,
     margin: element.props.margin,
     marginHorizontal: element.props.marginHorizontal,
     marginVertical: element.props.marginVertical,
@@ -69,16 +70,19 @@ export const LottieElementComponent = ({ element, ctx }: Props): React.ReactElem
 
   if (!LottieView) {
     return (
-      <View style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
+      <GradientBox
+        gradient={element.props.backgroundGradient}
+        style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }] as any}
+      >
         <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
           Install lottie-react-native to render Lottie animations.
         </Text>
-      </View>
+      </GradientBox>
     );
   }
 
   return (
-    <View style={wrapperStyle}>
+    <GradientBox gradient={element.props.backgroundGradient} style={wrapperStyle as any}>
       <LottieView
         source={{ uri: element.props.source }}
         autoPlay={element.props.autoPlay ?? true}
@@ -86,7 +90,7 @@ export const LottieElementComponent = ({ element, ctx }: Props): React.ReactElem
         speed={element.props.speed}
         style={styles.fill}
       />
-    </View>
+    </GradientBox>
   );
 };
 

package/src/UI/Pages/ComposableScreen/elements/RadioGroupElement.tsx

@@ -4,6 +4,7 @@ import { View, Text, TouchableOpacity } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, dim } from "./shared";
+import { GradientBox } from "./GradientBox";
 
 export type RadioGroupElementProps = BaseBoxProps & {
   variableName?: string;
@@ -85,8 +86,8 @@ export const RadioGroupComponent = ({ element, ctx }: Props): React.ReactElement
   const isHorizontal = element.props.direction === "horizontal";
 
   return (
-    <View
-      accessibilityRole="radiogroup"
+    <GradientBox
+      gradient={element.props.backgroundGradient}
       style={{
         flexDirection: isHorizontal ? "row" : "column",
         flexWrap: isHorizontal ? "wrap" : undefined,
@@ -103,6 +104,7 @@ export const RadioGroupComponent = ({ element, ctx }: Props): React.ReactElement
         borderWidth: element.props.borderWidth,
         borderRadius: element.props.borderRadius,
         borderColor: element.props.borderColor,
+        backgroundColor: element.props.backgroundGradient ? undefined : element.props.backgroundColor,
         opacity: element.props.opacity,
       }}
     >
@@ -177,6 +179,6 @@ export const RadioGroupComponent = ({ element, ctx }: Props): React.ReactElement
           </TouchableOpacity>
         );
       })}
-    </View>
+    </GradientBox>
   );
 };

package/src/UI/Pages/ComposableScreen/elements/StackElement.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { z } from "zod";
-import { View } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, dim } from "./shared";
+import { GradientBox } from "./GradientBox";
 
 export type StackElementProps = BaseBoxProps & {
   gap?: number;
@@ -24,13 +24,14 @@ type StackUIElement = Extract<UIElement, { type: "YStack" | "XStack" }>;
 type Props = {
   element: StackUIElement;
   ctx: RenderContext;
-  parentType?: "XStack" | "YStack";
+  parentType?: "XStack" | "YStack" | "ZStack";
 };
 
 export const StackElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
   const p = element.props;
   return (
-    <View
+    <GradientBox
+      gradient={p.backgroundGradient}
       style={{
         flexDirection: element.type === "XStack" ? "row" : "column",
         gap: p.gap,
@@ -53,7 +54,7 @@ export const StackElementComponent = ({ element, ctx, parentType }: Props): Reac
         margin: p.margin,
         marginHorizontal: p.marginHorizontal,
         marginVertical: p.marginVertical,
-        backgroundColor: p.backgroundColor,
+        backgroundColor: p.backgroundGradient ? undefined : p.backgroundColor,
         borderWidth: p.borderWidth,
         borderRadius: p.borderRadius,
         borderColor: p.borderColor,
@@ -62,6 +63,6 @@ export const StackElementComponent = ({ element, ctx, parentType }: Props): Reac
       }}
     >
       {ctx.renderChildren(element.children, element.type)}
-    </View>
+    </GradientBox>
   );
 };

package/src/UI/Pages/ComposableScreen/elements/TextElement.tsx

@@ -4,6 +4,7 @@ import { Text } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, interpolate, dim } from "./shared";
+import { GradientBox } from "./GradientBox";
 
 export type TextElementProps = BaseBoxProps & {
   content: string;
@@ -34,7 +35,7 @@ type TextUIElement = Extract<UIElement, { type: "Text" }>;
 type Props = {
   element: TextUIElement;
   ctx: RenderContext;
-  parentType?: "XStack" | "YStack";
+  parentType?: "XStack" | "YStack" | "ZStack";
 };
 
 export const TextElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
@@ -45,19 +46,19 @@ export const TextElementComponent = ({ element, ctx, parentType }: Props): React
       ? interpolate(p.content, variables)
       : p.content;
 
-  return (
+  const textNode = (
     <Text
       style={{
         flex: p.flex,
         flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
-        flexGrow: p.flexGrow,
-        alignSelf: p.alignSelf,
-        width: dim(p.width),
-        height: dim(p.height),
-        minWidth: p.minWidth,
-        maxWidth: p.maxWidth,
-        minHeight: p.minHeight,
-        maxHeight: p.maxHeight,
+        flexGrow: p.backgroundGradient ? undefined : p.flexGrow,
+        alignSelf: p.backgroundGradient ? undefined : p.alignSelf,
+        width: p.backgroundGradient ? undefined : dim(p.width),
+        height: p.backgroundGradient ? undefined : dim(p.height),
+        minWidth: p.backgroundGradient ? undefined : p.minWidth,
+        maxWidth: p.backgroundGradient ? undefined : p.maxWidth,
+        minHeight: p.backgroundGradient ? undefined : p.minHeight,
+        maxHeight: p.backgroundGradient ? undefined : p.maxHeight,
         fontSize: p.fontSize,
         fontWeight: p.fontWeight as any,
         fontFamily: p.fontFamily,
@@ -65,20 +66,55 @@ export const TextElementComponent = ({ element, ctx, parentType }: Props): React
         textAlign: p.textAlign,
         letterSpacing: p.letterSpacing,
         lineHeight: p.lineHeight,
-        backgroundColor: p.backgroundColor,
-        padding: p.padding,
-        paddingHorizontal: p.paddingHorizontal,
-        paddingVertical: p.paddingVertical,
-        margin: p.margin,
-        marginHorizontal: p.marginHorizontal,
-        marginVertical: p.marginVertical,
-        borderWidth: p.borderWidth,
-        borderRadius: p.borderRadius,
-        borderColor: p.borderColor,
-        opacity: p.opacity,
+        backgroundColor: p.backgroundGradient ? undefined : p.backgroundColor,
+        padding: p.backgroundGradient ? undefined : p.padding,
+        paddingHorizontal: p.backgroundGradient ? undefined : p.paddingHorizontal,
+        paddingVertical: p.backgroundGradient ? undefined : p.paddingVertical,
+        margin: p.backgroundGradient ? undefined : p.margin,
+        marginHorizontal: p.backgroundGradient ? undefined : p.marginHorizontal,
+        marginVertical: p.backgroundGradient ? undefined : p.marginVertical,
+        borderWidth: p.backgroundGradient ? undefined : p.borderWidth,
+        borderRadius: p.backgroundGradient ? undefined : p.borderRadius,
+        borderColor: p.backgroundGradient ? undefined : p.borderColor,
+        opacity: p.backgroundGradient ? undefined : p.opacity,
       }}
     >
       {content}
     </Text>
   );
+
+  if (p.backgroundGradient) {
+    return (
+      <GradientBox
+        gradient={p.backgroundGradient}
+        style={{
+          flex: p.flex,
+          flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+          flexGrow: p.flexGrow,
+          alignSelf: p.alignSelf,
+          width: dim(p.width),
+          height: dim(p.height),
+          minWidth: p.minWidth,
+          maxWidth: p.maxWidth,
+          minHeight: p.minHeight,
+          maxHeight: p.maxHeight,
+          padding: p.padding,
+          paddingHorizontal: p.paddingHorizontal,
+          paddingVertical: p.paddingVertical,
+          margin: p.margin,
+          marginHorizontal: p.marginHorizontal,
+          marginVertical: p.marginVertical,
+          borderWidth: p.borderWidth,
+          borderRadius: p.borderRadius,
+          borderColor: p.borderColor,
+          opacity: p.opacity,
+          overflow: "hidden",
+        }}
+      >
+        {textNode}
+      </GradientBox>
+    );
+  }
+
+  return textNode;
 };

package/src/UI/Pages/ComposableScreen/elements/VideoElement.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from "react";
 import { z } from "zod";
-import { View, Text, StyleSheet } from "react-native";
+import { Text, StyleSheet } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, dim } from "./shared";
 import { getTextStyle } from "../../../Theme/helpers";
+import { GradientBox } from "./GradientBox";
 
 export type VideoElementProps = BaseBoxProps & {
   url: string;
@@ -12,6 +13,7 @@ export type VideoElementProps = BaseBoxProps & {
   loop?: boolean;
   muted?: boolean;
   controls?: boolean;
+  contentFit?: "contain" | "cover" | "fill";
 };
 
 export const VideoElementPropsSchema = BaseBoxPropsSchema.extend({
@@ -20,6 +22,7 @@ export const VideoElementPropsSchema = BaseBoxPropsSchema.extend({
   loop: z.boolean().optional(),
   muted: z.boolean().optional(),
   controls: z.boolean().optional(),
+  contentFit: z.enum(["contain", "cover", "fill"]).optional(),
 });
 
 type VideoUIElement = Extract<UIElement, { type: "Video" }>;
@@ -50,6 +53,7 @@ try {
         style={style}
         allowsFullscreen={false}
         nativeControls={element.props.controls ?? false}
+        contentFit={element.props.contentFit ?? "contain"}
       />
     );
   };
@@ -76,7 +80,7 @@ export const VideoElementRenderer = ({ element, ctx }: Props): React.ReactElemen
     minHeight: element.props.minHeight,
     maxHeight: element.props.maxHeight,
     opacity: element.props.opacity,
-    backgroundColor: element.props.backgroundColor,
+    backgroundColor: element.props.backgroundGradient ? undefined : element.props.backgroundColor,
     margin: element.props.margin,
     marginHorizontal: element.props.marginHorizontal,
     marginVertical: element.props.marginVertical,
@@ -91,18 +95,21 @@ export const VideoElementRenderer = ({ element, ctx }: Props): React.ReactElemen
 
   if (!VideoElementComponent) {
     return (
-      <View style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
+      <GradientBox
+        gradient={element.props.backgroundGradient}
+        style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }] as any}
+      >
         <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
           Install expo-video to render videos.
         </Text>
-      </View>
+      </GradientBox>
     );
   }
 
   return (
-    <View style={wrapperStyle}>
+    <GradientBox gradient={element.props.backgroundGradient} style={wrapperStyle as any}>
       <VideoElementComponent element={element} style={styles.fill} />
-    </View>
+    </GradientBox>
   );
 };
 

package/src/UI/Pages/ComposableScreen/elements/ZStackElement.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext, dim } from "./shared";
+import { GradientBox } from "./GradientBox";
+
+export type ZStackElementProps = BaseBoxProps;
+export const ZStackElementPropsSchema = BaseBoxPropsSchema;
+
+type ZStackUIElement = Extract<UIElement, { type: "ZStack" }>;
+
+type Props = {
+  element: ZStackUIElement;
+  ctx: RenderContext;
+};
+
+export const ZStackElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const p = element.props;
+  return (
+    <GradientBox
+      gradient={p.backgroundGradient}
+      style={{
+        position: "relative",
+        flex: p.flex,
+        flexShrink: p.flexShrink,
+        flexGrow: p.flexGrow,
+        alignSelf: p.alignSelf,
+        width: dim(p.width),
+        height: dim(p.height),
+        minWidth: p.minWidth,
+        maxWidth: p.maxWidth,
+        minHeight: p.minHeight,
+        maxHeight: p.maxHeight,
+        padding: p.padding,
+        paddingHorizontal: p.paddingHorizontal,
+        paddingVertical: p.paddingVertical,
+        margin: p.margin,
+        marginHorizontal: p.marginHorizontal,
+        marginVertical: p.marginVertical,
+        backgroundColor: p.backgroundGradient ? undefined : p.backgroundColor,
+        borderWidth: p.borderWidth,
+        borderRadius: p.borderRadius,
+        borderColor: p.borderColor,
+        overflow: p.overflow,
+        opacity: p.opacity,
+      }}
+    >
+      {element.children.map((child) => (
+        <View
+          key={child.id}
+          pointerEvents="box-none"
+          style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
+        >
+          {ctx.renderChildren([child], "ZStack")}
+        </View>
+      ))}
+    </GradientBox>
+  );
+};

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -14,11 +14,12 @@ import { CheckboxGroupComponent } from "./CheckboxGroupElement";
 import { ButtonElementComponent } from "./ButtonElement";
 import { DatePickerElementComponent } from "./DatePickerElement";
 import { CarouselElementComponent } from "./CarouselElement";
+import { ZStackElementComponent } from "./ZStackElement";
 
 export const renderElement = (
   element: UIElement,
   ctx: RenderContext,
-  parentType?: "XStack" | "YStack"
+  parentType?: "XStack" | "YStack" | "ZStack"
 ): React.ReactNode => {
   if (element.type === "YStack" || element.type === "XStack") {
     return <StackElementComponent key={element.id} element={element} ctx={ctx} parentType={parentType} />;
@@ -72,5 +73,9 @@ export const renderElement = (
     return <CarouselElementComponent key={element.id} element={element} ctx={ctx} />;
   }
 
+  if (element.type === "ZStack") {
+    return <ZStackElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
   return null;
 };

package/src/UI/Pages/ComposableScreen/elements/shared.ts

@@ -8,7 +8,7 @@ export type RenderContext = {
   variables: Record<string, ComposableVariableEntry>;
   setVariable: (key: string, entry: ComposableVariableEntry) => void;
   onContinue: () => void;
-  renderChildren: (elements: UIElement[], parentType: "XStack" | "YStack") => React.ReactNode;
+  renderChildren: (elements: UIElement[], parentType: "XStack" | "YStack" | "ZStack") => React.ReactNode;
 };
 
 export const interpolate = (template: string, variables: Record<string, ComposableVariableEntry>): string =>

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

@@ -13,6 +13,7 @@ import { type RadioGroupElementProps, RadioGroupElementPropsSchema } from "./ele
 import { type CheckboxGroupElementProps, CheckboxGroupElementPropsSchema } from "./elements/CheckboxGroupElement";
 import { type DatePickerElementProps, DatePickerElementPropsSchema } from "./elements/DatePickerElement";
 import { type CarouselElementProps, CarouselElementPropsSchema } from "./elements/CarouselElement";
+import { type ZStackElementProps, ZStackElementPropsSchema } from "./elements/ZStackElement";
 
 export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
@@ -29,6 +30,7 @@ export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
 export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
 export type { DatePickerElementProps } from "./elements/DatePickerElement";
 export type { CarouselElementProps } from "./elements/CarouselElement";
+export type { ZStackElementProps } from "./elements/ZStackElement";
 
 // UIElement union — must live here (not in elements/) to avoid circular deps
 // because the Stack variant's children: UIElement[] references itself.
@@ -112,6 +114,13 @@ export type UIElement =
       type: "Carousel";
       props: CarouselElementProps;
       children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "ZStack";
+      props: ZStackElementProps;
+      children: UIElement[];
     };
 
 export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -196,6 +205,13 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       props: CarouselElementPropsSchema,
       children: z.array(UIElementSchema),
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("ZStack"),
+      props: ZStackElementPropsSchema,
+      children: z.array(UIElementSchema),
+    }),
   ])
 );
 
@@ -211,7 +227,7 @@ export const ComposableScreenStepTypeSchema = z.object({
   payload: ComposableScreenStepPayloadSchema,
   customPayload: CustomPayloadSchema,
   continueButtonLabel: z.string().optional().default("Continue"),
-  figmaUrl: z.string().nullable(),
+  figmaUrl: z.string().nullish(),
 });
 
 export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;