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

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

@@ -4,6 +4,7 @@ import { 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 ButtonElementProps = BaseBoxProps & {
   label: string;
@@ -55,13 +56,66 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
     ? (element.props.color ?? theme.colors.text.opposite)
     : (element.props.color ?? theme.colors.primary);
 
+  const hasGradient = isFilled && !!element.props.backgroundGradient;
+  const borderRadius = element.props.borderRadius ?? 90;
+
+  const labelNode = (
+    <Text
+      style={{
+        color: textColor,
+        fontSize: element.props.fontSize ?? theme.typography.textStyles.button.fontSize,
+        fontWeight: (element.props.fontWeight as any) ?? theme.typography.textStyles.button.fontWeight,
+        fontFamily: element.props.fontFamily,
+        textAlign: element.props.textAlign ?? "center",
+      }}
+    >
+      {element.props.label}
+    </Text>
+  );
+
+  if (hasGradient) {
+    return (
+      <GradientBox
+        gradient={element.props.backgroundGradient}
+        style={{
+          borderRadius,
+          borderWidth: isOutlined ? (element.props.borderWidth ?? 1) : (element.props.borderWidth ?? 0),
+          borderColor: isOutlined ? (element.props.borderColor ?? theme.colors.primary) : element.props.borderColor,
+          width: dim(element.props.width),
+          height: dim(element.props.height),
+          margin: element.props.margin,
+          marginHorizontal: element.props.marginHorizontal,
+          marginVertical: element.props.marginVertical,
+          opacity: element.props.opacity,
+          alignSelf: element.props.alignSelf ?? (element.props.width ? undefined : "stretch"),
+          overflow: "hidden",
+        }}
+      >
+        <TouchableOpacity
+          activeOpacity={0.8}
+          onPress={handlePress}
+          style={{
+            flex: 1,
+            padding: element.props.padding,
+            paddingVertical: element.props.paddingVertical ?? 14,
+            paddingHorizontal: element.props.paddingHorizontal ?? 24,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {labelNode}
+        </TouchableOpacity>
+      </GradientBox>
+    );
+  }
+
   return (
     <TouchableOpacity
       activeOpacity={0.8}
       onPress={handlePress}
       style={{
         backgroundColor: bgColor,
-        borderRadius: element.props.borderRadius ?? 90,
+        borderRadius,
         borderWidth: isOutlined ? (element.props.borderWidth ?? 1) : (element.props.borderWidth ?? 0),
         borderColor: isOutlined ? (element.props.borderColor ?? theme.colors.primary) : element.props.borderColor,
         padding: element.props.padding,
@@ -78,17 +132,7 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
         justifyContent: "center",
       }}
     >
-      <Text
-        style={{
-          color: textColor,
-          fontSize: element.props.fontSize ?? theme.typography.textStyles.button.fontSize,
-          fontWeight: (element.props.fontWeight as any) ?? theme.typography.textStyles.button.fontWeight,
-          fontFamily: element.props.fontFamily,
-          textAlign: element.props.textAlign ?? "center",
-        }}
-      >
-        {element.props.label}
-      </Text>
+      {labelNode}
     </TouchableOpacity>
   );
 };

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

@@ -1,11 +1,12 @@
 import React, { useRef } from "react";
-import { useWindowDimensions, View } from "react-native";
+import { useWindowDimensions } from "react-native";
 import { z } from "zod";
 import { useSharedValue } from "react-native-reanimated";
 import Carousel, { Pagination, ICarouselInstance } from "react-native-reanimated-carousel";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import type { UIElement } from "../types";
 import { dim, type RenderContext } from "./shared";
+import { GradientBox } from "./GradientBox";
 
 export type CarouselElementProps = BaseBoxProps & {
   carouselType?: "left-align" | "normal" | "parallax" | "stack";
@@ -79,7 +80,7 @@ export function CarouselElementComponent({ element, ctx }: Props): React.ReactEl
     borderRadius: props.borderRadius,
     borderWidth: props.borderWidth,
     borderColor: props.borderColor,
-    backgroundColor: props.backgroundColor,
+    backgroundColor: props.backgroundGradient ? undefined : props.backgroundColor,
     opacity: props.opacity,
     // Left-align shows the next slide peeking — must not clip
     overflow: carouselType === "left-align" ? ("visible" as const) : (props.overflow ?? ("hidden" as const)),
@@ -108,7 +109,7 @@ export function CarouselElementComponent({ element, ctx }: Props): React.ReactEl
   console.log(props.autoPlay, props.autoPlayInterval);
   console.log(element);
   return (
-    <View style={containerStyle}>
+    <GradientBox gradient={props.backgroundGradient} style={containerStyle as any}>
       <Carousel
         ref={ref}
         loop={props.loop}
@@ -147,6 +148,6 @@ export function CarouselElementComponent({ element, ctx }: Props): React.ReactEl
           }}
         />
       )}
-    </View>
+    </GradientBox>
   );
 }

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

@@ -4,6 +4,7 @@ import { View, Text, TouchableOpacity } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import type { UIElement } from "../types";
 import { dim, type RenderContext } from "./shared";
+import { GradientBox } from "./GradientBox";
 
 export type CheckboxGroupElementProps = BaseBoxProps & {
   variableName?: string;
@@ -102,8 +103,8 @@ export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElem
   const isHorizontal = element.props.direction === "horizontal";
 
   return (
-    <View
-      accessibilityRole="list"
+    <GradientBox
+      gradient={element.props.backgroundGradient}
       style={{
         flexDirection: isHorizontal ? "row" : "column",
         flexWrap: isHorizontal ? "wrap" : undefined,
@@ -120,6 +121,7 @@ export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElem
         borderWidth: element.props.borderWidth,
         borderRadius: element.props.borderRadius,
         borderColor: element.props.borderColor,
+        backgroundColor: element.props.backgroundGradient ? undefined : element.props.backgroundColor,
         opacity: element.props.opacity,
       }}
     >
@@ -195,6 +197,6 @@ export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElem
           </TouchableOpacity>
         );
       })}
-    </View>
+    </GradientBox>
   );
 };

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

@@ -5,6 +5,7 @@ import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { z } from "zod";
 import type { UIElement } from "../types";
 import { dim, type RenderContext } from "./shared";
+import { GradientBox } from "./GradientBox";
 
 export type DatePickerElementProps = BaseBoxProps & {
   variableName?: string;
@@ -105,6 +106,7 @@ export const DatePickerElementComponent = ({ element, ctx }: Props): React.React
     borderWidth: props.borderWidth,
     borderRadius: props.borderRadius,
     borderColor: props.borderColor,
+    backgroundColor: props.backgroundGradient ? undefined : props.backgroundColor,
     overflow: "hidden" as const,
   };
 
@@ -122,7 +124,7 @@ export const DatePickerElementComponent = ({ element, ctx }: Props): React.React
 
   if (Platform.OS === "android") {
     return (
-      <View style={containerStyle}>
+      <GradientBox gradient={props.backgroundGradient} style={containerStyle as any}>
         <Pressable
           onPress={() => setPickerVisible(true)}
           style={{
@@ -157,16 +159,16 @@ export const DatePickerElementComponent = ({ element, ctx }: Props): React.React
             }}
           />
         )}
-      </View>
+      </GradientBox>
     );
   }
 
   return (
-    <View style={containerStyle}>
+    <GradientBox gradient={props.backgroundGradient} style={containerStyle as any}>
       <DateTimePicker
         {...pickerProps}
         display={(props.display ?? "spinner") as any}
       />
-    </View>
+    </GradientBox>
   );
 };

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;
 };