@builder.io/sdk-react-native 0.0.1-5 → 0.0.1-50

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+### 0.0.1-49
+
+- Fix: show the "+ add block" button on empty pages https://github.com/BuilderIO/builder/pull/934
+- Add `getBuilderSearchParams` helper export to easily view current drafts on your production site. https://github.com/BuilderIO/builder/pull/883
+
+### 0.0.1-44
+
+Changes:
+
+- Fixes `getAllContent` to traverse all nested data from symbols/references https://github.com/BuilderIO/builder/pull/718
+- Fixes `getContent` (broken due to missing URL polyfill) https://github.com/BuilderIO/builder/pull/880
+- Strips invalid `this.` left from Mitosis compilation https://github.com/BuilderIO/builder/pull/717/commits/b1947c86db769f74a7408965dac70f22dfcc538d
+- Fix identification of react-native environment https://github.com/BuilderIO/builder/pull/717/commits/9d2a207ceca39bf83d5bbdc4bd67351e86105d78
+- Fix Aspect Ratio handling (this adds support for Pixel Tracking) https://github.com/BuilderIO/builder/pull/749, preceeded by https://github.com/BuilderIO/builder/pull/687

package/README.md

@@ -0,0 +1,15 @@
+# Builder.io React-native SDK (BETA)
+
+This is the React-Native SDK. It is currently in beta.
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-react-native@dev
+```
+
+Take a look at [our example repo](/examples/react-native) for how to use this SDK.

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.1-5",
+  "version": "0.0.1-50",
   "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
   "dependencies": {
-    "react-native-render-html": "^5.1.1"
+    "react-native-render-html": "^6.3.4",
+    "react-native-video": "^5.1.1"
   },
   "peerDependencies": {
-    "react-native": "^0.64.2"
+    "react-native": "^0.64.3"
   },
   "devDependencies": {
-    "react-native": "^0.64.2"
+    "@types/react-native-video": "^5.0.9",
+    "react-native": "^0.64.3"
   }
 }

package/src/blocks/button.js

@@ -20,18 +20,17 @@ return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import { View } from "react-native";
+import { View, Text } from "react-native";
 function Button(props) {
-return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+  role: "button",
   href: props.link,
   target: props.openLinkInNewTab ? "_blank" : void 0
-}), props.text)), !props.link && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-  type: "button"
-}), props.text)));
+}), /* @__PURE__ */ React.createElement(Text, null, props.text))) : /* @__PURE__ */ React.createElement(View, __spreadValues({}, props.attributes), /* @__PURE__ */ React.createElement(Text, null, props.text)));
 }
 export {
 Button as default
 };
 
 
-        registerComponent(Button, {name:'Core:Button',image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',defaultStyles:{appearance:'none',paddingTop:'15px',paddingBottom:'15px',paddingLeft:'25px',paddingRight:'25px',backgroundColor:'#3898EC',color:'white',borderRadius:'4px',textAlign:'center',cursor:'pointer'},inputs:[{name:'text',type:'text',defaultValue:'Click me!',bubble:true},{name:'link',type:'url',bubble:true},{name:'openLinkInNewTab',type:'boolean',defaultValue:false,friendlyName:'Open link in new tab'}],static:true,noWrap:true});
+        registerComponent(Button, {name:'Core:Button',builtIn:true,image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',defaultStyles:{appearance:'none',paddingTop:'15px',paddingBottom:'15px',paddingLeft:'25px',paddingRight:'25px',backgroundColor:'#000000',color:'white',borderRadius:'4px',textAlign:'center',cursor:'pointer'},inputs:[{name:'text',type:'text',defaultValue:'Click me!',bubble:true},{name:'link',type:'url',bubble:true},{name:'openLinkInNewTab',type:'boolean',defaultValue:false,friendlyName:'Open link in new tab'}],static:true,noWrap:true});

package/src/blocks/button.lite.tsx

@@ -1,28 +1,24 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
 
 export default function Button(props) {
   return (
     <>
-      {props.link && (
+      {props.link ? (
         <>
           <View
             {...props.attributes}
+            role="button"
             href={props.link}
             target={props.openLinkInNewTab ? "_blank" : undefined}
           >
-            {props.text}
-          </View>
-        </>
-      )}
-
-      {!props.link && (
-        <>
-          <View {...props.attributes} type="button">
-            {props.text}
+            <Text>{props.text}</Text>
           </View>
         </>
+      ) : (
+        <View {...props.attributes}>
+          <Text>{props.text}</Text>
+        </View>
       )}
     </>
   );

package/src/blocks/columns.js

@@ -4,6 +4,7 @@ import { registerComponent } from '../functions/register-component';
 import { View, StyleSheet } from "react-native";
 import RenderBlocks from "../components/render-blocks";
 function Columns(props) {
+var _a;
 function getGutterSize() {
   return typeof props.space === "number" ? props.space || 0 : 20;
 }
@@ -11,37 +12,52 @@ function getColumns() {
   return props.columns || [];
 }
 function getWidth(index) {
-  const columns = this.getColumns();
-  return columns[index] && columns[index].width || 100 / columns.length;
+  var _a2;
+  const columns = getColumns();
+  return ((_a2 = columns[index]) == null ? void 0 : _a2.width) || 100 / columns.length;
 }
 function getColumnCssWidth(index) {
-  const columns = this.getColumns();
-  const gutterSize = this.getGutterSize();
+  const columns = getColumns();
+  const gutterSize = getGutterSize();
   const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-  return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+  return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+}
+function maybeApplyForTablet(prop) {
+  const stackColumnsAt = props.stackColumnsAt || "tablet";
+  return stackColumnsAt === "tablet" ? prop : "inherit";
+}
+function columnsCssVars() {
+  const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+  return {
+    "--flex-dir": flexDir,
+    "--flex-dir-tablet": maybeApplyForTablet(flexDir)
+  };
+}
+function columnCssVars() {
+  const width = "100%";
+  const marginLeft = "0";
+  return {
+    "--column-width": width,
+    "--column-margin-left": marginLeft,
+    "--column-width-tablet": maybeApplyForTablet(width),
+    "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
+  };
 }
 return /* @__PURE__ */ React.createElement(View, {
-  className: "builder-columns",
   style: styles.view1
-}, props.columns.map((column) => /* @__PURE__ */ React.createElement(View, {
-  className: "builder-column",
+}, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement(View, {
   style: styles.view2
 }, /* @__PURE__ */ React.createElement(RenderBlocks, {
   blocks: column.blocks
 }))));
 }
 const styles = StyleSheet.create({
-view1: {
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "stretch",
-  lineHeight: "normal"
-},
-view2: { flexGrow: "1" }
+view1: { display: "flex", alignItems: "stretch" },
+view2: { flexGrow: 1 }
 });
 export {
 Columns as default
 };
 
 
-        registerComponent(Columns, {name:'Columns',inputs:[{name:'columns',type:'array',broadcast:true,subFields:[{name:'blocks',type:'array',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{name:'width',type:'number',hideFromUI:true,helperText:'Width %, e.g. set to 50 to fill half of the space'},{name:'link',type:'url',helperText:'Optionally set a url that clicking this column will link to'}],defaultValue:[{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]}],onChange:"        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      "},{name:'space',type:'number',defaultValue:20,helperText:'Size of gap between columns',advanced:true},{name:'stackColumnsAt',type:'string',defaultValue:'tablet',helperText:'Convert horizontal columns to vertical at what device size',enum:['tablet','mobile','never'],advanced:true},{name:'reverseColumnsWhenStacked',type:'boolean',defaultValue:false,helperText:'When stacking columns for mobile devices, reverse the ordering',advanced:true}]});
+        registerComponent(Columns, {name:'Columns',builtIn:true,inputs:[{name:'columns',type:'array',broadcast:true,subFields:[{name:'blocks',type:'array',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{name:'width',type:'number',hideFromUI:true,helperText:'Width %, e.g. set to 50 to fill half of the space'},{name:'link',type:'url',helperText:'Optionally set a url that clicking this column will link to'}],defaultValue:[{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]},{blocks:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto',minHeight:'20px',minWidth:'20px',overflow:'hidden'}},component:{name:'Image',options:{image:'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',backgroundPosition:'center',backgroundSize:'cover',aspectRatio:0.7004048582995948}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{display:'flex',flexDirection:'column',alignItems:'stretch',flexShrink:'0',position:'relative',marginTop:'30px',textAlign:'center',lineHeight:'normal',height:'auto'}},component:{name:'Text',options:{text:'<p>Enter some text...</p>'}}}]}],onChange:"        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      "},{name:'space',type:'number',defaultValue:20,helperText:'Size of gap between columns',advanced:true},{name:'stackColumnsAt',type:'string',defaultValue:'tablet',helperText:'Convert horizontal columns to vertical at what device size',enum:['tablet','mobile','never'],advanced:true},{name:'reverseColumnsWhenStacked',type:'boolean',defaultValue:false,helperText:'When stacking columns for mobile devices, reverse the ordering',advanced:true}]});

package/src/blocks/columns.lite.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext } from "react";
 import RenderBlocks from "../components/render-blocks.lite";
 
 export default function Columns(props) {
@@ -13,21 +12,50 @@ export default function Columns(props) {
   }
 
   function getWidth(index) {
-    const columns = this.getColumns();
-    return (columns[index] && columns[index].width) || 100 / columns.length;
+    const columns = getColumns();
+    return columns[index]?.width || 100 / columns.length;
   }
 
   function getColumnCssWidth(index) {
-    const columns = this.getColumns();
-    const gutterSize = this.getGutterSize();
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
     const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
+
+  function maybeApplyForTablet(prop) {
+    const stackColumnsAt = props.stackColumnsAt || "tablet";
+    return stackColumnsAt === "tablet" ? prop : "inherit";
+  }
+
+  function columnsCssVars() {
+    const flexDir =
+      props.stackColumnsAt === "never"
+        ? "inherit"
+        : props.reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
+    };
+  }
+
+  function columnCssVars() {
+    const width = "100%";
+    const marginLeft = "0";
+    return {
+      "--column-width": width,
+      "--column-margin-left": marginLeft,
+      "--column-width-tablet": maybeApplyForTablet(width),
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
+    };
   }
 
   return (
-    <View className="builder-columns" style={styles.view1}>
-      {props.columns.map((column) => (
-        <View className="builder-column" style={styles.view2}>
+    <View style={styles.view1}>
+      {props.columns?.map((column, index) => (
+        <View style={styles.view2}>
           <RenderBlocks blocks={column.blocks} />
         </View>
       ))}
@@ -36,11 +64,6 @@ export default function Columns(props) {
 }
 
 const styles = StyleSheet.create({
-  view1: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    lineHeight: "normal",
-  },
-  view2: { flexGrow: "1" },
+  view1: { display: "flex", alignItems: "stretch" },
+  view2: { flexGrow: 1 },
 });

package/src/blocks/custom-code.js

@@ -44,7 +44,6 @@ useEffect(() => {
 }, []);
 return /* @__PURE__ */ React.createElement(View, {
   ref: elem,
-  className: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
   dangerouslySetInnerHTML: { __html: "props.code" }
 });
 }
@@ -53,4 +52,4 @@ CustomCode as default
 };
 
 
-        registerComponent(CustomCode, {name:'Custom Code',static:true,requiredPermissions:['editCode'],inputs:[{name:'code',type:'html',required:true,defaultValue:'<p>Hello there, I am custom HTML code!</p>',code:true},{name:'replaceNodes',type:'boolean',helperText:'Preserve server rendered dom nodes',advanced:true},{name:'scriptsClientOnly',type:'boolean',defaultValue:false,helperText:'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',advanced:true}]});
+        registerComponent(CustomCode, {name:'Custom Code',static:true,builtIn:true,requiredPermissions:['editCode'],inputs:[{name:'code',type:'html',required:true,defaultValue:'<p>Hello there, I am custom HTML code!</p>',code:true},{name:'replaceNodes',type:'boolean',helperText:'Preserve server rendered dom nodes',advanced:true},{name:'scriptsClientOnly',type:'boolean',defaultValue:false,helperText:'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',advanced:true}]});

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 
 export default function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
@@ -55,13 +55,5 @@ export default function CustomCode(props) {
     findAndRunScripts();
   }, []);
 
-  return (
-    <View
-      ref={elem}
-      className={
-        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-      }
-      dangerouslySetInnerHTML={{ __html: "props.code" }}
-    />
-  );
+  return <View ref={elem} dangerouslySetInnerHTML={{ __html: "props.code" }} />;
 }

package/src/blocks/embed.js

@@ -43,7 +43,6 @@ useEffect(() => {
   findAndRunScripts();
 }, []);
 return /* @__PURE__ */ React.createElement(View, {
-  className: "builder-embed",
   ref: elem,
   dangerouslySetInnerHTML: { __html: "props.content" }
 });
@@ -53,4 +52,4 @@ Embed as default
 };
 
 
-        registerComponent(Embed, {name:'Embed',static:true,inputs:[{name:'url',type:'url',required:true,defaultValue:'',helperText:'e.g. enter a youtube url, google map, etc',onChange:"        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "},{name:'content',type:'html',defaultValue:'<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',hideFromUI:true}]});
+        registerComponent(Embed, {name:'Embed',static:true,builtIn:true,inputs:[{name:'url',type:'url',required:true,defaultValue:'',helperText:'e.g. enter a youtube url, google map, etc',onChange:"        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "},{name:'content',type:'html',defaultValue:'<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',hideFromUI:true}]});

package/src/blocks/embed.lite.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 
 export default function Embed(props) {
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
@@ -56,10 +56,6 @@ export default function Embed(props) {
   }, []);
 
   return (
-    <View
-      className="builder-embed"
-      ref={elem}
-      dangerouslySetInnerHTML={{ __html: "props.content" }}
-    />
+    <View ref={elem} dangerouslySetInnerHTML={{ __html: "props.content" }} />
   );
 }

package/src/blocks/form.js

@@ -40,14 +40,11 @@ return new Promise((resolve, reject) => {
 });
 };
 import * as React from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Text } from "react-native";
 import { useState, useRef } from "react";
-import { Builder, builder } from "@builder.io/sdk";
-import { BuilderBlocks } from "@dummy";
-import { set } from "@dummy";
-import { get } from "@dummy";
+import RenderBlock from "../components/render-block";
 function FormComponent(props) {
-var _a;
+var _a, _b;
 const [state, setState] = useState(() => "unsubmitted");
 const [responseData, setResponseData] = useState(() => null);
 const [formErrorMessage, setFormErrorMessage] = useState(() => "");
@@ -202,28 +199,27 @@ return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}
   method: props.method,
   name: props.name,
   onSubmit: (event) => onSubmit(event)
-}), " ", props.builderBlock && props.builderBlock.children && /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = props.builderBlock) == null ? void 0 : _a.children.map((block) => /* @__PURE__ */ React.createElement(BuilderBlockComponent, {
+}), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block, index) => /* @__PURE__ */ React.createElement(RenderBlock, {
   block
-}))), " ", submissionState() === "error" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
+}))) : null, " ", submissionState() === "error" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
   dataPath: "errorMessage",
   blocks: props.errorMessage
-})), " ", submissionState() === "sending" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
+})) : null, " ", submissionState() === "sending" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
   dataPath: "sendingMessage",
   blocks: props.sendingMessage
-})), " ", submissionState() === "error" && responseData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-  className: "builder-form-error-text",
+})) : null, " ", submissionState() === "error" && responseData ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
   style: styles.view1
-}, " ", JSON.stringify(responseData, null, 2), " ")), " ", submissionState() === "success" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
+}, " ", /* @__PURE__ */ React.createElement(Text, null, JSON.stringify(responseData, null, 2)), " ")) : null, " ", submissionState() === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {
   dataPath: "successMessage",
   blocks: props.successMessage
-})), " ");
+})) : null, " ");
 }
 const styles = StyleSheet.create({
-view1: { padding: "10px", color: "red", textAlign: "center" }
+view1: { padding: 10, color: "red", textAlign: "center" }
 });
 export {
 FormComponent as default
 };
 
 
-        registerComponent(FormComponent, {name:'Form:Form',defaults:{responsiveStyles:{large:{marginTop:'15px',paddingBottom:'15px'}}},image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',inputs:[{name:'sendSubmissionsTo',type:'string',enum:[{label:'Send to email',value:'email',helperText:'Send form submissions to the email address of your choosing'},{label:'Custom',value:'custom',helperText:'Handle where the form requests go manually with a little code, e.g. to your own custom backend'}],defaultValue:'email'},{name:'sendSubmissionsToEmail',type:'string',required:true,defaultValue:'your@email.com',showIf:'options.get("sendSubmissionsTo") === "email"'},{name:'sendWithJs',type:'boolean',helperText:'Set to false to use basic html form action',defaultValue:true,showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'name',type:'string',defaultValue:'My form'},{name:'action',type:'string',helperText:'URL to send the form data to',showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'contentType',type:'string',defaultValue:'application/json',advanced:true,enum:['application/json','multipart/form-data','application/x-www-form-urlencoded'],showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'},{name:'method',type:'string',showIf:'options.get("sendSubmissionsTo") === "custom"',defaultValue:'POST',advanced:true},{name:'previewState',type:'string',enum:['unsubmitted','sending','success','error'],defaultValue:'unsubmitted',helperText:'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'successUrl',type:'url',helperText:'Optional URL to redirect the user to on form submission success',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'resetFormOnSubmit',type:'boolean',showIf:"options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",advanced:true},{name:'successMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Thanks!</span>'}}}]},{name:'validate',type:'boolean',defaultValue:true,advanced:true},{name:'errorMessagePath',type:'text',advanced:true,helperText:'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'},{name:'errorMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},bindings:{'component.options.text':'state.formErrorMessage || block.component.options.text'},component:{name:'Text',options:{text:'<span>Form submission error :( Please check your answers and try again</span>'}}}]},{name:'sendingMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Sending...</span>'}}}]},{name:'customHeaders',type:'map',valueType:{type:'string'},advanced:true,showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'}],noWrap:true,canHaveChildren:true,defaultChildren:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your name</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'name',placeholder:'Jane Doe'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your email</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'email',placeholder:'jane@doe.com'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:SubmitButton',options:{text:'Submit'}}}]});
+        registerComponent(FormComponent, {name:'Form:Form',builtIn:true,defaults:{responsiveStyles:{large:{marginTop:'15px',paddingBottom:'15px'}}},image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fef36d2a846134910b64b88e6d18c5ca5',inputs:[{name:'sendSubmissionsTo',type:'string',enum:[{label:'Send to email',value:'email',helperText:'Send form submissions to the email address of your choosing'},{label:'Custom',value:'custom',helperText:'Handle where the form requests go manually with a little code, e.g. to your own custom backend'}],defaultValue:'email'},{name:'sendSubmissionsToEmail',type:'string',required:true,defaultValue:'your@email.com',showIf:'options.get("sendSubmissionsTo") === "email"'},{name:'sendWithJs',type:'boolean',helperText:'Set to false to use basic html form action',defaultValue:true,showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'name',type:'string',defaultValue:'My form'},{name:'action',type:'string',helperText:'URL to send the form data to',showIf:'options.get("sendSubmissionsTo") === "custom"'},{name:'contentType',type:'string',defaultValue:'application/json',advanced:true,enum:['application/json','multipart/form-data','application/x-www-form-urlencoded'],showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'},{name:'method',type:'string',showIf:'options.get("sendSubmissionsTo") === "custom"',defaultValue:'POST',advanced:true},{name:'previewState',type:'string',enum:['unsubmitted','sending','success','error'],defaultValue:'unsubmitted',helperText:'Choose a state to edit, e.g. choose "success" to show what users see on success and edit the message',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'successUrl',type:'url',helperText:'Optional URL to redirect the user to on form submission success',showIf:'options.get("sendSubmissionsTo") !== "zapier" && options.get("sendWithJs") === true'},{name:'resetFormOnSubmit',type:'boolean',showIf:"options.get('sendSubmissionsTo') === 'custom' && options.get('sendWithJs') === true",advanced:true},{name:'successMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Thanks!</span>'}}}]},{name:'validate',type:'boolean',defaultValue:true,advanced:true},{name:'errorMessagePath',type:'text',advanced:true,helperText:'Path to where to get the error message from in a JSON response to display to the user, e.g. "error.message" for a response like { "error": { "message": "this username is taken" }}'},{name:'errorMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},bindings:{'component.options.text':'state.formErrorMessage || block.component.options.text'},component:{name:'Text',options:{text:'<span>Form submission error :( Please check your answers and try again</span>'}}}]},{name:'sendingMessage',type:'uiBlocks',hideFromUI:true,defaultValue:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Sending...</span>'}}}]},{name:'customHeaders',type:'map',valueType:{type:'string'},advanced:true,showIf:'options.get("sendSubmissionsTo") === "custom" && options.get("sendWithJs") === true'}],noWrap:true,canHaveChildren:true,defaultChildren:[{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your name</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'name',placeholder:'Jane Doe'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Text',options:{text:'<span>Enter your email</span>'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:Input',options:{name:'email',placeholder:'jane@doe.com'}}},{'@type':'@builder.io/sdk:Element',responsiveStyles:{large:{marginTop:'10px'}},component:{name:'Form:SubmitButton',options:{text:'Submit'}}}]});

package/src/blocks/form.lite.tsx

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
-import { useState, useContext, useRef } from "react";
-import { BuilderBlockComponent as BuilderBlock } from "@dummy";
-import { Builder, builder } from "@builder.io/sdk";
-import { BuilderBlocks } from "@dummy";
-import { set } from "@dummy";
-import { get } from "@dummy";
+import { useState, useRef } from "react";
+import RenderBlock from "../components/render-block.lite";
 
 export default function FormComponent(props) {
   const [state, setState] = useState(() => "unsubmitted");
@@ -145,7 +141,7 @@ export default function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like             error: - email has been taken */ message =
+                /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
                   JSON.stringify(message);
               }
               setFormErrorMessage(message);
@@ -213,45 +209,45 @@ export default function FormComponent(props) {
       onSubmit={(event) => onSubmit(event)}
     >
       {" "}
-      {props.builderBlock && props.builderBlock.children && (
+      {props.builderBlock && props.builderBlock.children ? (
         <>
-          {props.builderBlock?.children.map((block) => (
-            <BuilderBlockComponent block={block} />
+          {props.builderBlock?.children?.map((block, index) => (
+            <RenderBlock block={block} />
           ))}
         </>
-      )}{" "}
-      {submissionState() === "error" && (
+      ) : null}{" "}
+      {submissionState() === "error" ? (
         <>
           <BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage} />
         </>
-      )}{" "}
-      {submissionState() === "sending" && (
+      ) : null}{" "}
+      {submissionState() === "sending" ? (
         <>
           <BuilderBlocks
             dataPath="sendingMessage"
             blocks={props.sendingMessage}
           />
         </>
-      )}{" "}
-      {submissionState() === "error" && responseData && (
+      ) : null}{" "}
+      {submissionState() === "error" && responseData ? (
         <>
-          <View className="builder-form-error-text" style={styles.view1}>
+          <View style={styles.view1}>
             {" "}
-            {JSON.stringify(responseData, null, 2)}{" "}
+            <Text>{JSON.stringify(responseData, null, 2)}</Text>{" "}
           </View>
         </>
-      )}{" "}
-      {submissionState() === "success" && (
+      ) : null}{" "}
+      {submissionState() === "success" ? (
         <>
           <BuilderBlocks
             dataPath="successMessage"
             blocks={props.successMessage}
           />
         </>
-      )}{" "}
+      ) : null}{" "}
     </View>
   );
 }
 const styles = StyleSheet.create({
-  view1: { padding: "10px", color: "red", textAlign: "center" },
+  view1: { padding: 10, color: "red", textAlign: "center" },
 });

package/src/blocks/fragment.js

@@ -0,0 +1,13 @@
+import { registerComponent } from '../functions/register-component';
+
+        import * as React from "react";
+import { View, Text } from "react-native";
+function FragmentComponent(props) {
+return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, props.children));
+}
+export {
+FragmentComponent as default
+};
+
+
+        registerComponent(FragmentComponent, {name:'Fragment',static:true,hidden:true,builtIn:true,canHaveChildren:true,noWrap:true});

package/src/blocks/fragment.lite.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+
+export default function FragmentComponent(props) {
+  return (
+    <View>
+      <Text>{props.children}</Text>
+    </View>
+  );
+}

package/src/blocks/image.js

@@ -1,26 +1,46 @@
 import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import { Image as ReactImage, View } from "react-native";
 import { registerComponent } from "../functions/register-component";
 function Image(props) {
-  return /* @__PURE__ */ React.createElement(View, {
+  return props.aspectRatio ? /* @__PURE__ */ React.createElement(View, {
     style: { position: "relative" }
   }, /* @__PURE__ */ React.createElement(ReactImage, {
     resizeMode: props.backgroundSize || "contain",
     style: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0 },
     source: { uri: props.image }
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "builder-image-sizer",
+  }), /* @__PURE__ */ React.createElement(View, {
     style: {
       width: "100%",
-      paddingTop: props.aspectRatio * 100 + "%",
-      pointerEvents: "none",
-      fontSize: 0
+      paddingTop: props.aspectRatio * 100 + "%"
     }
-  }, " "));
+  })) : /* @__PURE__ */ React.createElement(ReactImage, {
+    resizeMode: props.backgroundSize || "contain",
+    style: __spreadValues(__spreadValues({
+      position: "relative"
+    }, props.width ? { width: props.width } : {}), props.height ? { height: props.height } : {}),
+    source: { uri: props.image }
+  });
 }
 registerComponent(Image, {
   name: "Image",
   static: true,
+  builtIn: 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",
   defaultStyles: {
     position: "relative",