Guides
Start typing to search…

Installation and Usage

Installation

npm install vibes-react-native

Setup

Android

In the android/build.gradle file of your react-native project, make the following entry in the allprojects> repositories section.

allprojects {
  repositories {
    ....
    maven { url "https://raw.githubusercontent.com/vibes/android-sdk-repository/releases/"}
  }
}

You will need values for vibesAppId and vibesApiUrl in the android/app/build.gradle file of your react-native project as shown below.

defaultConfig {
  ...
  manifestPlaceholders = [vibesAppId: "YOUR_VIBES_APPID"),
                          vibesApiUrl: "VIBES_API_URL"]
}

iOS

In the Info.plist file of your react-native project, make the following entries: VibesAppId and VibesApiURL.

<key>VibesAppId</key>
<string><your vibes app id></string>
<key>VibesApiURL</key>
<string><your vibes api url></string>

The vibesAppId is Vibes AppID supplied to you by the Vibes Team. For the value of vibesApiUrl, choose one of the following.


Usage

To import the sdk in react native:

import Vibes from 'vibes-react-native';

With the supplied credentials, the plugin initializes itself and calls Vibes.registerDevice and Vibes.registerPush when a Firebase token or APNS token is available within the app. This should be enough to start receiving push notifications. However, these additional functions can be called within your application's own lifecycle after the initialization process.

registerDevice

This call registers the device with the Vibes environment, returning a promise that either contains a unique device_id that stays with the app until it is uninstalled, or an error message if registration fails. This is invoked automatically at startup, and is not required unless you desire to do so. Calling it multiple times has no negative effect.

unregisterDevice

This call unregisters the device with the Vibes environment, as well as stops a device from receiving a push notification. It also disables any data collection or reporting functionality on this device. This call returns a promise, which on success contains no data and on failure contains an error message. To recover from this you need to invoke both Vibes.registerDevice and Vibes.registerPush.

registerPush

This call fetches the platform specific token for the device and submits it to the Vibes environment, which it can then use to target this device. This call returns a promise, which on success contains no data and on failure contains an error message.

For Android, this is invoked automatically at startup of application, and is not required unless you desire to do so.

For iOS, you will need to manually call Vibes.registerPush() from the lifecycle point of entry of your landing page inside your react-native project. This should show push notifications permissions alert dialog, which once granted, will trigger registerPush call on the Vibes SDK with the APNS push token.

unregisterPush

This call notifies the Vibes environment not to send any more push notifications to this device. This call returns a promise, which on success contains no data and on failure contains an error message.

getVibesDeviceInfo

This call returns a json payload containing the device_id and push_token which identifies an installed instance of the app. This call returns a promise with the json payload on success and on failure contains an error message. The payload looks like below.

{
    'device_id': 'vXJ6f67XfnH/OYWskzUakSczrQ8=',
    'push_token': 'eAY6g9q3raJ4P03wNdSWC5MOW1EfxoomWNXsPhi7T6Q9yAqmxqn0sLEUjLL1Ib0LCH3nKQWBXdxapQ5LgbHu+g==',
}

Push notification callbacks

Your react-native application can register to be notified of the json payload associated with 2 types of events.

  • pushReceived - this is raised immediately a push notification is received.
  • pushOpened - this is raised when a user of your app interacts with the received notification by tapping on it.

An example of how to subscribe to these 2 events is shown below.


const onPushReceived = (event: { payload: string }) => {
  alert('Push received. Payload -> ' + JSON.stringify(event.payload));
};

const onPushOpened = async (event: { payload: string }) => {
  // eslint-disable-next-line no-alert
  alert('Push opened. Payload -> ' + JSON.stringify(event.payload));
};

const eventEmitter =
  Platform.OS === 'ios'
    ? new NativeEventEmitter(NativeModules.PushEventEmitter)
    : DeviceEventEmitter;

eventEmitter.addListener('pushReceived', onPushReceived);
eventEmitter.addListener('pushOpened', onPushOpened);


const App = (): React.ReactElement => {
  ...
}
...

The json payload may look like below for an Android app

{  
   "message_uid":"d4799f7e-442e-45e6-a2d7-e7a82785333a",
   "body":"Test Message",
   "title":"Test Message",
   ...
}

The json payload may look like below for an iOS app

{  
    "aps":{ 
      "alert":{ 
         "title":"Test Message",
         "body":"Test Message",
      },
      "badge":1,
      "content-available":1,
      "mutable-content":1
   }
   ...
}

associatePerson

To link a device to a user, perhaps by their username/email or any other unique identifier, you can use the associatePerson bridge function.


const onPress = () => {
    try {
      const result = await Vibes.associatePerson('[email protected]');
      console.log(result)
    } catch (error) {
      console.error(error);
    }
  };

getPerson

To fetch details of a person associated with a device, use getPerson bridge function.


const onPress = () => {
    try {
      const result = await Vibes.getPerson();
      console.log(result.person_key())
      console.log(result.external_person_id())
    } catch (error) {
      console.error(error);
    }
  };

updateDevice

This call updates client device information with Vibes. It returns a promise, which on success contains no data and on failure contains an error message. The method requires key parameters i.e.

updateCredential of type boolean which indicates whether an update is a token update otherwise false latitude and longitude of type Double


Updated about 11 hours ago