React Native SDK — Usage Guide

With the Fyno SDK installed, let’s cover how to initialise it, identify users, register for push notifications, and handle other functionalities.

Initialising the SDK (to be called on app launch)

To initialise the Fyno SDK, you need to provide the following information:

• Workspace ID: Your unique Fyno workspace ID, available on the Fyno App > Workspace Settings page.
• Integration ID: The ID of the integration created in Fyno App > Integrations.
• Distinct ID: A unique identifier for your user. If not provided, a UUID is automatically generated.
• Version: Indicates the environment in which the user is created. Default is “live”, but you can set it to “test” for testing purposes.

In your App.tsx file, import the @fyno/react-native package and call FynoReactNative.initialise() to initialise the SDK:

1
import FynoReactNative from '@fyno/react-native';
2
3
function App(): React.JSX.Element {
4
  ...
5
  useEffect(() => {
6
    (async function () {
7
      try {
8
        FynoReactNative.initialise(
9
          'workspaceId',
10
          'integrationID',
11
          'distinctID',
12
          'version',
13
        );
14
      } catch (e) {
15
        console.error(e);
16
      }
17
    })();
18
  }, []);
19
  ...
20
}

Identifying the User

To update/set a distinct ID or user name, you can call FynoReactNative.identifyUser().

• Distinct ID:: The distinct ID you want to identify the user with.
• User Name: The name you want to assign to the user.

1
try {
2
  FynoReactNative.identifyUser('distinctId', 'userName');
3
} catch (e) {
4
  console.error(e);
5
}

Registering for Push Notifications

To register the application for push notifications, call FynoReactNative.registerPush().

APNs or Google FCM

• To register for push notifications with APNs or Google FCM, you need to specify the provider type.
• Use apns if APNs is configured or fcm if Google FCM is configured in the integration.

1
try {
2
  FynoReactNative.registerPush('', '', '', 'provider');
3
} catch (e) {
4
  console.error(e);
5
}

For Google FCM, ensure you’ve followed the Firebase setup mentioned earlier and have added the google-services.json or GoogleService-Info.plist file to your project root.

Xiaomi Services (Android only)

• To register for push notifications with Xiaomi, provide the Xiaomi application ID and key, along with the push region.
• Xiaomi Application Id and Xiaomi Application Key are mandatory fields which can be found under the application registered at Xiaomi Admin.
• Push Region: Refers to the geographical region where push notifications are delivered.
• Provider: Use xiaomi.

1
try {
2
  FynoReactNative.registerPush('xiaomiApplicationID', 'xiaomiApplicationKey', 'pushRegion', 'provider');
3
} catch (e) {
4
  console.error(e);
5
}

Fetch Push Notification Token

If you want to fetch the push notification token for the current device, use FynoReactNative.getNotificationToken()

1
try {
2
  const notificationToken = await FynoReactNative.getNotificationToken();
3
  console.log("Notification token = " , notificationToken);
4
} catch (e) {
5
  console.error(e);
6
}

Check if notification received is from Fyno and also handle it

To check if the push notification received is from Fyno, use FynoReactNative.isFynoNotification(remoteMessage) and to handle it, use FynoReactNative.handleFynoNotification(remoteMessage)

1
// to receive and handle notifications when the application is in background or killed state
2
messaging().setBackgroundMessageHandler(async (remoteMessage: any) => {
3
  if (await FynoReactNative.isFynoNotification(remoteMessage)) {
4
    await FynoReactNative.handleFynoNotification(remoteMessage);
5
  } else {
6
    // any other logic to handle the notification
7
  }
8
});
9
10
// to receive and handle notifications when the application is in foreground state
11
const handleForegroundNotification = async () => {
12
  messaging().onMessage(async (remoteMessage: any) => {
13
    if (await FynoReactNative.isFynoNotification(remoteMessage)) {
14
      await FynoReactNative.handleFynoNotification(remoteMessage);
15
    } else {
16
      // any other logic to handle the notification
17
    }
18
  });
19
};
20
21
// Call this function inside useEffect or when the app initializes
22
handleForegroundNotification();

Merging User Profiles

If you need to merge two user profiles, call FynoReactNative.mergeProfile() with the old and new distinct IDs.

1
try {
2
  FynoReactNative.mergeProfile('oldDistinctId', 'newDistinctId');
3
} catch (e) {
4
  console.error(e);
5
}

Updating Message Status

You can update the status of a notification (received, clicked or dismissed) using FynoReactNative.updateStatus().

• Callback URL: You can obtain the Callback URL from the notification additional payload if the notification was triggered from Fyno.
• Status: The status of the notification (one of RECEIVED, CLICKED or DISMISSED).

1
try {
2
  FynoReactNative.updateStatus(
3
    'callbackURL',
4
    'status' // one of RECEIVED, CLICKED or DISMISSED
5
  );
6
} catch (e) {
7
  console.error(e);
8
}

Resetting User Information

To reset user information, call FynoReactNative.resetUser().

• You can invoke this function when the user logs out of the application.
• It handles the deletion of channel data associated with the current user, initiates the creation of a fresh user profile, and transfers the channel data to the newly created profile.
• This feature proves to be invaluable if you plan to send push notifications to an application where the user has logged out.

1
try {
2
  FynoReactNative.resetUser();
3
} catch (e) {
4
  console.error(e);
5
}

Sample initialisation

1
// import
2
import FynoReactNative from '@fyno/react-native';
3
4
// initialise
5
function App(): React.JSX.Element {
6
  ...
7
  useEffect(() => {
8
    (async function () {
9
      try {
10
        FynoReactNative.initialise(
11
          'workspaceID',
12
          'integrationID',
13
          'distinctID',
14
          'version',
15
        );
16
      } catch (e) {
17
        console.error(e);
18
      }
19
    })();
20
  }, []);
21
  ...
22
}
23
24
// identify user
25
try {
26
  FynoReactNative.identifyUser(
27
    'distinctId',
28
    'userName',
29
  );
30
} catch (e) {
31
  console.error(e);
32
}
33
34
// register with APNs
35
try {
36
  FynoReactNative.registerPush(
37
    '',
38
    '',
39
    '',
40
    'apns');
41
} catch (e) {
42
  console.error(e);
43
}