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

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { View } from "react-native";
+import type { ViewStyle } from "react-native";
+import type { GradientBackground } from "./BaseBoxProps";
+
+let LinearGradient: React.ComponentType<{
+  colors: readonly [string, string, ...string[]];
+  start?: { x: number; y: number };
+  end?: { x: number; y: number };
+  locations?: number[];
+  style?: object;
+  children?: React.ReactNode;
+}> | null = null;
+
+try {
+  LinearGradient = require("expo-linear-gradient").LinearGradient;
+} catch {
+  // expo-linear-gradient not installed
+}
+
+const EDGE_POINT: Record<string, { x: number; y: number }> = {
+  top:         { x: 0.5, y: 0 },
+  bottom:      { x: 0.5, y: 1 },
+  left:        { x: 0,   y: 0.5 },
+  right:       { x: 1,   y: 0.5 },
+  topLeft:     { x: 0,   y: 0 },
+  topRight:    { x: 1,   y: 0 },
+  bottomLeft:  { x: 0,   y: 1 },
+  bottomRight: { x: 1,   y: 1 },
+};
+
+type Props = {
+  gradient?: GradientBackground;
+  style?: ViewStyle;
+  children?: React.ReactNode;
+};
+
+export const GradientBox = ({ gradient, style, children }: Props): React.ReactElement => {
+  if (gradient?.type === "linear" && LinearGradient) {
+    const colors = gradient.stops.map((s) => s.color) as [string, string, ...string[]];
+    const allHavePositions = gradient.stops.every((s) => s.position !== undefined);
+    const locations = allHavePositions ? (gradient.stops.map((s) => s.position!) as number[]) : undefined;
+    return (
+      <LinearGradient
+        colors={colors}
+        start={EDGE_POINT[gradient.from]}
+        end={EDGE_POINT[gradient.to]}
+        locations={locations}
+        style={style}
+      >
+        {children}
+      </LinearGradient>
+    );
+  }
+  return <View style={style}>{children}</View>;
+};

package/src/UI/Pages/ComposableScreen/elements/IconElement.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 IconElementProps = BaseBoxProps & {
   name: string;
@@ -38,7 +38,8 @@ export const IconElementComponent = ({ element, ctx }: Props): React.ReactElemen
   }> | undefined;
 
   return (
-    <View
+    <GradientBox
+      gradient={element.props.backgroundGradient}
       style={{
         flex: element.props.flex,
         flexShrink: element.props.flexShrink,
@@ -60,7 +61,7 @@ export const IconElementComponent = ({ element, ctx }: Props): React.ReactElemen
         borderWidth: element.props.borderWidth,
         borderRadius: element.props.borderRadius,
         borderColor: element.props.borderColor,
-        backgroundColor: element.props.backgroundColor,
+        backgroundColor: element.props.backgroundGradient ? undefined : element.props.backgroundColor,
         opacity: element.props.opacity,
       }}
     >
@@ -71,6 +72,6 @@ export const IconElementComponent = ({ element, ctx }: Props): React.ReactElemen
           strokeWidth={element.props.strokeWidth ?? 2}
         />
       ) : null}
-    </View>
+    </GradientBox>
   );
 };

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

@@ -4,6 +4,7 @@ import { Image } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
 import { RenderContext, dim } from "./shared";
+import { GradientBox } from "./GradientBox";
 
 export type ImageElementProps = BaseBoxProps & {
   url: string;
@@ -27,33 +28,72 @@ type Props = {
 export const ImageElementComponent = ({ element }: Props): React.ReactElement => {
   const hasExplicitHeight = element.props.height !== undefined;
 
+  const p = element.props;
+
+  if (p.backgroundGradient) {
+    return (
+      <GradientBox
+        gradient={p.backgroundGradient}
+        style={{
+          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,
+          overflow: (p.overflow ?? "hidden") as any,
+          borderRadius: p.borderRadius,
+          borderWidth: p.borderWidth,
+          borderColor: p.borderColor,
+          opacity: p.opacity,
+          margin: p.margin,
+          marginHorizontal: p.marginHorizontal,
+          marginVertical: p.marginVertical,
+          padding: p.padding,
+          paddingHorizontal: p.paddingHorizontal,
+          paddingVertical: p.paddingVertical,
+        }}
+      >
+        <Image
+          source={{ uri: p.url }}
+          resizeMode={p.resizeMode}
+          style={{ width: "100%", height: "100%" }}
+        />
+      </GradientBox>
+    );
+  }
+
   return (
     <Image
-      source={{ uri: element.props.url }}
-      resizeMode={element.props.resizeMode}
+      source={{ uri: p.url }}
+      resizeMode={p.resizeMode}
       style={({
-        flex: element.props.flex,
-        flexShrink: element.props.flexShrink,
-        flexGrow: element.props.flexGrow,
-        alignSelf: element.props.alignSelf,
-        width: dim(element.props.width),
-        height: dim(element.props.height),
-        minWidth: element.props.minWidth,
-        maxWidth: element.props.maxWidth,
-        minHeight: element.props.minHeight,
-        maxHeight: element.props.maxHeight,
-        backgroundColor: element.props.backgroundColor,
-        overflow: element.props.overflow,
-        borderRadius: element.props.borderRadius,
-        borderWidth: element.props.borderWidth,
-        borderColor: element.props.borderColor,
-        opacity: element.props.opacity,
-        margin: element.props.margin,
-        marginHorizontal: element.props.marginHorizontal,
-        marginVertical: element.props.marginVertical,
-        padding: element.props.padding,
-        paddingHorizontal: element.props.paddingHorizontal,
-        paddingVertical: element.props.paddingVertical,
+        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,
+        backgroundColor: p.backgroundColor,
+        overflow: p.overflow,
+        borderRadius: p.borderRadius,
+        borderWidth: p.borderWidth,
+        borderColor: p.borderColor,
+        opacity: p.opacity,
+        margin: p.margin,
+        marginHorizontal: p.marginHorizontal,
+        marginVertical: p.marginVertical,
+        padding: p.padding,
+        paddingHorizontal: p.paddingHorizontal,
+        paddingVertical: p.paddingVertical,
       }) as any}
     />
   );

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;
@@ -30,7 +30,8 @@ type Props = {
 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;
@@ -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;
@@ -76,7 +77,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 +92,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/types.ts

@@ -211,7 +211,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>;