@aws-amplify/ui-react-native 0.0.0-in-app-messaging-20220826014803

package/dist/InAppMessaging/constants.js

@@ -0,0 +1,43 @@
+import { getLineHeight } from '../utils';
+// color
+export const COLOR_BLACK = '#000';
+export const COLOR_GREY = '#a1a1a1';
+export const COLOR_LIGHT_GREY = '#e8e8e8';
+export const COLOR_LIGHT_GREY_2 = '#d8d8d8';
+export const COLOR_WHITE = '#fff';
+// spacing
+export const SPACING_SMALL = 4;
+export const SPACING_MEDIUM = 8;
+export const SPACING_LARGE = 12;
+export const SPACING_EXTRA_LARGE = 16;
+// border radius
+export const BORDER_RADIUS_BASE = 4;
+// font
+export const FONT_SIZE_BASE = 16;
+export const FONT_SIZE_LARGE = 18;
+export const LINE_HEIGHT_BASE = getLineHeight(FONT_SIZE_BASE);
+export const LINE_HEIGHT_LARGE = getLineHeight(FONT_SIZE_LARGE);
+export const FONT_WEIGHT_BASE = '400';
+// icon
+export const ICON_BUTTON_SIZE = 20;
+export const ICON_BUTTON_HIT_SLOP = 10;
+// shadow properties
+// iOS shadow values
+export const MESSAGE_SHADOW_HEIGHT = 2;
+export const MESSAGE_SHADOW_WIDTH = 2;
+export const MESSAGE_SHADOW_OPACITY = 0.1;
+export const MESSAGE_SHADOW_RADIUS = 2;
+// android shadow values
+export const MESSAGE_ELEVATION = 3;
+// Message UI Buttons
+// default value applied in React Native TouchableOpacity
+export const BUTTON_PRESSED_OPACITY = 0.8;
+// Message Component Test IDs
+export const 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',
+};

package/dist/InAppMessaging/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageDimensions, useMessageImage } from './useMessageImage';
+export { GetDefaultStyle, MessageComponentStyles, MessageDefaultStyle, MessageOverrideStyle, useMessageProps, UseMessageProps, } from './useMessageProps';

package/dist/InAppMessaging/hooks/index.js

@@ -0,0 +1,2 @@
+export { useMessageImage } from './useMessageImage';
+export { useMessageProps, } from './useMessageProps';

package/dist/InAppMessaging/hooks/useMessageImage/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const BANNER_IMAGE_SCREEN_MULTIPLIER = 0.2;
+export declare const CAROUSEL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export declare const FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export declare const MODAL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export declare const BANNER_IMAGE_SCREEN_SIZE: number;
+export declare const CAROUSEL_IMAGE_SCREEN_SIZE: number;
+export declare const FULL_SCREEN_IMAGE_SCREEN_SIZE: number;
+export declare const MODAL_IMAGE_SCREEN_SIZE: number;

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

@@ -0,0 +1,18 @@
+import { Dimensions } from 'react-native';
+// as images are not expected to be responsive to orientation changes get screen dimensions at app start
+const SCREEN_DIMENSIONS = 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
+export const BANNER_IMAGE_SCREEN_MULTIPLIER = 0.2;
+export const CAROUSEL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export const FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export const MODAL_IMAGE_SCREEN_MULTIPLIER = 0.6;
+export const BANNER_IMAGE_SCREEN_SIZE = BANNER_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+export const CAROUSEL_IMAGE_SCREEN_SIZE = CAROUSEL_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+export const FULL_SCREEN_IMAGE_SCREEN_SIZE = FULL_SCREEN_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;
+export const MODAL_IMAGE_SCREEN_SIZE = MODAL_IMAGE_SCREEN_MULTIPLIER * BASE_SCREEN_DIMENSION;

package/dist/InAppMessaging/hooks/useMessageImage/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useMessageImage } from './useMessageImage';
+export { ImageDimensions } from './types';

package/dist/InAppMessaging/hooks/useMessageImage/index.js

@@ -0,0 +1 @@
+export { default as useMessageImage } from './useMessageImage';

package/dist/InAppMessaging/hooks/useMessageImage/types.d.ts

@@ -0,0 +1,15 @@
+export declare type ImageDimensions = {
+    height: number | undefined;
+    width: number | undefined;
+};
+export declare type ImageLoadingState = 'loaded' | 'failed';
+export declare enum ImagePrefetchStatus {
+    Failure = "FAILURE",
+    Fetching = "FETCHING",
+    Success = "SUCCESS"
+}
+export declare type UseMessageImage = {
+    hasRenderableImage: boolean;
+    imageDimensions: ImageDimensions;
+    isImageFetching: boolean;
+};

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

@@ -0,0 +1,6 @@
+export var ImagePrefetchStatus;
+(function (ImagePrefetchStatus) {
+    ImagePrefetchStatus["Failure"] = "FAILURE";
+    ImagePrefetchStatus["Fetching"] = "FETCHING";
+    ImagePrefetchStatus["Success"] = "SUCCESS";
+})(ImagePrefetchStatus || (ImagePrefetchStatus = {}));

package/dist/InAppMessaging/hooks/useMessageImage/useMessageImage.d.ts

@@ -0,0 +1,10 @@
+import { MessageImage, MessageLayout } from '@aws-amplify/ui-react-core';
+import { UseMessageImage } from './types';
+/**
+ * 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
+ */
+export default function useMessageImage(image: MessageImage | undefined, layout: MessageLayout): UseMessageImage;

package/dist/InAppMessaging/hooks/useMessageImage/useMessageImage.js

@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState } from 'react';
+import { Image } from 'react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { ImagePrefetchStatus } from './types';
+import { getLayoutImageDimensions, prefetchNetworkImage } from './utils';
+const logger = new Logger('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
+ */
+export default function useMessageImage(image, layout) {
+    const { src } = image ?? {};
+    const shouldPrefetch = !!src;
+    // set initial status to fetching if prefetch is required
+    const [prefetchStatus, setPrefetchStatus] = useState(shouldPrefetch ? ImagePrefetchStatus.Fetching : null);
+    const imageDimensions = useRef({
+        height: undefined,
+        width: undefined,
+    }).current;
+    const isImageFetching = prefetchStatus === ImagePrefetchStatus.Fetching;
+    const hasRenderableImage = prefetchStatus === ImagePrefetchStatus.Success;
+    useEffect(() => {
+        if (!shouldPrefetch) {
+            return;
+        }
+        prefetchNetworkImage(src).then((prefetchResult) => {
+            if (prefetchResult === 'loaded') {
+                // get image size once loaded
+                Image.getSize(src, (imageWidth, imageHeight) => {
+                    const { height, width } = getLayoutImageDimensions(imageHeight, imageWidth, layout);
+                    imageDimensions.height = height;
+                    imageDimensions.width = width;
+                    setPrefetchStatus(ImagePrefetchStatus.Success);
+                }, (error) => {
+                    // handle size retrieval error
+                    logger.error(`Unable to retrieve size for image: ${error}`);
+                    setPrefetchStatus(ImagePrefetchStatus.Failure);
+                });
+            }
+            else {
+                // handle prefetch failure
+                setPrefetchStatus(ImagePrefetchStatus.Failure);
+            }
+        });
+    }, [imageDimensions, layout, shouldPrefetch, src]);
+    return { hasRenderableImage, imageDimensions, isImageFetching };
+}

package/dist/InAppMessaging/hooks/useMessageImage/utils.d.ts

@@ -0,0 +1,4 @@
+import { MessageLayout } from '@aws-amplify/ui-react-core';
+import { ImageDimensions, ImageLoadingState } from './types';
+export declare const prefetchNetworkImage: (url: string) => Promise<ImageLoadingState>;
+export declare const getLayoutImageDimensions: (imageHeight: number, imageWidth: number, layout: MessageLayout) => ImageDimensions;

package/dist/InAppMessaging/hooks/useMessageImage/utils.js

@@ -0,0 +1,56 @@
+import { Image } from 'react-native';
+import { ConsoleLogger as Logger } from '@aws-amplify/core';
+import { BANNER_IMAGE_SCREEN_SIZE, CAROUSEL_IMAGE_SCREEN_SIZE, FULL_SCREEN_IMAGE_SCREEN_SIZE, MODAL_IMAGE_SCREEN_SIZE, } from './constants';
+const logger = new Logger('Notifications.InAppMessaging');
+const inAppMessageImageSizes = {
+    BOTTOM_BANNER: BANNER_IMAGE_SCREEN_SIZE,
+    MIDDLE_BANNER: BANNER_IMAGE_SCREEN_SIZE,
+    TOP_BANNER: BANNER_IMAGE_SCREEN_SIZE,
+    CAROUSEL: CAROUSEL_IMAGE_SCREEN_SIZE,
+    FULL_SCREEN: FULL_SCREEN_IMAGE_SCREEN_SIZE,
+    MODAL: MODAL_IMAGE_SCREEN_SIZE,
+};
+export const prefetchNetworkImage = async (url) => {
+    try {
+        const loaded = await Image.prefetch(url);
+        if (loaded) {
+            return 'loaded';
+        }
+        logger.error(`Image failed to load: ${url}`);
+        return 'failed';
+    }
+    catch (e) {
+        logger.error(`Image.prefetch failed: ${e}`);
+        return 'failed';
+    }
+};
+export const getLayoutImageDimensions = (imageHeight, imageWidth, layout) => {
+    // determine aspect ratio for scaling rendered image
+    const aspectRatio = imageWidth / imageHeight;
+    const isSquare = aspectRatio === 1;
+    const isPortrait = imageHeight > imageWidth;
+    const isLandscape = imageWidth > imageHeight;
+    // an image that has smaller dimensions than the max image dimension (e.g. 10px x 10px)
+    // will be scaled up in size to match the size the message component expects.
+    // While this could lead to pixelated images, it was ultimately a product decision,
+    // ideally the message creator would follow the image guidelines in the pinpoint console
+    const maxImageDimension = inAppMessageImageSizes[layout];
+    let height = undefined;
+    let width = undefined;
+    // set square image dimensions
+    if (isSquare) {
+        height = maxImageDimension;
+        width = maxImageDimension;
+    }
+    // set portrait image dimensions
+    if (isPortrait) {
+        height = maxImageDimension;
+        width = maxImageDimension * aspectRatio;
+    }
+    // set landscape image dimensions
+    if (isLandscape) {
+        height = maxImageDimension / aspectRatio;
+        width = maxImageDimension;
+    }
+    return { height, width };
+};

package/dist/InAppMessaging/hooks/useMessageProps/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useMessageProps } from './useMessageProps';
+export { GetDefaultStyle, MessageComponentStyles, MessageDefaultStyle, MessageOverrideStyle, UseMessageProps, } from './types';

package/dist/InAppMessaging/hooks/useMessageProps/index.js

@@ -0,0 +1 @@
+export { default as useMessageProps } from './useMessageProps';

package/dist/InAppMessaging/hooks/useMessageProps/types.d.ts

@@ -0,0 +1,109 @@
+import { ColorValue, ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { MessageLayout, MessagePayloadStyle } from '@aws-amplify/ui-react-core';
+import { ButtonProps } from '../../../primitives';
+import { ImageDimensions } from '../useMessageImage';
+/**
+ * Resolved message types
+ */
+export interface MessageComponentStyles {
+    body: StyleProp<TextStyle>;
+    buttonsContainer: StyleProp<ViewStyle>;
+    container: StyleProp<ViewStyle>;
+    contentContainer: StyleProp<ViewStyle>;
+    header: StyleProp<TextStyle>;
+    iconButton: {
+        container: StyleProp<ViewStyle>;
+        iconColor?: ColorValue;
+    };
+    imageContainer: StyleProp<ViewStyle>;
+    image: StyleProp<ImageStyle>;
+    primaryButton: MessageButtonStyleProps;
+    secondaryButton: MessageButtonStyleProps;
+    textContainer: StyleProp<ViewStyle>;
+    wrapper: StyleProp<ViewStyle>;
+}
+export declare type GetDefaultStyle<AdditionalStyle = unknown> = (imageDimensions: ImageDimensions, additionalStyle?: AdditionalStyle) => MessageDefaultStyle;
+export interface UseMessageProps {
+    hasButtons: boolean;
+    hasPrimaryButton: boolean;
+    hasRenderableImage: boolean;
+    hasSecondaryButton: boolean;
+    shouldRenderMessage: boolean;
+    styles: MessageComponentStyles | null;
+}
+export interface MessageStyleParams {
+    /**
+     * message specific layout
+     */
+    layout: MessageLayout;
+    /**
+     * style params to derive resolved style from
+     */
+    styleParams: StyleParams;
+}
+export interface StyleParams {
+    /**
+     * default component styles defined at the UI component level
+     */
+    defaultStyle: MessageDefaultStyle;
+    /**
+     * message specific styles in the message payload
+     */
+    payloadStyle: MessagePayloadStyle;
+    /**
+     * custom component style passed as style prop to message UI components
+     */
+    overrideStyle: MessageOverrideStyle;
+}
+export interface MessageButtonStyleParams {
+    /**
+     * message button types
+     */
+    buttonType: 'primaryButton' | 'secondaryButton';
+    /**
+     * style params to derive resolved style from
+     */
+    styleParams: StyleParams;
+}
+/**
+ * Default Message UI component style props
+ */
+export interface MessageDefaultStyle {
+    body: TextStyle;
+    buttonContainer: ViewStyle;
+    buttonsContainer: ViewStyle;
+    buttonText: TextStyle;
+    container: ViewStyle;
+    contentContainer: ViewStyle;
+    header: TextStyle;
+    iconButton: ViewStyle;
+    image: ImageStyle;
+    imageContainer: ViewStyle;
+    textContainer: ViewStyle;
+    wrapper: ViewStyle;
+}
+export interface MessageButtonStyleProps {
+    container?: ButtonProps['style'];
+    text?: ButtonProps['textStyle'];
+}
+export interface MessageContainerAndWrapperStyle {
+    container: [
+        defaultStyle: StyleProp<ViewStyle>,
+        messageStyle: StyleProp<ViewStyle>,
+        overrideStyle: StyleProp<ViewStyle>
+    ];
+    wrapper: StyleProp<ViewStyle>;
+}
+/**
+ * Override style props
+ */
+export interface MessageOverrideStyle {
+    body?: StyleProp<TextStyle>;
+    closeIconButton?: StyleProp<ViewStyle>;
+    closeIconColor?: ColorValue;
+    container?: StyleProp<ViewStyle>;
+    header?: StyleProp<TextStyle>;
+    image?: StyleProp<ImageStyle>;
+    primaryButton?: MessageButtonStyleProps;
+    secondaryButton?: MessageButtonStyleProps;
+}

package/dist/InAppMessaging/hooks/useMessageProps/types.js

@@ -0,0 +1 @@
+export {};

package/dist/InAppMessaging/hooks/useMessageProps/useMessageProps.d.ts

@@ -0,0 +1,12 @@
+import { MessageComponentBaseProps } from '@aws-amplify/ui-react-core';
+import { GetDefaultStyle, MessageOverrideStyle, UseMessageProps } from './types';
+/**
+ * Handle common message UI component prop logic including setting of image dimensions,
+ * render booleans, and style resolving
+ *
+ * @param {MessageComponentBaseProps} props - message UI component props
+ * @param {GetDefaultStyle} getDefaultStyle - returns default UI component style
+ *
+ * @returns {UseMessageProps} message UI component render related booleans and styles
+ */
+export default function useMessageProps(props: MessageComponentBaseProps<MessageOverrideStyle>, getDefaultStyle: GetDefaultStyle): UseMessageProps;

package/dist/InAppMessaging/hooks/useMessageProps/useMessageProps.js

@@ -0,0 +1,49 @@
+import { useEffect, useMemo, useRef } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { useMessageImage } from '../useMessageImage';
+import { getPayloadStyle, getMessageStyles } from './utils';
+/**
+ * Handle common message UI component prop logic including setting of image dimensions,
+ * render booleans, and style resolving
+ *
+ * @param {MessageComponentBaseProps} props - message UI component props
+ * @param {GetDefaultStyle} getDefaultStyle - returns default UI component style
+ *
+ * @returns {UseMessageProps} message UI component render related booleans and styles
+ */
+export default function useMessageProps(props, getDefaultStyle) {
+    const { image, layout, onDisplay, primaryButton, secondaryButton } = props;
+    const hasDisplayed = useRef(false);
+    const { hasRenderableImage, imageDimensions, isImageFetching } = useMessageImage(image, layout);
+    const shouldRenderMessage = !isImageFetching;
+    useEffect(() => {
+        if (!hasDisplayed.current && shouldRenderMessage) {
+            onDisplay?.();
+            hasDisplayed.current = true;
+        }
+    }, [onDisplay, shouldRenderMessage]);
+    const hasPrimaryButton = !isEmpty(primaryButton);
+    const hasSecondaryButton = !isEmpty(secondaryButton);
+    const hasButtons = hasPrimaryButton || hasSecondaryButton;
+    const styles = useMemo(() => {
+        // prevent generating style if message rendering is delayed
+        if (!shouldRenderMessage) {
+            return null;
+        }
+        const defaultStyle = getDefaultStyle(imageDimensions);
+        const payloadStyle = getPayloadStyle(props);
+        const overrideStyle = props.style;
+        return getMessageStyles({
+            styleParams: { defaultStyle, payloadStyle, overrideStyle },
+            layout,
+        });
+    }, [getDefaultStyle, layout, imageDimensions, props, shouldRenderMessage]);
+    return {
+        hasButtons,
+        hasPrimaryButton,
+        hasRenderableImage,
+        hasSecondaryButton,
+        shouldRenderMessage,
+        styles,
+    };
+}

package/dist/InAppMessaging/hooks/useMessageProps/utils.d.ts

@@ -0,0 +1,43 @@
+import { MessageComponentBaseProps, MessageLayout, MessagePayloadStyle } from '@aws-amplify/ui-react-core';
+import { MessageButtonStyleParams, MessageButtonStyleProps, MessageComponentStyles, MessageContainerAndWrapperStyle, MessageStyleParams } from './types';
+/**
+ * Parse and assign appropriate button container and text style from style objects params
+ *
+ * @param {MessageButtonStyleParams} params - message styleParams and button type
+ * @returns {MessageButtonStyleProps} resolved button container and text style arrays
+ */
+export declare const getComponentButtonStyle: ({ styleParams, buttonType, }: MessageButtonStyleParams) => MessageButtonStyleProps;
+/**
+ * Utility for determining if the provided layout requires filling the entire device screen.
+ *
+ * @param {InAppMessageLayout} layout - message layout
+ * @returns {Boolean} boolean indicating whether entire screen should be filled
+ */
+export declare const shouldFillDeviceScreen: (layout: MessageLayout) => boolean;
+/**
+ * Parse and assign appropriate message container and wrapper style from style params
+ *
+ * @param {MessageStyleParams} params - message styleParams, layout, and device orientation
+ * @returns {ContainerAndWrapperStyle} resolved containerStyle and wrapperStyle
+ */
+export declare const getContainerAndWrapperStyle: ({ styleParams, layout, }: MessageStyleParams) => MessageContainerAndWrapperStyle;
+/**
+ * Utility for extracting message payload style
+ *
+ * @param {MessageComponentBaseProps} props - message props
+ * @returns {Object} message payload specific style
+ */
+export declare const getPayloadStyle: ({ body, container, header, primaryButton, secondaryButton, }: MessageComponentBaseProps) => MessagePayloadStyle;
+/**
+ * Receives message styling and returns style property values for use with in-app message
+ * UI components. Handles resolvement style precedence between default, payload, and custom style
+ *
+ * Style param resolve precedence from lowest to highest:
+ *   1. defaultStyle
+ *   2. messageStyle
+ *   3. overrideStyle
+ *
+ * @param {MessageStyleParams} params - message style params, layout, and device orientation
+ * @returns {MessageStyles} message style props
+ */
+export declare function getMessageStyles({ styleParams, layout, }: MessageStyleParams): MessageComponentStyles;

package/dist/InAppMessaging/hooks/useMessageProps/utils.js

@@ -0,0 +1,192 @@
+import { StyleSheet } from 'react-native';
+import { DEFAULT_CAROUSEL_INDICATOR_SIZE } from '../../../primitives';
+import { BUTTON_PRESSED_OPACITY, SPACING_EXTRA_LARGE } from '../../constants';
+// Carousel page indicator size + margins
+const DEFAULT_CAROUSEL_INDICATOR_PADDING = (DEFAULT_CAROUSEL_INDICATOR_SIZE * 5) / 3;
+/**
+ * Parse and assign appropriate button container and text style from style objects params
+ *
+ * @param {MessageButtonStyleParams} params - message styleParams and button type
+ * @returns {MessageButtonStyleProps} resolved button container and text style arrays
+ */
+export const getComponentButtonStyle = ({ styleParams, buttonType, }) => {
+    const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+    // default component styles defined at the UI component level
+    const { buttonContainer: containerDefaultStyle = {}, buttonText: textDefaultStyle = {}, } = defaultStyle ?? {};
+    // message specific styles in the in-app message payload, overrides default component styles
+    const { backgroundColor, borderRadius, color } = payloadStyle?.[buttonType] ?? {};
+    const containePayloadStyle = {
+        ...(backgroundColor ? { backgroundColor } : null),
+        ...(borderRadius ? { borderRadius } : null),
+    };
+    const textMessageStyle = { ...(color ? { color } : null) };
+    // custom component override styles passed as style prop, overrides all previous styles
+    const { container: containerOverrideStyle = {}, text: textOverrideStyle = {}, } = overrideStyle?.[buttonType] ?? {};
+    return {
+        // the style prop of the React Native Pressable component used in the message UI accepts either a ViewStyle array
+        // or a function receiving a boolean reflecting whether the component is currently pressed, returning a ViewStyle
+        // array. Utilizing the latter, we add an opacity value to the UI message button style during press events
+        container: ({ pressed } = { pressed: false }) => {
+            // default button press interaction opacity
+            const pressedOpacity = pressed ? { opacity: BUTTON_PRESSED_OPACITY } : {};
+            // pass `pressed` to containerOverrideStyle and evaluate if the consumer passed a function for custom
+            // button style
+            const containerOverrideFinalStyle = typeof containerOverrideStyle === 'function'
+                ? containerOverrideStyle({ pressed })
+                : containerOverrideStyle;
+            return [
+                pressedOpacity,
+                containerDefaultStyle,
+                containePayloadStyle,
+                containerOverrideFinalStyle,
+            ];
+        },
+        text: [textDefaultStyle, textMessageStyle, textOverrideStyle],
+    };
+};
+/**
+ * Utility for determining if the provided layout requires filling the entire device screen.
+ *
+ * @param {InAppMessageLayout} layout - message layout
+ * @returns {Boolean} boolean indicating whether entire screen should be filled
+ */
+export const shouldFillDeviceScreen = (layout) => {
+    switch (layout) {
+        case 'CAROUSEL':
+        case 'FULL_SCREEN': {
+            return true;
+        }
+        case 'MODAL':
+        case 'TOP_BANNER':
+        case 'MIDDLE_BANNER':
+        case 'BOTTOM_BANNER':
+        default: {
+            return false;
+        }
+    }
+};
+/**
+ * Parse and assign appropriate message container and wrapper style from style params
+ *
+ * @param {MessageStyleParams} params - message styleParams, layout, and device orientation
+ * @returns {ContainerAndWrapperStyle} resolved containerStyle and wrapperStyle
+ */
+export const getContainerAndWrapperStyle = ({ styleParams, layout, }) => {
+    const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+    const containerDefaultStyle = defaultStyle?.container ?? {};
+    const containerPayloadStyle = payloadStyle?.container ?? {};
+    const containerOverrideStyle = overrideStyle?.container ?? {};
+    const wrapperDefaultStyle = defaultStyle?.wrapper ?? {};
+    if (!shouldFillDeviceScreen(layout)) {
+        return {
+            wrapper: wrapperDefaultStyle,
+            container: [
+                containerDefaultStyle,
+                containerPayloadStyle,
+                containerOverrideStyle,
+            ],
+        };
+    }
+    // in non-banner and landscape modal layouts container backgroundColor values should be applied as
+    // wrapper style to ensure that the backgroundColor is applied to the entire screen
+    const { backgroundColor: defaultBackgroundColor, ...restContainerDefaultStyle } = containerDefaultStyle;
+    const { backgroundColor: messageBackgroundColor, ...restContainerPayloadStyle } = containerPayloadStyle;
+    // flatten overrideStyle to access override backgroundColor
+    const { backgroundColor: overrideBackgroundColor, ...restContainerOverrideStyle } = StyleSheet.flatten(containerOverrideStyle);
+    // all non-backgroundColor container override style are applied to the container View
+    const container = [
+        restContainerDefaultStyle,
+        restContainerPayloadStyle,
+        restContainerOverrideStyle,
+    ];
+    // use ternaries to prevent passing backgroundColor object with undefined or null value
+    const wrapper = [
+        wrapperDefaultStyle,
+        defaultBackgroundColor ? { backgroundColor: defaultBackgroundColor } : {},
+        messageBackgroundColor ? { backgroundColor: messageBackgroundColor } : {},
+        overrideBackgroundColor ? { backgroundColor: overrideBackgroundColor } : {},
+    ];
+    return { wrapper, container };
+};
+/**
+ * Utility for extracting message payload style
+ *
+ * @param {MessageComponentBaseProps} props - message props
+ * @returns {Object} message payload specific style
+ */
+export const getPayloadStyle = ({ body, container, header, primaryButton, secondaryButton, }) => ({
+    body: body?.style ?? {},
+    container: container?.style ?? {},
+    header: header?.style ?? {},
+    primaryButton: primaryButton?.style ?? {},
+    secondaryButton: secondaryButton?.style ?? {},
+});
+/**
+ * Receives message styling and returns style property values for use with in-app message
+ * UI components. Handles resolvement style precedence between default, payload, and custom style
+ *
+ * Style param resolve precedence from lowest to highest:
+ *   1. defaultStyle
+ *   2. messageStyle
+ *   3. overrideStyle
+ *
+ * @param {MessageStyleParams} params - message style params, layout, and device orientation
+ * @returns {MessageStyles} message style props
+ */
+export function getMessageStyles({ styleParams, layout, }) {
+    // view style applied to the wrapper and primary container views
+    const { wrapper, container } = getContainerAndWrapperStyle({
+        styleParams,
+        layout,
+    });
+    // primary and secondary button container and text style
+    const primaryButton = getComponentButtonStyle({
+        styleParams,
+        buttonType: 'primaryButton',
+    });
+    const secondaryButton = getComponentButtonStyle({
+        styleParams,
+        buttonType: 'secondaryButton',
+    });
+    const { defaultStyle, payloadStyle, overrideStyle } = styleParams;
+    // image style composed of default and override style
+    const image = [defaultStyle?.image, overrideStyle?.image];
+    const iconButton = {
+        // view style applied to icon button
+        container: [defaultStyle?.iconButton, overrideStyle?.closeIconButton],
+        // close icon color, only specified as an overrideStyle
+        iconColor: overrideStyle?.closeIconColor,
+    };
+    // text style applied to message body and header respectively
+    const body = [defaultStyle?.body, payloadStyle?.body, overrideStyle?.body];
+    const header = [
+        defaultStyle?.header,
+        payloadStyle?.header,
+        overrideStyle?.header,
+    ];
+    const { buttonsContainer, contentContainer, imageContainer, textContainer } = defaultStyle ?? {};
+    const styleProps = {
+        body,
+        buttonsContainer,
+        wrapper,
+        contentContainer,
+        container,
+        header,
+        iconButton,
+        image,
+        imageContainer,
+        primaryButton,
+        secondaryButton,
+        textContainer,
+    };
+    if (layout === 'CAROUSEL') {
+        styleProps.container = [
+            styleProps.container,
+            // Add bottom padding for carousel page indicators
+            {
+                paddingBottom: SPACING_EXTRA_LARGE + DEFAULT_CAROUSEL_INDICATOR_PADDING,
+            },
+        ];
+    }
+    return styleProps;
+}

package/dist/InAppMessaging/index.d.ts

@@ -0,0 +1,2 @@
+export { InAppMessagingProvider, useInAppMessaging, } from '@aws-amplify/ui-react-core';
+export { BannerMessageProps, CarouselMessageProps, FullScreenMessageProps, ModalMessageProps, InAppMessageDisplay, MessageComponents, withInAppMessaging, } from './components';

package/dist/InAppMessaging/index.js

@@ -0,0 +1,2 @@
+export { InAppMessagingProvider, useInAppMessaging, } from '@aws-amplify/ui-react-core';
+export { InAppMessageDisplay, withInAppMessaging, } from './components';