How to provide live alerts to multiple phones with React Native

Question

I coded an app that will create a modal that gives the option to alert reception that a customer is coming. However, when running the app on two phones, all changes are local. Why is that? I want to be able to "Alert Reception" and have reception receive a notification of the customer and be able to click More Info and see all the details about it.

We scan a customer QR code, and allow the security guard to validate and then alert reception and send the info to them.

Any ideas? We are using AWS and React Native. I would like to alert everyone and then be able to have the reception see the customer is coming and get the info.

import { StyleSheet, Text, View, Image, Button, Modal, Platform, ScrollView } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import Constants from 'expo-constants';
import * as Notifications from 'expo-notifications';
import { Audio, Video } from 'expo-av';

//For push notifications
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});


export default function App() {
  //QR Scanner
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [newData, setNewData] = useState('');
  //Modal Views
  const [homeScreenVisible, setHomeScreenVisible] = useState(true);
  const [customerModalVisible, setCustomerModalVisible] = useState(false);
  const [customerModalDetailedVisible, setCustomerModalDetailedVisible] = useState(false);
  const [qrScannerVisible, setQRScannerVisible] = useState(false);
  //Push notifications
  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();



  //useEffects are rendered upon app start. We use the [] to make sure they are only rendered once. If you want them to update, add in the array / state var and upon update the useEffect will run again.

  //For Bar Code Scanner
  useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);


  //For Push Notifications
  useEffect(() => {
    registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
    // This listener is fired whenever a notification is received while the app is foregrounded
    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });
    // This listener is fired whenever a user taps on or interacts with a notification (works when app is foregrounded, backgrounded, or killed)
    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
      console.log(response);
      console.log('Someone clicked on the push notification')
    });
    return () => {
      Notifications.removeNotificationSubscription(notificationListener.current);
      Notifications.removeNotificationSubscription(responseListener.current);
    };
  }, []);


  //Bar Code scanner function, reads the data (which is a aws s3 endpoint served through cloudfront), then I run a fetch on the url (aka data), and then turn the string response into a json. Then I set newData equal to the JSON object via React Hooks. Then I turn the QR scanner visible off, and then open the customer modal.
  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    console.log(data) // Should be the url JSON endpoint
    fetch(data)
    .then(response => response.json())
    .then(response => {
      console.log(response)
      setNewData(response)
    });
    setQRScannerVisible(false);
    setCustomerModalVisible(true);
    // const playbackObject = new Audio.Sound();
  };


  if (hasPermission === null) {
    return Requesting for camera permission;
  }
  if (hasPermission === false) {
    return No access to camera;
  }

  // We are returning a View with multiple JS {} fragments that turn off and on depending on state. There is an issue with setScanned(false) that sometimes the scanner is not set to false and it will not rescan. If you run into that problem, try adding setScanned(false).
  
  return (
    
    
    {homeScreenVisible && 
        <>

user_1435543 · Answer

By live alerts, I assume you mean text notifications. One way to push out text notifications using AWS is using the Simple Notification Service. Because you are using a React app, use the AWS SDK for JavaScript. Using the SDK, you can create app logic to fire off text notifications in response to certain events.

You can find examples here:

https://github.com/awsdocs/aws-doc-sdk-examples/tree/master/javascriptv3/example_code/sns/src

You can find examples here:

https://github.com/awsdocs/aws-doc-sdk-examples/tree/master/javascriptv3/example_code/sns/src

How to provide live alerts to multiple phones with React Native

1 Answers