@builder.io/sdk-react-native 0.1.8 → 0.1.10-0

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-blocks.js

@@ -64,13 +64,17 @@ function RenderBlocks(props) {
         }
     }
     const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
-    return (React.createElement(react_native_1.View, { "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
+    return (React.createElement(react_native_1.ScrollView, { "builder-path": props.path, "builder-parent-id": props.parent, dataSet: {
             class: className(),
-        }, style: styles.view1, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
+        }, style: styles.scrollView1, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter() },
         props.blocks ? (React.createElement(React.Fragment, null, (_a = props.blocks) === null || _a === void 0 ? void 0 : _a.map((block) => (React.createElement(render_block_1.default, { key: "render-block-" + block.id, block: block, context: builderContext }))))) : null,
         props.blocks ? (React.createElement(React.Fragment, null, (_b = props.blocks) === null || _b === void 0 ? void 0 : _b.map((block) => (React.createElement(block_styles_1.default, { key: "block-style-" + block.id, block: block, context: builderContext }))))) : null));
 }
 exports.default = RenderBlocks;
 const styles = react_native_1.StyleSheet.create({
-    view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+    scrollView1: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+    },
 });

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

@@ -317,7 +317,7 @@ function RenderContent(props) {
             apiKey: props.apiKey,
             registeredComponents: allRegisteredComponents,
         } }, useContent ? (React.createElement(React.Fragment, null,
-        React.createElement(react_native_1.View, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },
+        React.createElement(react_native_1.ScrollView, { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent === null || useContent === void 0 ? void 0 : useContent.id, "builder-model": props.model },
             shouldRenderContentStyles() ? (React.createElement(render_styles_1.default, { contentId: useContent === null || useContent === void 0 ? void 0 : useContent.id, cssCode: (_c = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _c === void 0 ? void 0 : _c.cssCode, customFonts: (_d = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _d === void 0 ? void 0 : _d.customFonts })) : null,
             React.createElement(render_blocks_1.default, { blocks: (_e = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _e === void 0 ? void 0 : _e.blocks, key: forceReRenderCount })))) : null));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.1.8",
+  "version": "0.1.10-0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/blocks/button/button.jsx

@@ -1,6 +1,13 @@
 import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 
 export default function Button(props) {
   return (

package/src/blocks/columns/columns.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";

package/src/blocks/custom-code/custom-code.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useState, useRef, useEffect } from "react";
 
 export default function CustomCode(props) {

package/src/blocks/embed/embed.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";
 

package/src/blocks/form/form.jsx

@@ -1,6 +1,13 @@
 import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useState, useContext, useRef } from "react";
 import RenderBlock from "../../components/render-block/render-block";
 import BuilderBlocks from "../../components/render-blocks";

package/src/blocks/fragment/fragment.jsx

@@ -1,6 +1,13 @@
 import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 
 export default function FragmentComponent(props) {
   return (

package/src/blocks/img/img.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { isEditing } from "../../functions/is-editing.js";
 
 export default function ImgComponent(props) {

package/src/blocks/input/input.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { isEditing } from "../../functions/is-editing.js";
 
 export default function FormInputComponent(props) {

package/src/blocks/raw-text/raw-text.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 
 export default function RawText(props) {
   return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;

package/src/blocks/section/section.jsx

@@ -1,6 +1,13 @@
 import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 
 export default function SectionComponent(props) {
   return (
@@ -9,13 +16,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/blocks/select/select.jsx

@@ -1,6 +1,13 @@
 import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { isEditing } from "../../functions/is-editing.js";
 
 export default function SelectComponent(props) {

package/src/blocks/submit-button/submit-button.jsx

@@ -1,6 +1,13 @@
 import BaseText from "../BaseText";
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 
 export default function SubmitButton(props) {
   return (

package/src/blocks/symbol/symbol.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useState, useContext, useEffect } from "react";
 import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context.js";

package/src/blocks/textarea/textarea.jsx

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

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

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import {
   getMaxWidthQueryForSize,
   getSizesForBreakpoints,

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

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";

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

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useContext } from "react";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";

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

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block";

package/src/components/render-blocks.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
@@ -44,13 +51,13 @@ export default function RenderBlocks(props) {
   const builderContext = useContext(BuilderContext);
 
   return (
-    <View
+    <ScrollView
       builder-path={props.path}
       builder-parent-id={props.parent}
       dataSet={{
         class: className(),
       }}
-      style={styles.view1}
+      style={styles.scrollView1}
       onClick={(event) => onClick()}
       onMouseEnter={(event) => onMouseEnter()}
     >
@@ -77,10 +84,14 @@ export default function RenderBlocks(props) {
           ))}
         </>
       ) : null}
-    </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  view1: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+  scrollView1: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+  },
 });

package/src/components/render-content/builder-editing.jsx

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 
 export default function BuilderEditing(props) {
   return <View />;

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

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useState } from "react";
 import RenderInlinedStyles from "../../render-inlined-styles";
 import { getCss } from "./render-styles.helpers";

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

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { useState, useContext, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
@@ -356,7 +363,7 @@ export default function RenderContent(props) {
     >
       {useContent ? (
         <>
-          <View
+          <ScrollView
             ref={elementRef}
             onClick={(event) => onClick(event)}
             builder-content-id={useContent?.id}
@@ -374,7 +381,7 @@ export default function RenderContent(props) {
               blocks={useContent?.data?.blocks}
               key={forceReRenderCount}
             />
-          </View>
+          </ScrollView>
         </>
       ) : null}
     </builderContext.Provider>

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

@@ -1,5 +1,12 @@
 import * as React from "react";
-import { View, StyleSheet, Image, Text } from "react-native";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from "react-native";
 import { TARGET } from "../constants/target.js";
 
 export default function RenderInlinedStyles(props) {