@aws-amplify/ui-react-native 1.2.22 → 1.2.24

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLandscapeStyles = exports.getPortraitStyles = void 0;
+const constants_1 = require("../../constants");
+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,
+    },
+};
+const getPortraitStyles = (imageDimensions) => ({
+    ...commonStyles,
+    buttonsContainer: {
+        ...commonStyles.buttonsContainer,
+        marginTop: 'auto',
+    },
+    image: imageDimensions,
+    textContainer: {
+        ...commonStyles.textContainer,
+        marginVertical: constants_1.SPACING_LARGE,
+    },
+});
+exports.getPortraitStyles = getPortraitStyles;
+const getLandscapeStyles = (imageDimensions) => ({
+    ...commonStyles,
+    contentContainer: {
+        ...commonStyles.contentContainer,
+        flexDirection: 'row',
+    },
+    image: { ...imageDimensions },
+    imageContainer: {
+        ...commonStyles.imageContainer,
+        justifyContent: 'center',
+    },
+    textContainer: {
+        ...commonStyles.textContainer,
+        flex: 1,
+        justifyContent: 'center',
+    },
+    wrapper: {
+        ...commonStyles.wrapper,
+        flex: 1,
+    },
+});
+exports.getLandscapeStyles = getLandscapeStyles;

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

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

package/lib/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ui_react_core_notifications_1 = require("@aws-amplify/ui-react-core-notifications");
+const BannerMessage_1 = require("../BannerMessage");
+const FullScreenMessage_1 = require("../FullScreenMessage");
+const CarouselMessage_1 = require("../CarouselMessage");
+const ModalMessage_1 = require("../ModalMessage");
+const handleMessageLinkAction_1 = tslib_1.__importDefault(require("./handleMessageLinkAction"));
+const platformComponents = {
+    BannerMessage: BannerMessage_1.BannerMessage,
+    CarouselMessage: CarouselMessage_1.CarouselMessage,
+    FullScreenMessage: FullScreenMessage_1.FullScreenMessage,
+    ModalMessage: ModalMessage_1.ModalMessage,
+};
+const onMessageAction = ({ action, url }) => {
+    (0, ui_react_core_notifications_1.handleMessageAction)({ action, url, handleMessageLinkAction: handleMessageLinkAction_1.default });
+};
+function InAppMessageDisplay({ components: overrideComponents, }) {
+    const components = react_1.default.useMemo(() => ({ ...platformComponents, ...overrideComponents }), [overrideComponents]);
+    const { Component, props } = (0, ui_react_core_notifications_1.useMessage)({
+        components,
+        onMessageAction,
+    });
+    return <Component {...props}/>;
+}
+InAppMessageDisplay.BannerMessage = BannerMessage_1.BannerMessage;
+InAppMessageDisplay.CarouselMessage = CarouselMessage_1.CarouselMessage;
+InAppMessageDisplay.FullScreenMessage = FullScreenMessage_1.FullScreenMessage;
+InAppMessageDisplay.ModalMessage = ModalMessage_1.ModalMessage;
+exports.default = InAppMessageDisplay;

package/lib/InAppMessaging/components/InAppMessageDisplay/handleMessageLinkAction.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+const core_1 = require("@aws-amplify/core");
+const logger = new core_1.ConsoleLogger('Notifications.InAppMessaging');
+const handleMessageLinkAction = async (url) => {
+    let supported = false;
+    try {
+        supported = await react_native_1.Linking.canOpenURL(url);
+    }
+    catch (e) {
+        logger.warn(`Call to Linking.canOpenURL failed: ${e}`);
+    }
+    if (!supported) {
+        logger.warn(`Unsupported url provided: ${url}`);
+        return;
+    }
+    try {
+        logger.info(`Opening url: ${url}`);
+        await react_native_1.Linking.openURL(url);
+    }
+    catch (e) {
+        logger.warn(`Call to Linking.openURL failed: ${e}`);
+    }
+};
+exports.default = handleMessageLinkAction;

package/lib/InAppMessaging/components/InAppMessageDisplay/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.InAppMessageDisplay = void 0;
+var InAppMessageDisplay_1 = require("./InAppMessageDisplay");
+Object.defineProperty(exports, "InAppMessageDisplay", { enumerable: true, get: function () { return __importDefault(InAppMessageDisplay_1).default; } });

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

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

package/lib/InAppMessaging/components/MessageLayout/MessageLayout.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const assets_1 = require("../../../assets");
+const primitives_1 = require("../../../primitives");
+const constants_1 = require("../../constants");
+function MessageLayout({ orientation, ...props }) {
+    const { body, hasButtons, hasPrimaryButton, hasRenderableImage, hasSecondaryButton, header, image, onClose, primaryButton, secondaryButton, styles, testID, } = props;
+    const iconButton = (<primitives_1.IconButton color={styles.iconButton.iconColor} hitSlop={constants_1.ICON_BUTTON_HIT_SLOP} onPress={onClose} size={constants_1.ICON_BUTTON_SIZE} source={assets_1.icons.close} style={styles.iconButton.container} testID={constants_1.IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON}/>);
+    return (<react_native_1.View style={styles.container} testID={testID}>
+      <react_native_1.View style={styles.contentContainer}>
+        {orientation === 'portrait' && iconButton}
+        {hasRenderableImage && (<react_native_1.View style={styles.imageContainer}>
+            <react_native_1.Image source={{ uri: image?.src }} style={styles.image} testID={constants_1.IN_APP_MESSAGING_TEST_ID.IMAGE}/>
+          </react_native_1.View>)}
+        <react_native_1.View style={styles.textContainer}>
+          {header?.content && (<react_native_1.Text style={styles.header} testID={constants_1.IN_APP_MESSAGING_TEST_ID.HEADER}>
+              {header.content}
+            </react_native_1.Text>)}
+          {body?.content && (<react_native_1.Text style={styles.body} testID={constants_1.IN_APP_MESSAGING_TEST_ID.BODY}>
+              {body.content}
+            </react_native_1.Text>)}
+        </react_native_1.View>
+        {orientation === 'landscape' && iconButton}
+      </react_native_1.View>
+      {hasButtons && (<react_native_1.View style={styles.buttonsContainer}>
+          {hasSecondaryButton && (<primitives_1.Button onPress={secondaryButton?.onAction} style={styles.secondaryButton.container} testID={constants_1.IN_APP_MESSAGING_TEST_ID.SECONDARY_BUTTON} textStyle={styles.secondaryButton.text}>
+              {secondaryButton?.title}
+            </primitives_1.Button>)}
+          {hasPrimaryButton && (<primitives_1.Button onPress={primaryButton?.onAction} style={styles.primaryButton.container} testID={constants_1.IN_APP_MESSAGING_TEST_ID.PRIMARY_BUTTON} textStyle={styles.primaryButton.text}>
+              {primaryButton?.title}
+            </primitives_1.Button>)}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+}
+exports.default = MessageLayout;

package/lib/InAppMessaging/components/MessageLayout/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.MessageLayout = void 0;
+var MessageLayout_1 = require("./MessageLayout");
+Object.defineProperty(exports, "MessageLayout", { enumerable: true, get: function () { return __importDefault(MessageLayout_1).default; } });

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

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

package/lib/InAppMessaging/components/MessageWrapper/MessageWrapper.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const styles_1 = require("./styles");
+const SUPPORTED_ORIENTATIONS = [
+    'portrait',
+    'portrait-upside-down',
+    'landscape',
+    'landscape-left',
+    'landscape-right',
+];
+function MessageWrapper({ children, disableSafeAreaView, style, }) {
+    return (<react_native_1.Modal transparent visible supportedOrientations={SUPPORTED_ORIENTATIONS}>
+      <react_native_safe_area_context_1.SafeAreaProvider>
+        {disableSafeAreaView ? (children) : (<react_native_safe_area_context_1.SafeAreaView style={[styles_1.styles.messageWrapper, style]}>
+            {children}
+          </react_native_safe_area_context_1.SafeAreaView>)}
+      </react_native_safe_area_context_1.SafeAreaProvider>
+    </react_native_1.Modal>);
+}
+exports.default = MessageWrapper;

package/lib/InAppMessaging/components/MessageWrapper/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.MessageWrapper = void 0;
+var MessageWrapper_1 = require("./MessageWrapper");
+Object.defineProperty(exports, "MessageWrapper", { enumerable: true, get: function () { return __importDefault(MessageWrapper_1).default; } });

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+exports.styles = {
+    messageWrapper: {
+        flex: 1,
+    },
+};

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

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

package/lib/InAppMessaging/components/ModalMessage/ModalMessage.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 ModalMessage(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-modal-dialog`}/>
+    </MessageWrapper_1.MessageWrapper>);
+}
+exports.default = ModalMessage;

package/lib/InAppMessaging/components/ModalMessage/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.ModalMessage = void 0;
+var ModalMessage_1 = require("./ModalMessage");
+Object.defineProperty(exports, "ModalMessage", { enumerable: true, get: function () { return __importDefault(ModalMessage_1).default; } });

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLandscapeStyles = exports.getPortraitStyles = void 0;
+const react_native_1 = require("react-native");
+const constants_1 = require("../../constants");
+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',
+    },
+    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,
+    },
+    buttonText: {
+        fontSize: constants_1.FONT_SIZE_BASE,
+        fontWeight: constants_1.FONT_WEIGHT_BASE,
+        lineHeight: constants_1.LINE_HEIGHT_BASE,
+        textAlign: 'center',
+    },
+    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',
+    },
+    imageContainer: {
+        alignItems: 'center',
+        margin: constants_1.SPACING_LARGE,
+    },
+    wrapper: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+};
+const getPortraitStyles = (imageDimensions) => react_native_1.StyleSheet.create({
+    ...commonStyles,
+    buttonsContainer: {
+        ...commonStyles.buttonsContainer,
+        marginTop: 'auto',
+        paddingHorizontal: constants_1.SPACING_SMALL,
+        paddingBottom: constants_1.SPACING_SMALL,
+    },
+    container: {
+        ...commonStyles.container,
+        minHeight: '40%',
+    },
+    contentContainer: { padding: constants_1.SPACING_LARGE },
+    image: { ...imageDimensions },
+    textContainer: {
+        marginTop: constants_1.SPACING_LARGE,
+    },
+});
+exports.getPortraitStyles = getPortraitStyles;
+const getLandscapeStyles = (imageDimensions) => react_native_1.StyleSheet.create({
+    ...commonStyles,
+    container: {
+        ...commonStyles.container,
+        flex: 1,
+        padding: constants_1.SPACING_EXTRA_LARGE,
+    },
+    contentContainer: {
+        flex: 1,
+        flexDirection: 'row',
+    },
+    iconButton: {
+        ...commonStyles.iconButton,
+        marginRight: constants_1.SPACING_MEDIUM,
+    },
+    image: { ...imageDimensions },
+    imageContainer: {
+        ...commonStyles.imageContainer,
+        justifyContent: 'center',
+    },
+    textContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        paddingHorizontal: constants_1.SPACING_MEDIUM,
+    },
+});
+exports.getLandscapeStyles = getLandscapeStyles;

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

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

package/lib/InAppMessaging/components/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withInAppMessaging = exports.InAppMessageDisplay = void 0;
+var InAppMessageDisplay_1 = require("./InAppMessageDisplay");
+Object.defineProperty(exports, "InAppMessageDisplay", { enumerable: true, get: function () { return InAppMessageDisplay_1.InAppMessageDisplay; } });
+var withInAppMessaging_1 = require("./withInAppMessaging");
+Object.defineProperty(exports, "withInAppMessaging", { enumerable: true, get: function () { return withInAppMessaging_1.withInAppMessaging; } });

package/lib/InAppMessaging/components/withInAppMessaging/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.withInAppMessaging = void 0;
+var withInAppMessaging_1 = require("./withInAppMessaging");
+Object.defineProperty(exports, "withInAppMessaging", { enumerable: true, get: function () { return __importDefault(withInAppMessaging_1).default; } });

package/lib/InAppMessaging/components/withInAppMessaging/withInAppMessaging.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 ui_react_core_notifications_1 = require("@aws-amplify/ui-react-core-notifications");
+const InAppMessageDisplay_1 = require("../InAppMessageDisplay");
+function withInAppMessaging(Component, options) {
+    return function WrappedWithInAppMessaging(props) {
+        return (<ui_react_core_notifications_1.InAppMessagingProvider>
+        <InAppMessageDisplay_1.InAppMessageDisplay {...options}/>
+        <Component {...props}/>
+      </ui_react_core_notifications_1.InAppMessagingProvider>);
+    };
+}
+exports.default = withInAppMessaging;

package/lib/InAppMessaging/constants.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IN_APP_MESSAGING_TEST_ID = exports.BUTTON_PRESSED_OPACITY = exports.MESSAGE_ELEVATION = exports.MESSAGE_SHADOW_RADIUS = exports.MESSAGE_SHADOW_OPACITY = exports.MESSAGE_SHADOW_WIDTH = exports.MESSAGE_SHADOW_HEIGHT = exports.ICON_BUTTON_HIT_SLOP = exports.ICON_BUTTON_SIZE = exports.FONT_WEIGHT_BOLD = exports.FONT_WEIGHT_BASE = exports.LINE_HEIGHT_LARGE = exports.LINE_HEIGHT_BASE = exports.FONT_SIZE_LARGE = exports.FONT_SIZE_BASE = exports.BORDER_RADIUS_BASE = exports.SPACING_EXTRA_LARGE = exports.SPACING_LARGE = exports.SPACING_MEDIUM = exports.SPACING_SMALL = exports.COLOR_WHITE = exports.COLOR_LIGHT_GREY_2 = exports.COLOR_LIGHT_GREY = exports.COLOR_GREY = exports.COLOR_BLACK = void 0;
+const utils_1 = require("../utils");
+// color
+exports.COLOR_BLACK = '#000';
+exports.COLOR_GREY = '#a1a1a1';
+exports.COLOR_LIGHT_GREY = '#e8e8e8';
+exports.COLOR_LIGHT_GREY_2 = '#d8d8d8';
+exports.COLOR_WHITE = '#fff';
+// spacing
+exports.SPACING_SMALL = 4;
+exports.SPACING_MEDIUM = 8;
+exports.SPACING_LARGE = 12;
+exports.SPACING_EXTRA_LARGE = 16;
+// border radius
+exports.BORDER_RADIUS_BASE = 4;
+// font
+exports.FONT_SIZE_BASE = 16;
+exports.FONT_SIZE_LARGE = 18;
+exports.LINE_HEIGHT_BASE = (0, utils_1.getLineHeight)(exports.FONT_SIZE_BASE);
+exports.LINE_HEIGHT_LARGE = (0, utils_1.getLineHeight)(exports.FONT_SIZE_LARGE);
+exports.FONT_WEIGHT_BASE = '400';
+exports.FONT_WEIGHT_BOLD = '600';
+// icon
+exports.ICON_BUTTON_SIZE = 20;
+exports.ICON_BUTTON_HIT_SLOP = 10;
+// shadow properties
+// iOS shadow values
+exports.MESSAGE_SHADOW_HEIGHT = 2;
+exports.MESSAGE_SHADOW_WIDTH = 2;
+exports.MESSAGE_SHADOW_OPACITY = 0.1;
+exports.MESSAGE_SHADOW_RADIUS = 2;
+// android shadow values
+exports.MESSAGE_ELEVATION = 3;
+// Message UI Buttons
+// default value applied in React Native TouchableOpacity
+exports.BUTTON_PRESSED_OPACITY = 0.8;
+// Message Component Test IDs
+exports.IN_APP_MESSAGING_TEST_ID = {
+    BODY: 'in-app-messaging--body',
+    CLOSE_BUTTON: 'in-app-messaging--close-button',
+    HEADER: 'in-app-messaging--header',
+    IMAGE: 'in-app-messaging--image',
+    PRIMARY_BUTTON: 'in-app-messaging--primary-button',
+    SECONDARY_BUTTON: 'in-app-messaging--secondary-button',
+    CAROUSEL: 'in-app-messaging--carousel',
+};

package/lib/InAppMessaging/hooks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessageProps = exports.useMessageImage = void 0;
+var useMessageImage_1 = require("./useMessageImage");
+Object.defineProperty(exports, "useMessageImage", { enumerable: true, get: function () { return useMessageImage_1.useMessageImage; } });
+var useMessageProps_1 = require("./useMessageProps");
+Object.defineProperty(exports, "useMessageProps", { enumerable: true, get: function () { return useMessageProps_1.useMessageProps; } });

package/lib/InAppMessaging/hooks/useMessageImage/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MODAL_IMAGE_SCREEN_SIZE = exports.FULL_SCREEN_IMAGE_SCREEN_SIZE = exports.CAROUSEL_IMAGE_SCREEN_SIZE = exports.BANNER_IMAGE_SCREEN_SIZE = exports.MODAL_IMAGE_SCREEN_MULTIPLIER = exports.FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER = exports.CAROUSEL_IMAGE_SCREEN_MULTIPLIER = exports.BANNER_IMAGE_SCREEN_MULTIPLIER = void 0;
+const react_native_1 = require("react-native");
+// as images are not expected to be responsive to orientation changes get screen dimensions at app start
+const SCREEN_DIMENSIONS = react_native_1.Dimensions.get('screen');
+// compare screen width and height and assign the lesser of the two as the base screen dimension
+const BASE_SCREEN_DIMENSION = SCREEN_DIMENSIONS.width < SCREEN_DIMENSIONS.height
+    ? SCREEN_DIMENSIONS.width
+    : SCREEN_DIMENSIONS.height;
+// base size that message images should fill
+// - all banner message images should fill 20 percent of the base screen dimension
+// - all other components should fill 60 percent of the base screen dimension
+exports.BANNER_IMAGE_SCREEN_MULTIPLIER = 0.2;
+exports.CAROUSEL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+exports.FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER = 0.6;
+exports.MODAL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+exports.BANNER_IMAGE_SCREEN_SIZE = exports.BANNER_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+exports.CAROUSEL_IMAGE_SCREEN_SIZE = exports.CAROUSEL_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+exports.FULL_SCREEN_IMAGE_SCREEN_SIZE = exports.FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+exports.MODAL_IMAGE_SCREEN_SIZE = exports.MODAL_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;

package/lib/InAppMessaging/hooks/useMessageImage/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.useMessageImage = void 0;
+var useMessageImage_1 = require("./useMessageImage");
+Object.defineProperty(exports, "useMessageImage", { enumerable: true, get: function () { return __importDefault(useMessageImage_1).default; } });

package/lib/InAppMessaging/hooks/useMessageImage/types.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePrefetchStatus = void 0;
+var ImagePrefetchStatus;
+(function (ImagePrefetchStatus) {
+    ImagePrefetchStatus["Failure"] = "FAILURE";
+    ImagePrefetchStatus["Fetching"] = "FETCHING";
+    ImagePrefetchStatus["Success"] = "SUCCESS";
+})(ImagePrefetchStatus = exports.ImagePrefetchStatus || (exports.ImagePrefetchStatus = {}));

package/lib/InAppMessaging/hooks/useMessageImage/useMessageImage.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const core_1 = require("@aws-amplify/core");
+const types_1 = require("./types");
+const utils_1 = require("./utils");
+const logger = new core_1.ConsoleLogger('Notifications.InAppMessaging');
+/**
+ * Handles prefetching and dimension setting for message images
+ *
+ * @param image contains image source
+ * @param layout message layout
+ * @returns message image dimensions and rendering related booleans
+ */
+function useMessageImage(image, layout) {
+    const { src } = image ?? {};
+    const shouldPrefetch = !!src;
+    // set initial status to fetching if prefetch is required
+    const [prefetchStatus, setPrefetchStatus] = (0, react_1.useState)(shouldPrefetch ? types_1.ImagePrefetchStatus.Fetching : null);
+    const imageDimensions = (0, react_1.useRef)({
+        height: undefined,
+        width: undefined,
+    }).current;
+    const isImageFetching = prefetchStatus === types_1.ImagePrefetchStatus.Fetching;
+    const hasRenderableImage = prefetchStatus === types_1.ImagePrefetchStatus.Success;
+    (0, react_1.useEffect)(() => {
+        if (!shouldPrefetch) {
+            return;
+        }
+        (0, utils_1.prefetchNetworkImage)(src).then((prefetchResult) => {
+            if (prefetchResult === 'loaded') {
+                // get image size once loaded
+                react_native_1.Image.getSize(src, (imageWidth, imageHeight) => {
+                    const { height, width } = (0, utils_1.getLayoutImageDimensions)(imageHeight, imageWidth, layout);
+                    imageDimensions.height = height;
+                    imageDimensions.width = width;
+                    setPrefetchStatus(types_1.ImagePrefetchStatus.Success);
+                }, (error) => {
+                    // handle size retrieval error
+                    logger.error(`Unable to retrieve size for image: ${error}`);
+                    setPrefetchStatus(types_1.ImagePrefetchStatus.Failure);
+                });
+            }
+            else {
+                // handle prefetch failure
+                setPrefetchStatus(types_1.ImagePrefetchStatus.Failure);
+            }
+        });
+    }, [imageDimensions, layout, shouldPrefetch, src]);
+    return { hasRenderableImage, imageDimensions, isImageFetching };
+}
+exports.default = useMessageImage;