FR (RN Toast component): Can I use InAppMessaging for internal notifications (without pinpoint backend)?

[OperationalFallacy]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React Native

Which UI component?

In-App Messaging

How is your app built?

next.js

What browsers are you seeing the problem on?

Safari

Which region are you seeing the problem in?

n/a

Please describe your bug.

I understand that may not be a bug at all; I'm trying to use InAppMessaging for some notifications on the front-end (xxx created, or yyy failed) - without any analytical backend. And it errors out with unhandled exception "No credentials, applicationId or region"

What's the expected behaviour?

I hoped it could work without a back-end (pinpoint service) so I could utilize it to show user notifications from internal functions. Kinda like "toast" type notifications.

Help us reproduce the bug!

An Amplify app but without pinpoint configured, plus snipped of code from docs https://ui.docs.amplify.aws/react/connected-components/in-app-messaging

Code Snippet

import React, { useCallback, useEffect } from 'react';
import { Notifications } from 'aws-amplify';
import { Button, Flex, Text } from '@aws-amplify/ui-react';
import { useInAppMessaging } from '@aws-amplify/ui-react-notifications';

const { InAppMessaging } = Notifications;

export const CustomBannerMessage = (props) => {
  return (
    <Flex
      alignItems="center"
      borderRadius="xs"
      position="absolute"
      padding="xl"
      backgroundColor="teal.20"
      right="xl"
      testId="custom-banner"
    >
      <Text fontWeight="bold">{props.header.content}</Text>
      <Button onClick={props.onClose}>Close!</Button>
    </Flex>
  );
};

export default function ShowMessage() {
  const { displayMessage } = useInAppMessaging();

//   InAppMessaging.configure({
//     listenForAnalyticsEvents: false,
//     AWSPinpoint: {
//       appId: '', // I guess this won't work?
//       region: 'us-east-1',
//     },
//   });
//   useEffect(() => {
//     // sync remote in-app messages
//     InAppMessaging.syncMessages();
//   }, []);

  const displayCustomBannerMessage = useCallback(
    () =>
      displayMessage({
        content: [{ header: { content: 'Hello World!' } }],
        id: 'Custom message',
        layout: 'TOP_BANNER',
      }),
    [displayMessage],
  );

  // display custom message component on initial render
  useEffect(displayCustomBannerMessage, [displayCustomBannerMessage]);

  return (
    <Button margin="medium" onClick={displayCustomBannerMessage}>
      Display Custom Banner Message
    </Button>
  );
}

Console log output

Unhandled Promise Rejection: Error: No credentials, applicationId or region

Additional information and screenshots

It works but also shows unhandled exception in the console and on the page (may be because npm run dev mode)

[reesscot]

Hi @OperationalFallacy, the InApp Messaging component is not designed to be used without the backend service. I'm marking this as a feature request and we will consider it on our roadmap.

[OperationalFallacy]

Thanks, @reesscot
Indeed, I've added messing component in Amplify backends and error is gone.

Does the package allow message removal programmatically from event notifications? Or there is always interaction from use expected on messages?

Also examples here are using wrong package?
https://docs.amplify.aws/react-native/build-a-backend/more-features/in-app-messaging/sync-messages/

[dryhurst]

so like.. where's the toast that was requested YEARS ago?

[OperationalFallacy]

I've used one of the known package, worked very well

import toast from 'react-hot-toast';

...
export default function ShowCustomBannerMessage(response: TradeRequest) {
  toast.custom(<CustomBannerMessage response={response} />, {
    duration: 1500,
  });
}