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 : 123456789@appsmiles.fr – 123456789 is the userID

async function apmConnection() {
var firstname = 'Vincent';
var lastname = 'Ducastel';
var email = 'demo-awesome-ios@demo.com'; //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]);
}
}