How to start Example app

For Mobile Messaging Plugin we've provided an Example app, which can be easily setup and started with your credentials.

How to run example application

Prepare application configuration in portal

As the first step, you will need to have an Mobile Messaging application profile set up in Infobip Portal for your account. If you already have it, then you can skip this section, otherwise:

Android

1. Prepare your Firebase Cloud Messaging to get google-services.json file and Server API Key.

2. Prepare your Infobip account to get your application code:

   1. Create new application on Infobip portal.
   2. Navigate to your Application where you will get the application code.
   3. Mark the "Available on Android" checkbox.
   4. Insert previously obtained FCM Server Key (Server API Key).
   

iOS

1. Prepare your App ID, provisioning profiles and APNs certificate (APNs Certificate Guide).

2. Prepare your Infobip account to get your application code:

   1. Create new application on Infobip Push portal.
   2. Navigate to your Application where you will get the application code.
   3. Mark the "Available on iOS" checkbox.
   4. Click on "UPLOAD" under "APNS Certificates" and locate the .p12 certificate you exported from your Keychain earlier.
   

Run example application

1. Provide your application code in /Example/App.js and /Example/ios/NotificationExtension/NotificationService.swift files:

  configuration = {
    applicationCode: 'Your application code',
    ...
  };

(iOS only)

 MobileMessagingNotificationServiceExtension.startWithApplicationCode( <# Your Application Code #> )

2. (Android) Add google-services.json you obtained in previous step to the Example/android/app folder as described in Firebase documentation.
3. Run npm install from the Example app folder to install dependencies.
4. (iOS) Run cd Example/ios & pod update to install Cocoapods dependencies.
5. (iOS) To complete setup for iOS you need to open xCode and select your development team for signing the app for Example and MobileMessagingNotificationExtension targets.
6. (Android) Run npx react-native run-android from the Example app folder to run example application.

Running In-app chat example

Within the example application we offer chat for testing all available In-app chat features first-hand, and for comparing its source code with yours, in case you are facing any issue in your implementation.

In order to test the In-app chat in example application follow instructions in In-app chat Intro.

Our In-app chat has different list of options, from the basic ways of presenting the In-app chat, to not forgetting the change of language for the UI, multiple threads feature, etc. We invite you to play with it and discover everything Livechat has to offer.

Running In-app chat example with WebRTC calls

Within the example application we offer chat with calls for testing all calls features first-hand, and for comparing its source code with yours, in case you are facing any issue in your implementation.

In order to test the In-app chat with calls in example application follow instructions in WebRTC Calls and UI section.

Our calls UI has different list of options: ability to capture video through both, front and back camera, option to mute and use the speaker, ability to capture and share the screen of your mobile device, option to minimise the call UI in a picture-in-picture mode, and more. We invite you to play with it and discover everything Livechat calls have to offer.

BasicExample

The basic example app is created to test basic push notifications' functionality and Library events.

Use the following code to subscribe to the desired event, in this case, notificationTapped:

 useEffect(() => {
   let subscription = mobileMessaging.subscribe(
     'notificationTapped',
     eventData => handleMobileMessagingEvent(eventData),
   );
   subscriptions.push(subscription);
 }, [subscriptions]);

 // this is required to unsubscribe from events
 useEffect(() => {
   return () => {
     subscriptions.forEach(subscription => {
       mobileMessaging.unsubscribe(subscription);
     });
   };
 }, [subscriptions]);

 // open a web page on notificationTapped event
 let handleMobileMessagingEvent = (value: any) => {
   Linking.openURL('https://www.infobip.com');
 };