@builder.io/sdk-react-native 0.1.6 → 0.1.8

package/dist/blocks/columns/columns.js

@@ -28,11 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_1 = require("react");
 const render_blocks_1 = __importDefault(require("../../components/render-blocks"));
 const device_sizes_1 = require("../../constants/device-sizes");
 const render_inlined_styles_1 = __importDefault(require("../../components/render-inlined-styles"));
 const target_js_1 = require("../../constants/target.js");
 const css_1 = require("../../helpers/css");
+const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
 function Columns(props) {
     var _a;
     function getGutterSize() {
@@ -78,7 +80,8 @@ function Columns(props) {
         };
     }
     function getWidthForBreakpointSize(size) {
-        const breakpointSizes = (0, device_sizes_1.getSizesForBreakpoints)(props.customBreakpoints || {});
+        var _a, _b;
+        const breakpointSizes = (0, device_sizes_1.getSizesForBreakpoints)(((_b = (_a = builderContext.content) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.breakpoints) || {});
         return breakpointSizes[size].max;
     }
     function columnStyleObjects() {
@@ -134,6 +137,7 @@ function Columns(props) {
     function reactNativeColumnStyles() {
         return columnStyleObjects.column.small;
     }
+    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
     return (React.createElement(react_native_1.View, { style: styles.view1 },
         target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
             React.createElement(render_inlined_styles_1.default, { styles: columnsStyles() }))) : null, (_a = props.columns) === null || _a === void 0 ? void 0 :

package/dist/components/render-block/block-styles.js

@@ -32,6 +32,7 @@ const device_sizes_js_1 = require("../../constants/device-sizes.js");
 const target_js_1 = require("../../constants/target.js");
 const get_processed_block_js_1 = require("../../functions/get-processed-block.js");
 const css_js_1 = require("../../helpers/css.js");
+const nullable_js_1 = require("../../helpers/nullable.js");
 const render_inlined_styles_1 = __importDefault(require("../render-inlined-styles"));
 function BlockStyles(props) {
     function useBlock() {
@@ -42,6 +43,16 @@ function BlockStyles(props) {
             shouldEvaluateBindings: true,
         });
     }
+    function canShowBlock() {
+        // only render styles for blocks that are visible
+        if ((0, nullable_js_1.checkIsDefined)(useBlock().hide)) {
+            return !useBlock().hide;
+        }
+        if ((0, nullable_js_1.checkIsDefined)(useBlock().show)) {
+            return useBlock().show;
+        }
+        return true;
+    }
     function css() {
         var _a;
         const styles = useBlock().responsiveStyles;
@@ -73,7 +84,7 @@ function BlockStyles(props) {
             : "";
         return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
     }
-    return (React.createElement(React.Fragment, null, target_js_1.TARGET !== "reactNative" && css() ? (React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null, target_js_1.TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
         React.createElement(render_inlined_styles_1.default, { styles: css() }))) : null));
 }
 exports.default = BlockStyles;

package/dist/components/render-block/render-block.js

@@ -41,6 +41,7 @@ const target_js_1 = require("../../constants/target.js");
 const extract_text_styles_js_1 = require("../../functions/extract-text-styles.js");
 const render_component_1 = __importDefault(require("./render-component"));
 const get_react_native_block_styles_js_1 = require("../../functions/get-react-native-block-styles.js");
+const nullable_js_1 = require("../../helpers/nullable.js");
 function RenderBlock(props) {
     var _a, _b;
     const [component, setComponent] = (0, react_1.useState)(() => (0, render_block_helpers_js_1.getComponent)({
@@ -60,6 +61,15 @@ function RenderBlock(props) {
                 shouldEvaluateBindings: true,
             });
     }
+    function canShowBlock() {
+        if ((0, nullable_js_1.checkIsDefined)(useBlock().hide)) {
+            return !useBlock().hide;
+        }
+        if ((0, nullable_js_1.checkIsDefined)(useBlock().show)) {
+            return useBlock().show;
+        }
+        return true;
+    }
     function proxyState() {
         if (typeof Proxy === "undefined") {
             console.error("no Proxy available in this environment, cannot proxy state.");
@@ -100,7 +110,7 @@ function RenderBlock(props) {
         };
     }
     function renderComponentProps() {
-        var _a, _b, _c, _d;
+        var _a;
         return {
             blockChildren: (_a = useBlock().children) !== null && _a !== void 0 ? _a : [],
             componentRef: component === null || component === void 0 ? void 0 : component.component,
@@ -118,7 +128,6 @@ function RenderBlock(props) {
                             ...actions(),
                         },
                     }),
-                customBreakpoints: (_d = (_c = (_b = childrenContext === null || childrenContext === void 0 ? void 0 : childrenContext()) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.breakpoints,
             },
             context: childrenContext(),
         };
@@ -159,7 +168,7 @@ function RenderBlock(props) {
             inheritedStyles: getInheritedTextStyles(),
         };
     }
-    return (React.createElement(React.Fragment, null, !(component === null || component === void 0 ? void 0 : component.noWrap) ? (React.createElement(React.Fragment, null,
+    return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !(component === null || component === void 0 ? void 0 : component.noWrap) ? (React.createElement(React.Fragment, null,
         (0, render_block_helpers_js_1.isEmptyHtmlElement)(tag()) ? (React.createElement(React.Fragment, null,
             React.createElement(react_native_1.View, { ...attributes(), ...actions() }))) : null,
         !(0, render_block_helpers_js_1.isEmptyHtmlElement)(tag()) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData === null || repeatItemData === void 0 ? void 0 : repeatItemData.map((data, index) => (React.createElement(render_repeated_block_1.default, { key: index, repeatContext: data.context, block: data.block }))))) : null,
@@ -167,6 +176,6 @@ function RenderBlock(props) {
             React.createElement(react_native_1.View, { ...attributes(), ...actions() },
                 React.createElement(render_component_1.default, { ...renderComponentProps() }), (_a = childrenWithoutParentComponent()) === null || _a === void 0 ? void 0 :
                 _a.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))), (_b = childrenWithoutParentComponent()) === null || _b === void 0 ? void 0 :
-                _b.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(render_component_1.default, { ...renderComponentProps() }))));
+                _b.map((child) => (React.createElement(block_styles_1.default, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(render_component_1.default, { ...renderComponentProps() })))) : null));
 }
 exports.default = RenderBlock;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -31,7 +31,6 @@
   "devDependencies": {
     "@tsconfig/react-native": "^2.0.3",
     "@types/react-native-video": "^5.0.9",
-    "react-native": "^0.64.3",
     "react-native-url-polyfill": "^1.3.0",
     "typescript": "^4.9.4"
   }

package/src/blocks/columns/columns.jsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { View, StyleSheet, Image, Text } from "react-native";
+import { useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
+import BuilderContext from "../../context/builder.context.js";
 
 export default function Columns(props) {
   function getGutterSize() {
@@ -58,7 +60,7 @@ export default function Columns(props) {
 
   function getWidthForBreakpointSize(size) {
     const breakpointSizes = getSizesForBreakpoints(
-      props.customBreakpoints || {}
+      builderContext.content?.meta?.breakpoints || {}
     );
     return breakpointSizes[size].max;
   }
@@ -120,6 +122,8 @@ export default function Columns(props) {
     return columnStyleObjects.column.small;
   }
 
+  const builderContext = useContext(BuilderContext);
+
   return (
     <View style={styles.view1}>
       {TARGET !== "reactNative" ? (

package/src/components/render-block/block-styles.jsx

@@ -7,6 +7,7 @@ import {
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
 import RenderInlinedStyles from "../render-inlined-styles";
 
 export default function BlockStyles(props) {
@@ -19,6 +20,17 @@ export default function BlockStyles(props) {
     });
   }
 
+  function canShowBlock() {
+    // only render styles for blocks that are visible
+    if (checkIsDefined(useBlock().hide)) {
+      return !useBlock().hide;
+    }
+    if (checkIsDefined(useBlock().show)) {
+      return useBlock().show;
+    }
+    return true;
+  }
+
   function css() {
     const styles = useBlock().responsiveStyles;
     const content = props.context.content;
@@ -60,7 +72,7 @@ export default function BlockStyles(props) {
 
   return (
     <>
-      {TARGET !== "reactNative" && css() ? (
+      {TARGET !== "reactNative" && css() && canShowBlock() ? (
         <>
           <RenderInlinedStyles styles={css()} />
         </>

package/src/components/render-block/render-block.jsx

@@ -17,6 +17,7 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
 
 export default function RenderBlock(props) {
   const [component, setComponent] = useState(() =>
@@ -41,6 +42,16 @@ export default function RenderBlock(props) {
         });
   }
 
+  function canShowBlock() {
+    if (checkIsDefined(useBlock().hide)) {
+      return !useBlock().hide;
+    }
+    if (checkIsDefined(useBlock().show)) {
+      return useBlock().show;
+    }
+    return true;
+  }
+
   function proxyState() {
     if (typeof Proxy === "undefined") {
       console.error(
@@ -103,7 +114,6 @@ export default function RenderBlock(props) {
                 ...actions(),
               },
             }),
-        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
       },
       context: childrenContext(),
     };
@@ -154,51 +164,55 @@ export default function RenderBlock(props) {
 
   return (
     <>
-      {!component?.noWrap ? (
+      {canShowBlock() ? (
         <>
-          {isEmptyHtmlElement(tag()) ? (
-            <>
-              <View {...attributes()} {...actions()} />
-            </>
-          ) : null}
-          {!isEmptyHtmlElement(tag()) && repeatItemData ? (
-            <>
-              {repeatItemData?.map((data, index) => (
-                <RenderRepeatedBlock
-                  key={index}
-                  repeatContext={data.context}
-                  block={data.block}
-                />
-              ))}
-            </>
-          ) : null}
-          {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
+          {!component?.noWrap ? (
             <>
-              <View {...attributes()} {...actions()}>
-                <RenderComponent {...renderComponentProps()} />
+              {isEmptyHtmlElement(tag()) ? (
+                <>
+                  <View {...attributes()} {...actions()} />
+                </>
+              ) : null}
+              {!isEmptyHtmlElement(tag()) && repeatItemData ? (
+                <>
+                  {repeatItemData?.map((data, index) => (
+                    <RenderRepeatedBlock
+                      key={index}
+                      repeatContext={data.context}
+                      block={data.block}
+                    />
+                  ))}
+                </>
+              ) : null}
+              {!isEmptyHtmlElement(tag()) && !repeatItemData ? (
+                <>
+                  <View {...attributes()} {...actions()}>
+                    <RenderComponent {...renderComponentProps()} />
 
-                {childrenWithoutParentComponent()?.map((child) => (
-                  <RenderBlock
-                    key={"render-block-" + child.id}
-                    block={child}
-                    context={childrenContext()}
-                  />
-                ))}
+                    {childrenWithoutParentComponent()?.map((child) => (
+                      <RenderBlock
+                        key={"render-block-" + child.id}
+                        block={child}
+                        context={childrenContext()}
+                      />
+                    ))}
 
-                {childrenWithoutParentComponent()?.map((child) => (
-                  <BlockStyles
-                    key={"block-style-" + child.id}
-                    block={child}
-                    context={childrenContext()}
-                  />
-                ))}
-              </View>
+                    {childrenWithoutParentComponent()?.map((child) => (
+                      <BlockStyles
+                        key={"block-style-" + child.id}
+                        block={child}
+                        context={childrenContext()}
+                      />
+                    ))}
+                  </View>
+                </>
+              ) : null}
             </>
-          ) : null}
+          ) : (
+            <RenderComponent {...renderComponentProps()} />
+          )}
         </>
-      ) : (
-        <RenderComponent {...renderComponentProps()} />
-      )}
+      ) : null}
     </>
   );
 }