feat(react-native): Add push notification docs

src/directory/directory.mjs

@@ -648,11 +648,6 @@ export const directory = {
       'push-notifications': {
         title: 'Push Notifications',
         items: [
-          {
-            title: 'Overview',
-            route: '/lib/push-notifications/overview',
-            filters: ['react-native']
-          },
           {
             title: 'Getting started',
             route: '/lib/push-notifications/getting-started',
@@ -668,14 +663,29 @@ export const directory = {
             route: '/lib/push-notifications/record-notifications',
             filters: ['ios']
           },
+          {
+            title: 'Request permissions',
+            route: '/lib/push-notifications/request-permissions',
+            filters: ['react-native']
+          },
+          {
+            title: 'Interact with notifications',
+            route: '/lib/push-notifications/interact-with-notifications',
+            filters: ['react-native']
+          },
           {
             title: 'Identify user',
             route: '/lib/push-notifications/identify-user',
-            filters: ['android', 'ios']
+            filters: ['android', 'ios', 'react-native']
+          },
+          {
+            title: 'App badge count',
+            route: '/lib/push-notifications/app-badge-count',
+            filters: ['react-native']
           },
           {
-            title: 'Working with API',
-            route: '/lib/push-notifications/working-with-api',
+            title: 'Enable rich notifications',
+            route: '/lib/push-notifications/enable-rich-notifications',
             filters: ['react-native']
           },
           {
@@ -691,7 +701,7 @@ export const directory = {
           {
             title: 'Setting up push notification services',
             route: '/lib/push-notifications/setup-push-service',
-            filters: ['android', 'ios']
+            filters: ['android', 'ios', 'react-native']
           }
         ]
       },

src/fragments/lib/push-notifications/android/getting_started/10_pre_req.mdx

@@ -1,8 +1,9 @@
-* An Android application targeting at least Android SDK API level 24 with Amplify libraries integrated
-    * For a full example of creating Android project, please follow the [project setup walkthrough](/lib/project-setup/create-application)
+- An Android application targeting at least Android SDK API level 24 with Amplify libraries integrated
+  - For a full example of creating Android project, please follow the [project setup walkthrough](/lib/project-setup/create-application)
 
+import fcmPreReq from '/src/fragments/lib/push-notifications/android/getting_started/fcm-pre-req.mdx';
 
-Push Notifications are delivered via Firebase Cloud Messaging (FCM), In order to use FCM, you need to register your app on the Firebase console. See [Setting up push notification services](/lib/push-notifications/setup-push-service/) for more information.
+<Fragments fragments={{ android: fcmPreReq }} />
 
 ## Request Permissions
 

src/fragments/lib/push-notifications/android/getting_started/20_cli_resources.mdx

@@ -1,40 +1,5 @@
-> Prerequisite: [Install and configure the Amplify CLI](/cli/start/install)
+import fcmCliResources from '/src/fragments/lib/push-notifications/android/getting_started/fcm-cli-resources.mdx';
 
-<Callout warning>
-
-Push Notifications requires version **10.8.0+** of the Amplify CLI. You can check your current version by typing `amplify -version` and upgrade to the latest version by typing `amplify upgrade`.
-
-</Callout>
-
-To start provisioning push notifications resources in the backend, go to your project directory and execute the command:
-
-```sh
-amplify add notifications
-```
-
-Choose *FCM* when promoted:
-
-```console
-? Choose the push notification channel to enable.
-  APNS |  Apple Push Notifications   
-❯ FCM  | » Firebase Push Notifications 
-  In-App Messaging
-  Email
-  SMS
-
-? Provide your pinpoint resource name: 
-    `yourPinpointResourceName`
-
-? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (we recommend you allow this when getting started) (Y/n) 
-    'Y'
-
-```
-
-The CLI will prompt for your *ApiKey*, paste the **Token** you copied while [setting up push notification services](/lib/push-notifications/setup-push-service/).
-Once all your configuration is complete run the following:
-
-```sh
-amplify push
-```
+<Fragments fragments={{ android: fcmCliResources }} />
 
 Upon completion, `amplifyconfiguration.json` will be updated to reference the newly provisioned backend push notifications resources. Note that this file should already be generated for you by the Amplify CLI as a part of your project if you followed the [project setup walkthrough](/lib/project-setup/prereq).

src/fragments/lib/push-notifications/android/getting_started/fcm-cli-resources.mdx

@@ -0,0 +1,23 @@
+Choose _FCM_ when promoted:
+
+```console
+? Choose the push notification channel to enable.
+  APNS |  Apple Push Notifications
+❯ FCM  | » Firebase Push Notifications
+  In-App Messaging
+  Email
+  SMS
+
+? Provide your pinpoint resource name:
+    `yourPinpointResourceName`
+
+? Apps need authorization to send analytics events. Do you want to allow guests and unauthenticated users to send analytics events? (we recommend you allow this when getting started) (Y/n)
+    'Y'
+
+```
+
+The CLI will prompt for your _ApiKey_, paste the **Token** you copied while [setting up push notification services](/lib/push-notifications/setup-push-service/). Once all your configuration is complete run the following:
+
+```sh
+amplify push
+```

src/fragments/lib/push-notifications/android/getting_started/fcm-pre-req.mdx

@@ -0,0 +1 @@
+Push Notifications are delivered via Firebase Cloud Messaging (FCM), In order to use FCM, you need to register your app on the Firebase console. See [Setting up push notification services](/lib/push-notifications/setup-push-service/) for more information.

src/fragments/lib/push-notifications/android/identify_user/10_get_auth_user.mdx

@@ -1,3 +1,5 @@
+If the user is signed in through [Amplify.Auth.signIn](/lib/auth/signin), then you can retrieve the current user's ID as shown below:
+
 <BlockSwitcher>
 <Block name="Java">
 

src/fragments/lib/push-notifications/android/identify_user/30_send_to_pinpoint_profile.mdx

@@ -1,3 +1,5 @@
+Alternatively, you can provide additional information about the user by passing a user profile:
+
 <BlockSwitcher>
 <Block name="Java">
 

src/fragments/lib/push-notifications/android/setup_push_service/handling-actions.mdx

@@ -0,0 +1,3 @@
+## Handling FCM Push Notifications
+
+Amazon Pinpoint campaigns can take one of three actions when a user taps a notification: Open your app, Go to a URL, or Open a deep link. Follow these [instructions](https://developer.android.com/training/app-links/deep-linking) to enable your app to open deep links.

src/fragments/lib/push-notifications/android/setup_push_service/setup-fcm.mdx

@@ -1,23 +1,20 @@
 ## Setting Up FCM for Push Notifications
 
 Push notifications for Android apps are sent using Firebase Cloud Messaging (FCM). Before you can send push notifications to Android devices, you must perform the following steps:
+
 - [Create a Firebase project](https://firebase.google.com/docs/cloud-messaging/android/first-message#create_a_firebase_project).
 - [Register your app with Firebase](https://firebase.google.com/docs/cloud-messaging/android/first-message#register_your_app_with_firebase)
 - [Add a Firebase configuration file](https://firebase.google.com/docs/cloud-messaging/android/first-message#add_a_firebase_configuration_file)
 
 Next, you will need to access your **ServerKey** (Referred to as **ApiKey** in the CLI setup):
+
 - Open the [Firebase console](https://console.firebase.google.com/).
 - Choose your Firebase project.
 - Select the gear icon located in the top left hand corner of your screen, then select **Project settings**.
 - Select the **Cloud Messaging** tab.
-- Select the three vertical dots next to **Cloud Messaging API (Legacy)**, then select **Manage API in Google Cloud Console**.
-![Firebase Console](/images/push-notifications/firebaseconsole.png)
+- Select the three vertical dots next to **Cloud Messaging API (Legacy)**, then select **Manage API in Google Cloud Console**. ![Firebase Console](/images/push-notifications/firebaseconsole.png)
 - In the new tab, select the **Enable** button.
 - Return to the previous tab and refresh the page.
 - Copy the **Token** next to **Server key**
 
 Return to [Provisioning resources through CLI](/lib/push-notifications/getting-started/#provisioning-resources-through-cli) with the copied **Token**
-
-## Handling FCM Push Notifications
-
-Amazon Pinpoint campaigns can take one of three actions when a user taps a notification: Open your app, Go to a URL, or Open a deep link. Follow these [instructions](https://developer.android.com/training/app-links/deep-linking) to enable your app to open deep links.

src/fragments/lib/push-notifications/common/getting-started.mdx

@@ -2,21 +2,25 @@ The Push Notifications category allows you to integrate push notifications in yo
 
 ## Prerequisites
 
-import ios0 from "/src/fragments/lib/push-notifications/ios/getting_started/10_pre_req.mdx";
+import androidPreReq from '/src/fragments/lib/push-notifications/android/getting_started/10_pre_req.mdx';
+import iosPreReq from '/src/fragments/lib/push-notifications/ios/getting_started/10_pre_req.mdx';
+import reactNativePreReq from '/src/fragments/lib/push-notifications/react-native/getting_started/10_pre_req.mdx';
 
-<Fragments fragments={{ios: ios0}} />
+<Fragments
+  fragments={{
+    android: androidPreReq,
+    ios: iosPreReq,
+    'react-native': reactNativePreReq
+  }}
+/>
 
-import android1 from "/src/fragments/lib/push-notifications/android/getting_started/10_pre_req.mdx";
+import iosSetEntitlements from '/src/fragments/lib/push-notifications/ios/getting_started/20_set_entitlements.mdx';
 
-<Fragments fragments={{android: android1}} />
+<Fragments fragments={{ ios: iosSetEntitlements }} />
 
-import ios3 from "/src/fragments/lib/push-notifications/ios/getting_started/20_set_entitlements.mdx";
+import iosCreateAppDelegate from '/src/fragments/lib/push-notifications/ios/getting_started/30_create_app_delegate.mdx';
 
-<Fragments fragments={{ios: ios3}} />
-
-import ios6 from "/src/fragments/lib/push-notifications/ios/getting_started/30_create_app_delegate.mdx";
-
-<Fragments fragments={{ios: ios6}} />
+<Fragments fragments={{ ios: iosCreateAppDelegate }} />
 
 ## Setup backend resources
 
@@ -25,44 +29,78 @@ To use Push Notifications with Amplify, you have the option to either have the A
 <BlockSwitcher>
 <Block name="Amplify CLI">
 
-import ios9 from "/src/fragments/lib/push-notifications/ios/getting_started/40_cli_resources.mdx";
+> Prerequisite: [Install and configure the Amplify CLI](/cli/start/install)
 
-<Fragments fragments={{ios: ios9}} />
+<Callout warning>
 
-import android4 from "/src/fragments/lib/push-notifications/android/getting_started/20_cli_resources.mdx";
+Push Notifications requires version **10.8.0+** of the Amplify CLI. You can check your current version by typing `amplify -version` and upgrade to the latest version by typing `amplify upgrade`.
 
-<Fragments fragments={{android: android4}} />
+</Callout>
 
-</Block>
-<Block name="Existing resources">
+To start provisioning push notifications resources in the backend, go to your project directory and execute the command:
 
-import ios12 from "/src/fragments/lib/push-notifications/ios/getting_started/50_existing_resources.mdx";
+```sh
+amplify add notifications
+```
 
-<Fragments fragments={{ios: ios12}} />
+import androidCliResources from '/src/fragments/lib/push-notifications/android/getting_started/20_cli_resources.mdx';
+import iosCliResources from '/src/fragments/lib/push-notifications/ios/getting_started/40_cli_resources.mdx';
+import reactNativeCliResources from '/src/fragments/lib/push-notifications/react-native/getting_started/20_cli_resources.mdx';
 
-import android7 from "/src/fragments/lib/push-notifications/android/getting_started/30_existing_resources.mdx";
+<Fragments
+  fragments={{
+    android: androidCliResources,
+    ios: iosCliResources,
+    'react-native': reactNativeCliResources
+  }}
+/>
 
-<Fragments fragments={{android: android7}} />
+</Block>
+<Block name="Existing resources">
+
+import androidExistingResources from '/src/fragments/lib/push-notifications/android/getting_started/30_existing_resources.mdx';
+import iosExistingResources from '/src/fragments/lib/push-notifications/ios/getting_started/50_existing_resources.mdx';
+import reactNativeExistingResources from '/src/fragments/lib/push-notifications/react-native/getting_started/30_existing_resources.mdx';
+
+<Fragments
+  fragments={{
+    android: androidExistingResources,
+    ios: iosExistingResources,
+    'react-native': reactNativeExistingResources
+  }}
+/>
 
 </Block>
 </BlockSwitcher>
 
 ## Install Amplify Libraries
 
-import ios15 from "/src/fragments/lib/push-notifications/ios/getting_started/60_install_lib.mdx";
+import androidInstallLib from '/src/fragments/lib/push-notifications/android/getting_started/40_install_lib.mdx';
+import iosInstallLib from '/src/fragments/lib/push-notifications/ios/getting_started/60_install_lib.mdx';
+import reactNativeInstallLib from '/src/fragments/lib/push-notifications/react-native/getting_started/40_install_lib.mdx';
 
-<Fragments fragments={{ios: ios15}} />
+<Fragments
+  fragments={{
+    android: androidInstallLib,
+    ios: iosInstallLib,
+    'react-native': reactNativeInstallLib
+  }}
+/>
 
-import android10 from "/src/fragments/lib/push-notifications/android/getting_started/40_install_lib.mdx";
+import reactNativeIntegrateNativeModule from '/src/fragments/lib/push-notifications/react-native/getting_started/50_integrate_native_modules.mdx';
 
-<Fragments fragments={{android: android10}} />
+<Fragments  fragments={{ 'react-native': reactNativeIntegrateNativeModule }} />
 
 ## Initialize Amplify Push Notifications
 
-import ios18 from "/src/fragments/lib/push-notifications/ios/getting_started/70_init_push_notifications.mdx";
-
-<Fragments fragments={{ios: ios18}} />
-
-import android13 from "/src/fragments/lib/push-notifications/android/getting_started/50_init_push_notifications.mdx";
-
-<Fragments fragments={{android: android13}} />
+import androidInitPN from '/src/fragments/lib/push-notifications/android/getting_started/50_init_push_notifications.mdx';
+import iosInitPN from '/src/fragments/lib/push-notifications/ios/getting_started/70_init_push_notifications.mdx';
+import reactNativeInitPN from '/src/fragments/lib/push-notifications/react-native/getting_started/60_init_push_notifications.mdx';
+
+<Fragments
+  fragments={{
+    android: androidInitPN,
+    ios: iosInitPN,
+    'react-native': reactNativeInitPN
+  }}
+/>

src/fragments/lib/push-notifications/common/identify-user.mdx

@@ -2,34 +2,42 @@ This call identifies the current user (which could be unauthenticated or authent
 
 ## Get the user ID from Amplify Auth
 
-If the user is signed in through [Amplify.Auth.signIn](/lib/auth/signin), then you can retrieve the current user's ID as shown below:
-
-import android0 from "/src/fragments/lib/push-notifications/android/identify_user/10_get_auth_user.mdx";
-
-<Fragments fragments={{android: android0}} />
-
-import ios1 from "/src/fragments/lib/push-notifications/ios/identify_user/10_get_auth_user.mdx";
-
-<Fragments fragments={{ios: ios1}} />
+import androidGetUser from '/src/fragments/lib/push-notifications/android/identify_user/10_get_auth_user.mdx';
+import iosGetUser from '/src/fragments/lib/push-notifications/ios/identify_user/10_get_auth_user.mdx';
+import reactNativeGetUser from '/src/fragments/lib/push-notifications/react-native/identify_user/10_get_auth_user.mdx';
+
+<Fragments
+  fragments={{
+    android: androidGetUser,
+    ios: iosGetUser,
+    'react-native': reactNativeGetUser
+  }}
+/>
 
 ## Identify the user to Amazon Pinpoint
 
 Once you have a string that identifies the current user (either from the Auth category as shown above or through your own application logic), you can identify the user to Amazon Pinpoint with the following:
 
-import android3 from "/src/fragments/lib/push-notifications/android/identify_user/20_send_to_pinpoint.mdx";
-
-<Fragments fragments={{android: android3}} />
-
-import ios4 from "/src/fragments/lib/push-notifications/ios/identify_user/20_send_to_pinpoint.mdx";
-
-<Fragments fragments={{ios: ios4}} />
-
-Alternatively, you can provide additional information about the user by passing a user profile:
-
-import android6 from "/src/fragments/lib/push-notifications/android/identify_user/30_send_to_pinpoint_profile.mdx";
-
-<Fragments fragments={{android: android6}} />
-
-import ios7 from "/src/fragments/lib/push-notifications/ios/identify_user/30_send_to_pinpoint_profile.mdx";
-
-<Fragments fragments={{ios: ios7}} />
+import androidSendToPinpoint from '/src/fragments/lib/push-notifications/android/identify_user/20_send_to_pinpoint.mdx';
+import iosSendToPinpoint from '/src/fragments/lib/push-notifications/ios/identify_user/20_send_to_pinpoint.mdx';
+import reactNativeSendToPinpoint from '/src/fragments/lib/push-notifications/react-native/identify_user/20_send_to_pinpoint.mdx';
+
+<Fragments
+  fragments={{
+    android: androidSendToPinpoint,
+    ios: iosSendToPinpoint,
+    'react-native': reactNativeSendToPinpoint
+  }}
+/>
+
+import androidSendWithProfile from '/src/fragments/lib/push-notifications/android/identify_user/30_send_to_pinpoint_profile.mdx';
+import iosSendWithProfile from '/src/fragments/lib/push-notifications/ios/identify_user/30_send_to_pinpoint_profile.mdx';
+import reactNativeSendWithProfile from '/src/fragments/lib/push-notifications/react-native/identify_user/30_send_to_pinpoint_profile.mdx';
+
+<Fragments
+  fragments={{
+    android: androidSendWithProfile,
+    ios: iosSendWithProfile,
+    'react-native': reactNativeSendWithProfile
+  }}
+/>;