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

package/dist/UI/Pages/ComposableScreen/elements/renderElement.js

@@ -14,6 +14,7 @@ const RadioGroupElement_1 = require("./RadioGroupElement");
 const CheckboxGroupElement_1 = require("./CheckboxGroupElement");
 const ButtonElement_1 = require("./ButtonElement");
 const DatePickerElement_1 = require("./DatePickerElement");
+const CarouselElement_1 = require("./CarouselElement");
 const renderElement = (element, ctx, parentType) => {
     if (element.type === "YStack" || element.type === "XStack") {
         return (0, jsx_runtime_1.jsx)(StackElement_1.StackElementComponent, { element: element, ctx: ctx, parentType: parentType }, element.id);
@@ -51,6 +52,9 @@ const renderElement = (element, ctx, parentType) => {
     if (element.type === "DatePicker") {
         return (0, jsx_runtime_1.jsx)(DatePickerElement_1.DatePickerElementComponent, { element: element, ctx: ctx }, element.id);
     }
+    if (element.type === "Carousel") {
+        return (0, jsx_runtime_1.jsx)(CarouselElement_1.CarouselElementComponent, { element: element, ctx: ctx }, element.id);
+    }
     return null;
 };
 exports.renderElement = renderElement;

package/dist/UI/Pages/ComposableScreen/elements/renderElement.js.map

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

package/dist/UI/Pages/ComposableScreen/elements/shared.d.ts

@@ -10,4 +10,5 @@ export type RenderContext = {
     renderChildren: (elements: UIElement[], parentType: "XStack" | "YStack") => React.ReactNode;
 };
 export declare const interpolate: (template: string, variables: Record<string, ComposableVariableEntry>) => string;
+export declare const dim: (v: number | string | undefined) => import("react-native").DimensionValue | undefined;
 //# sourceMappingURL=shared.d.ts.map

package/dist/UI/Pages/ComposableScreen/elements/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAEvF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IACnD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,GAAG,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7F,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,EAAE,WAAW,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,KAAG,MACM,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAEvF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IACnD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACnE,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,GAAG,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7F,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,EAAE,WAAW,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,KAAG,MACM,CAAC;AAG1G,eAAO,MAAM,GAAG,GAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,KAAG,OAAO,cAAc,EAAE,cAAc,GAAG,SACrC,CAAC"}

package/dist/UI/Pages/ComposableScreen/elements/shared.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.interpolate = void 0;
+exports.dim = exports.interpolate = void 0;
 const interpolate = (template, variables) => template.replace(/\{\{([^}]+?)\}\}/g, (_, key) => { var _a, _b, _c, _d; return (_d = (_b = (_a = variables[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : (_c = variables[key]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : ""; });
 exports.interpolate = interpolate;
+// Cast number | string dimension values to DimensionValue for React Native style props
+const dim = (v) => v;
+exports.dim = dim;
 //# sourceMappingURL=shared.js.map

package/dist/UI/Pages/ComposableScreen/elements/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/shared.ts"],"names":[],"mappings":";;;AAaO,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,SAAkD,EAAU,EAAE,CAC1G,QAAQ,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,uBAAC,OAAA,MAAA,MAAA,MAAA,SAAS,CAAC,GAAG,CAAC,0CAAE,KAAK,mCAAI,MAAA,SAAS,CAAC,GAAG,CAAC,0CAAE,KAAK,mCAAI,EAAE,CAAA,EAAA,CAAC,CAAC;AAD7F,QAAA,WAAW,eACkF"}
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../../src/UI/Pages/ComposableScreen/elements/shared.ts"],"names":[],"mappings":";;;AAaO,MAAM,WAAW,GAAG,CAAC,QAAgB,EAAE,SAAkD,EAAU,EAAE,CAC1G,QAAQ,CAAC,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,uBAAC,OAAA,MAAA,MAAA,MAAA,SAAS,CAAC,GAAG,CAAC,0CAAE,KAAK,mCAAI,MAAA,SAAS,CAAC,GAAG,CAAC,0CAAE,KAAK,mCAAI,EAAE,CAAA,EAAA,CAAC,CAAC;AAD7F,QAAA,WAAW,eACkF;AAE1G,uFAAuF;AAChF,MAAM,GAAG,GAAG,CAAC,CAA8B,EAAqD,EAAE,CACvG,CAAsD,CAAC;AAD5C,QAAA,GAAG,OACyC"}

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

@@ -11,6 +11,7 @@ import { type ButtonElementProps } from "./elements/ButtonElement";
 import { type RadioGroupElementProps } from "./elements/RadioGroupElement";
 import { type CheckboxGroupElementProps } from "./elements/CheckboxGroupElement";
 import { type DatePickerElementProps } from "./elements/DatePickerElement";
+import { type CarouselElementProps } from "./elements/CarouselElement";
 export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
 export type { StackElementProps } from "./elements/StackElement";
@@ -25,6 +26,7 @@ export type { ButtonElementProps } from "./elements/ButtonElement";
 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 UIElement = {
     id: string;
     name?: string;
@@ -86,6 +88,12 @@ export type UIElement = {
     name?: string;
     type: "DatePicker";
     props: DatePickerElementProps;
+} | {
+    id: string;
+    name?: string;
+    type: "Carousel";
+    props: CarouselElementProps;
+    children: UIElement[];
 };
 export declare const UIElementSchema: z.ZodType<UIElement>;
 export declare const ComposableScreenStepPayloadSchema: z.ZodObject<{

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

@@ -15,6 +15,7 @@ const ButtonElement_1 = require("./elements/ButtonElement");
 const RadioGroupElement_1 = require("./elements/RadioGroupElement");
 const CheckboxGroupElement_1 = require("./elements/CheckboxGroupElement");
 const DatePickerElement_1 = require("./elements/DatePickerElement");
+const CarouselElement_1 = require("./elements/CarouselElement");
 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([
@@ -91,6 +92,13 @@ exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
         type: zod_1.z.literal("DatePicker"),
         props: DatePickerElement_1.DatePickerElementPropsSchema,
     }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        type: zod_1.z.literal("Carousel"),
+        props: CarouselElement_1.CarouselElementPropsSchema,
+        children: zod_1.z.array(exports.UIElementSchema),
+    }),
 ]));
 exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
     elements: zod_1.z.array(exports.UIElementSchema),

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.10.0",
+  "version": "1.11.1",
   "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",
@@ -38,6 +38,7 @@
     "react-native": "0.83.4",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "^4.1.2",
+    "react-native-reanimated-carousel": "^4.0.3",
     "react-native-safe-area-context": "^5.6.1",
     "react-native-svg": "15.15.3",
     "typescript": "^5.0.0"
@@ -45,18 +46,19 @@
   "peerDependencies": {
     "@react-native-community/datetimepicker": "*",
     "@react-native-picker/picker": "*",
-    "@rocapine/react-native-onboarding": "^1.10.0",
+    "@rocapine/react-native-onboarding": "^1.11.1",
     "@shopify/react-native-skia": ">=1.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@types/react": "*",
     "expo-router": ">=3.0.0",
     "expo-store-review": "*",
+    "expo-video": "*",
     "lottie-react-native": "*",
     "react": "*",
     "react-native": "*",
+    "react-native-reanimated-carousel": "*",
     "react-native-safe-area-context": "*",
-    "rive-react-native": "*",
-    "expo-video": "*"
+    "rive-react-native": "*"
   },
   "peerDependenciesMeta": {
     "@react-native-community/datetimepicker": {

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

@@ -1,10 +1,19 @@
 import { z } from "zod";
 
 export type BaseBoxProps = {
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  flex?: number;
+  flexShrink?: number;
+  flexGrow?: number;
   alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
   opacity?: number;
+  backgroundColor?: string;
+  overflow?: "hidden" | "visible" | "scroll";
   margin?: number;
   marginHorizontal?: number;
   marginVertical?: number;
@@ -17,10 +26,19 @@ export type BaseBoxProps = {
 };
 
 export const BaseBoxPropsSchema = z.object({
-  width: z.number().min(0).optional(),
-  height: z.number().min(0).optional(),
+  width: z.union([z.number().min(0), z.string()]).optional(),
+  height: z.union([z.number().min(0), z.string()]).optional(),
+  minWidth: z.number().min(0).optional(),
+  maxWidth: z.number().min(0).optional(),
+  minHeight: z.number().min(0).optional(),
+  maxHeight: z.number().min(0).optional(),
+  flex: z.number().min(0).optional(),
+  flexShrink: z.number().min(0).optional(),
+  flexGrow: z.number().min(0).optional(),
   alignSelf: z.enum(["auto", "flex-start", "flex-end", "center", "stretch", "baseline"]).optional(),
   opacity: z.number().min(0).max(1).optional(),
+  backgroundColor: z.string().optional(),
+  overflow: z.enum(["hidden", "visible", "scroll"]).optional(),
   margin: z.number().optional(),
   marginHorizontal: z.number().optional(),
   marginVertical: z.number().optional(),

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { Text, TouchableOpacity } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type ButtonElementProps = BaseBoxProps & {
   label: string;
@@ -15,7 +15,6 @@ export type ButtonElementProps = BaseBoxProps & {
   fontWeight?: string;
   fontFamily?: string;
   textAlign?: "left" | "center" | "right";
-  alignSelf?: "auto" | "flex-start" | "center" | "flex-end" | "stretch";
 };
 
 export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
@@ -28,7 +27,6 @@ export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   fontWeight: z.string().optional(),
   fontFamily: z.string().optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),
-  alignSelf: z.enum(["auto", "flex-start", "center", "flex-end", "stretch"]).optional(),
 });
 
 type ButtonUIElement = Extract<UIElement, { type: "Button" }>;
@@ -69,8 +67,8 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
         padding: element.props.padding,
         paddingVertical: element.props.paddingVertical ?? 14,
         paddingHorizontal: element.props.paddingHorizontal ?? 24,
-        width: element.props.width,
-        height: element.props.height,
+        width: dim(element.props.width),
+        height: dim(element.props.height),
         margin: element.props.margin,
         marginHorizontal: element.props.marginHorizontal,
         marginVertical: element.props.marginVertical,

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

@@ -0,0 +1,152 @@
+import React, { useRef } from "react";
+import { useWindowDimensions, View } 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";
+
+export type CarouselElementProps = BaseBoxProps & {
+  carouselType?: "left-align" | "normal" | "parallax" | "stack";
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+  loop?: boolean;
+  showDots?: boolean;
+  dotColor?: string;
+  activeDotColor?: string;
+  dotWidth?: number;
+  dotHeight?: number;
+  dotsGap?: number;
+  dotsMarginTop?: number;
+};
+
+export const CarouselElementPropsSchema = BaseBoxPropsSchema.extend({
+  carouselType: z.enum(["left-align", "normal", "parallax", "stack"]).optional().default("normal"),
+  autoPlay: z.boolean().optional().default(false),
+  autoPlayInterval: z.number().nonnegative().optional().default(3000),
+  loop: z.boolean().optional().default(true),
+  showDots: z.boolean().optional().default(true),
+  dotColor: z.string().optional(),
+  activeDotColor: z.string().optional(),
+  dotWidth: z.number().nonnegative().optional().default(20),
+  dotHeight: z.number().nonnegative().optional().default(4),
+  dotsGap: z.number().nonnegative().optional().default(8),
+  dotsMarginTop: z.number().optional().default(12),
+});
+
+type CarouselUIElement = Extract<UIElement, { type: "Carousel" }>;
+
+type Props = {
+  element: CarouselUIElement;
+  ctx: RenderContext;
+};
+
+export function CarouselElementComponent({ element, ctx }: Props): React.ReactElement {
+  const { theme } = ctx;
+  const { props, children } = element;
+  const { width: windowWidth } = useWindowDimensions();
+  const progress = useSharedValue<number>(0);
+  const ref = useRef<ICarouselInstance>(null);
+
+  const carouselType = props.carouselType ?? "normal";
+
+  // Stack uses 75% width (shows side items); left-align uses 82% (peek effect)
+  const itemWidth =
+    carouselType === "stack"
+      ? windowWidth * 0.75
+      : carouselType === "left-align"
+        ? windowWidth * 0.82
+        : (typeof props.width === "number" ? props.width : windowWidth);
+  const itemHeight = typeof props.height === "number" ? props.height : 220;
+
+  const containerStyle = {
+    alignSelf: props.alignSelf,
+    flex: props.flex,
+    flexShrink: props.flexShrink,
+    flexGrow: props.flexGrow,
+    width: dim(props.width),
+    minWidth: props.minWidth,
+    maxWidth: props.maxWidth,
+    minHeight: props.minHeight,
+    maxHeight: props.maxHeight,
+    margin: props.margin,
+    marginHorizontal: props.marginHorizontal,
+    marginVertical: props.marginVertical,
+    padding: props.padding,
+    paddingHorizontal: props.paddingHorizontal,
+    paddingVertical: props.paddingVertical,
+    borderRadius: props.borderRadius,
+    borderWidth: props.borderWidth,
+    borderColor: props.borderColor,
+    backgroundColor: 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)),
+  };
+
+  const modeProps: Record<string, unknown> =
+    carouselType === "parallax"
+      ? {
+        mode: "parallax",
+        modeConfig: { parallaxScrollingScale: 0.9, parallaxScrollingOffset: 50 },
+      }
+      : carouselType === "stack"
+        ? {
+          mode: "horizontal-stack",
+          modeConfig: { snapDirection: "left", stackInterval: 18 },
+          customConfig: () => ({ type: "positive", viewCount: 5 }),
+        }
+        : {};
+
+  const dotW = props.dotWidth ?? 20;
+  const dotH = props.dotHeight ?? 4;
+  const dotsGap = props.dotsGap ?? 8;
+  const dotsMarginTop = props.dotsMarginTop ?? 12;
+  const dotBg = props.dotColor ?? theme.colors.neutral.low;
+  const activeDotBg = props.activeDotColor ?? theme.colors.primary;
+  console.log(props.autoPlay, props.autoPlayInterval);
+  console.log(element);
+  return (
+    <View style={containerStyle}>
+      <Carousel
+        ref={ref}
+        loop={props.loop}
+        autoPlay={props.autoPlay}
+        autoPlayInterval={props.autoPlayInterval}
+        snapEnabled={true}
+        pagingEnabled={true}
+        data={children}
+        width={itemWidth}
+        height={itemHeight}
+        style={{ width: itemWidth, height: itemHeight }}
+        renderItem={({ item }: { item: UIElement }) => ctx.renderChildren([item], "YStack")}
+        onProgressChange={(_: number, absoluteProgress: number) => {
+          progress.value = absoluteProgress;
+        }}
+        {...(modeProps as any)}
+      />
+      {(props.showDots ?? true) && (
+        <Pagination.Basic
+          progress={progress}
+          data={children}
+          dotStyle={{
+            width: dotW,
+            height: dotH,
+            borderRadius: dotH / 2,
+            backgroundColor: dotBg,
+          }}
+          activeDotStyle={{
+            overflow: "hidden",
+            backgroundColor: activeDotBg,
+          }}
+          containerStyle={{ gap: dotsGap, marginTop: dotsMarginTop }}
+          horizontal
+          onPress={(index: number) => {
+            ref.current?.scrollTo({ count: index - progress.value, animated: true });
+          }}
+        />
+      )}
+    </View>
+  );
+}

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View, Text, TouchableOpacity } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import type { UIElement } from "../types";
-import type { RenderContext } from "./shared";
+import { dim, type RenderContext } from "./shared";
 
 export type CheckboxGroupElementProps = BaseBoxProps & {
   variableName?: string;
@@ -109,8 +109,8 @@ export const CheckboxGroupComponent = ({ element, ctx }: Props): React.ReactElem
         flexWrap: isHorizontal ? "wrap" : undefined,
         alignSelf: element.props.alignSelf,
         gap: element.props.gap ?? 8,
-        width: element.props.width,
-        height: element.props.height,
+        width: dim(element.props.width),
+        height: dim(element.props.height),
         margin: element.props.margin,
         marginHorizontal: element.props.marginHorizontal,
         marginVertical: element.props.marginVertical,

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

@@ -4,7 +4,7 @@ import DateTimePicker, { DateTimePickerEvent } from "@react-native-community/dat
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { z } from "zod";
 import type { UIElement } from "../types";
-import type { RenderContext } from "./shared";
+import { dim, type RenderContext } from "./shared";
 
 export type DatePickerElementProps = BaseBoxProps & {
   variableName?: string;
@@ -93,8 +93,8 @@ export const DatePickerElementComponent = ({ element, ctx }: Props): React.React
 
   const containerStyle = {
     alignSelf: props.alignSelf,
-    width: props.width,
-    height: props.height,
+    width: dim(props.width),
+    height: dim(props.height),
     margin: props.margin,
     marginHorizontal: props.marginHorizontal,
     marginVertical: props.marginVertical,

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type IconElementProps = BaseBoxProps & {
   name: string;
@@ -40,8 +40,17 @@ export const IconElementComponent = ({ element, ctx }: Props): React.ReactElemen
   return (
     <View
       style={{
-        width: element.props.width,
-        height: element.props.height,
+        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,
+        overflow: element.props.overflow,
         margin: element.props.margin,
         marginHorizontal: element.props.marginHorizontal,
         marginVertical: element.props.marginVertical,

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { Image } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type ImageElementProps = BaseBoxProps & {
   url: string;
@@ -26,16 +26,24 @@ type Props = {
 
 export const ImageElementComponent = ({ element }: Props): React.ReactElement => {
   const hasExplicitHeight = element.props.height !== undefined;
-  const aspectRatio = hasExplicitHeight ? undefined : (element.props.aspectRatio ?? 16 / 9);
 
   return (
     <Image
       source={{ uri: element.props.url }}
-      resizeMode={element.props.resizeMode ?? "cover"}
-      style={{
-        width: element.props.width ?? "100%",
-        height: element.props.height,
-        aspectRatio,
+      resizeMode={element.props.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,
@@ -46,7 +54,7 @@ export const ImageElementComponent = ({ element }: Props): React.ReactElement =>
         padding: element.props.padding,
         paddingHorizontal: element.props.paddingHorizontal,
         paddingVertical: element.props.paddingVertical,
-      }}
+      }) as any}
     />
   );
 };

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View, TextInput } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 
 export type InputElementProps = BaseBoxProps & {
   variableName?: string;
@@ -21,6 +21,9 @@ export type InputElementProps = BaseBoxProps & {
   backgroundColor?: string;
   fontSize?: number;
   fontWeight?: string;
+  fontFamily?: string;
+  lineHeight?: number;
+  letterSpacing?: number;
   textAlign?: "left" | "center" | "right";
   placeholderColor?: string;
 };
@@ -41,6 +44,9 @@ export const InputElementPropsSchema = BaseBoxPropsSchema.extend({
   backgroundColor: z.string().optional(),
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
+  fontFamily: z.string().optional(),
+  lineHeight: z.number().optional(),
+  letterSpacing: z.number().optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),
   placeholderColor: z.string().optional(),
 });
@@ -85,10 +91,18 @@ export const InputElementComponent = ({ element, ctx }: Props): React.ReactEleme
       numberOfLines={element.props.numberOfLines}
       editable={element.props.editable ?? true}
       style={{
+        flex: element.props.flex,
+        flexShrink: element.props.flexShrink,
+        flexGrow: element.props.flexGrow,
         alignSelf: element.props.alignSelf,
-        width: element.props.width,
-        height: element.props.height,
+        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,
         opacity: element.props.opacity,
+        overflow: element.props.overflow,
         margin: element.props.margin,
         marginHorizontal: element.props.marginHorizontal,
         marginVertical: element.props.marginVertical,
@@ -99,6 +113,9 @@ export const InputElementComponent = ({ element, ctx }: Props): React.ReactEleme
         color: element.props.color ?? theme.colors.text.primary,
         fontSize: element.props.fontSize ?? theme.typography.textStyles.body.fontSize,
         fontWeight: element.props.fontWeight as any,
+        fontFamily: element.props.fontFamily,
+        lineHeight: element.props.lineHeight,
+        letterSpacing: element.props.letterSpacing,
         textAlign: element.props.textAlign,
         padding: element.props.padding ?? 12,
         paddingHorizontal: element.props.paddingHorizontal,

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 import { View, Text, StyleSheet } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext } from "./shared";
+import { RenderContext, dim } from "./shared";
 import { getTextStyle } from "../../../Theme/helpers";
 
 export type LottieElementProps = BaseBoxProps & {
@@ -43,9 +43,18 @@ type Props = {
 export const LottieElementComponent = ({ element, ctx }: Props): React.ReactElement => {
   const { theme } = ctx;
   const wrapperStyle = {
-    width: element.props.width ?? ("100%" as `${number}%`),
-    height: element.props.height ?? 200,
+    flex: element.props.flex,
+    flexShrink: element.props.flexShrink,
+    flexGrow: element.props.flexGrow,
+    alignSelf: element.props.alignSelf,
+    width: dim(element.props.width) ?? ("100%" as `${number}%`),
+    height: dim(element.props.height ?? 200),
+    minWidth: element.props.minWidth,
+    maxWidth: element.props.maxWidth,
+    minHeight: element.props.minHeight,
+    maxHeight: element.props.maxHeight,
     opacity: element.props.opacity,
+    backgroundColor: element.props.backgroundColor,
     margin: element.props.margin,
     marginHorizontal: element.props.marginHorizontal,
     marginVertical: element.props.marginVertical,