@builder.io/sdk-react-native 0.1.7 → 0.1.9

package/dist/blocks/section/section.js

@@ -33,11 +33,9 @@ function SectionComponent(props) {
     return (React.createElement(react_native_1.View, { ...props.attributes, style: {
             width: "100%",
             alignSelf: "stretch",
-            flexGrow: "1",
+            flexGrow: 1,
             boxSizing: "border-box",
-            maxWidth: `${props.maxWidth && typeof props.maxWidth === "number"
-                ? props.maxWidth
-                : 1200}px`,
+            maxWidth: props.maxWidth || 1200,
             display: "flex",
             flexDirection: "column",
             alignItems: "stretch",

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.");
@@ -158,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,
@@ -166,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.7",
+  "version": "0.1.9",
   "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/section/section.jsx

@@ -9,13 +9,9 @@ export default function SectionComponent(props) {
       style={{
         width: "100%",
         alignSelf: "stretch",
-        flexGrow: "1",
+        flexGrow: 1,
         boxSizing: "border-box",
-        maxWidth: `${
-          props.maxWidth && typeof props.maxWidth === "number"
-            ? props.maxWidth
-            : 1200
-        }px`,
+        maxWidth: props.maxWidth || 1200,
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",

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(
@@ -153,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}
     </>
   );
 }