@aws-amplify/ui-react-native 1.2.21 → 1.2.23

package/lib/Authenticator/hooks/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useFieldValues"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/lib/Authenticator/hooks/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/hooks/useFieldValues/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KEY_ALLOW_LIST = void 0;
+// machine keys used with default fields that should be used with UI
+exports.KEY_ALLOW_LIST = [
+    'label',
+    'placeholder',
+    'required',
+    'isRequired',
+    'type',
+];

package/lib/Authenticator/hooks/useFieldValues/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRouteTypedFields = exports.useFieldValues = void 0;
+var useFieldValues_1 = require("./useFieldValues");
+Object.defineProperty(exports, "useFieldValues", { enumerable: true, get: function () { return __importDefault(useFieldValues_1).default; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getRouteTypedFields", { enumerable: true, get: function () { return utils_1.getRouteTypedFields; } });

package/lib/Authenticator/hooks/useFieldValues/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/hooks/useFieldValues/useFieldValues.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const aws_amplify_1 = require("aws-amplify");
+const utils_1 = require("./utils");
+const logger = new aws_amplify_1.Logger('Authenticator');
+function useFieldValues({ componentName, fields = [], handleBlur, handleChange, handleSubmit, validationErrors, }) {
+    const [values, setValues] = (0, react_1.useState)({});
+    const [touched, setTouched] = (0, react_1.useState)({});
+    const [fieldValidationErrors, setFieldValidationErrors] = (0, react_1.useState)({});
+    const isRadioFieldComponent = componentName === 'VerifyUser';
+    const sanitizedFields = (0, react_1.useMemo)(() => {
+        if (!Array.isArray(fields)) {
+            logger.warn(`Invalid fields type of ${typeof fields} passed to ${componentName}. fields must be of type array.`);
+            return [];
+        }
+        if (isRadioFieldComponent) {
+            return (0, utils_1.getSanitizedRadioFields)(fields, componentName);
+        }
+        return (0, utils_1.getSanitizedTextFields)(fields, componentName);
+    }, [componentName, fields, isRadioFieldComponent]);
+    const fieldsWithHandlers = sanitizedFields.map((field) => {
+        if ((0, utils_1.isRadioFieldOptions)(field)) {
+            const onChange = (value) => {
+                // call `onChange` passed as radio `field` option
+                field.onChange?.(value);
+                // set `name` as value of 'unverifiedAttr'
+                setValues({ unverifiedAttr: value });
+            };
+            return { ...field, onChange };
+        }
+        const { name, label, labelHidden, ...rest } = field;
+        const onBlur = (event) => {
+            setTouched({ ...touched, [name]: true });
+            // call `onBlur` passed as text `field` option
+            field.onBlur?.(event);
+            // call machine blur handler
+            handleBlur({ name, value: values[name] });
+            setFieldValidationErrors({
+                ...fieldValidationErrors,
+                [name]: (0, utils_1.runFieldValidation)(field, values[name], validationErrors),
+            });
+        };
+        const onChangeText = (value) => {
+            // call `onChangeText` passed as text `field` option
+            field.onChangeText?.(value);
+            // call machine change handler
+            handleChange({ name, value });
+            if (touched[name]) {
+                setFieldValidationErrors({
+                    ...fieldValidationErrors,
+                    [name]: (0, utils_1.runFieldValidation)(field, value, validationErrors),
+                });
+            }
+            setValues({ ...values, [name]: value });
+        };
+        return {
+            ...rest,
+            label: labelHidden ? undefined : label,
+            onBlur,
+            onChangeText,
+            name,
+            value: values[name],
+        };
+    });
+    const disableFormSubmit = isRadioFieldComponent
+        ? !values.unverifiedAttr
+        : fieldsWithHandlers.some(({ required, value }) => {
+            if (!required) {
+                return false;
+            }
+            if (value) {
+                return false;
+            }
+            return true;
+        });
+    const handleFormSubmit = () => {
+        const submitValue = isRadioFieldComponent
+            ? values
+            : fieldsWithHandlers.reduce((acc, { name, value = '', type }) => {
+                /*
+                      For phone numbers pass the first 3 charactes from value as dialCode until we support a dialCode picker
+                  */
+                return type === 'phone'
+                    ? {
+                        ...acc,
+                        country_code: value?.substring(0, 3),
+                        [name]: value?.substring(3, value.length),
+                    }
+                    : { ...acc, [name]: value };
+            }, {});
+        handleSubmit?.(submitValue);
+    };
+    return {
+        fields: fieldsWithHandlers,
+        disableFormSubmit,
+        fieldValidationErrors: { ...fieldValidationErrors, ...validationErrors },
+        handleFormSubmit,
+    };
+}
+exports.default = useFieldValues;

package/lib/Authenticator/hooks/useFieldValues/utils.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runFieldValidation = exports.getRouteTypedFields = exports.getTypedFields = exports.getTypedField = exports.getSanitizedTextFields = exports.getSanitizedRadioFields = exports.isRadioFieldOptions = void 0;
+const aws_amplify_1 = require("aws-amplify");
+const ui_1 = require("@aws-amplify/ui");
+const ui_react_core_1 = require("@aws-amplify/ui-react-core");
+const constants_1 = require("./constants");
+const logger = new aws_amplify_1.Logger('Authenticator');
+const { getInvalidEmailText, getRequiredFieldText } = ui_1.authenticatorTextUtil;
+const isRadioFieldOptions = (field) => field?.type === 'radio';
+exports.isRadioFieldOptions = isRadioFieldOptions;
+const getSanitizedRadioFields = (fields, componentName) => {
+    const values = {};
+    return fields.filter((field) => {
+        if (!(0, exports.isRadioFieldOptions)(field)) {
+            logger.warn(`${componentName} component does not support text fields. field with type ${field.type} has been ignored.`);
+            return false;
+        }
+        const { name, value } = field;
+        if (!value) {
+            logger.warn('Each radio field must have a value. field has been ignored.');
+            return false;
+        }
+        if (values[value]) {
+            logger.warn(`Each radio field value must be unique. field with duplicate value of ${value} has been ignored.`);
+            return false;
+        }
+        if (!(0, ui_1.isUnverifiedContactMethodType)(name)) {
+            logger.warn(`field with name '${name}' has been ignored. Supported values are: ${Object.values(ui_1.UnverifiedContactMethodType)}.`);
+            return false;
+        }
+        // add `value` key to `values`
+        values[value] = true;
+        return true;
+    });
+};
+exports.getSanitizedRadioFields = getSanitizedRadioFields;
+const getSanitizedTextFields = (fields, componentName) => {
+    const names = {};
+    return fields.filter((field) => {
+        if ((0, exports.isRadioFieldOptions)(field)) {
+            logger.warn(`${componentName} component does not support radio fields. field has been ignored.`);
+            return false;
+        }
+        const { name } = field;
+        if (!name) {
+            logger.warn('Each field must have a name. field has been ignored.');
+            return false;
+        }
+        if (names[name]) {
+            logger.warn(`Each field name must be unique. field with duplicate name of ${name} has been ignored.`);
+            return false;
+        }
+        names[name] = true;
+        return true;
+    });
+};
+exports.getSanitizedTextFields = getSanitizedTextFields;
+// typed fields utils
+const isKeyAllowed = (key) => constants_1.KEY_ALLOW_LIST.some((allowedKey) => allowedKey === key);
+const isValidMachineFieldType = (type) => type === 'password' || type === 'tel' || type == 'email';
+const getFieldType = (type) => {
+    if (isValidMachineFieldType(type)) {
+        return type === 'tel' ? 'phone' : type;
+    }
+    return 'default';
+};
+/**
+ * Translate machine fields to typed fields
+ *
+ * @param {AuthenticatorLegacyField} field machine field option object
+ * @returns {TypedField} UI field props object
+ */
+const getTypedField = ({ type: machineFieldType, name, ...field }) => {
+    const type = getFieldType(machineFieldType);
+    const testID = `authenticator__text-field__input-${name}`;
+    return Object.entries(field).reduce((acc, [key, value]) => {
+        // early return if key is not allowed
+        if (!isKeyAllowed(key)) {
+            return acc;
+        }
+        // map to `required` prop
+        if (key === 'isRequired' || key === 'required') {
+            // `TypedField` props expects `required` key
+            return { ...acc, required: value, testID };
+        }
+        return { ...acc, [key]: value, testID };
+    }, 
+    // initialize `acc` with field `name` and `type`
+    { name, type });
+};
+exports.getTypedField = getTypedField;
+/**
+ * @param {AuthenticatorLegacyField[]} fields machine field options array
+ * @returns {TypedField[]} UI field props array
+ */
+const getTypedFields = (fields) => fields?.map(exports.getTypedField);
+exports.getTypedFields = getTypedFields;
+function getRouteTypedFields({ fields, route, }) {
+    const isComponentRoute = (0, ui_react_core_1.isAuthenticatorComponentRouteKey)(route);
+    if (!isComponentRoute) {
+        return [];
+    }
+    // `VerifyUser` does not require additional updates to the shape of `fields`
+    const isVerifyUserRoute = route === 'verifyUser';
+    const radioFields = fields;
+    return isVerifyUserRoute ? radioFields : (0, exports.getTypedFields)(fields);
+}
+exports.getRouteTypedFields = getRouteTypedFields;
+/**
+ *
+ * @param {TextFieldOptionsType} field text field type
+ * @param {string | undefined} value text field value
+ * @param {string[]} stateValidations validation errors array from state machine
+ * @returns {string[]} field errors array
+ */
+const runFieldValidation = (field, value, stateValidations) => {
+    const fieldErrors = [];
+    if (field.required && !value) {
+        fieldErrors.push(getRequiredFieldText());
+    }
+    if (field.type === 'email') {
+        if (!(0, ui_1.isValidEmail)(value)) {
+            fieldErrors.push(getInvalidEmailText());
+        }
+    }
+    // add state machine validation errors, if any
+    const stateFieldValidation = stateValidations?.[field.name];
+    if (stateFieldValidation) {
+        if ((0, ui_1.isString)(stateFieldValidation)) {
+            fieldErrors.push(stateFieldValidation);
+        }
+        else {
+            return fieldErrors.concat(stateFieldValidation);
+        }
+    }
+    return fieldErrors;
+};
+exports.runFieldValidation = runFieldValidation;

package/lib/Authenticator/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAuthenticator = exports.withAuthenticator = exports.Authenticator = void 0;
+var Authenticator_1 = require("./Authenticator");
+Object.defineProperty(exports, "Authenticator", { enumerable: true, get: function () { return __importDefault(Authenticator_1).default; } });
+var withAuthenticator_1 = require("./withAuthenticator");
+Object.defineProperty(exports, "withAuthenticator", { enumerable: true, get: function () { return __importDefault(withAuthenticator_1).default; } });
+// re-export shared `Authenticator` exports
+var ui_react_core_1 = require("@aws-amplify/ui-react-core");
+Object.defineProperty(exports, "useAuthenticator", { enumerable: true, get: function () { return ui_react_core_1.useAuthenticator; } });

package/lib/Authenticator/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Authenticator/withAuthenticator.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Authenticator_1 = tslib_1.__importDefault(require("./Authenticator"));
+function withAuthenticator(Component, options = {}) {
+    return function WrappedWithAuthenticator(props) {
+        return (<Authenticator_1.default.Provider>
+        <Authenticator_1.default {...options}>
+          <Component {...props}/>
+        </Authenticator_1.default>
+      </Authenticator_1.default.Provider>);
+    };
+}
+exports.default = withAuthenticator;

package/lib/InAppMessaging/components/BannerMessage/BannerMessage.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const MessageWrapper_1 = require("../MessageWrapper");
+const MessageLayout_1 = require("../MessageLayout");
+const styles_1 = require("./styles");
+function BannerMessage({ position = 'top', ...props }) {
+    const messageProps = (0, hooks_1.useMessageProps)(props, (imageDimensions) => (0, styles_1.getStyles)(imageDimensions, { position: { ...styles_1.positionStyle[position] } }));
+    const { shouldRenderMessage, styles } = messageProps;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    const { wrapper, ...messageStyles } = styles;
+    return (<MessageWrapper_1.MessageWrapper style={wrapper}>
+      <MessageLayout_1.MessageLayout {...props} {...messageProps} orientation="landscape" styles={messageStyles} testID={`inappmessaging-${position}banner-dialog`}/>
+    </MessageWrapper_1.MessageWrapper>);
+}
+exports.default = BannerMessage;

package/lib/InAppMessaging/components/BannerMessage/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BannerMessage = void 0;
+var BannerMessage_1 = require("./BannerMessage");
+Object.defineProperty(exports, "BannerMessage", { enumerable: true, get: function () { return __importDefault(BannerMessage_1).default; } });

package/lib/InAppMessaging/components/BannerMessage/styles.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = exports.positionStyle = void 0;
+const constants_1 = require("../../constants");
+exports.positionStyle = {
+    bottom: {
+        justifyContent: 'flex-end',
+    },
+    middle: {
+        justifyContent: 'center',
+    },
+    top: {
+        justifyContent: 'flex-start',
+    },
+};
+const getStyles = (imageDimensions, additionalStyle) => ({
+    body: {
+        fontSize: constants_1.FONT_SIZE_BASE,
+        fontWeight: constants_1.FONT_WEIGHT_BASE,
+        lineHeight: constants_1.LINE_HEIGHT_BASE,
+    },
+    buttonContainer: {
+        backgroundColor: constants_1.COLOR_LIGHT_GREY,
+        borderRadius: constants_1.BORDER_RADIUS_BASE,
+        flex: 1,
+        margin: constants_1.SPACING_MEDIUM,
+        padding: constants_1.SPACING_LARGE,
+    },
+    buttonsContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        padding: constants_1.SPACING_SMALL,
+    },
+    buttonText: {
+        fontSize: constants_1.FONT_SIZE_BASE,
+        fontWeight: constants_1.FONT_WEIGHT_BASE,
+        lineHeight: constants_1.LINE_HEIGHT_BASE,
+        textAlign: 'center',
+    },
+    container: {
+        backgroundColor: constants_1.COLOR_WHITE,
+        elevation: constants_1.MESSAGE_ELEVATION,
+        margin: constants_1.SPACING_EXTRA_LARGE,
+        shadowColor: constants_1.COLOR_BLACK,
+        shadowOffset: {
+            width: constants_1.MESSAGE_SHADOW_WIDTH,
+            height: constants_1.MESSAGE_SHADOW_HEIGHT,
+        },
+        shadowOpacity: constants_1.MESSAGE_SHADOW_OPACITY,
+        shadowRadius: constants_1.MESSAGE_SHADOW_RADIUS,
+    },
+    contentContainer: {
+        flexDirection: 'row',
+        padding: constants_1.SPACING_LARGE,
+    },
+    header: {
+        fontSize: constants_1.FONT_SIZE_LARGE,
+        fontWeight: constants_1.FONT_WEIGHT_BOLD,
+        lineHeight: constants_1.LINE_HEIGHT_LARGE,
+    },
+    iconButton: {
+        alignSelf: 'flex-start',
+        marginLeft: 'auto',
+    },
+    image: {
+        ...imageDimensions,
+    },
+    imageContainer: {
+        justifyContent: 'center',
+    },
+    textContainer: {
+        flex: 1,
+        paddingHorizontal: constants_1.SPACING_MEDIUM,
+    },
+    wrapper: {
+        ...additionalStyle?.position,
+        backgroundColor: 'transparent',
+        flex: 1,
+    },
+});
+exports.getStyles = getStyles;

package/lib/InAppMessaging/components/BannerMessage/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/InAppMessaging/components/CarouselMessage/CarouselMessage.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const primitives_1 = require("../../../primitives");
+const constants_1 = require("../../constants");
+const MessageWrapper_1 = require("../MessageWrapper");
+const CarouselMessageItem_1 = tslib_1.__importDefault(require("./CarouselMessageItem"));
+const styles_1 = require("./styles");
+function CarouselMessage(props) {
+    const { data, ...rest } = props;
+    const { style } = rest;
+    const indicatorStyle = (0, react_1.useMemo)(() => ({
+        active: [styles_1.defaultStyle.pageIndicatorActive, style?.pageIndicatorActive],
+        inactive: [
+            styles_1.defaultStyle.pageIndicatorInactive,
+            style?.pageIndicatorInactive,
+        ],
+    }), [style]);
+    const renderItem = ({ item }) => (<CarouselMessageItem_1.default {...item} {...rest}/>);
+    return (<MessageWrapper_1.MessageWrapper disableSafeAreaView>
+      <primitives_1.Carousel data={data ?? []} renderItem={renderItem} indicatorActiveStyle={indicatorStyle.active} indicatorInactiveStyle={indicatorStyle.inactive} testID={constants_1.IN_APP_MESSAGING_TEST_ID.CAROUSEL}/>
+    </MessageWrapper_1.MessageWrapper>);
+}
+exports.default = CarouselMessage;

package/lib/InAppMessaging/components/CarouselMessage/CarouselMessageItem.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const hooks_1 = require("../../../hooks");
+const hooks_2 = require("../../hooks");
+const MessageLayout_1 = require("../MessageLayout");
+const styles_1 = require("./styles");
+function CarouselMessageItem(props) {
+    const { deviceOrientation, isPortraitMode } = (0, hooks_1.useDeviceOrientation)();
+    const messageProps = (0, hooks_2.useMessageProps)(props, isPortraitMode ? styles_1.getPortraitStyles : styles_1.getLandscapeStyles);
+    const { shouldRenderMessage, styles } = messageProps;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    const { wrapper, ...messageStyles } = styles;
+    return (<react_native_safe_area_context_1.SafeAreaView style={wrapper}>
+      <MessageLayout_1.MessageLayout {...props} {...messageProps} orientation={deviceOrientation} styles={messageStyles}/>
+    </react_native_safe_area_context_1.SafeAreaView>);
+}
+exports.default = CarouselMessageItem;

package/lib/InAppMessaging/components/CarouselMessage/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselMessage = void 0;
+var CarouselMessage_1 = require("./CarouselMessage");
+Object.defineProperty(exports, "CarouselMessage", { enumerable: true, get: function () { return __importDefault(CarouselMessage_1).default; } });

package/lib/InAppMessaging/components/CarouselMessage/styles.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLandscapeStyles = exports.getPortraitStyles = exports.defaultStyle = void 0;
+const react_native_1 = require("react-native");
+const constants_1 = require("../../constants");
+exports.defaultStyle = react_native_1.StyleSheet.create({
+    pageIndicatorActive: {
+        backgroundColor: constants_1.COLOR_GREY,
+        borderRadius: constants_1.SPACING_LARGE / 2,
+        height: constants_1.SPACING_LARGE,
+        margin: constants_1.SPACING_SMALL,
+        width: constants_1.SPACING_LARGE,
+    },
+    pageIndicatorInactive: {
+        backgroundColor: constants_1.COLOR_LIGHT_GREY_2,
+        borderRadius: constants_1.SPACING_LARGE / 2,
+        height: constants_1.SPACING_LARGE,
+        margin: constants_1.SPACING_SMALL,
+        width: constants_1.SPACING_LARGE,
+    },
+});
+const commonStyles = {
+    body: {
+        fontSize: constants_1.FONT_SIZE_BASE,
+        fontWeight: constants_1.FONT_WEIGHT_BASE,
+        lineHeight: constants_1.LINE_HEIGHT_BASE,
+    },
+    buttonContainer: {
+        backgroundColor: constants_1.COLOR_LIGHT_GREY,
+        borderRadius: constants_1.BORDER_RADIUS_BASE,
+        flex: 1,
+        margin: constants_1.SPACING_MEDIUM,
+        padding: constants_1.SPACING_LARGE,
+    },
+    buttonsContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    buttonText: {
+        fontSize: constants_1.FONT_SIZE_BASE,
+        fontWeight: constants_1.FONT_WEIGHT_BASE,
+        lineHeight: constants_1.LINE_HEIGHT_BASE,
+        textAlign: 'center',
+    },
+    container: {
+        flex: 1,
+        padding: constants_1.SPACING_EXTRA_LARGE,
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    header: {
+        fontSize: constants_1.FONT_SIZE_LARGE,
+        fontWeight: constants_1.FONT_WEIGHT_BOLD,
+        lineHeight: constants_1.LINE_HEIGHT_LARGE,
+    },
+    iconButton: {
+        alignSelf: 'flex-start',
+        marginBottom: constants_1.SPACING_MEDIUM,
+        marginLeft: 'auto',
+        marginRight: constants_1.SPACING_MEDIUM,
+    },
+    imageContainer: {
+        alignItems: 'center',
+        margin: constants_1.SPACING_LARGE,
+    },
+    textContainer: {
+        paddingHorizontal: constants_1.SPACING_MEDIUM,
+    },
+    wrapper: {
+        backgroundColor: constants_1.COLOR_WHITE,
+        flex: 1,
+    },
+};
+const getPortraitStyles = (imageDimensions) => react_native_1.StyleSheet.create({
+    ...commonStyles,
+    image: { ...imageDimensions },
+    textContainer: {
+        ...commonStyles.textContainer,
+        marginVertical: constants_1.SPACING_LARGE,
+    },
+});
+exports.getPortraitStyles = getPortraitStyles;
+const getLandscapeStyles = (imageDimensions) => react_native_1.StyleSheet.create({
+    ...commonStyles,
+    contentContainer: {
+        ...commonStyles.contentContainer,
+        alignContent: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    image: { ...imageDimensions },
+    imageContainer: {
+        ...commonStyles.imageContainer,
+        justifyContent: 'center',
+    },
+    textContainer: {
+        ...commonStyles.textContainer,
+        flex: 1,
+        justifyContent: 'center',
+    },
+});
+exports.getLandscapeStyles = getLandscapeStyles;

package/lib/InAppMessaging/components/CarouselMessage/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/InAppMessaging/components/FullScreenMessage/FullScreenMessage.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hooks_1 = require("../../../hooks");
+const hooks_2 = require("../../hooks");
+const MessageLayout_1 = require("../MessageLayout");
+const MessageWrapper_1 = require("../MessageWrapper");
+const styles_1 = require("./styles");
+function FullScreenMessage(props) {
+    const { deviceOrientation, isPortraitMode } = (0, hooks_1.useDeviceOrientation)();
+    const messageProps = (0, hooks_2.useMessageProps)(props, isPortraitMode ? styles_1.getPortraitStyles : styles_1.getLandscapeStyles);
+    const { shouldRenderMessage, styles } = messageProps;
+    if (!shouldRenderMessage) {
+        return null;
+    }
+    const { wrapper, ...messageStyles } = styles;
+    return (<MessageWrapper_1.MessageWrapper style={wrapper}>
+      <MessageLayout_1.MessageLayout {...props} {...messageProps} orientation={deviceOrientation} styles={messageStyles} testID={`inappmessaging-fullscreen-dialog`}/>
+    </MessageWrapper_1.MessageWrapper>);
+}
+exports.default = FullScreenMessage;

package/lib/InAppMessaging/components/FullScreenMessage/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullScreenMessage = void 0;
+var FullScreenMessage_1 = require("./FullScreenMessage");
+Object.defineProperty(exports, "FullScreenMessage", { enumerable: true, get: function () { return __importDefault(FullScreenMessage_1).default; } });