@builder.io/sdk-react-native 0.1.2 → 0.1.3

package/dist/blocks/select/select.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseText_1 = __importDefault(require("../BaseText"));
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const is_editing_js_1 = require("../../functions/is-editing.js");
+function SelectComponent(props) {
+    var _a;
+    return (React.createElement(react_native_1.View, { ...props.attributes, value: props.value, key: (0, is_editing_js_1.isEditing)() && props.defaultValue ? props.defaultValue : "default-key", defaultValue: props.defaultValue, name: props.name }, (_a = props.options) === null || _a === void 0 ? void 0 : _a.map((option) => (React.createElement(react_native_1.View, { value: option.value },
+        React.createElement(BaseText_1.default, null, option.name || option.value))))));
+}
+exports.default = SelectComponent;

package/dist/blocks/submit-button/component-info.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Form:SubmitButton",
+    builtIn: true,
+    image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98",
+    defaultStyles: {
+        appearance: "none",
+        paddingTop: "15px",
+        paddingBottom: "15px",
+        paddingLeft: "25px",
+        paddingRight: "25px",
+        backgroundColor: "#3898EC",
+        color: "white",
+        borderRadius: "4px",
+        cursor: "pointer"
+    },
+    inputs: [
+        {
+            name: "text",
+            type: "text",
+            defaultValue: "Click me"
+        }
+    ],
+    static: true,
+    noWrap: true
+};
+exports.componentInfo = componentInfo;

package/dist/blocks/submit-button/submit-button.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseText_1 = __importDefault(require("../BaseText"));
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+function SubmitButton(props) {
+    return (React.createElement(react_native_1.View, { type: "submit", ...props.attributes },
+        React.createElement(BaseText_1.default, null, props.text)));
+}
+exports.default = SubmitButton;

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Symbol",
+    noWrap: true,
+    static: true,
+    builtIn: true,
+    inputs: [
+        {
+            name: "symbol",
+            type: "uiSymbol"
+        },
+        {
+            name: "dataOnly",
+            helperText: "Make this a data symbol that doesn't display any UI",
+            type: "boolean",
+            defaultValue: false,
+            advanced: true,
+            hideFromUI: true
+        },
+        {
+            name: "inheritState",
+            helperText: "Inherit the parent component state and data",
+            type: "boolean",
+            defaultValue: false,
+            advanced: true
+        },
+        {
+            name: "renderToLiquid",
+            helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
+            type: "boolean",
+            defaultValue: false,
+            advanced: true,
+            hideFromUI: true
+        },
+        {
+            name: "useChildren",
+            hideFromUI: true,
+            type: "boolean"
+        }
+    ]
+};
+exports.componentInfo = componentInfo;

package/dist/blocks/symbol/symbol.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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_content_js_1 = __importDefault(require("../../components/render-content/render-content.js"));
+const builder_context_js_1 = __importDefault(require("../../context/builder.context.js"));
+const index_js_1 = require("../../functions/get-content/index.js");
+const target_1 = require("../../constants/target");
+function Symbol(props) {
+    var _a, _b, _c, _d, _e;
+    function className() {
+        var _a, _b;
+        return [
+            ...(target_1.TARGET === "vue2" || target_1.TARGET === "vue3"
+                ? Object.keys(props.attributes.class)
+                : [props.attributes.class]),
+            "builder-symbol",
+            ((_a = props.symbol) === null || _a === void 0 ? void 0 : _a.inline) ? "builder-inline-symbol" : undefined,
+            ((_b = props.symbol) === null || _b === void 0 ? void 0 : _b.dynamic) || props.dynamic
+                ? "builder-dynamic-symbol"
+                : undefined,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    const [fetchedContent, setFetchedContent] = (0, react_1.useState)(() => null);
+    function contentToUse() {
+        var _a;
+        return ((_a = props.symbol) === null || _a === void 0 ? void 0 : _a.content) || fetchedContent;
+    }
+    const builderContext = (0, react_1.useContext)(builder_context_js_1.default);
+    (0, react_1.useEffect)(() => {
+        const symbolToUse = props.symbol;
+        /**
+         * If:
+         * - we have a symbol prop
+         * - yet it does not have any content
+         * - and we have not already stored content from before
+         * - and it has a model name
+         *
+         * then we want to re-fetch the symbol content.
+         */
+        if (symbolToUse &&
+            !symbolToUse.content &&
+            !fetchedContent &&
+            symbolToUse.model &&
+            (
+            // This is a hack, we should not need to check for this, but it is needed for Svelte.
+            builderContext === null || builderContext === void 0 ? void 0 : builderContext.apiKey)) {
+            (0, index_js_1.getContent)({
+                model: symbolToUse.model,
+                apiKey: builderContext.apiKey,
+                query: {
+                    id: symbolToUse.entry,
+                },
+            }).then((response) => {
+                setFetchedContent(response);
+            });
+        }
+    }, [props.symbol, fetchedContent]);
+    return (React.createElement(react_native_1.View, { ...props.attributes, dataSet: {
+            class: className(),
+        } },
+        React.createElement(render_content_js_1.default, { apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
+                ...(_a = props.symbol) === null || _a === void 0 ? void 0 : _a.data,
+                ...builderContext.state,
+                ...(_d = (_c = (_b = props.symbol) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.state,
+            }, model: (_e = props.symbol) === null || _e === void 0 ? void 0 : _e.model, content: contentToUse() })));
+}
+exports.default = Symbol;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Text",
+    static: true,
+    builtIn: true,
+    image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+    inputs: [
+        {
+            name: "text",
+            type: "html",
+            required: true,
+            autoFocus: true,
+            bubble: true,
+            defaultValue: "Enter some text..."
+        }
+    ],
+    defaultStyles: {
+        lineHeight: "normal",
+        height: "auto",
+        textAlign: "center"
+    }
+};
+exports.componentInfo = componentInfo;

package/dist/blocks/text/text.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_render_html_1 = __importDefault(require("react-native-render-html"));
+const builder_context_1 = __importDefault(require("../../context/builder.context"));
+/**
+ * @typedef {{}} BuilderBlock
+ */
+/**
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+function camelToKebabCase(string) {
+    return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ *
+ * @param {object} object
+ * @param {string[]} keys
+ * @returns {object}
+ */
+function pick(object, keys) {
+    return keys.reduce((obj, key) => {
+        // eslint-disable-next-line no-prototype-builtins
+        if (object && object.hasOwnProperty(key)) {
+            obj[key] = object[key];
+        }
+        return obj;
+    }, {});
+}
+const PICK_STYLES = ['textAlign'];
+/**
+ * @param {BuilderBlock} block
+ * @returns
+ */
+function getBlockStyles(block) {
+    var _a, _b, _c;
+    // TODO: responsive CSS using react native viewport width hooks
+    const styles = {
+        ...(_a = block.responsiveStyles) === null || _a === void 0 ? void 0 : _a.large,
+        ...(block).styles,
+    };
+    if ((_b = block.responsiveStyles) === null || _b === void 0 ? void 0 : _b.medium) {
+        Object.assign(styles, block.responsiveStyles.medium);
+    }
+    if ((_c = block.responsiveStyles) === null || _c === void 0 ? void 0 : _c.small) {
+        Object.assign(styles, block.responsiveStyles.small);
+    }
+    return styles;
+}
+/**
+ *
+ * @param {BuilderBlock} block
+ * @param {any} inheritedStyles
+ * @returns
+ */
+function getCss(block, inheritedStyles) {
+    const styleObject = {
+        ...inheritedStyles,
+        ...pick(getBlockStyles(block), PICK_STYLES)
+    };
+    if (!styleObject) {
+        return '';
+    }
+    let str = ``;
+    for (const key in styleObject) {
+        const value = styleObject[key];
+        if (typeof value === 'string') {
+            str += `${camelToKebabCase(key)}: ${value};`;
+        }
+    }
+    return str;
+}
+/**
+ *
+ * @param {{ text: string; builderBlock: BuilderBlock}} props
+ * @returns
+ */
+function Text(props) {
+    const builderContext = React.useContext(builder_context_1.default);
+    return (React.createElement(react_native_render_html_1.default, { source: {
+            html: `<div style="${getCss(props.builderBlock, builderContext.inheritedStyles)}">${props.text || ''}</div>`,
+        } }));
+}
+exports.default = Text;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Form:TextArea",
+    builtIn: true,
+    image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
+    inputs: [
+        {
+            advanced: true,
+            name: "value",
+            type: "string"
+        },
+        {
+            name: "name",
+            type: "string",
+            required: true,
+            helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+        },
+        {
+            name: "defaultValue",
+            type: "string"
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            defaultValue: "Hello there"
+        },
+        {
+            name: "required",
+            type: "boolean",
+            defaultValue: false
+        }
+    ],
+    defaultStyles: {
+        paddingTop: "10px",
+        paddingBottom: "10px",
+        paddingLeft: "10px",
+        paddingRight: "10px",
+        borderRadius: "3px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "#ccc"
+    },
+    static: true,
+    noWrap: true
+};
+exports.componentInfo = componentInfo;

package/dist/blocks/textarea/textarea.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+function Textarea(props) {
+    return (React.createElement(react_native_1.View, { ...props.attributes, placeholder: props.placeholder, name: props.name, value: props.value, defaultValue: props.defaultValue }));
+}
+exports.default = Textarea;

package/dist/blocks/util.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeFn = void 0;
+const serializeFn = (fnValue) => {
+    const fnStr = fnValue.toString().trim();
+    const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+    return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
+exports.serializeFn = serializeFn;

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentInfo = void 0;
+const componentInfo = {
+    name: "Video",
+    canHaveChildren: true,
+    builtIn: true,
+    defaultStyles: {
+        minHeight: "20px",
+        minWidth: "20px"
+    },
+    image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+    inputs: [
+        {
+            name: "video",
+            type: "file",
+            allowedFileTypes: ["mp4"],
+            bubble: true,
+            defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+            required: true
+        },
+        {
+            name: "posterImage",
+            type: "file",
+            allowedFileTypes: ["jpeg", "png"],
+            helperText: "Image to show before the video plays"
+        },
+        {
+            name: "autoPlay",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "controls",
+            type: "boolean",
+            defaultValue: false
+        },
+        {
+            name: "muted",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "loop",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "playsInline",
+            type: "boolean",
+            defaultValue: true
+        },
+        {
+            name: "fit",
+            type: "text",
+            defaultValue: "cover",
+            enum: ["contain", "cover", "fill", "auto"]
+        },
+        {
+            name: "fitContent",
+            type: "boolean",
+            helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+            defaultValue: true,
+            advanced: true
+        },
+        {
+            name: "position",
+            type: "text",
+            defaultValue: "center",
+            enum: [
+                "center",
+                "top",
+                "left",
+                "right",
+                "bottom",
+                "top left",
+                "top right",
+                "bottom left",
+                "bottom right"
+            ]
+        },
+        {
+            name: "height",
+            type: "number",
+            advanced: true
+        },
+        {
+            name: "width",
+            type: "number",
+            advanced: true
+        },
+        {
+            name: "aspectRatio",
+            type: "number",
+            advanced: true,
+            defaultValue: 0.7004048582995948
+        },
+        {
+            name: "lazyLoad",
+            type: "boolean",
+            helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+            defaultValue: true,
+            advanced: true
+        }
+    ]
+};
+exports.componentInfo = componentInfo;

package/dist/blocks/video/video.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// TO-DO: This file breaks due to this issue:
+// https://github.com/expo/web-examples/issues/73
+// For now, we do not import it elsewhere to avoid crashing Expo servers on web when importing the SDK.
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_video_1 = __importDefault(require("react-native-video"));
+// Subset of Image props, many are irrelevant for native (such as altText, etc)
+/**
+ *
+ * @typedef {{
+ *   attributes?: any;
+ *   video?: string;
+ *   autoPlay?: boolean;
+ *   controls?: boolean;
+ *   muted?: boolean;
+ *   loop?: boolean;
+ *   playsInline?: boolean;
+ *   aspectRatio?: number;
+ *   fit?: 'contain' | 'cover' | 'stretch';
+ *   position?:
+ *     | 'center'
+ *     | 'top'
+ *     | 'left'
+ *     | 'right'
+ *     | 'bottom'
+ *     | 'top left'
+ *     | 'top right'
+ *     | 'bottom left'
+ *     | 'bottom right';
+ *   posterImage?: string;
+ *   children?: any;
+ * }} VideoProps
+ */
+// TODO: support children by wrapping in a View
+/**
+ * @param {VideoProps} props
+ */
+function Video(props) {
+    return (React.createElement(react_native_1.View, { style: { position: 'relative' } },
+        React.createElement(react_native_video_1.default, { paused: !props.autoPlay, controls: props.controls, muted: props.muted, repeat: props.loop, poster: props.posterImage, posterResizeMode: props.fit || 'contain', resizeMode: props.fit || ('contain'), style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                zIndex: 1,
+            }, source: { uri: props.video } }),
+        React.createElement(react_native_1.View, { style: {
+                width: '100%',
+                paddingTop: `${props.aspectRatio * 100}%`,
+            } })));
+}
+exports.default = Video;