@builder.io/sdk-react-native 2.0.2 → 2.0.4

package/src/blocks/form/input/input.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 /**

package/src/blocks/form/select/select.tsx

@@ -9,6 +9,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 /**

package/src/blocks/form/submit-button/submit-button.tsx

@@ -9,6 +9,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 /**
@@ -25,9 +28,9 @@ import { setAttrs } from "../../helpers";
 
 function SubmitButton(props: ButtonProps) {
   return (
-    <View type="submit" {...{}} {...props.attributes}>
+    <Button type="submit" {...{}} {...props.attributes}>
       <BaseText>{props.text}</BaseText>
-    </View>
+    </Button>
   );
 }
 

package/src/blocks/form/textarea/textarea.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 /**

package/src/blocks/fragment/fragment.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import type { FragmentProps } from "./fragment.types";
 

package/src/blocks/image/image.types.ts

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+  attributes?: string;
   highPriority?: boolean;
   className?: string;
   image: string;
@@ -12,6 +13,7 @@ export interface ImageProps {
   backgroundPosition?: string;
   srcset?: string;
   aspectRatio?: number;
+  lockAspectRatio?: boolean;
   children?: any;
   fitContent?: boolean;
   builderBlock?: BuilderBlock;

package/src/blocks/img/img.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 /**
@@ -38,14 +41,14 @@ import { setAttrs } from "../helpers";
 
 function ImgComponent(props: ImgProps) {
   return (
-    <View
+    <Image
       style={{
         objectFit: props.backgroundSize || "cover",
         objectPosition: props.backgroundPosition || "center",
       }}
       key={(isEditing() && props.imgSrc) || "default-key"}
       alt={props.altText}
-      src={props.imgSrc || props.image}
+      source={{ uri: props.imgSrc || props.image }}
       {...{}}
       {...props.attributes}
     />

package/src/blocks/section/section.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { filterAttrs } from "../helpers";
 import type { SectionProps } from "./section.types";

package/src/blocks/slot/slot.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 export type DropzoneProps = BuilderDataProps & {

package/src/blocks/symbol/symbol.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState, useEffect } from "react";
 import ContentVariants from "../../components/content-variants/index";

package/src/blocks/symbol/symbol.types.ts

@@ -14,4 +14,5 @@ export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, Bu
   dynamic?: boolean;
   attributes?: any;
   inheritState?: boolean;
+  renderToLiquid?: boolean;
 }

package/src/blocks/tabs/tabs.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState } from "react";
 import Blocks from "../../components/blocks/blocks";

package/src/components/block/animator.ts

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 import type { BuilderAnimation } from '../../types/builder-block';
 
@@ -54,6 +55,9 @@ function assign(target: object, ..._args: any[]) {
   return to;
 }
 export function bindAnimations(animations: BuilderAnimation[]) {
+  if (TARGET === 'reactNative') {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case 'pageLoad':

package/src/components/block/block.tsx

@@ -9,6 +9,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useEffect } from "react";
 
@@ -137,18 +140,7 @@ function Block(props: BlockProps) {
     };
   }
 
-  useEffect(() => {
-    const blockId = processedBlock().id;
-    const animations = processedBlock().animations;
-    if (animations && blockId) {
-      bindAnimations(
-        animations.map((animation) => ({
-          ...animation,
-          elementId: blockId,
-        }))
-      );
-    }
-  }, []);
+  useEffect(() => {}, []);
 
   return (
     <>

package/src/components/block/components/block-styles.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 export type BlockStylesProps = {

package/src/components/block/components/block-wrapper.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 type BlockWrapperProps = {

package/src/components/block/components/component-ref/component-ref.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState, useContext } from "react";
 import { wrapComponentRef } from "../../../content/wrap-component-ref";

package/src/components/block/components/interactive-element.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 export type InteractiveElementProps = {

package/src/components/block/components/repeated-block.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState, useContext } from "react";
 

package/src/components/blocks/blocks-wrapper.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 export type BlocksWrapperProps = {

package/src/components/blocks/blocks.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context";

package/src/components/content/components/enable-editor.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState, useContext, useRef, useEffect } from "react";
 

package/src/components/content/components/styles.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState } from "react";
 

package/src/components/content/content.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState, useContext } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components";

package/src/components/content-variants/content-variants.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 import { useState, useEffect } from "react";
 

package/src/components/dynamic-div.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 export interface DynamicDivProps {

package/src/components/dynamic-renderer/dynamic-renderer.tsx

@@ -8,6 +8,9 @@ import {
   Text,
   Pressable,
   TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
 } from "react-native";
 
 export interface DynamicRendererProps {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.2"
+export const SDK_VERSION = "2.0.4"

package/src/functions/register-component.ts

@@ -1,6 +1,4 @@
 import type { ComponentInfo } from '../types/components';
-import type { Input } from '../types/input';
-import { fastClone } from './fast-clone';
 export const createRegisterComponentMessage = (info: ComponentInfo) => ({
   type: 'builder.registerComponent',
   data: serializeComponentInfo(info)
@@ -17,14 +15,11 @@ const serializeFn = (fnValue: Function) => {
   const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
   return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
-const serializeValue = (value: object): any => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-export const serializeComponentInfo = ({
-  inputs,
-  ...info
-}: ComponentInfo): ComponentInfo => ({
-  ...fastClone(info),
-  inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), ({} as Input)))
-})
+export function serializeComponentInfo(info: ComponentInfo) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === 'function') {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}