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

package/dist/UI/Pages/ComposableScreen/types.d.ts

@@ -12,6 +12,7 @@ import { type RadioGroupElementProps } from "./elements/RadioGroupElement";
 import { type CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
 import { type DatePickerElementProps } from "./elements/DatePickerElement";
 import { type CarouselElementProps } from "./elements/CarouselElement";
+import { type ZStackElementProps } from "./elements/ZStackElement";
 export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
 export type { StackElementProps } from "./elements/StackElement";
@@ -27,6 +28,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";
 export type UIElement = {
     id: string;
     name?: string;
@@ -94,6 +96,12 @@ export type UIElement = {
     type: "Carousel";
     props: CarouselElementProps;
     children: UIElement[];
+} | {
+    id: string;
+    name?: string;
+    type: "ZStack";
+    props: ZStackElementProps;
+    children: UIElement[];
 };
 export declare const UIElementSchema: z.ZodType<UIElement>;
 export declare const ComposableScreenStepPayloadSchema: z.ZodObject<{
@@ -109,7 +117,7 @@ export declare const ComposableScreenStepTypeSchema: z.ZodObject<{
     }, z.core.$strip>;
     customPayload: z.ZodOptional<z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodAny>>>;
     continueButtonLabel: z.ZodDefault<z.ZodOptional<z.ZodString>>;
-    figmaUrl: z.ZodNullable<z.ZodString>;
+    figmaUrl: z.ZodOptional<z.ZodNullable<z.ZodString>>;
 }, z.core.$strip>;
 export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;
 //# sourceMappingURL=types.d.ts.map

package/dist/UI/Pages/ComposableScreen/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}

package/dist/UI/Pages/ComposableScreen/types.js

@@ -16,6 +16,7 @@ const RadioGroupElement_1 = require("./elements/RadioGroupElement");
 const CheckboxGroupElement_1 = require("./elements/CheckboxGroupElement");
 const DatePickerElement_1 = require("./elements/DatePickerElement");
 const CarouselElement_1 = require("./elements/CarouselElement");
+const ZStackElement_1 = require("./elements/ZStackElement");
 var BaseBoxProps_1 = require("./elements/BaseBoxProps");
 Object.defineProperty(exports, "BaseBoxPropsSchema", { enumerable: true, get: function () { return BaseBoxProps_1.BaseBoxPropsSchema; } });
 exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
@@ -99,6 +100,13 @@ exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
         props: CarouselElement_1.CarouselElementPropsSchema,
         children: zod_1.z.array(exports.UIElementSchema),
     }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.literal("ZStack"),
+        props: ZStackElement_1.ZStackElementPropsSchema,
+        children: zod_1.z.array(exports.UIElementSchema),
+    }),
 ]));
 exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
     elements: zod_1.z.array(exports.UIElementSchema),
@@ -111,6 +119,6 @@ exports.ComposableScreenStepTypeSchema = zod_1.z.object({
     payload: exports.ComposableScreenStepPayloadSchema,
     customPayload: types_1.CustomPayloadSchema,
     continueButtonLabel: zod_1.z.string().optional().default("Continue"),
-    figmaUrl: zod_1.z.string().nullable(),
+    figmaUrl: zod_1.z.string().nullish(),
 });
 //# sourceMappingURL=types.js.map

package/dist/UI/Pages/ComposableScreen/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "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",
@@ -46,12 +46,13 @@
   "peerDependencies": {
     "@react-native-community/datetimepicker": "*",
     "@react-native-picker/picker": "*",
-    "@rocapine/react-native-onboarding": "^1.11.1",
+    "@rocapine/react-native-onboarding": "^1.14.0",
     "@shopify/react-native-skia": ">=1.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@types/react": "*",
     "expo-router": ">=3.0.0",
     "expo-store-review": "*",
+    "expo-linear-gradient": "*",
     "expo-video": "*",
     "lottie-react-native": "*",
     "react": "*",
@@ -70,6 +71,9 @@
     "@shopify/react-native-skia": {
       "optional": true
     },
+    "expo-linear-gradient": {
+      "optional": true
+    },
     "expo-store-review": {
       "optional": true
     },

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

@@ -29,7 +29,7 @@ const ComposableScreenRendererBase = ({ step, onContinue }: ContentProps) => {
     [setComposableVariable, setHeadlessVariable]
   );
 
-  const renderChildren = (children: UIElement[], parentType: "XStack" | "YStack") =>
+  const renderChildren = (children: UIElement[], parentType: "XStack" | "YStack" | "ZStack") =>
     children.map((child) => renderElement(child, ctx, parentType));
 
   const ctx: RenderContext = {

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

@@ -1,5 +1,45 @@
 import { z } from "zod";
 
+export type GradientStop = {
+  color: string;
+  position?: number;
+};
+
+export type GradientEdge =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "topLeft"
+  | "topRight"
+  | "bottomLeft"
+  | "bottomRight";
+
+export type LinearGradientConfig = {
+  type: "linear";
+  from: GradientEdge;
+  to: GradientEdge;
+  stops: GradientStop[];
+};
+
+export type GradientBackground = LinearGradientConfig;
+
+const GradientEdgeSchema = z.enum(["top", "bottom", "left", "right", "topLeft", "topRight", "bottomLeft", "bottomRight"]);
+
+const GradientStopSchema = z.object({
+  color: z.string(),
+  position: z.number().min(0).max(1).optional(),
+});
+
+export const GradientBackgroundSchema = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("linear"),
+    from: GradientEdgeSchema,
+    to: GradientEdgeSchema,
+    stops: z.array(GradientStopSchema).min(2, "gradient requires at least 2 stops"),
+  }),
+]);
+
 export type BaseBoxProps = {
   width?: number | string;
   height?: number | string;
@@ -13,6 +53,7 @@ export type BaseBoxProps = {
   alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
   opacity?: number;
   backgroundColor?: string;
+  backgroundGradient?: GradientBackground;
   overflow?: "hidden" | "visible" | "scroll";
   margin?: number;
   marginHorizontal?: number;
@@ -38,6 +79,7 @@ export const BaseBoxPropsSchema = z.object({
   alignSelf: z.enum(["auto", "flex-start", "flex-end", "center", "stretch", "baseline"]).optional(),
   opacity: z.number().min(0).max(1).optional(),
   backgroundColor: z.string().optional(),
+  backgroundGradient: GradientBackgroundSchema.optional(),
   overflow: z.enum(["hidden", "visible", "scroll"]).optional(),
   margin: z.number().optional(),
   marginHorizontal: z.number().optional(),

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