@builder.io/sdk-react-native 4.2.1 → 4.2.3

package/src/blocks/columns/columns.tsx

@@ -1,18 +1,6 @@
 import BaseText from "../../blocks/BaseText";
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, StyleSheet } from "react-native";
 
 type CSSVal = string | number;
 import Blocks from "../../components/blocks/blocks";

package/src/blocks/custom-code/custom-code.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
 
 export interface CustomCodeProps {

package/src/blocks/embed/embed.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
 
 export interface EmbedProps {

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

@@ -1,18 +1,6 @@
 import * as React from "react";
 import BaseText from "../../blocks/BaseText";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, StyleSheet, Text } from "react-native";
 import { useState, useRef } from "react";
 
 /**
@@ -88,6 +76,10 @@ function FormComponent(props: FormProps) {
     return (isEditing() && props.previewState) || formState;
   }
 
+  function errorResponse(response: any) {
+    return JSON.stringify(response, null, 2);
+  }
+
   function onSubmit(event: any) {
     const sendWithJsProp =
       props.sendWithJs || props.sendSubmissionsTo === "email";
@@ -322,7 +314,7 @@ function FormComponent(props: FormProps) {
       ) : null}
       {submissionState() === "error" && responseData ? (
         <View style={styles.view1}>
-          <BaseText>{JSON.stringify(responseData, null, 2)}</BaseText>
+          <BaseText>{errorResponse(responseData)}</BaseText>
         </View>
       ) : null}
       {submissionState() === "success" ? (

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

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { TextInput } from "react-native";
 
 /**
  * This import is used by the Svelte SDK. Do not remove.

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

@@ -1,18 +1,6 @@
 import * as React from "react";
 import BaseText from "../../blocks/BaseText";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, Text } from "react-native";
 
 /**
  * This import is used by the Svelte SDK. Do not remove.

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

@@ -1,18 +1,6 @@
 import * as React from "react";
 import BaseText from "../../blocks/BaseText";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, Text, Button } from "react-native";
 
 /**
  * This import is used by the Svelte SDK. Do not remove.

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

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View } from "react-native";
 
 /**
  * This import is used by the Svelte SDK. Do not remove.

package/src/blocks/fragment/fragment.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, Text } from "react-native";
 import type { FragmentProps } from "./fragment.types";
 
 function FragmentComponent(props: FragmentProps) {

package/src/blocks/img/component-info.ts

@@ -1,7 +1,6 @@
 import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,
   image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4',
@@ -11,7 +10,38 @@ export const componentInfo: ComponentInfo = {
     type: 'file',
     allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
+  }, {
+    name: 'backgroundSize',
+    type: 'text',
+    defaultValue: 'cover',
+    enum: [{
+      label: 'contain',
+      value: 'contain',
+      helperText: 'The image should never get cropped'
+    }, {
+      label: 'cover',
+      value: 'cover',
+      helperText: "The image should fill it's box, cropping when needed"
+    }]
+  }, {
+    name: 'backgroundPosition',
+    type: 'text',
+    defaultValue: 'center',
+    enum: ['center', 'top', 'left', 'right', 'bottom', 'top left', 'top right', 'bottom left', 'bottom right']
+  }, {
+    name: 'altText',
+    type: 'string',
+    helperText: 'Text to display when the user has images off'
+  }, {
+    name: 'title',
+    type: 'string',
+    helperText: 'Text to display when hovering over the asset'
+  }, {
+    name: 'aspectRatio',
+    type: 'number',
+    helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
+    advanced: true,
+    defaultValue: 0.7041
   }],
-  noWrap: true,
-  static: true
+  noWrap: true
 }

package/src/blocks/img/img.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { StyleSheet, Image } from "react-native";
 
 /**
  * This import is used by the Svelte SDK. Do not remove.
@@ -33,12 +21,14 @@ export interface ImgProps {
     | "top right"
     | "bottom left"
     | "bottom right";
+  aspectRatio?: number;
+  title?: string;
 }
 
 import { isEditing } from "../../functions/is-editing";
 import { filterAttrs } from "../helpers";
 import { getSrcSet } from "../image/image.helpers";
-import { setAttrs } from "../helpers";
+import { getClassPropName } from "../../functions/get-class-prop-name";
 
 function ImgComponent(props: ImgProps) {
   function srcSetToUse() {
@@ -54,19 +44,32 @@ function ImgComponent(props: ImgProps) {
     return getSrcSet(url);
   }
 
+  function imgAttrs() {
+    const attrs = {
+      ...props.attributes,
+      ...{},
+      [getClassPropName()]: `builder-raw-img ${
+        props.attributes[getClassPropName()] || ""
+      }`,
+    } as Record<string, any>;
+    delete attrs.style;
+    return attrs;
+  }
+
   return (
     <Image
       loading="lazy"
+      key={(isEditing() && props.imgSrc) || "default-key"}
+      alt={props.altText}
+      title={props.title}
+      source={{ uri: props.imgSrc || props.image }}
+      {...imgAttrs()}
       style={{
         objectFit: props.backgroundSize || "cover",
         objectPosition: props.backgroundPosition || "center",
+        aspectRatio: props.aspectRatio || undefined,
+        ...(props.attributes?.style || {}),
       }}
-      key={(isEditing() && props.imgSrc) || "default-key"}
-      alt={props.altText}
-      source={{ uri: props.imgSrc || props.image }}
-      srcSet={srcSetToUse()}
-      {...{}}
-      {...props.attributes}
     />
   );
 }

package/src/blocks/personalization-container/personalization-container.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View } from "react-native";
 import { useState, useRef, useEffect } from "react";
 import Blocks from "../../components/blocks/blocks";
 import InlinedScript from "../../components/inlined-script";

package/src/blocks/section/section.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, StyleSheet, Text } from "react-native";
 import { filterAttrs } from "../helpers";
 import type { SectionProps } from "./section.types";
 import { setAttrs } from "../helpers";

package/src/blocks/slot/slot.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, StyleSheet } from "react-native";
 
 export type DropzoneProps = BuilderDataProps &
   BuilderComponentsProp & {

package/src/blocks/symbol/symbol.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View } from "react-native";
 import { useState, useEffect } from "react";
 import ContentVariants from "../../components/content-variants/index";
 import type { BuilderContent } from "../../types/builder-content";
@@ -32,6 +20,10 @@ function Symbol(props: SymbolProps) {
     return View;
   }
 
+  function customComponents() {
+    return Object.values(props.builderComponents);
+  }
+
   function className() {
     return [
       ...[],
@@ -86,7 +78,7 @@ function Symbol(props: SymbolProps) {
           ...props.builderContext.context,
           symbolId: props.builderBlock?.id,
         }}
-        customComponents={Object.values(props.builderComponents)}
+        customComponents={customComponents()}
         data={{
           ...props.symbol?.data,
           ...props.builderContext.localState,

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

@@ -1,6 +1,6 @@
 import type { BuilderContent } from '../../types/builder-content';
 import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
-interface SymbolInfo {
+export interface SymbolInfo {
   model?: string;
   entry?: string;
   data?: any;

package/src/blocks/tabs/tabs.tsx

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { View, StyleSheet, Pressable } from "react-native";
 import { useState } from "react";
 import Blocks from "../../components/blocks/blocks";
 import type { BuilderBlock } from "../../types/builder-block";
@@ -26,6 +14,10 @@ function Tabs(props: TabsProps) {
     return props.tabs && props.tabs[active].content;
   }
 
+  function getTabStyle(index: number) {
+    return index === activeTab ? props.activeTabStyle : {};
+  }
+
   function onClick(index: number) {
     if (index === activeTab && props.collapsible) {
       setActiveTab(-1);
@@ -47,9 +39,7 @@ function Tabs(props: TabsProps) {
         {props.tabs?.map((tab, index) => (
           <Pressable
             key={index}
-            style={{
-              ...(activeTab === index ? props.activeTabStyle : {}),
-            }}
+            style={getTabStyle(index)}
             onPress={(event) => onClick(index)}
           >
             <Blocks

package/src/blocks/text/component-info.ts

@@ -7,7 +7,6 @@ export const componentInfo: ComponentInfo = {
   } : {},
   name: 'Text',
   static: true,
-  isRSC: true,
   image: 'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929',
   inputs: [{
     name: 'text',

package/src/components/awaiter.tsx

@@ -1,31 +1,7 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { Text } from "react-native";
 import { useEffect } from "react";
-
-/**
- * Placeholder component to be overridden by specific SDKs.
- * Allows to dynamically import components.
- */
-
-type AwaiterProps = {
-  load: () => Promise<any>;
-  props?: any;
-  attributes?: any;
-  fallback?: any;
-  children?: any;
-};
+import type { AwaiterProps } from "./awaiter.types";
 
 function Awaiter(props: AwaiterProps) {
   useEffect(() => {}, []);

package/src/components/awaiter.types.ts

@@ -0,0 +1,7 @@
+export type AwaiterProps = {
+  load: () => Promise<any>;
+  props?: any;
+  attributes?: any;
+  fallback?: any;
+  children?: any;
+}

package/src/components/block/block.tsx

@@ -1,18 +1,6 @@
 import BaseText from "../../blocks/BaseText";
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import {} from "react-native";
 import { useState, useEffect } from "react";
 
 export type BlockProps = {
@@ -42,12 +30,13 @@ import {
   provideLinkComponent,
   provideRegisteredComponents,
 } from "./block.helpers";
-import BlockStyles from "./components/block-styles";
 import BlockWrapper from "./components/block-wrapper";
 import type { ComponentProps } from "./components/component-ref/component-ref.helpers";
 import ComponentRef from "./components/component-ref/component-ref";
 import RepeatedBlock from "./components/repeated-block";
+import StyleWrapper from "./components/style-wrapper";
 import { memo } from "react";
+import { View } from "react-native";
 
 function Block(props: BlockProps) {
   function repeatItem() {
@@ -164,7 +153,11 @@ function Block(props: BlockProps) {
     <>
       {canShowBlock() ? (
         <>
-          <BlockStyles block={processedBlock()} context={props.context} />
+          <StyleWrapper
+            block={processedBlock()}
+            context={props.context}
+            id={props.block.id}
+          />
           {!blockComponent?.()?.noWrap ? (
             <>
               {!repeatItem() ? (

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

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import {} from "react-native";
 
 export type BlockStylesProps = {
   block: BuilderBlock;

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

@@ -1,17 +1,5 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
+import { Text } from "react-native";
 
 type BlockWrapperProps = {
   Wrapper: string;

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

@@ -1,18 +1,6 @@
 import * as React from "react";
-import {
-  FlatList,
-  ScrollView,
-  View,
-  StyleSheet,
-  Image,
-  Text,
-  Pressable,
-  TextInput,
-  TouchableOpacity,
-  Button,
-  Linking,
-} from "react-native";
-import { useState, useContext, useEffect } from "react";
+import {} from "react-native";
+import { useState, useContext } from "react";
 import { wrapComponentRef } from "../../../content/wrap-component-ref";
 import Block from "../../block";
 import InteractiveElement from "../interactive-element";
@@ -27,8 +15,6 @@ function ComponentRef(props: ComponentProps) {
     props.isInteractive ? InteractiveElement : props.componentRef
   );
 
-  useEffect(() => {}, [props.componentOptions, props.blockChildren]);
-
   return (
     <BuilderContext.Provider
       value={{
@@ -55,15 +41,19 @@ function ComponentRef(props: ComponentProps) {
             contextValue: props.context,
           })}
         >
-          {props.blockChildren?.map((child) => (
-            <Block
-              key={child.id}
-              block={child}
-              context={props.context}
-              registeredComponents={props.registeredComponents}
-              linkComponent={props.linkComponent}
-            />
-          ))}
+          {props.componentRef ? (
+            <>
+              {props.blockChildren?.map((child) => (
+                <Block
+                  key={child.id}
+                  block={child}
+                  context={props.context}
+                  registeredComponents={props.registeredComponents}
+                  linkComponent={props.linkComponent}
+                />
+              ))}
+            </>
+          ) : null}
         </Wrapper>
       ) : null}
     </BuilderContext.Provider>