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

package/dist/__mocks__/react-native-safe-area-context.d.ts

@@ -0,0 +1,3 @@
+declare const SafeAreaProvider = "SafeAreaProvider";
+declare const SafeAreaView = "SafeAreaView";
+export { SafeAreaProvider, SafeAreaView };

package/dist/__mocks__/react-native-safe-area-context.js

@@ -0,0 +1,4 @@
+jest.mock('react-native-safe-area-context');
+const SafeAreaProvider = 'SafeAreaProvider';
+const SafeAreaView = 'SafeAreaView';
+export { SafeAreaProvider, SafeAreaView };

package/dist/assets/index.d.ts

@@ -0,0 +1,5 @@
+import { ImageSourcePropType } from 'react-native';
+declare const icons: {
+    close: ImageSourcePropType;
+};
+export default icons;

package/dist/assets/index.js

@@ -0,0 +1,4 @@
+const icons = {
+    close: require('./close.png'),
+};
+export default icons;

package/dist/assets/index.ts

@@ -0,0 +1,7 @@
+import { ImageSourcePropType } from 'react-native';
+
+const icons = {
+  close: require('./close.png') as ImageSourcePropType,
+};
+
+export default icons;

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { DeviceOrientation, useDeviceOrientation, } from './useDeviceOrientation';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { useDeviceOrientation, } from './useDeviceOrientation';

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

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

package/dist/hooks/useDeviceOrientation/index.js

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

package/dist/hooks/useDeviceOrientation/useDeviceOrientation.d.ts

@@ -0,0 +1,6 @@
+export declare type DeviceOrientation = 'portrait' | 'landscape';
+export default function useDeviceOrientation(): {
+    deviceOrientation: DeviceOrientation;
+    isLandscapeMode: boolean;
+    isPortraitMode: boolean;
+};

package/dist/hooks/useDeviceOrientation/useDeviceOrientation.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { Dimensions } from 'react-native';
+const getDeviceOrientation = () => {
+    const { height, width } = Dimensions.get('screen');
+    return height >= width ? 'portrait' : 'landscape';
+};
+export default function useDeviceOrientation() {
+    const [deviceOrientation, setDeviceOrientation] = useState(getDeviceOrientation);
+    const isLandscapeMode = deviceOrientation === 'landscape';
+    const isPortraitMode = deviceOrientation === 'portrait';
+    useEffect(() => {
+        const handler = () => {
+            setDeviceOrientation(getDeviceOrientation);
+        };
+        // The below cast and conditional unsubscribe handling is due to subscription removal variation
+        // between `Dimensions.addEventListener` in React Native prior to and after v0.65.
+        //
+        // Beginning with v0.65, `Dimensions.addEventListener` returns an `EventSubscription` object,
+        // which includes a `remove` method for removing the subscription. Prior versions return
+        // `undefined`, and subscription removal is handled by `Dimensions.removeEventListener`,
+        // which is deprecated in v0.65
+        const subscription = Dimensions.addEventListener('change', handler);
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription.remove();
+            }
+            else {
+                Dimensions.removeEventListener('change', handler);
+            }
+        };
+    }, []);
+    return { deviceOrientation, isLandscapeMode, isPortraitMode };
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './InAppMessaging';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './InAppMessaging';

package/dist/primitives/Button/Button.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonProps } from './types';
+export default function Button({ children, textStyle, ...pressableProps }: ButtonProps): JSX.Element;

package/dist/primitives/Button/Button.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import { styles } from './styles';
+export default function Button({ children, textStyle, ...pressableProps }) {
+    return (<Pressable {...pressableProps}>
+      {typeof children === 'string' ? (<Text style={[styles.text, textStyle]}>{children}</Text>) : (children)}
+    </Pressable>);
+}

package/dist/primitives/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { ButtonProps, ButtonStyles } from './types';

package/dist/primitives/Button/index.js

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

package/dist/primitives/Button/styles.d.ts

@@ -0,0 +1,2 @@
+import { ButtonStyles } from './types';
+export declare const styles: ButtonStyles;

package/dist/primitives/Button/styles.js

@@ -0,0 +1,4 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    text: { alignSelf: 'center' },
+});

package/dist/primitives/Button/types.d.ts

@@ -0,0 +1,7 @@
+import { PressableProps, StyleProp, TextStyle } from 'react-native';
+export interface ButtonProps extends PressableProps {
+    textStyle?: StyleProp<TextStyle>;
+}
+export interface ButtonStyles {
+    text: TextStyle;
+}

package/dist/primitives/Button/types.js

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

package/dist/primitives/Carousel/Carousel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CarouselProps } from './types';
+export default function Carousel<T>(props: CarouselProps<T>): JSX.Element | null;

package/dist/primitives/Carousel/Carousel.js

@@ -0,0 +1,58 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Dimensions, FlatList, View, } from 'react-native';
+import CarouselPageIndicator from './CarouselPageIndicator';
+import { VIEWABILITY_CONFIG } from './constants';
+import { styles } from './styles';
+export default function Carousel(props) {
+    const { data, indicatorActiveStyle, indicatorInactiveStyle, renderItem, style, } = props;
+    const flatListRef = useRef(null);
+    const indexRef = useRef(0);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const windowWidthRef = useRef(Dimensions.get('window').width);
+    const [width, setWidth] = useState(windowWidthRef.current);
+    const onViewableItemsChanged = useRef(({ viewableItems }) => {
+        if (viewableItems.length !== 1) {
+            return;
+        }
+        const [item] = viewableItems;
+        indexRef.current = item.index;
+        setCurrentIndex(indexRef.current);
+    });
+    const updateOrientation = useCallback((updatedWidth) => {
+        if (windowWidthRef.current !== updatedWidth) {
+            windowWidthRef.current = updatedWidth;
+            setWidth(updatedWidth);
+        }
+    }, []);
+    useEffect(() => {
+        // on width change (due to orientation change), jump to the new index offset
+        flatListRef?.current?.scrollToOffset({
+            offset: width * indexRef.current,
+            animated: false,
+        });
+    }, [width]);
+    useEffect(() => {
+        const orientationHandler = ({ window }) => {
+            updateOrientation(window.width);
+        };
+        const subscription = Dimensions.addEventListener('change', orientationHandler);
+        // Clean up listener. Dimensions.removeEventListener is deprecated as of React Native 0.65 but it is technically
+        // available so try to remove via a `EmitterSubscription` first before falling back to `removeEventListener`
+        return () => {
+            if (typeof subscription?.remove === 'function') {
+                subscription?.remove();
+            }
+            else {
+                Dimensions.removeEventListener('change', orientationHandler);
+            }
+        };
+    }, [updateOrientation]);
+    const carouselRenderItem = (renderInfo) => (<View style={{ width }}>{renderItem(renderInfo)}</View>);
+    if (!data?.length) {
+        return null;
+    }
+    return (<>
+      <FlatList bounces={false} data={data} decelerationRate="fast" disableIntervalMomentum horizontal onViewableItemsChanged={onViewableItemsChanged.current} ref={flatListRef} renderItem={carouselRenderItem} renderToHardwareTextureAndroid showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} snapToAlignment="start" snapToInterval={width} style={style} viewabilityConfig={VIEWABILITY_CONFIG}/>
+      <CarouselPageIndicator activeStyle={indicatorActiveStyle} currentIndex={currentIndex} inactiveStyle={indicatorInactiveStyle} numberOfItems={data.length} style={styles.indicator}/>
+    </>);
+}

package/dist/primitives/Carousel/CarouselPageIndicator.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CarouselPageIndicatorProps } from './types';
+export default function CarouselPageIndicator({ activeStyle, currentIndex, inactiveStyle, numberOfItems, style, }: CarouselPageIndicatorProps): JSX.Element;

package/dist/primitives/Carousel/CarouselPageIndicator.js

@@ -0,0 +1,10 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE, DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE, } from './constants';
+export default function CarouselPageIndicator({ activeStyle, currentIndex, inactiveStyle, numberOfItems, style, }) {
+    const items = useMemo(() => new Array(numberOfItems ?? 0)
+        .fill(null)
+        .map((_, index) => (currentIndex ?? 0) === index ? (<View style={[DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE, activeStyle]} key={`indicator-item-${index}`}/>) : (<View style={[DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE, inactiveStyle]} key={`indicator-item-${index}`}/>)), [activeStyle, currentIndex, inactiveStyle, numberOfItems]);
+    return <SafeAreaView style={style}>{items}</SafeAreaView>;
+}

package/dist/primitives/Carousel/constants.d.ts

@@ -0,0 +1,9 @@
+import { ViewStyle } from 'react-native';
+export declare const DEFAULT_CAROUSEL_COLOR_ACTIVE = "#a1a1a1";
+export declare const DEFAULT_CAROUSEL_COLOR_INACTIVE = "#d8d8d8";
+export declare const DEFAULT_CAROUSEL_INDICATOR_SIZE = 12;
+export declare const DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE: ViewStyle;
+export declare const DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE: ViewStyle;
+export declare const VIEWABILITY_CONFIG: {
+    itemVisiblePercentThreshold: number;
+};

package/dist/primitives/Carousel/constants.js

@@ -0,0 +1,18 @@
+export const DEFAULT_CAROUSEL_COLOR_ACTIVE = '#a1a1a1';
+export const DEFAULT_CAROUSEL_COLOR_INACTIVE = '#d8d8d8';
+export const DEFAULT_CAROUSEL_INDICATOR_SIZE = 12;
+const DEFAULT_CAROUSEL_INDICATOR_STYLE = {
+    borderRadius: DEFAULT_CAROUSEL_INDICATOR_SIZE / 2,
+    height: DEFAULT_CAROUSEL_INDICATOR_SIZE,
+    margin: DEFAULT_CAROUSEL_INDICATOR_SIZE / 3,
+    width: DEFAULT_CAROUSEL_INDICATOR_SIZE,
+};
+export const DEFAULT_CAROUSEL_INDICATOR_ACTIVE_STYLE = {
+    ...DEFAULT_CAROUSEL_INDICATOR_STYLE,
+    backgroundColor: DEFAULT_CAROUSEL_COLOR_ACTIVE,
+};
+export const DEFAULT_CAROUSEL_INDICATOR_INACTIVE_STYLE = {
+    ...DEFAULT_CAROUSEL_INDICATOR_STYLE,
+    backgroundColor: DEFAULT_CAROUSEL_COLOR_INACTIVE,
+};
+export const VIEWABILITY_CONFIG = { itemVisiblePercentThreshold: 60 };

package/dist/primitives/Carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Carousel } from './Carousel';
+export { DEFAULT_CAROUSEL_INDICATOR_SIZE } from './constants';
+export { CarouselProps } from './types';

package/dist/primitives/Carousel/index.js

@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel';
+export { DEFAULT_CAROUSEL_INDICATOR_SIZE } from './constants';

package/dist/primitives/Carousel/styles.d.ts

@@ -0,0 +1,2 @@
+import { CarouselStyles } from './types';
+export declare const styles: CarouselStyles;

package/dist/primitives/Carousel/styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    indicator: {
+        bottom: 0,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        left: 0,
+        position: 'absolute',
+        right: 0,
+    },
+});

package/dist/primitives/Carousel/types.d.ts

@@ -0,0 +1,19 @@
+import { ListRenderItem, StyleProp, ViewStyle } from 'react-native';
+export interface CarouselProps<T> {
+    data: ReadonlyArray<T>;
+    indicatorActiveStyle?: StyleProp<ViewStyle>;
+    indicatorInactiveStyle?: StyleProp<ViewStyle>;
+    onClose?: () => void;
+    renderItem: ListRenderItem<T>;
+    style?: StyleProp<ViewStyle>;
+}
+export interface CarouselPageIndicatorProps {
+    activeStyle?: StyleProp<ViewStyle>;
+    currentIndex: number | null;
+    inactiveStyle?: StyleProp<ViewStyle>;
+    numberOfItems: number;
+    style?: StyleProp<ViewStyle>;
+}
+export interface CarouselStyles {
+    indicator: ViewStyle;
+}

package/dist/primitives/Carousel/types.js

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

package/dist/primitives/IconButton/IconButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconButtonProps } from './types';
+export default function IconButton({ color, source, size, ...pressableProps }: IconButtonProps): JSX.Element;

package/dist/primitives/IconButton/IconButton.js

@@ -0,0 +1,9 @@
+import React, { useMemo } from 'react';
+import { Image, Pressable } from 'react-native';
+import { getStyles } from './styles';
+export default function IconButton({ color, source, size = 16, ...pressableProps }) {
+    const { icon } = useMemo(() => getStyles(color, size), [color, size]);
+    return (<Pressable {...pressableProps}>
+      <Image source={source} style={icon}/>
+    </Pressable>);
+}

package/dist/primitives/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IconButton } from './IconButton';
+export { IconButtonProps, IconButtonStyles } from './types';

package/dist/primitives/IconButton/index.js

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

package/dist/primitives/IconButton/styles.d.ts

@@ -0,0 +1,2 @@
+import { IconButtonProps, IconButtonStyles } from '.';
+export declare const getStyles: (color: IconButtonProps['color'], size: IconButtonProps['size']) => IconButtonStyles;

package/dist/primitives/IconButton/styles.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+export const getStyles = (color, size) => StyleSheet.create({
+    icon: {
+        height: size,
+        resizeMode: 'contain',
+        tintColor: color,
+        width: size,
+    },
+});

package/dist/primitives/IconButton/types.d.ts

@@ -0,0 +1,18 @@
+import { ColorValue, ImageSourcePropType, ImageStyle, PressableProps } from 'react-native';
+export interface IconButtonStyles {
+    icon: ImageStyle;
+}
+export interface IconButtonProps extends PressableProps {
+    /**
+     * color to be applied to the icon
+     */
+    color?: ColorValue;
+    /**
+     * icon source, only supports images at this time
+     */
+    source: ImageSourcePropType;
+    /**
+     * icon size
+     */
+    size?: number;
+}

package/dist/primitives/IconButton/types.js

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

package/dist/primitives/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './Carousel';
+export * from './IconButton';

package/dist/primitives/index.js

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './Carousel';
+export * from './IconButton';

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getLineHeight: (fontSize: number) => number;

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+// as a safeguard against known React Native lineHeight issues, e.g. https://github.com/facebook/react-native/issues/29507
+// use a value of 1.5 as the default line height multiplier
+const LINE_HEIGHT_MULTIPLIER = 1.5;
+export const getLineHeight = (fontSize) => fontSize * LINE_HEIGHT_MULTIPLIER;

package/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  preset: 'react-native',
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
+    '!<rootDir>/src/**/*{c,C}onstants.ts',
+  ],
+  moduleNameMapper: {
+    '^react$': '<rootDir>/node_modules/react',
+    '^react-native$': '<rootDir>/node_modules/react-native',
+  },
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 90,
+      lines: 90,
+      statements: 90,
+    },
+  },
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@aws-amplify/ui-react-native",
+  "version": "0.0.0-in-app-messaging-20220826014803",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "yarn dist && cp -a src/assets dist",
+    "clean": "rimraf dist",
+    "dev": "yarn dist --watch",
+    "dist": "tsc --project tsconfig.dist.json",
+    "lint": "tsc --noEmit && eslint src",
+    "prebuild": "rimraf dist",
+    "test": "jest --coverage",
+    "test:watch": "yarn test --watch"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/react": "^17.0.2",
+    "@types/react-native": "^0.67.6",
+    "@types/react-test-renderer": "^17.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "babel-jest": "^28.0.3",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "metro-react-native-babel-preset": "^0.70.2",
+    "react": "^17.0.2",
+    "react-native": "^0.68.1",
+    "react-native-safe-area-context": "^4.2.5",
+    "react-test-renderer": "^17.0.2",
+    "rimraf": "^3.0.2"
+  },
+  "dependencies": {
+    "@aws-amplify/ui": "0.0.0-in-app-messaging-20220826014803",
+    "@aws-amplify/ui-react-core": "0.0.0-in-app-messaging-20220826014803"
+  },
+  "peerDependencies": {
+    "react": ">= 16.8.0",
+    "react-native": ">= 0.63.4",
+    "react-native-safe-area-context": ">= 4.2.5"
+  },
+  "resolutions": {
+    "@types/react": "^17.0.2"
+  }
+}

package/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { ImageDimensions, useMessageProps } from '../../hooks';
+import { MessageWrapper } from '../MessageWrapper';
+import { MessageLayout } from '../MessageLayout';
+
+import { getStyles, positionStyle } from './styles';
+import { BannerMessageProps } from './types';
+
+export default function BannerMessage({
+  position = 'top',
+  ...props
+}: BannerMessageProps): JSX.Element | null {
+  const messageProps = useMessageProps(
+    props,
+    (imageDimensions: ImageDimensions) =>
+      getStyles(imageDimensions, { position: { ...positionStyle[position] } })
+  );
+  const { shouldRenderMessage, styles } = messageProps;
+
+  if (!shouldRenderMessage) {
+    return null;
+  }
+
+  const { wrapper, ...messageStyles } = styles!;
+
+  return (
+    <MessageWrapper style={wrapper}>
+      <MessageLayout
+        {...props}
+        {...messageProps}
+        orientation="landscape"
+        styles={messageStyles}
+      />
+    </MessageWrapper>
+  );
+}

package/src/InAppMessaging/components/BannerMessage/__tests__/BannerMessage.spec.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { IN_APP_MESSAGING_TEST_ID } from '../../../constants';
+import { useMessageImage } from '../../../hooks/useMessageImage';
+
+import BannerMessage from '../BannerMessage';
+
+jest.mock('../../../hooks/useMessageImage');
+jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
+
+const mockUseMessageImage = useMessageImage as jest.Mock;
+const onAction = jest.fn();
+const onClose = jest.fn();
+
+const baseProps = { layout: 'TOP_BANNER' as const, onClose };
+
+describe('BannerMessage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders a message as expected without an image', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+
+    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders a message as expected with an image', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: true,
+      imageDimensions: { height: 100, width: 100 },
+      isImageFetching: false,
+    });
+
+    const src = 'asset.png';
+    const props = { ...baseProps, image: { src } };
+
+    const renderer = TestRenderer.create(<BannerMessage {...props} />);
+
+    const image = renderer.root.findByProps({
+      testID: IN_APP_MESSAGING_TEST_ID.IMAGE,
+    });
+
+    expect(image.props).toEqual(
+      expect.objectContaining({ source: { uri: src } })
+    );
+    expect(renderer.toJSON()).toMatchSnapshot();
+  });
+
+  it('returns null while an image is fetching', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: true,
+    });
+
+    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+
+    expect(renderer.toJSON()).toBeNull();
+  });
+
+  it.each([
+    [
+      'header',
+      IN_APP_MESSAGING_TEST_ID.HEADER,
+      {
+        testProps: { content: 'header content' },
+        expectedProps: { children: 'header content' },
+      },
+    ],
+    [
+      'body',
+      IN_APP_MESSAGING_TEST_ID.BODY,
+      {
+        testProps: { content: 'body content' },
+        expectedProps: { children: 'body content' },
+      },
+    ],
+    [
+      'primaryButton',
+      IN_APP_MESSAGING_TEST_ID.PRIMARY_BUTTON,
+      {
+        testProps: { onAction, title: 'primary button' },
+        expectedProps: { children: 'primary button', onPress: onAction },
+      },
+    ],
+    [
+      'secondaryButton',
+      IN_APP_MESSAGING_TEST_ID.SECONDARY_BUTTON,
+      {
+        testProps: { onAction, title: 'secondary button' },
+        expectedProps: { children: 'secondary button', onPress: onAction },
+      },
+    ],
+  ])(
+    'correctly handles a %s prop',
+    (key, testID, { testProps, expectedProps }) => {
+      mockUseMessageImage.mockReturnValueOnce({
+        hasRenderableImage: false,
+        imageDimensions: { height: undefined, width: undefined },
+        isImageFetching: false,
+      });
+
+      const props = { ...baseProps, [key]: testProps };
+
+      const renderer = TestRenderer.create(<BannerMessage {...props} />);
+      const testElement = renderer.root.findByProps({ testID });
+
+      expect(testElement.props).toEqual(expect.objectContaining(expectedProps));
+    }
+  );
+
+  it('calls onClose when the close button is pressed', () => {
+    mockUseMessageImage.mockReturnValueOnce({
+      hasRenderableImage: false,
+      imageDimensions: { height: undefined, width: undefined },
+      isImageFetching: false,
+    });
+
+    const renderer = TestRenderer.create(<BannerMessage {...baseProps} />);
+    const closeButton = renderer.root.findByProps({
+      testID: IN_APP_MESSAGING_TEST_ID.CLOSE_BUTTON,
+    });
+
+    TestRenderer.act(() => {
+      (closeButton.props as { onPress: () => void }).onPress();
+    });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});