React Native Push Notifications Initialization

In order to send or receive push notifications using our UIKit v4.0.0-beta.7, you would need to register the FCM token for Android and the APN token for iOS.

Follow the steps below to enable push notifications in your project:

1. Setup and Install Firebase and FCM:

Refer to the official documentation to set up and install Firebase and Firebase Cloud Messaging (FCM):

• Firebase Setup

• Firebase Cloud Messaging Usage

2. Setup Push Notification Certificates in Console:

Android

1. Follow the FCM Legacy API Migration Guide to get the FCM service account JSON file.

2. Open the Social Plus Console.

3. Navigate to Settings → Push Notifications.

4. Upload the FCM service account JSON file.

iOS

1. Follow the iOS Push Notification Certificate Setup Guide to get the iOS keychain file with a .p12 extension.

2. Open the Social Plus Console.

3. Navigate to Settings → Push Notifications.

4. Upload the .p12 file.

3. Passing FCM Token or APN Token to UIKit

Integrate the following code into your React Native app to pass the FCM or APN token to the Social Plus UIKit:

import React, {useState, useEffect} from 'react';
import messaging from '@react-native-firebase/messaging';
import { AmityUiKitProvider, AmityUiKitSocial } from '@amityco/asc-react-native-ui-kit';
import { Platform } from 'react-native';

const App = () => {
  const [fcmToken, setFcmToken] = useState<string | null | undefined>(null);

  useEffect(() => {
    messaging()
      .registerDeviceForRemoteMessages()
      .then(() => 
        Platform.select({
          ios: messaging().getAPNSToken(),
          android: messaging().getToken(),
        })
      )
      .then(token => {
        setFcmToken(token);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  const configs = { /* your configs here */ };
  const apiKey = 'your-api-key';
  const apiRegion = 'your-api-region';
  const userId = 'your-user-id';
  const displayName = 'your-display-name';
  const endpoint = 'your-api-endpoint';

  return (
    <AmityUiKitProvider
      configs={configs}
      apiKey={apiKey}
      apiRegion={apiRegion}
      userId={userId}
      displayName={displayName}
      apiEndpoint={endpoint}
      fcmToken={fcmToken} // FCM/APN token
    >
      <AmityUiKitSocial />
    </AmityUiKitProvider>
  );
};

export default App;