@builder.io/sdk-react-native 0.0.1-4 → 0.0.1-40

package/src/blocks/submit-button.js

@@ -1,34 +1,60 @@
 import { registerComponent } from '../functions/register-component';
 
-        var __defProp = Object.defineProperty;
+var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 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 __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;
+  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;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
-import { View } from "react-native";
+import * as React from 'react';
+import { View, Text } from 'react-native';
 function SubmitButton(props) {
-return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-  type: "submit"
-}), props.text);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    __spreadProps(__spreadValues({}, props.attributes), {
+      type: 'submit',
+    }),
+    /* @__PURE__ */ React.createElement(Text, null, props.text)
+  );
 }
-export {
-SubmitButton as default
-};
-
+export { SubmitButton as default };
 
-        registerComponent(SubmitButton, {name:'Form:SubmitButton',image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',defaultStyles:{appearance:'none',paddingTop:'15px',paddingBottom:'15px',paddingLeft:'25px',paddingRight:'25px',backgroundColor:'#3898EC',color:'white',borderRadius:'4px',cursor:'pointer'},inputs:[{name:'text',type:'text',defaultValue:'Click me'}],static:true,noWrap:true});
+registerComponent(SubmitButton, {
+  name: 'Form:SubmitButton',
+  builtIn: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
+  defaultStyles: {
+    appearance: 'none',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    backgroundColor: '#3898EC',
+    color: 'white',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+  inputs: [{ name: 'text', type: 'text', defaultValue: 'Click me' }],
+  static: true,
+  noWrap: true,
+});

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

@@ -1,11 +1,10 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
 
 export default function SubmitButton(props) {
   return (
     <View {...props.attributes} type="submit">
-      {props.text}
+      <Text>{props.text}</Text>
     </View>
   );
 }

package/src/blocks/symbol.js

@@ -1,20 +1,22 @@
-import * as React from "react";
-import { View } from "react-native";
-import { useContext } from "react";
-import RenderContent from "../components/render-content";
-import BuilderContext from "../context/builder.context";
+import * as React from 'react';
+import { View } from 'react-native';
+import { useContext } from 'react';
+import RenderContent from '../components/render-content';
+import BuilderContext from '../context/builder.context';
 function Symbol(props) {
   var _a, _b, _c;
   const builderContext = useContext(BuilderContext);
-  return /* @__PURE__ */ React.createElement(View, {
-    className: "builder-symbol"
-  }, /* @__PURE__ */ React.createElement(RenderContent, {
-    context: builderContext.context,
-    data: (_a = props.symbol) == null ? void 0 : _a.data,
-    model: (_b = props.symbol) == null ? void 0 : _b.model,
-    content: (_c = props.symbol) == null ? void 0 : _c.content
-  }));
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      className: 'builder-symbol',
+    },
+    /* @__PURE__ */ React.createElement(RenderContent, {
+      context: builderContext.context,
+      data: (_a = props.symbol) == null ? void 0 : _a.data,
+      model: (_b = props.symbol) == null ? void 0 : _b.model,
+      content: (_c = props.symbol) == null ? void 0 : _c.content,
+    })
+  );
 }
-export {
-  Symbol as default
-};
+export { Symbol as default };

package/src/blocks/symbol.lite.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
-import RenderContent from "../components/render-content.lite";
-import BuilderContext from "../context/builder.context.lite";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { useContext } from 'react';
+import RenderContent from '../components/render-content.lite';
+import BuilderContext from '../context/builder.context.lite';
 
 export default function Symbol(props) {
   const builderContext = useContext(BuilderContext);

package/src/blocks/text.js

@@ -1,31 +1,100 @@
 import * as React from 'react';
-import HTML from "react-native-render-html";
-import { registerComponent } from "../functions/register-component";
+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 HTML from 'react-native-render-html';
+import { registerComponent } from '../functions/register-component';
+function camelToKebabCase(string) {
+  return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+}
+function pick(object, keys) {
+  return keys.reduce((obj, key) => {
+    if (object && object.hasOwnProperty(key)) {
+      obj[key] = object[key];
+    }
+    return obj;
+  }, {});
+}
+const PICK_STYLES = ['textAlign'];
+function getBlockStyles(block) {
+  var _a, _b, _c;
+  const styles = __spreadValues(
+    __spreadValues(
+      {},
+      (_a = block.responsiveStyles) == null ? void 0 : _a.large
+    ),
+    block.styles
+  );
+  if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
+    Object.assign(styles, block.responsiveStyles.medium);
+  }
+  if ((_c = block.responsiveStyles) == null ? void 0 : _c.small) {
+    Object.assign(styles, block.responsiveStyles.small);
+  }
+  return styles;
+}
+function getCss(block) {
+  const styleObject = pick(getBlockStyles(block), PICK_STYLES);
+  if (!styleObject) {
+    return '';
+  }
+  let str = ``;
+  for (const key in styleObject) {
+    const value = styleObject[key];
+    if (typeof value === 'string') {
+      str += `${camelToKebabCase(key)}: ${value};`;
+    }
+  }
+  return str;
+}
 function Text(props) {
   return /* @__PURE__ */ React.createElement(HTML, {
-    source: { html: props.text }
+    source: {
+      html: `<div style="${getCss(props.builderBlock)}">${
+        props.text || ''
+      }</div>`,
+    },
   });
 }
 registerComponent(Text, {
-  name: "Text",
+  name: 'Text',
   static: 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",
+  builtIn: 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",
-      type: "html",
+      name: 'text',
+      type: 'html',
       required: true,
       autoFocus: true,
       bubble: true,
-      defaultValue: "Enter some text..."
-    }
+      defaultValue: 'Enter some text...',
+    },
   ],
   defaultStyles: {
-    lineHeight: "normal",
-    height: "auto",
-    textAlign: "center"
-  }
+    lineHeight: 'normal',
+    height: 'auto',
+    textAlign: 'center',
+  },
 });
-export {
-  Text as default
-};
+export { Text as default };

package/src/blocks/text.lite.tsx

@@ -1,12 +1,11 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
 
 export default function Text(props) {
   return (
     <View
       className="builder-text"
-      dangerouslySetInnerHTML={{ __html: "props.text" }}
+      dangerouslySetInnerHTML={{ __html: 'props.text' }}
     />
   );
 }

package/src/blocks/textarea.js

@@ -1,37 +1,73 @@
 import { registerComponent } from '../functions/register-component';
 
-        var __defProp = Object.defineProperty;
+var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 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 __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;
+  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;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
-import { View } from "react-native";
+import * as React from 'react';
+import { View } from 'react-native';
 function Textarea(props) {
-return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-  placeholder: props.placeholder,
-  name: props.name,
-  value: props.value,
-  defaultValue: props.defaultValue
-}));
+  return /* @__PURE__ */ React.createElement(
+    View,
+    __spreadProps(__spreadValues({}, props.attributes), {
+      placeholder: props.placeholder,
+      name: props.name,
+      value: props.value,
+      defaultValue: props.defaultValue,
+    })
+  );
 }
-export {
-Textarea as default
-};
-
+export { Textarea as default };
 
-        registerComponent(Textarea, {name:'Form:TextArea',image:'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',inputs:[{advanced:true,name:'value',type:'string'},{name:'name',type:'string',required:true,helperText:'Every input in a form needs a unique name describing what it gets, e.g. "email"'},{name:'defaultValue',type:'string'},{name:'placeholder',type:'string',defaultValue:'Hello there'},{name:'required',type:'boolean',defaultValue:false}],defaultStyles:{paddingTop:'10px',paddingBottom:'10px',paddingLeft:'10px',paddingRight:'10px',borderRadius:'3px',borderWidth:'1px',borderStyle:'solid',borderColor:'#ccc'},static:true,noWrap:true});
+registerComponent(Textarea, {
+  name: 'Form:TextArea',
+  builtIn: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
+  inputs: [
+    { advanced: true, name: 'value', type: 'string' },
+    {
+      name: 'name',
+      type: 'string',
+      required: true,
+      helperText:
+        'Every input in a form needs a unique name describing what it gets, e.g. "email"',
+    },
+    { name: 'defaultValue', type: 'string' },
+    { name: 'placeholder', type: 'string', defaultValue: 'Hello there' },
+    { name: 'required', type: 'boolean', defaultValue: false },
+  ],
+  defaultStyles: {
+    paddingTop: '10px',
+    paddingBottom: '10px',
+    paddingLeft: '10px',
+    paddingRight: '10px',
+    borderRadius: '3px',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: '#ccc',
+  },
+  static: true,
+  noWrap: true,
+});

package/src/blocks/textarea.lite.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
 
 export default function Textarea(props) {
   return (

package/src/blocks/video.js

@@ -1,49 +1,100 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import ReactVideo from 'react-native-video';
 import { registerComponent } from '../functions/register-component';
-
-        var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-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;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
-import { View } from "react-native";
 function Video(props) {
-var _a;
-return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-  preload: "none",
-  style: __spreadProps(__spreadValues({
-    width: "100%",
-    height: "100%"
-  }, (_a = props.attributes) == null ? void 0 : _a.style), {
-    objectFit: props.fit,
-    objectPosition: props.position,
-    borderRadius: 1
-  }),
-  key: props.video || "no-src",
-  poster: props.posterImage,
-  autoPlay: props.autoPlay,
-  muted: props.muted,
-  controls: props.controls,
-  loop: props.loop
-}));
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: { position: 'relative' },
+    },
+    /* @__PURE__ */ React.createElement(ReactVideo, {
+      paused: !props.autoPlay,
+      controls: props.controls,
+      muted: props.muted,
+      repeat: props.loop,
+      poster: props.posterImage,
+      posterResizeMode: props.fit || 'contain',
+      resizeMode: props.fit || 'contain',
+      style: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1,
+      },
+      source: { uri: props.video },
+    }),
+    /* @__PURE__ */ React.createElement(View, {
+      style: {
+        width: '100%',
+        paddingTop: `${props.aspectRatio * 100}%`,
+      },
+    })
+  );
 }
-export {
-Video as default
-};
-
-
-        registerComponent(Video, {name:'Video',canHaveChildren:true,defaultStyles:{minHeight:'20px',minWidth:'20px'},image:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb',inputs:[{name:'video',type:'file',allowedFileTypes:['mp4'],bubble:true,defaultValue:'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',required:true,onChange:"        const 0.7004048582995948 = 0.7004048582995948;        function loadImage(url: string, timeout = 60000): Promise<HTMLImageElement> {          return new Promise((resolve, reject) => {            const img = document.createElement('img');            let loaded = false;            img.onload = () => {              loaded = true;              resolve(img);            };            img.addEventListener('error', event => {              console.warn('Image load failed', event.error);              reject(event.error);            });            img.src = url;            setTimeout(() => {              if (!loaded) {                reject(new Error('Image load timed out'));              }            }, timeout);          });        }        function round(num: number) {          return Math.round(num * 1000) / 1000;        }        // TODO        const value = options.get('image');        const aspectRatio = options.get('aspectRatio');        if (value && (!aspectRatio || aspectRatio === 0.7004048582995948)) {          return loadImage(value).then(img => {            const possiblyUpdatedAspectRatio = options.get('aspectRatio');            if (              options.get('image') === value &&              (!possiblyUpdatedAspectRatio || possiblyUpdatedAspectRatio === 0.7004048582995948)            ) {              if (img.width && img.height) {                options.set('aspectRatio', round(img.height / img.width));              }            }          });        }      "},{name:'posterImage',type:'file',allowedFileTypes:['jpeg','png'],helperText:'Image to show before the video plays'},{name:'autoPlay',type:'boolean',defaultValue:true},{name:'controls',type:'boolean',defaultValue:false},{name:'muted',type:'boolean',defaultValue:true},{name:'loop',type:'boolean',defaultValue:true},{name:'playsInline',type:'boolean',defaultValue:true},{name:'fit',type:'text',defaultValue:'cover',enum:['contain','cover','fill','auto']},{name:'fitContent',type:'boolean',helperText:'When child blocks are provided, fit to them instead of using the aspect ratio',defaultValue:true,advanced:true},{name:'position',type:'text',defaultValue:'center',enum:['center','top','left','right','bottom','top left','top right','bottom left','bottom right']},{name:'height',type:'number',advanced:true},{name:'width',type:'number',advanced:true},{name:'aspectRatio',type:'number',advanced:true,defaultValue:0.7004048582995948},{name:'lazyLoad',type:'boolean',helperText:'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',defaultValue:true,advanced:true}]});
+registerComponent(Video, {
+  name: 'Video',
+  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',
+    minHeight: '20px',
+    minWidth: '20px',
+    overflow: 'hidden',
+  },
+  canHaveChildren: true,
+  inputs: [
+    {
+      name: 'video',
+      type: 'file',
+      allowedFileTypes: ['mp4'],
+      bubble: true,
+      defaultValue:
+        'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f',
+      required: true,
+    },
+    {
+      name: 'posterImage',
+      type: 'file',
+      allowedFileTypes: ['jpeg', 'png'],
+      helperText: 'Image to show before the video plays',
+    },
+    {
+      name: 'autoPlay',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    {
+      name: 'controls',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      name: 'muted',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    {
+      name: 'loop',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    {
+      name: 'fit',
+      type: 'text',
+      defaultValue: 'cover',
+      enum: ['contain', 'cover', 'stretch'],
+    },
+    {
+      name: 'aspectRatio',
+      type: 'number',
+      advanced: true,
+      defaultValue: 0.7004048582995948,
+    },
+  ],
+});
+export { Video as default };

package/src/blocks/video.lite.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
-import { useContext } from "react";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
 
 export default function Video(props) {
   return (
@@ -8,8 +7,8 @@ export default function Video(props) {
       {...props.attributes}
       preload="none"
       style={{
-        width: "100%",
-        height: "100%",
+        width: '100%',
+        height: '100%',
         ...props.attributes?.style,
         objectFit: props.fit,
         objectPosition: props.position,
@@ -17,7 +16,7 @@ export default function Video(props) {
         // not have the video overflow
         borderRadius: 1,
       }}
-      key={props.video || "no-src"}
+      key={props.video || 'no-src'}
       poster={props.posterImage}
       autoPlay={props.autoPlay}
       muted={props.muted}

package/src/components/block-styles.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+function BlockStyles(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+}
+export { BlockStyles as default };

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+
+export default function BlockStyles(props) {
+  return <></>;
+}

package/src/components/error-boundary.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text } from 'react-native';
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error('Error rendering Builder.io block', error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: { color: 'gray' },
+        },
+        'Error rendering Builder.io block'
+      );
+    }
+    return this.props.children;
+  }
+}
+export { ErrorBoundary as default };

package/src/components/error-boundary.lite.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+
+export default function ErrorBoundary(props) {
+  return <></>;
+}