@rocapine/react-native-onboarding-ui 1.7.0 → 1.8.1

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { z } from "zod";
+import { Image } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+
+export type ImageElementProps = BaseBoxProps & {
+  url: string;
+  aspectRatio?: number;
+  resizeMode?: "cover" | "contain" | "stretch" | "center";
+};
+
+export const ImageElementPropsSchema = BaseBoxPropsSchema.extend({
+  url: z.string().min(1, "url must not be empty"),
+  aspectRatio: z.number().optional(),
+  resizeMode: z.enum(["cover", "contain", "stretch", "center"]).optional(),
+});
+
+type ImageUIElement = Extract<UIElement, { type: "Image" }>;
+
+type Props = {
+  element: ImageUIElement;
+  ctx: RenderContext;
+};
+
+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,
+        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,
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from "react";
+import { z } from "zod";
+import { View, TextInput } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+
+export type InputElementProps = BaseBoxProps & {
+  variableName?: string;
+  placeholder?: string;
+  defaultValue?: string;
+  keyboardType?: "default" | "email-address" | "numeric" | "phone-pad" | "decimal-pad" | "url" | "number-pad" | "ascii-capable" | "numbers-and-punctuation" | "name-phone-pad" | "twitter" | "web-search" | "visible-password";
+  returnKeyType?: "done" | "next" | "go" | "search" | "send" | "default" | "emergency-call" | "google" | "join" | "route" | "yahoo" | "none" | "previous";
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  secureTextEntry?: boolean;
+  maxLength?: number;
+  multiline?: boolean;
+  numberOfLines?: number;
+  editable?: boolean;
+  color?: string;
+  backgroundColor?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  textAlign?: "left" | "center" | "right";
+  placeholderColor?: string;
+};
+
+export const InputElementPropsSchema = BaseBoxPropsSchema.extend({
+  variableName: z.string().min(1).optional(),
+  placeholder: z.string().optional(),
+  defaultValue: z.string().optional(),
+  keyboardType: z.enum(["default", "email-address", "numeric", "phone-pad", "decimal-pad", "url", "number-pad", "ascii-capable", "numbers-and-punctuation", "name-phone-pad", "twitter", "web-search", "visible-password"]).optional(),
+  returnKeyType: z.enum(["done", "next", "go", "search", "send", "default", "emergency-call", "google", "join", "route", "yahoo", "none", "previous"]).optional(),
+  autoCapitalize: z.enum(["none", "sentences", "words", "characters"]).optional(),
+  secureTextEntry: z.boolean().optional(),
+  maxLength: z.number().int().nonnegative().optional(),
+  multiline: z.boolean().optional(),
+  numberOfLines: z.number().int().nonnegative().optional(),
+  editable: z.boolean().optional(),
+  color: z.string().optional(),
+  backgroundColor: z.string().optional(),
+  fontSize: z.number().optional(),
+  fontWeight: z.string().optional(),
+  textAlign: z.enum(["left", "center", "right"]).optional(),
+  placeholderColor: z.string().optional(),
+});
+
+type InputUIElement = Extract<UIElement, { type: "Input" }>;
+
+type Props = {
+  element: InputUIElement;
+  ctx: RenderContext;
+};
+
+export const InputElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme, variables, setVariable } = ctx;
+  const persistedValue = element.props.variableName ? variables[element.props.variableName]?.value : undefined;
+  const [value, setValue] = useState(persistedValue ?? element.props.defaultValue ?? "");
+
+  useEffect(() => {
+    if (element.props.variableName && element.props.defaultValue !== undefined && persistedValue === undefined) {
+      setVariable(element.props.variableName, { value: element.props.defaultValue });
+    }
+  }, [element.props.variableName, element.props.defaultValue, persistedValue]);
+
+  const handleChange = (text: string) => {
+    setValue(text);
+    if (element.props.variableName) {
+      setVariable(element.props.variableName, { value: text });
+    }
+  };
+
+  return (
+    <TextInput
+      value={value}
+      onChangeText={handleChange}
+      placeholder={element.props.placeholder}
+      placeholderTextColor={element.props.placeholderColor ?? theme.colors.text.tertiary}
+      keyboardType={element.props.keyboardType ?? "default"}
+      returnKeyType={element.props.returnKeyType ?? "done"}
+      autoCapitalize={element.props.autoCapitalize ?? "sentences"}
+      secureTextEntry={element.props.secureTextEntry ?? false}
+      maxLength={element.props.maxLength}
+      multiline={element.props.multiline ?? false}
+      numberOfLines={element.props.numberOfLines}
+      editable={element.props.editable ?? true}
+      style={{
+        alignSelf: element.props.alignSelf,
+        width: element.props.width,
+        height: element.props.height,
+        opacity: element.props.opacity,
+        margin: element.props.margin,
+        marginHorizontal: element.props.marginHorizontal,
+        marginVertical: element.props.marginVertical,
+        backgroundColor: element.props.backgroundColor ?? theme.colors.neutral.lowest,
+        borderWidth: element.props.borderWidth ?? 1,
+        borderRadius: element.props.borderRadius ?? 8,
+        borderColor: element.props.borderColor ?? theme.colors.neutral.low,
+        color: element.props.color ?? theme.colors.text.primary,
+        fontSize: element.props.fontSize ?? theme.typography.textStyles.body.fontSize,
+        fontWeight: element.props.fontWeight as any,
+        textAlign: element.props.textAlign,
+        padding: element.props.padding ?? 12,
+        paddingHorizontal: element.props.paddingHorizontal,
+        paddingVertical: element.props.paddingVertical,
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,97 @@
+import React from "react";
+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 { getTextStyle } from "../../../Theme/helpers";
+
+export type LottieElementProps = BaseBoxProps & {
+  source: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  speed?: number;
+};
+
+export const LottieElementPropsSchema = BaseBoxPropsSchema.extend({
+  source: z.string().min(1, "source must not be empty"),
+  autoPlay: z.boolean().optional(),
+  loop: z.boolean().optional(),
+  speed: z.number().optional(),
+});
+
+type LottieUIElement = Extract<UIElement, { type: "Lottie" }>;
+
+let LottieView: React.ComponentType<{
+  source: string | object;
+  autoPlay?: boolean;
+  loop?: boolean;
+  speed?: number;
+  style?: object;
+}> | null = null;
+try {
+  LottieView = require("lottie-react-native").default;
+} catch {
+  // lottie-react-native not installed
+}
+
+type Props = {
+  element: LottieUIElement;
+  ctx: RenderContext;
+};
+
+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,
+    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,
+    borderWidth: element.props.borderWidth,
+    borderRadius: element.props.borderRadius,
+    borderColor: element.props.borderColor,
+    overflow: "hidden" as const,
+  };
+
+  if (!LottieView) {
+    return (
+      <View style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
+          Install lottie-react-native to render Lottie animations.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={wrapperStyle}>
+      <LottieView
+        source={{ uri: element.props.source }}
+        autoPlay={element.props.autoPlay ?? true}
+        loop={element.props.loop ?? true}
+        speed={element.props.speed}
+        style={styles.fill}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fill: {
+    width: "100%",
+    height: "100%",
+  },
+  mediaFallback: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  mediaFallbackText: {
+    textAlign: "center",
+    paddingHorizontal: 16,
+  },
+});

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

@@ -0,0 +1,182 @@
+import React, { useEffect } from "react";
+import { z } from "zod";
+import { View, Text, TouchableOpacity } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+
+export type RadioGroupElementProps = BaseBoxProps & {
+  variableName?: string;
+  defaultValue?: string;
+  gap?: number;
+  direction?: "vertical" | "horizontal";
+  items: Array<{ label: string; value: string }>;
+  itemBackgroundColor?: string;
+  itemSelectedBackgroundColor?: string;
+  itemBorderColor?: string;
+  itemSelectedBorderColor?: string;
+  itemBorderRadius?: number;
+  itemBorderWidth?: number;
+  itemColor?: string;
+  itemSelectedColor?: string;
+  itemFontSize?: number;
+  itemFontWeight?: string;
+  itemFontFamily?: string;
+  itemPadding?: number;
+  itemPaddingHorizontal?: number;
+  itemPaddingVertical?: number;
+};
+
+export const RadioGroupElementPropsSchema = BaseBoxPropsSchema.extend({
+  variableName: z.string().optional(),
+  defaultValue: z.string().optional(),
+  gap: z.number().optional(),
+  direction: z.enum(["vertical", "horizontal"]).optional(),
+  items: z.array(z.object({ label: z.string().trim().min(1, "item label must not be empty"), value: z.string().trim().min(1, "item value must not be empty") })).min(1, "items must not be empty"),
+  itemBackgroundColor: z.string().optional(),
+  itemSelectedBackgroundColor: z.string().optional(),
+  itemBorderColor: z.string().optional(),
+  itemSelectedBorderColor: z.string().optional(),
+  itemBorderRadius: z.number().optional(),
+  itemBorderWidth: z.number().optional(),
+  itemColor: z.string().optional(),
+  itemSelectedColor: z.string().optional(),
+  itemFontSize: z.number().optional(),
+  itemFontWeight: z.string().optional(),
+  itemFontFamily: z.string().optional(),
+  itemPadding: z.number().optional(),
+  itemPaddingHorizontal: z.number().optional(),
+  itemPaddingVertical: z.number().optional(),
+}).superRefine((data, ctx) => {
+  const values = data.items.map((i) => i.value);
+  const unique = new Set(values);
+  if (unique.size !== values.length) {
+    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "item values must be unique", path: ["items"] });
+  }
+  if (data.defaultValue !== undefined && !unique.has(data.defaultValue)) {
+    ctx.addIssue({ code: z.ZodIssueCode.custom, message: "defaultValue must match one of the item values", path: ["defaultValue"] });
+  }
+});
+
+type RadioGroupUIElement = Extract<UIElement, { type: "RadioGroup" }>;
+
+type Props = {
+  element: RadioGroupUIElement;
+  ctx: RenderContext;
+};
+
+export const RadioGroupComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme, variables, setVariable } = ctx;
+  const selectedValue = element.props.variableName ? variables[element.props.variableName]?.value : undefined;
+
+  useEffect(() => {
+    if (element.props.variableName && element.props.defaultValue && selectedValue === undefined) {
+      const defaultItem = element.props.items.find((i) => i.value === element.props.defaultValue);
+      setVariable(element.props.variableName, { value: element.props.defaultValue, label: defaultItem?.label });
+    }
+  }, [element.props.variableName, element.props.defaultValue, element.props.items, selectedValue]);
+
+  const handleSelect = (value: string, label: string) => {
+    if (element.props.variableName) {
+      setVariable(element.props.variableName, { value, label });
+    }
+  };
+
+  const isHorizontal = element.props.direction === "horizontal";
+
+  return (
+    <View
+      accessibilityRole="radiogroup"
+      style={{
+        flexDirection: isHorizontal ? "row" : "column",
+        flexWrap: isHorizontal ? "wrap" : undefined,
+        alignSelf: element.props.alignSelf,
+        gap: element.props.gap ?? 8,
+        width: element.props.width,
+        height: element.props.height,
+        margin: element.props.margin,
+        marginHorizontal: element.props.marginHorizontal,
+        marginVertical: element.props.marginVertical,
+        padding: element.props.padding,
+        paddingHorizontal: element.props.paddingHorizontal,
+        paddingVertical: element.props.paddingVertical,
+        borderWidth: element.props.borderWidth,
+        borderRadius: element.props.borderRadius,
+        borderColor: element.props.borderColor,
+        opacity: element.props.opacity,
+      }}
+    >
+      {element.props.items.map((item) => {
+        const isSelected = selectedValue === item.value;
+        // Note: "+ "15"" appends hex alpha (≈8% opacity) assuming a 6-digit hex primary color.
+        // This works for standard hex colors but may produce unexpected results for other color formats.
+        const bgColor = isSelected
+          ? (element.props.itemSelectedBackgroundColor ?? theme.colors.primary + "15")
+          : (element.props.itemBackgroundColor ?? "transparent");
+        const textColor = isSelected
+          ? (element.props.itemSelectedColor ?? theme.colors.primary)
+          : (element.props.itemColor ?? theme.colors.text.primary);
+        const borderColor = isSelected
+          ? (element.props.itemSelectedBorderColor ?? theme.colors.primary)
+          : (element.props.itemBorderColor ?? theme.colors.neutral.low);
+
+        return (
+          <TouchableOpacity
+            key={item.value}
+            activeOpacity={0.7}
+            onPress={() => handleSelect(item.value, item.label)}
+            accessibilityRole="radio"
+            accessibilityState={{ selected: isSelected, checked: isSelected }}
+            accessibilityLabel={item.label}
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 12,
+              backgroundColor: bgColor,
+              borderRadius: element.props.itemBorderRadius ?? 8,
+              borderWidth: element.props.itemBorderWidth ?? 1,
+              borderColor: borderColor,
+              padding: element.props.itemPadding ?? (element.props.itemPaddingHorizontal === undefined && element.props.itemPaddingVertical === undefined ? 12 : undefined),
+              paddingHorizontal: element.props.itemPaddingHorizontal,
+              paddingVertical: element.props.itemPaddingVertical,
+            }}
+          >
+            <View
+              style={{
+                width: 20,
+                height: 20,
+                borderRadius: 10,
+                borderWidth: 2,
+                borderColor: isSelected ? theme.colors.primary : theme.colors.neutral.medium,
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {isSelected && (
+                <View
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 5,
+                    backgroundColor: theme.colors.primary,
+                  }}
+                />
+              )}
+            </View>
+            <Text
+              style={{
+                flexShrink: 1,
+                color: textColor,
+                fontSize: element.props.itemFontSize ?? theme.typography.textStyles.body.fontSize,
+                fontWeight: (element.props.itemFontWeight as any) ?? theme.typography.textStyles.body.fontWeight,
+                fontFamily: element.props.itemFontFamily,
+              }}
+            >
+              {item.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};

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

@@ -0,0 +1,105 @@
+import React from "react";
+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 { getTextStyle } from "../../../Theme/helpers";
+
+export type RiveElementProps = BaseBoxProps & {
+  url: string;
+  autoplay?: boolean;
+  fit?: "Contain" | "Cover" | "Fill" | "FitWidth" | "FitHeight" | "None" | "ScaleDown" | "Layout";
+  alignment?: "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
+  artboardName?: string;
+  stateMachineName?: string;
+};
+
+export const RiveElementPropsSchema = BaseBoxPropsSchema.extend({
+  url: z.string().min(1, "url must not be empty"),
+  autoplay: z.boolean().optional(),
+  fit: z.enum(["Contain", "Cover", "Fill", "FitWidth", "FitHeight", "None", "ScaleDown", "Layout"]).optional(),
+  alignment: z.enum(["TopLeft", "TopCenter", "TopRight", "CenterLeft", "Center", "CenterRight", "BottomLeft", "BottomCenter", "BottomRight"]).optional(),
+  artboardName: z.string().optional(),
+  stateMachineName: z.string().optional(),
+});
+
+type RiveUIElement = Extract<UIElement, { type: "Rive" }>;
+
+let RiveElementComponent: React.ComponentType<{ element: RiveUIElement; riveStyle: object }> | null = null;
+try {
+  const riveModule = require("rive-react-native");
+  const Rive = riveModule.default;
+  const { Fit, Alignment } = riveModule;
+  RiveElementComponent = ({ element, riveStyle }: { element: RiveUIElement; riveStyle: object }) => {
+    return (
+      <Rive
+        url={element.props.url}
+        autoplay={element.props.autoplay ?? true}
+        fit={element.props.fit ? Fit[element.props.fit] : Fit.Contain}
+        alignment={element.props.alignment ? Alignment[element.props.alignment] : Alignment.Center}
+        artboardName={element.props.artboardName}
+        stateMachineName={element.props.stateMachineName}
+        style={riveStyle}
+        onError={console.error}
+      />
+    );
+  };
+} catch {
+  // rive-react-native not installed - will show fallback if Rive is used
+}
+
+type Props = {
+  element: RiveUIElement;
+  ctx: RenderContext;
+};
+
+export const RiveElementRenderer = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme } = ctx;
+  const wrapperStyle = {
+    width: element.props.width ?? ("100%" as `${number}%`),
+    height: element.props.height ?? 200,
+    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,
+    borderWidth: element.props.borderWidth,
+    borderRadius: element.props.borderRadius,
+    borderColor: element.props.borderColor,
+    overflow: "hidden" as const,
+  };
+
+  if (!RiveElementComponent) {
+    return (
+      <View style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
+        <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
+          Install rive-react-native to render Rive animations.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={wrapperStyle}>
+      <RiveElementComponent element={element} riveStyle={styles.fill} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  fill: {
+    width: "100%",
+    height: "100%",
+  },
+  mediaFallback: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  mediaFallbackText: {
+    textAlign: "center",
+    paddingHorizontal: 16,
+  },
+});

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

@@ -0,0 +1,106 @@
+import React from "react";
+import { z } from "zod";
+import { View } from "react-native";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+
+export type StackElementProps = {
+  gap?: number;
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  flex?: number;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+  alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+  backgroundColor?: string;
+  flexWrap?: "wrap" | "nowrap";
+  flexShrink?: number;
+  borderWidth?: number;
+  borderRadius?: number;
+  borderColor?: string;
+  overflow?: "hidden" | "visible" | "scroll";
+  opacity?: number;
+};
+
+export const StackElementPropsSchema = z.object({
+  gap: z.number().optional(),
+  padding: z.number().optional(),
+  paddingHorizontal: z.number().optional(),
+  paddingVertical: z.number().optional(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  flex: z.number().optional(),
+  width: z.number().optional(),
+  height: z.number().optional(),
+  minWidth: z.number().optional(),
+  maxWidth: z.number().optional(),
+  minHeight: z.number().optional(),
+  maxHeight: z.number().optional(),
+  alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
+  alignSelf: z.enum(["auto", "flex-start", "flex-end", "center", "stretch", "baseline"]).optional(),
+  justifyContent: z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
+  backgroundColor: z.string().optional(),
+  flexWrap: z.enum(["wrap", "nowrap"]).optional(),
+  flexShrink: z.number().optional(),
+  borderWidth: z.number().optional(),
+  borderRadius: z.number().optional(),
+  borderColor: z.string().optional(),
+  overflow: z.enum(["hidden", "visible", "scroll"]).optional(),
+  opacity: z.number().min(0).max(1).optional(),
+});
+
+type StackUIElement = Extract<UIElement, { type: "YStack" | "XStack" }>;
+
+type Props = {
+  element: StackUIElement;
+  ctx: RenderContext;
+  parentType?: "XStack" | "YStack";
+};
+
+export const StackElementComponent = ({ element, ctx, parentType }: Props): React.ReactElement => {
+  return (
+    <View
+      style={{
+        flexDirection: element.type === "XStack" ? "row" : "column",
+        alignSelf: element.props.alignSelf,
+        alignItems: element.props.alignItems,
+        gap: element.props.gap,
+        padding: element.props.padding,
+        paddingHorizontal: element.props.paddingHorizontal,
+        paddingVertical: element.props.paddingVertical,
+        margin: element.props.margin,
+        marginHorizontal: element.props.marginHorizontal,
+        marginVertical: element.props.marginVertical,
+        flex: element.props.flex,
+        width: element.props.width,
+        height: element.props.height,
+        minWidth: element.props.minWidth,
+        maxWidth: element.props.maxWidth,
+        minHeight: element.props.minHeight,
+        maxHeight: element.props.maxHeight,
+        flexShrink: element.props.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+        flexWrap: element.props.flexWrap,
+        justifyContent: element.props.justifyContent,
+        backgroundColor: element.props.backgroundColor,
+        borderWidth: element.props.borderWidth,
+        borderRadius: element.props.borderRadius,
+        borderColor: element.props.borderColor,
+        overflow: element.props.overflow,
+        opacity: element.props.opacity,
+      }}
+    >
+      {ctx.renderChildren(element.children, element.type)}
+    </View>
+  );
+};