npx react-native@latest init notificationsapp

npx react-native run-ios

import React, { useEffect } from "react";
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
} from "react-native";
import { Colors } from "react-native/Libraries/NewAppScreen";
import { handleBadgeUpdate } from ".";

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === "dark";
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? "light-content" : "dark-content"}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}
      >
        <Text
          style={[
            styles.sectionTitle,
            {
              color: isDarkMode ? "white" : "black",
            },
          ]}
        >
          ios notifications example 😊
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 24,
    fontWeight: "600",
    marginTop: 70,
    textAlign: "center",
  },
});

export default App;

npm install -g @aws-amplify/cli

amplify init

amplify add notifications

npm install aws-amplify @aws-amplify/rtn-push-notification amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill{% raw %}`
```

Let's update our `index.js` file to use the `react-native-get-random-values` and `react-native-url-polyfill` modules.

```
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

```

Next, let's link all the installed modules to our ios directory. Run the following command at the root of your project:

```
npx pod install
```

If you get an error like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poh9spndvwxxpl88bp0e.png)

Remember, Amplify push notifications is geared to only work on iOS apps with a deployment target of at least iOS 13.0. To resolve this issue, open the `ios` folder in your app and update your podfile as shown below:

```
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, "13.0"
prepare_react_native_project!
```

Then in your `ios` folder clear existing pods by running the following command:

```
pod deintegrate
```

Finally, run this:

```
pod install
```

This should fix the issue.

Now open the `<YOUR PROJECT NAME>.xcworkspace` file in XCode and make the following updates.

Update the `Appdeligate.m` file to match the following:

```
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import "AmplifyPushNotification.h"

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 self.moduleName = @"notificationsapp";
 // You can add your custom initial props in the dictionary below.
 // They will be passed down to the ViewController used by React Native.
 self.initialProps = @{};
 return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
 return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
 return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

/// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
///
/// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
/// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
/// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
- (BOOL)concurrentRootEnabled
{
 return true;
}
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
 [AmplifyPushNotification didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult result))completionHandler {
 [AmplifyPushNotification didReceiveRemoteNotification:userInfo withCompletionHandler:completionHandler];
}
@end
```

This file is the root file of any iOS project. It holds the code and configurations our app uses during startup and the interactions between our app and the operating system, irrespective of whether our application is running. 

We updated it with some imports from the Amplify notification model. We added two methods to handle registration for push tokens and handling incoming notifications.


## Building the Frontend

So far, we focused more on the configuration part of things. We already know how push notifications work, so we will make changes to our `index.js` and `App.tsx` files and then map these changes to the steps in our push notifications diagram.

Update your `index.js` file to match the following:

```
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import {Alert, AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {Amplify, Notifications} from 'aws-amplify';
import awsconfig from './src/aws-exports';
Amplify.configure(awsconfig);
Notifications.Push.enable();

AppRegistry.registerComponent(appName, () => App);
```

Next, update your `App.tsx` file to match the following:

```
import { Notifications } from "aws-amplify";
import React, { useEffect } from "react";
import {
  Alert,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
} from "react-native";
import { handleBadgeUpdate } from ".";
function App(): JSX.Element {
  const isDarkMode = useColorScheme() === "dark";
  const backgroundStyle = {
    backgroundColor: isDarkMode ? "white" : "black",
  };

  async function handlePermissions() {
    const status = await Notifications.Push.getPermissionStatus();
    if (status === "SHOULD_REQUEST") {
      await Notifications.Push.requestPermissions({
        sound: true,
        badge: true,
      });
    }
    if (status === "SHOULD_EXPLAIN_THEN_REQUEST") {
      await Notifications.Push.requestPermissions({
        sound: true,
        badge: true,
      });
    }
  }

  const tokenReceivedHandler = (token: string) => {
    console.log({ token });
  };

  useEffect(() => {
    handlePermissions();
    const listener = Notifications.Push.onTokenReceived(tokenReceivedHandler);
    return () => listener && listener.remove();
  }, []);

  return (
    <SafeAreaView style={backgroundStyle}>
      {
        {
          /* rest UI*/
        }
      }
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  // styles
});
export default App;
```

The `index.js` file starts by using the amplify configuration in the `src/aws-exports.js` file to configure the amplify library. Next, we enable push notifications by calling the `enable()` method next in our `App.tsx` file. When this component mounts, we run an effect that requests permission from the user to receive push notifications via the `handlePermission()` method, where it requests the user's permission to receive notifications based on what the existing permission status allows. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0e35sogegf3bfco29ylb.png)

If the user accepts, we also register a listener when our app receives a push notification after the operating system resolves it. We do this by calling the `Notifications.Push.onTokenReceived()` method, which gets fed a callback called `tokenReceivedHandler`, which receives the push token as a parameter and prints it to the console as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f19yxi2gv9lkve6lf7sk.png)

You could configure an API endpoint to send the token to your backend somewhere, but we are fine with just printing it to our console for now. 

Now that we have the push token, the next thing is to use this token to send users notifications. Let's copy the push token and head over to our AWS pinpoint dashboard.

## Sending Test Push Notifications from AWS Pinpoint Dashboard

On your AWS pinpoint dashboard, select your newly created pinpoint project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12iyfd57p39pv4x1bxwn.png)

Let's now send a simple push notification to our device from our pinpoint dashboard. We will do so via the following steps, ensure that the mobile app is closed or in the background before you go through this step so that the notification will pop up and appear in the notification drawer.


1. Select test messaging from the sidebar.
2. In the form, select the push notification channel.
3. Input the target device token; you can specify multiple tokens separated by a comma.
4. Select the push notification service. Since we are developing, we selected APN sandbox, which is the service used to send notifications during testing.
5. Usually, you can send standard or raw notifications when sending push notifications. We will explore raw notifications when we write code using the AWS SDK later.
6. Specify the title and body of the message.
7. Select an action when the user clicks on the notification. We just want to open the users' app.
8. Click send to send the message.


You should now see the message displayed on your device or emulator, as shown below, and clicking on the message automatically opens your App.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs8trrkb9r56n1p2qv0l.png)

While this works, remember that the OS only displays a notification like this when the App is in background mode or closed. So what happens if the App is active or in the foreground? Well, we can also add a listener to handle this situation. Update your `App.tsx` file to match the following:

```
import {Alert,   SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,} from 'react-native'

function App(): JSX.Element {
//...

 useEffect(() => {
    handlePermissions();
    const listener = Notifications.Push.onTokenReceived(myTokenReceivedHandler);
    Notifications.Push.onNotificationReceivedInForeground(async message => {
      if (message.body) {
        Alert.alert(message.body);
      }
    });
    return () => listener && listener.remove();
  }, []);

return 
  ( <SafeAreaView style={backgroundStyle}>
      //...
   </SafeAreaView>)
}
```

Now, when we get a notification while the App is in the foreground, we get an alert on our screen with the body of the message as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rpat6uflpecs5wcgcay.png)

You can also use this function to inform your notification provider that a user has received a notification to record metrics. Amplify push also provides a `Notifications.Push.onNotificationReceivedInBackground` method you can register in your `index.js` file, not **** in an app component. Since it is assumed that the app is not in the foreground when running, you can also use this to log metrics or do other work.

## Sending Push Notifications from Code

Typically, in real-world apps, you will want to send push notifications from your code, not from some custom UI. Also, unlike the example above, in most cases, you want to attach some `json` data to your notifications and customize them to meet your needs, add notification badges, etc.

Let's write a mini Node.js script to do that.

```
mkdir sample
cd sample
npm init --y
touch push.js
npm install aws-sdk

```

Update the `push.js` file to match the following:

```
"use strict";
const AWS = require("aws-sdk");
const region = "us-east-1";
var applicationId = "e5e878550b874d4b8148511c16873af4";

function CreateMessageRequest() {
    var recipientPushToken =  "b6a6cafb435111685b948fad5891b57560868104a47165c4fe21e0119387dfe4"
    var messageRequest = {
        Addresses: {
            [recipientPushToken]: {
                ChannelType: "APNS_SANDBOX",
            },
        },
        MessageConfiguration: {
            APNSMessage: {
                Action:"OPEN_APP",
                RawContent: JSON.stringify({
                    name: "benzo",
                    some_property:"yupeee!"
                    aps: {
                        alert: {
                            title: "test title from notifications app",
                            body: "app says howdy! 👋",
                        },
                        sound: "default",
                        badge: 2,
                    },
                }),
            },
        },
    };
    return messageRequest;
}

function SendMessage() {
    var messageRequest = CreateMessageRequest();
    AWS.config.update({ region: region });
    var pinpoint = new AWS.Pinpoint();
    var params = {
        ApplicationId: applicationId,
        MessageRequest: messageRequest,
    };
    pinpoint.sendMessages(params, function (err, data) {
        if (err) console.log(err);
        else console.dir(data);
    });
}

SendMessage();
```

This snippet just makes a request to the `push` service to send a notification to some user's device. It calls the `sendMessage` custom function, which creates a request by invoking the `createMessageRequest()` function, which returns an object with two properties.
The first property, `Addresses` holds the list of recipients we want to send the message to, and each key in this object is the recipient's push token, and the value is an object for the push notification service.

The second property, `MessageConfiguration` holds information about the message to be sent. We specified an action to open the app when the notification is clicked. Next is the `rawMessage` property. Remember earlier, when we sent a notification from our pinpoint dashboard, we said we could send standard or raw notifications. Typically, in most cases, you will send raw notifications since they allow you to add any JSON data, and that's why we used the `rawMessage` property.

First, we specified some hardcoded random properties we wanted to be part of the message. We trivially chose `name` and `some_property`. Finally, we specify a mandatory `aps` property. We also instruct the system to play the default notification sound when the message arrives and a hardcoded app badge of 2 so that the operating system sets a badge like the one shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3vw8rti9jbuw83qcsoy.png)

The maximum size of a push notification’s payload is 4KB, so try to keep things minimal.

Once this object is created and returned from the `createMessageRequest` function, we update the AWS SDK with our preferred origin, after which we create an AWS pinpoint instance and invoke its `sendmessages` method, which gets fed an object with our message request and our AWS pinpoint app id. The response is logged to the console if the call succeeds or fails.

Open your terminal and run the following:

```
node push.js
```

If the message was sent successfully, a response is printed to the console, like the one below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyhil4g5eo2kgmae4h6w.png)


## Clean Up

To ensure that you don’t have any unused resources in you AWS account, run the following command to delete all the resources that were created in this project if you don’t intend to keep them.

```
amplify delete
```


## Conclusion

Push notifications continue to remain a popular channel to engage users on mobile and web applications. This guide explains how push notifications work and explores an easy way to integrate this feature in an IOS app.