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

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

@@ -1,405 +1,38 @@
-import React, { useState, useEffect, useContext, useMemo } from "react";
-import { View, Text, Image, ScrollView, StyleSheet, TouchableOpacity, TextInput } from "react-native";
+import { useContext, useMemo } from "react";
+import { ScrollView, StyleSheet } from "react-native";
 import { ComposableScreenStepType, ComposableScreenStepTypeSchema, UIElement } from "./types";
-import { Theme } from "../../Theme/types";
-import { defaultTheme } from "../../Theme/defaultTheme";
-import { getTextStyle } from "../../Theme/helpers";
 import { withErrorBoundary } from "../../ErrorBoundary";
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
 import { OnboardingProgressContext } from "../../Provider/OnboardingProgressProvider";
-
-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
-}
-
-// Metro cannot tree-shake optional peer deps at runtime; the try/catch pattern
-// below is the standard React Native approach for optional native modules.
-type VideoUIElement = Extract<UIElement, { type: "Video" }>;
-let VideoElementComponent: React.ComponentType<{ element: VideoUIElement; style: object }> | null = null;
-try {
-  const { VideoView, useVideoPlayer } = require("expo-video");
-  VideoElementComponent = ({ element, style }: { element: VideoUIElement; style: object }) => {
-    const player = useVideoPlayer(element.props.url, (p: any) => {
-      p.loop = element.props.loop ?? false;
-      p.muted = element.props.muted ?? true;
-      if (element.props.autoPlay) p.play();
-    });
-    return (
-      <VideoView
-        player={player}
-        style={style}
-        allowsFullscreen={false}
-        nativeControls={element.props.controls ?? false}
-      />
-    );
-  };
-} catch {
-  // expo-video not installed
-}
-
-type InputUIElement = Extract<UIElement, { type: "Input" }>;
-const InputElementComponent = ({ element, theme, variables, onVariableChange }: { element: InputUIElement; theme: Theme; variables: Record<string, string>; onVariableChange: (key: string, value: string) => void }) => {
-  const persistedValue = element.props.variableName ? variables[element.props.variableName] : undefined;
-  const [value, setValue] = useState(persistedValue ?? element.props.defaultValue ?? "");
-
-  useEffect(() => {
-    if (element.props.variableName && element.props.defaultValue && persistedValue === undefined) {
-      onVariableChange(element.props.variableName, element.props.defaultValue);
-    }
-  }, []);
-
-  const handleChange = (text: string) => {
-    setValue(text);
-    if (element.props.variableName) {
-      onVariableChange(element.props.variableName, text);
-    }
-  };
-
-  return (
-    <View
-      style={{
-        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,
-        width: element.props.width,
-        height: element.props.height,
-        opacity: element.props.opacity,
-        margin: element.props.margin,
-        marginHorizontal: element.props.marginHorizontal,
-        marginVertical: element.props.marginVertical,
-        overflow: "hidden",
-      }}
-    >
-      <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={{
-          flex: 1,
-          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,
-        }}
-      />
-    </View>
-  );
-};
-
-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
-}
-
-const interpolate = (template: string, variables: Record<string, string>): string =>
-  template.replace(/\{\{([^}]+?)\}\}/g, (_, key) => variables[key] ?? "");
+import { useTheme } from "../../Theme/useTheme";
+import { RenderContext } from "./elements/shared";
+import { renderElement } from "./elements/renderElement";
 
 type ContentProps = {
   step: ComposableScreenStepType;
   onContinue: () => void;
-  theme?: Theme;
 };
 
-const renderElement = (element: UIElement, theme: Theme, variables: Record<string, string>, setVariable: (key: string, value: string) => void, parentType?: "XStack" | "YStack"): React.ReactNode => {
-  if (element.type === "YStack" || element.type === "XStack") {
-    return (
-      <View
-        key={element.id}
-        style={{
-          flexDirection: element.type === "XStack" ? "row" : "column",
-          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,
-          alignItems: element.props.alignItems,
-          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,
-        }}
-      >
-        {element.children.map((child) => renderElement(child, theme, variables, setVariable, element.type))}
-      </View>
-    );
-  }
-
-  if (element.type === "Text") {
-    const content = element.props.mode === "expression"
-      ? interpolate(element.props.content, variables)
-      : element.props.content;
-    return (
-      <Text
-        key={element.id}
-        style={{
-          fontSize: element.props.fontSize,
-          fontWeight: element.props.fontWeight as any,
-          fontFamily: element.props.fontFamily,
-          color: element.props.color ?? theme.colors.text.primary,
-          textAlign: element.props.textAlign,
-          letterSpacing: element.props.letterSpacing,
-          lineHeight: element.props.lineHeight,
-          backgroundColor: element.props.backgroundColor,
-          padding: element.props.padding,
-          paddingHorizontal: element.props.paddingHorizontal,
-          paddingVertical: element.props.paddingVertical,
-          margin: element.props.margin,
-          marginHorizontal: element.props.marginHorizontal,
-          marginVertical: element.props.marginVertical,
-          borderWidth: element.props.borderWidth,
-          borderRadius: element.props.borderRadius,
-          borderColor: element.props.borderColor,
-          opacity: element.props.opacity,
-          flexShrink: parentType === "XStack" ? 1 : undefined,
-        }}
-      >
-        {content}
-      </Text>
-    );
-  }
-
-  if (element.type === "Image") {
-    const hasExplicitHeight = element.props.height !== undefined;
-    const aspectRatio = hasExplicitHeight
-      ? undefined
-      : (element.props.aspectRatio ?? 16 / 9);
-    return (
-      <Image
-        key={element.id}
-        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,
-        }}
-      />
-    );
-  }
-
-  if (element.type === "Lottie") {
-    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 key={element.id} 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 key={element.id} 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>
-    );
-  }
-
-  if (element.type === "Rive") {
-    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 key={element.id} 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 key={element.id} style={wrapperStyle}>
-        <RiveElementComponent element={element} riveStyle={styles.fill} />
-      </View>
-    );
-  }
-
-  if (element.type === "Icon") {
-    const icons = require("lucide-react-native");
-    const IconComp = icons[element.props.name] as React.ComponentType<{
-      size?: number;
-      color?: string;
-      strokeWidth?: number;
-    }> | undefined;
-    return (
-      <View
-        key={element.id}
-        style={{
-          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,
-        }}
-      >
-        {IconComp ? (
-          <IconComp
-            size={element.props.size ?? 24}
-            color={element.props.color ?? theme.colors.text.primary}
-            strokeWidth={element.props.strokeWidth ?? 2}
-          />
-        ) : null}
-      </View>
-    );
-  }
-
-  if (element.type === "Video") {
-    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 (!VideoElementComponent) {
-      return (
-        <View key={element.id} style={[wrapperStyle, styles.mediaFallback, { backgroundColor: theme.colors.neutral.lowest }]}>
-          <Text style={[styles.mediaFallbackText, getTextStyle(theme, "caption"), { color: theme.colors.text.tertiary }]}>
-            Install expo-video to render videos.
-          </Text>
-        </View>
-      );
-    }
-
-    return (
-      <View key={element.id} style={wrapperStyle}>
-        <VideoElementComponent element={element} style={styles.fill} />
-      </View>
-    );
-  }
-
-  if (element.type === "Input") {
-    return <InputElementComponent key={element.id} element={element} theme={theme} variables={variables} onVariableChange={setVariable} />;
-  }
-
-  return null;
-};
-
-const ComposableScreenRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentProps) => {
+const ComposableScreenRendererBase = ({ step, onContinue }: ContentProps) => {
+  const { theme } = useTheme();
   const validatedData = useMemo(() => ComposableScreenStepTypeSchema.parse(step), [step]);
   const { elements } = validatedData.payload;
   const { composableVariables, setComposableVariable } = useContext(OnboardingProgressContext);
+
+  const renderChildren = (children: UIElement[], parentType: "XStack" | "YStack") =>
+    children.map((child) => renderElement(child, ctx, parentType));
+
+  const ctx: RenderContext = {
+    theme,
+    variables: composableVariables,
+    setVariable: setComposableVariable,
+    onContinue,
+    renderChildren,
+  };
+
   return (
     <OnboardingTemplate
-      step={step}
+      step={validatedData}
       onContinue={onContinue}
       theme={theme}
     >
@@ -409,58 +42,16 @@ const ComposableScreenRendererBase = ({ step, onContinue, theme = defaultTheme }
         alwaysBounceVertical={false}
         keyboardShouldPersistTaps="handled"
       >
-        {elements.map((element) => renderElement(element, theme, composableVariables, setComposableVariable))}
-        <View style={styles.bottomSection}>
-          <TouchableOpacity
-            style={[styles.ctaButton, { backgroundColor: theme.colors.primary }]}
-            onPress={onContinue}
-            activeOpacity={0.8}
-          >
-            <Text
-              style={[
-                getTextStyle(theme, "button"),
-                { color: theme.colors.text.opposite },
-              ]}
-            >
-              {validatedData.continueButtonLabel}
-            </Text>
-          </TouchableOpacity>
-        </View>
+        {elements.map((element) => renderElement(element, ctx))}
       </ScrollView>
     </OnboardingTemplate>
-  )
+  );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  fill: {
-    width: "100%",
-    height: "100%",
-  },
   scrollContent: {
     flexGrow: 1,
   },
-  bottomSection: {
-    paddingHorizontal: 32,
-    alignItems: "center",
-  },
-  ctaButton: {
-    borderRadius: 90,
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    minWidth: 234,
-    alignItems: "center",
-  },
-  mediaFallback: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  mediaFallbackText: {
-    textAlign: "center",
-    paddingHorizontal: 16,
-  },
 });
 
 export const ComposableScreenRenderer = withErrorBoundary(ComposableScreenRendererBase, "ComposableScreen");

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

@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+export type BaseBoxProps = {
+  width?: number;
+  height?: number;
+  alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+  opacity?: number;
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  borderWidth?: number;
+  borderRadius?: number;
+  borderColor?: string;
+};
+
+export const BaseBoxPropsSchema = z.object({
+  width: z.number().min(0).optional(),
+  height: 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(),
+  margin: z.number().optional(),
+  marginHorizontal: z.number().optional(),
+  marginVertical: z.number().optional(),
+  padding: z.number().min(0).optional(),
+  paddingHorizontal: z.number().min(0).optional(),
+  paddingVertical: z.number().min(0).optional(),
+  borderWidth: z.number().min(0).optional(),
+  borderRadius: z.number().min(0).optional(),
+  borderColor: z.string().optional(),
+});

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

@@ -0,0 +1,96 @@
+import React from "react";
+import { z } from "zod";
+import { Text, TouchableOpacity } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+
+export type ButtonElementProps = BaseBoxProps & {
+  label: string;
+  action?: "continue";
+  variant?: "filled" | "outlined" | "ghost";
+  backgroundColor?: string;
+  color?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  fontFamily?: string;
+  textAlign?: "left" | "center" | "right";
+  alignSelf?: "auto" | "flex-start" | "center" | "flex-end" | "stretch";
+};
+
+export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
+  label: z.string().min(1, "label must not be empty"),
+  action: z.enum(["continue"]).optional(),
+  variant: z.enum(["filled", "outlined", "ghost"]).optional(),
+  backgroundColor: z.string().optional(),
+  color: z.string().optional(),
+  fontSize: z.number().optional(),
+  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" }>;
+
+type Props = {
+  element: ButtonUIElement;
+  ctx: RenderContext;
+};
+
+export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme, onContinue } = ctx;
+  const action = element.props.action;
+  const handlePress = () => {
+    if (action === undefined || action === "continue") {
+      onContinue();
+    }
+    // other action values are no-ops
+  };
+  const variant = element.props.variant ?? "filled";
+  const isFilled = variant === "filled";
+  const isOutlined = variant === "outlined";
+  const bgColor = isFilled
+    ? (element.props.backgroundColor ?? theme.colors.primary)
+    : "transparent";
+  const textColor = isFilled
+    ? (element.props.color ?? theme.colors.text.opposite)
+    : (element.props.color ?? theme.colors.primary);
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={handlePress}
+      style={{
+        backgroundColor: bgColor,
+        borderRadius: element.props.borderRadius ?? 90,
+        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,
+        paddingVertical: element.props.paddingVertical ?? 14,
+        paddingHorizontal: element.props.paddingHorizontal ?? 24,
+        width: element.props.width,
+        height: 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"),
+        alignItems: "center",
+        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>
+    </TouchableOpacity>
+  );
+};

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

@@ -0,0 +1,67 @@
+import React from "react";
+import { z } from "zod";
+import { View } from "react-native";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { UIElement } from "../types";
+import { RenderContext } from "./shared";
+
+export type IconElementProps = BaseBoxProps & {
+  name: string;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  backgroundColor?: string;
+};
+
+export const IconElementPropsSchema = BaseBoxPropsSchema.extend({
+  name: z.string().min(1, "icon name must not be empty"),
+  size: z.number().nonnegative().optional(),
+  color: z.string().optional(),
+  strokeWidth: z.number().nonnegative().optional(),
+  backgroundColor: z.string().optional(),
+});
+
+type IconUIElement = Extract<UIElement, { type: "Icon" }>;
+
+type Props = {
+  element: IconUIElement;
+  ctx: RenderContext;
+};
+
+export const IconElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const { theme } = ctx;
+  const icons = require("lucide-react-native");
+  const IconComp = icons[element.props.name] as React.ComponentType<{
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+  }> | undefined;
+
+  return (
+    <View
+      style={{
+        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,
+        backgroundColor: element.props.backgroundColor,
+        opacity: element.props.opacity,
+      }}
+    >
+      {IconComp ? (
+        <IconComp
+          size={element.props.size ?? 24}
+          color={element.props.color ?? theme.colors.text.primary}
+          strokeWidth={element.props.strokeWidth ?? 2}
+        />
+      ) : null}
+    </View>
+  );
+};