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

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+### UPCOMING
+
+- Add `getBuilderSearchParams` helper export to easily view current drafts on your production site.
+
+### 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-4",
+  "version": "0.0.1-49",
   "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

@@ -1,37 +1,86 @@
 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 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), {
-  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)));
+  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,
+            }),
+            /* @__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
-};
-
+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";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
 
 export default function Button(props) {
   return (
     <>
-      {props.link && (
+      {props.link ? (
         <>
           <View
             {...props.attributes}
+            role="button"
             href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
+            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

@@ -1,47 +1,293 @@
 import { registerComponent } from '../functions/register-component';
 
-        import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import RenderBlocks from "../components/render-blocks";
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import RenderBlocks from '../components/render-blocks';
 function Columns(props) {
-function getGutterSize() {
-  return typeof props.space === "number" ? props.space || 0 : 20;
-}
-function getColumns() {
-  return props.columns || [];
-}
-function getWidth(index) {
-  const columns = this.getColumns();
-  return columns[index] && columns[index].width || 100 / columns.length;
-}
-function getColumnCssWidth(index) {
-  const columns = this.getColumns();
-  const gutterSize = this.getGutterSize();
-  const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-  return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-}
-return /* @__PURE__ */ React.createElement(View, {
-  className: "builder-columns",
-  style: styles.view1
-}, props.columns.map((column) => /* @__PURE__ */ React.createElement(View, {
-  className: "builder-column",
-  style: styles.view2
-}, /* @__PURE__ */ React.createElement(RenderBlocks, {
-  blocks: column.blocks
-}))));
+  var _a;
+  function getGutterSize() {
+    return typeof props.space === 'number' ? props.space || 0 : 20;
+  }
+  function getColumns() {
+    return props.columns || [];
+  }
+  function getWidth(index) {
+    var _a2;
+    const columns = getColumns();
+    return (
+      ((_a2 = columns[index]) == null ? void 0 : _a2.width) ||
+      100 / columns.length
+    );
+  }
+  function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    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,
+    {
+      style: styles.view1,
+    },
+    (_a = props.columns) == null
+      ? void 0
+      : _a.map((column) =>
+          /* @__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
-};
-
+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,11 +1,10 @@
-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";
+import * as React from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import RenderBlocks from '../components/render-blocks.lite';
 
 export default function Columns(props) {
   function getGutterSize() {
-    return typeof props.space === "number" ? props.space || 0 : 20;
+    return typeof props.space === 'number' ? props.space || 0 : 20;
   }
 
   function getColumns() {
@@ -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) => (
+        <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 },
 });