Install

react-native-appsmiles-apm on npm : https://www.npmjs.com/package/react-native-appsmiles-apm

JS

Init the SDK in App.js

import { APMModule } from 'react-native-appsmiles-apm';

//...

initSDKAPM();

//...

function initSDKAPM() {
  APMModule.initAppWithAppID('<PARTNER_ID>', '<PARTNER_SECRET>', '<APP_ID>');
  APMModule.setDebugMode(true);
  APMModule.setBaseUrl("https://api-sandbox.appsmiles.eu/");
}

Url of API – PRODUCTION : https://api.appsmiles.eu/ – SANDBOX : https://api-sandbox.appsmiles.eu/

Create a global class AbstractScreen and override the methods componentDidMount() and componentDidUpdate() for call NativeModules.APMModule.refreshSDK()

// @flow

import React, { Component } from 'react';
import { APMModule } from 'react-native-appsmiles-apm';

export default class AbstractScreen extends Component<*> {
  componentDidMount() {
    APMModule.refreshSDK();
  }

  componentDidUpdate() {
    APMModule.refreshSDK();
  }
}

Use this global class AbstractScreen for all screens of your application.

class HomeScreen extends AbstractScreen {
  //... 
}

class ChatScreen extends AbstractScreen {
  //... 
}

//etc.

The banner will be show now.

Also, you can use a HOC (https://reactjs.org/docs/higher-order-components.html)

//@flow

import * as React from "react";
import { APMModule } from "react-native-appsmiles-apm";

//see https://reactjs.org/docs/higher-order-components.html
export default function withAPM(WrappedComponent: React.ComponentType<any>) {

    // ...and returns another component...
    return class extends React.Component<{}, {}> {

        componentDidMount() {
            APMModule.refreshSDK();
        }

        componentDidUpdate() {
            APMModule.refreshSDK();
        }

        render() {
            // ... and renders the wrapped component with the fresh data!
            // Notice that we pass through any additional props
            return <WrappedComponent {...this.props} />;
        }
    };
}

Connection

Use the method APMUIServicesUserModule.userClientConnect() for connect automatically your user to app’s miles. If no account exist with this informations, the server create automatically this account. This method needs : « email », « userID » and « optIn » – « email » is the email of user – « userID » is a unique identifier in your database – « optIn » is the RGPD OptIn

If you don’t want pass the email, you can build a encrypted email with the userID, for example : [e-mail] – 123456789 is the userID

async function apmConnection() {
  var firstname = 'Vincent';
  var lastname = 'Ducastel';
  var email = '[e-mail]'; //Required
  var facebookId = null;
  var userId = 'demo-awesome-ios'; //Required
  var oldClientId = null;
  var segments = null;

  //optIn, APM_DEVICE_OPT_IN_NOT_SET -1 , APM_DEVICE_OPT_IN_REFUSE 1 , APM_DEVICE_OPT_IN_ACCEPT 0 
  var optIn = 0; //Required

  try {
    var user = await APMUIServicesUserModule.userClientConnect(firstname, 
                                                                lastname, 
                                                                   email, 
                                                              facebookId, 
                                                                  userId, 
                                                             oldClientId, 
                                                                segments,
                                                                   optIn);
    console.log("user.email : "+user.email);
  } catch (e) {
    console.log("e.code : "+e.code);
    console.log("e.message : "+e.message);
  }
}

Show/Hide badge

If you want to hide the badge on some screens. Don’t forget to re-show badge after hiding

function showBadge() {
  APMModule.showBadge();
}

function hideBadge() {
  APMModule.hideBadge();
}

Tagging plan

Call triggerAction for send a tag

function triggerAction(actionName) {
  APMModule.triggerAction(actionName);
}

Redirection to your process login/register

Implements this for redirect user to your process login/register account

  componentDidMount() {
    super.componentDidMount();
    APMModule.refreshSDK();
    this._setOnBadgeClickListener(APMConfigModule.APM_BADGE_INIT);
  }

  componentDidUpdate() {
    super.componentDidUpdate();
    APMModule.refreshSDK();
    this._setOnBadgeClickListener(APMConfigModule.APM_BADGE_INIT);
  }

  componentWillUnmount() {
    super.componentWillUnmount();
    if(_onBadgeClickSubscription) {
      APMModule.setOnBadgeClickListener(0);
      _onBadgeClickSubscription.remove();
    }
  }

  _setOnBadgeClickListener(badge) {
    APMModule.setOnBadgeClickListener(badge);
    const aPMModuleEmitter = new NativeEventEmitter(APMModule);
    _onBadgeClickSubscription = aPMModuleEmitter.addListener('onBadgeClick', this._onBadgeClick);
  }

  _onBadgeClick(event: Event) {
    console.log("onBadgeClick", event);
    var badge = event.badge;
    if(badge == APMConfigModule.APM_BADGE_INIT) {
      console.log("TODO show screen login/create account");
    }
  }

APMServicesUserListener

You can be notify when the user changed with the following code

const aPMModuleEmitter = new NativeEventEmitter(NativeModules.APMModule);

//Init APMServicesUserListener
var _servicesUserChangedSubscription: Object;

APMModule.setServicesUserListener();
_servicesUserChangedSubscription = aPMModuleEmitter.addListener('servicesUserChanged', (user) => console.log("servicesUserChanged", user));

Get acquiredTags from APMUser

var user = await APMModule.user();
console.log("APMModule.user() : " + user);
if(user)
{
    var acquiredTags = user.acquiredTags;
    if(acquiredTags)
    {
        console.log("user.acquiredTags : " + user.acquiredTags);
        console.log("user.acquiredTags[0] : " + user.acquiredTags[0]);
    }
}