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

package/dist/blocks/button/button.js

@@ -35,5 +35,5 @@ function Button(props) {
             React.createElement(BaseText_1.default, null, props.text)))) : (React.createElement(react_native_1.View, { ...props.attributes, style: styles.view1 },
         React.createElement(BaseText_1.default, null, props.text)))));
 }
-exports.default = Button;
 const styles = react_native_1.StyleSheet.create({ view1: { all: "unset" } });
+exports.default = Button;

package/dist/blocks/columns/columns.js

@@ -110,26 +110,26 @@ function Columns(props) {
     }
     function columnsStyles() {
         return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.medium)}
-        }
+    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.medium)}
+      }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.medium)}
-        }
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.medium)}
       }
+    }
 
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.small)}
-        }
+    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().columns.small)}
+      }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.small)}
-        }
-      },
-    `;
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${(0, css_1.convertStyleMapToCSS)(columnStyleObjects().column.small)}
+      }
+    },
+  `;
     }
     function reactNativeColumnsStyles() {
         return columnStyleObjects.columns.small;
@@ -146,8 +146,8 @@ function Columns(props) {
                     flexGrow: "1",
                 } }))))));
 }
-exports.default = Columns;
 const styles = react_native_1.StyleSheet.create({
     view1: { display: "flex" },
     view2: { display: "flex", flexDirection: "column", alignItems: "stretch" },
 });
+exports.default = Columns;

package/dist/blocks/form/form.js

@@ -154,7 +154,7 @@ function FormComponent(props) {
                     /* TODO: allow supplying an error formatter function */ let message = get(body, props.errorMessagePath);
                     if (message) {
                         if (typeof message !== "string") {
-                            /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
+                            /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
                                 JSON.stringify(message);
                         }
                         setFormErrorMessage(message);
@@ -226,7 +226,7 @@ function FormComponent(props) {
             React.createElement(render_blocks_1.default, { dataPath: "successMessage", blocks: props.successMessage }))) : null,
         " "));
 }
-exports.default = FormComponent;
 const styles = react_native_1.StyleSheet.create({
     view1: { padding: 10, color: "red", textAlign: "center" },
 });
+exports.default = FormComponent;

package/dist/blocks/image/component-info.js

@@ -20,7 +20,7 @@ const componentInfo = {
             bubble: true,
             allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
             required: true,
-            defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+            defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
             onChange: (0, util_js_1.serializeFn)((options) => {
                 const DEFAULT_ASPECT_RATIO = 0.7041;
                 options.delete("srcset");

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() },
+        }, contentContainerStyle: 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",
+    },
 });
+exports.default = RenderBlocks;

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

@@ -41,6 +41,19 @@ ${(0, render_styles_helpers_1.getCss)({
 ${(0, render_styles_helpers_2.getFontCss)({
         customFonts: props.customFonts,
     })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+color: inherit;
+line-height: inherit;
+letter-spacing: inherit;
+font-weight: inherit;
+font-size: inherit;
+text-align: inherit;
+font-family: inherit;
+}
 `);
     return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles });
 }

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

@@ -30,7 +30,6 @@ const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_1 = require("react");
 const builder_registered_components_js_1 = require("../../constants/builder-registered-components.js");
-const target_js_1 = require("../../constants/target.js");
 const evaluate_js_1 = require("../../functions/evaluate.js");
 const index_js_1 = require("../../functions/get-content/index.js");
 const get_fetch_js_1 = require("../../functions/get-fetch.js");
@@ -46,6 +45,7 @@ const init_editing_js_1 = require("../../scripts/init-editing.js");
 const nullable_js_1 = require("../../helpers/nullable.js");
 const interaction_js_1 = require("../../functions/track/interaction.js");
 const render_content_helpers_js_1 = require("./render-content.helpers.js");
+const target_js_1 = require("../../constants/target.js");
 function RenderContent(props) {
     var _a, _b, _c, _d, _e;
     const elementRef = (0, react_1.useRef)(null);
@@ -217,11 +217,6 @@ function RenderContent(props) {
             }));
         }
     }
-    function shouldRenderContentStyles() {
-        var _a, _b, _c;
-        return Boolean((((_a = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _a === void 0 ? void 0 : _a.cssCode) || ((_c = (_b = useContent === null || useContent === void 0 ? void 0 : useContent.data) === null || _b === void 0 ? void 0 : _b.customFonts) === null || _c === void 0 ? void 0 : _c.length)) &&
-            target_js_1.TARGET !== "reactNative");
-    }
     (0, react_1.useEffect)(() => {
         if (!props.apiKey) {
             console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -268,7 +263,7 @@ function RenderContent(props) {
                 const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
                 /**
                  * Make sure that:
-                 * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered    *  at the same time, e.g. header/page/footer.    * - the API key is the same, since we don't want to preview content from other organizations.
+                 * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered  *  at the same time, e.g. header/page/footer.  * - the API key is the same, since we don't want to preview content from other organizations.
                  *
                  * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
                  * this break scenarios where the item is not published yet?
@@ -317,8 +312,9 @@ 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 },
-            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(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 },
+            target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                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));
 }
 exports.default = RenderContent;

package/dist/functions/is-editing.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isEditing = void 0;
+const target_js_1 = require("../constants/target.js");
 const is_iframe_js_1 = require("./is-iframe.js");
 function isEditing() {
-    return (0, is_iframe_js_1.isIframe)() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+    return (0, is_iframe_js_1.isIframe)() && (target_js_1.TARGET === "reactNative" || window.location.search.indexOf("builder.frameEditing=") !== -1);
 }
 exports.isEditing = isEditing;

package/dist/index.js

@@ -16,7 +16,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.track = void 0;
 __exportStar(require("./index-helpers/top-of-file.js"), exports);
-require("./scripts/init-editing.js");
 __exportStar(require("./index-helpers/blocks-exports.js"), exports);
 __exportStar(require("./functions/is-editing.js"), exports);
 __exportStar(require("./functions/is-previewing.js"), exports);

package/package.json

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

package/src/blocks/button/button.jsx

@@ -1,8 +1,15 @@
 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) {
+function Button(props) {
   return (
     <>
       {props.link ? (
@@ -26,3 +33,5 @@ export default function Button(props) {
 }
 
 const styles = StyleSheet.create({ view1: { all: "unset" } });
+
+export default Button;

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";
@@ -8,7 +15,7 @@ import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
 import BuilderContext from "../../context/builder.context.js";
 
-export default function Columns(props) {
+function Columns(props) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }
@@ -92,26 +99,26 @@ export default function Columns(props) {
 
   function columnsStyles() {
     return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
-        }
-
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
-        }
+    @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
       }
 
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
-        }
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+      }
+    }
 
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
-        }
-      },
-    `;
+    @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+      .${props.builderBlock.id}-breakpoints {
+        ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+      }
+
+      .${props.builderBlock.id}-breakpoints > .builder-column {
+        ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+      }
+    },
+  `;
   }
 
   function reactNativeColumnsStyles() {
@@ -152,3 +159,5 @@ const styles = StyleSheet.create({
   view1: { display: "flex" },
   view2: { display: "flex", flexDirection: "column", alignItems: "stretch" },
 });
+
+export default Columns;

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

@@ -1,8 +1,15 @@
 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) {
+function CustomCode(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
@@ -55,3 +62,5 @@ export default function CustomCode(props) {
 
   return <View ref={elem} dangerouslySetInnerHTML={{ __html: props.code }} />;
 }
+
+export default CustomCode;

package/src/blocks/embed/embed.jsx

@@ -1,9 +1,16 @@
 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";
 
-export default function Embed(props) {
+function Embed(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);
 
@@ -44,3 +51,5 @@ export default function Embed(props) {
     <View ref={elem} dangerouslySetInnerHTML={{ __html: props.content }} />
   );
 }
+
+export default Embed;

package/src/blocks/form/form.jsx

@@ -1,12 +1,19 @@
 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";
 import { isEditing } from "../../functions/is-editing.js";
 
-export default function FormComponent(props) {
+function FormComponent(props) {
   const formRef = useRef(null);
   const [formState, setFormState] = useState(() => "unsubmitted");
 
@@ -139,7 +146,7 @@ export default function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== "string") {
-                /* TODO: ideally convert json to yaml so it woul dbe like            error: - email has been taken */ message =
+                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
                   JSON.stringify(message);
               }
               setFormErrorMessage(message);
@@ -249,3 +256,4 @@ export default function FormComponent(props) {
 const styles = StyleSheet.create({
   view1: { padding: 10, color: "red", textAlign: "center" },
 });
+export default FormComponent;

package/src/blocks/fragment/fragment.jsx

@@ -1,11 +1,20 @@
 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) {
+function FragmentComponent(props) {
   return (
     <View>
       <BaseText>{props.children}</BaseText>
     </View>
   );
 }
+
+export default FragmentComponent;

package/src/blocks/image/component-info.js

@@ -17,7 +17,7 @@ const componentInfo = {
       bubble: true,
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
-      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a",
       onChange: serializeFn((options) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");

package/src/blocks/img/img.jsx

@@ -1,8 +1,15 @@
 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) {
+function ImgComponent(props) {
   return (
     <View
       style={{
@@ -16,3 +23,5 @@ export default function ImgComponent(props) {
     />
   );
 }
+
+export default ImgComponent;

package/src/blocks/input/input.jsx

@@ -1,8 +1,15 @@
 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) {
+function FormInputComponent(props) {
   return (
     <View
       {...props.attributes}
@@ -18,3 +25,5 @@ export default function FormInputComponent(props) {
     />
   );
 }
+
+export default FormInputComponent;

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

@@ -1,6 +1,15 @@
 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) {
+function RawText(props) {
   return <View dangerouslySetInnerHTML={{ __html: props.text || "" }} />;
 }
+
+export default RawText;

package/src/blocks/section/section.jsx

@@ -1,8 +1,15 @@
 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) {
+function SectionComponent(props) {
   return (
     <View
       {...props.attributes}
@@ -23,3 +30,5 @@ export default function SectionComponent(props) {
     </View>
   );
 }
+
+export default SectionComponent;

package/src/blocks/select/select.jsx

@@ -1,9 +1,16 @@
 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) {
+function SelectComponent(props) {
   return (
     <View
       {...props.attributes}
@@ -22,3 +29,5 @@ export default function SelectComponent(props) {
     </View>
   );
 }
+
+export default SelectComponent;

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

@@ -1,11 +1,20 @@
 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) {
+function SubmitButton(props) {
   return (
     <View type="submit" {...props.attributes}>
       <BaseText>{props.text}</BaseText>
     </View>
   );
 }
+
+export default SubmitButton;

package/src/blocks/symbol/symbol.jsx

@@ -1,12 +1,19 @@
 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";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
 
-export default function Symbol(props) {
+function Symbol(props) {
   function className() {
     return [
       ...(TARGET === "vue2" || TARGET === "vue3"
@@ -84,3 +91,5 @@ export default function Symbol(props) {
     </View>
   );
 }
+
+export default Symbol;

package/src/blocks/textarea/textarea.jsx

@@ -1,7 +1,14 @@
 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) {
+function Textarea(props) {
   return (
     <View
       {...props.attributes}
@@ -12,3 +19,5 @@ export default function Textarea(props) {
     />
   );
 }
+
+export default Textarea;

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,
@@ -10,7 +17,7 @@ import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import RenderInlinedStyles from "../render-inlined-styles";
 
-export default function BlockStyles(props) {
+function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
@@ -80,3 +87,5 @@ export default function BlockStyles(props) {
     </>
   );
 }
+
+export default BlockStyles;

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";
@@ -19,7 +26,7 @@ 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) {
+function RenderBlock(props) {
   const [component, setComponent] = useState(() =>
     getComponent({
       block: props.block,
@@ -216,3 +223,5 @@ export default function RenderBlock(props) {
     </>
   );
 }
+
+export default RenderBlock;

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

@@ -1,11 +1,18 @@
 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";
 import BuilderContext from "../../context/builder.context.js";
 
-export default function RenderComponent(props) {
+function RenderComponent(props) {
   const ComponentRefRef = props.componentRef;
 
   return (
@@ -43,3 +50,5 @@ export default function RenderComponent(props) {
     </BuilderContext.Provider>
   );
 }
+
+export default RenderComponent;

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

@@ -1,10 +1,17 @@
 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";
 
-export default function RenderRepeatedBlock(props) {
+function RenderRepeatedBlock(props) {
   return (
     <BuilderContext.Provider
       value={{
@@ -21,3 +28,5 @@ export default function RenderRepeatedBlock(props) {
     </BuilderContext.Provider>
   );
 }
+
+export default RenderRepeatedBlock;

package/src/components/render-blocks.jsx

@@ -1,12 +1,19 @@
 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";
 import BlockStyles from "./render-block/block-styles";
 import RenderBlock from "./render-block/render-block";
 
-export default function RenderBlocks(props) {
+function RenderBlocks(props) {
   function className() {
     return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
   }
@@ -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}
+      contentContainerStyle={styles.scrollView1}
       onClick={(event) => onClick()}
       onMouseEnter={(event) => onMouseEnter()}
     >
@@ -77,10 +84,16 @@ 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",
+  },
 });
+
+export default RenderBlocks;

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

@@ -1,6 +1,15 @@
 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) {
+function BuilderEditing(props) {
   return <View />;
 }
+
+export default BuilderEditing;

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

@@ -1,11 +1,18 @@
 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";
 import { getFontCss } from "./render-styles.helpers";
 
-export default function RenderContentStyles(props) {
+function RenderContentStyles(props) {
   const [injectedStyles, setInjectedStyles] = useState(
     () => `
 ${getCss({
@@ -15,8 +22,23 @@ ${getCss({
 ${getFontCss({
   customFonts: props.customFonts,
 })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+color: inherit;
+line-height: inherit;
+letter-spacing: inherit;
+font-weight: inherit;
+font-size: inherit;
+text-align: inherit;
+font-family: inherit;
+}
 `
   );
 
   return <RenderInlinedStyles styles={injectedStyles} />;
 }
+
+export default RenderContentStyles;

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

@@ -1,8 +1,14 @@
 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";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { fetch } from "../../functions/get-fetch.js";
@@ -27,8 +33,9 @@ import {
   getContentInitialValue,
   getContextStateInitialValue,
 } from "./render-content.helpers.js";
+import { TARGET } from "../../constants/target.js";
 
-export default function RenderContent(props) {
+function RenderContent(props) {
   const elementRef = useRef(null);
   const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
 
@@ -232,13 +239,6 @@ export default function RenderContent(props) {
     }
   }
 
-  function shouldRenderContentStyles() {
-    return Boolean(
-      (useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
-        TARGET !== "reactNative"
-    );
-  }
-
   useEffect(() => {
     if (!props.apiKey) {
       console.error(
@@ -294,7 +294,7 @@ export default function RenderContent(props) {
 
         /**
          * Make sure that:
-         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered    *  at the same time, e.g. header/page/footer.    * - the API key is the same, since we don't want to preview content from other organizations.
+         * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered  *  at the same time, e.g. header/page/footer.  * - the API key is the same, since we don't want to preview content from other organizations.
          *
          * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
          * this break scenarios where the item is not published yet?
@@ -356,27 +356,31 @@ export default function RenderContent(props) {
     >
       {useContent ? (
         <>
-          <View
+          <ScrollView
             ref={elementRef}
             onClick={(event) => onClick(event)}
             builder-content-id={useContent?.id}
             builder-model={props.model}
           >
-            {shouldRenderContentStyles() ? (
-              <RenderContentStyles
-                contentId={useContent?.id}
-                cssCode={useContent?.data?.cssCode}
-                customFonts={useContent?.data?.customFonts}
-              />
+            {TARGET !== "reactNative" ? (
+              <>
+                <RenderContentStyles
+                  contentId={useContent?.id}
+                  cssCode={useContent?.data?.cssCode}
+                  customFonts={useContent?.data?.customFonts}
+                />
+              </>
             ) : null}
 
             <RenderBlocks
               blocks={useContent?.data?.blocks}
               key={forceReRenderCount}
             />
-          </View>
+          </ScrollView>
         </>
       ) : null}
     </builderContext.Provider>
   );
 }
+
+export default RenderContent;

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

@@ -1,8 +1,15 @@
 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) {
+function RenderInlinedStyles(props) {
   function injectedStyleScript() {
     return `<${tag()}>${props.styles}</${tag()}>`;
   }
@@ -27,3 +34,5 @@ export default function RenderInlinedStyles(props) {
     </>
   );
 }
+
+export default RenderInlinedStyles;

package/src/functions/is-editing.js

@@ -1,6 +1,7 @@
+import { TARGET } from "../constants/target.js";
 import { isIframe } from "./is-iframe.js";
 function isEditing() {
-  return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
+  return isIframe() && (TARGET === "reactNative" || window.location.search.indexOf("builder.frameEditing=") !== -1);
 }
 export {
   isEditing

package/src/index.js

@@ -1,5 +1,4 @@
 export * from "./index-helpers/top-of-file.js";
-import "./scripts/init-editing.js";
 export * from "./index-helpers/blocks-exports.js";
 export * from "./functions/is-editing.js";
 export * from "./functions/is-previewing.js";