Quickstart

Follow these steps to have a basic integration of the app's miles® SDK in your React Native application.
​ React Native Quickstart
​
Estimated time: 20 minutes
This guide will go over:
Conditions and minimum requirements
Installation 📦 
Configuration ⚙ 
Initialization ⚡ 
Attaching 🔗 
react-native-appsmiles-apm on npm : https://www.npmjs.com/package/react-native-appsmiles-apm​
Conditions and minimum requirements
Minimum Android version: 4.1 (API 16)

Minimum iOS version : 7.0 
Minimum XCode version : 7
I. Installation
npm
manual
Download the npm module:
npm install react-native-appsmiles-apm --save
Link the module with your project
react-native link react-native-appsmiles-apm
Skip the configuration section if you decide to do a manual installation
iOS
​
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-appsmiles-apm and add RCTAPM.xcodeproj
In XCode, in the project navigator, select your project. Add libRCTAPM.a to your project's Build Phases ➜ Link Binary With Libraries
Add Podfile in folder ios
Add theses code in Podfile
 workspace 'example.xcworkspace' #--> name of your project
 source 'https://gitlab.appsmiles.eu/appsmiles/APMSpecs.git'
 source 'https://github.com/CocoaPods/Specs.git'
​
 target 'example' do #--> name of your project
   platform :ios, '8.0'
   use_frameworks!
   project 'example.xcodeproj' #--> name of your project
   pod 'APM', '~> 4.1.3'
​
   target 'RCTAPM' do
     platform :ios, '8.0'
     use_frameworks!
     project '../node_modules/react-native-appsmiles-apm/ios/RCTAPM.xcodeproj'
     pod 'APM', '~> 4.1.3'
   end
 end
Launch the command line pod install
Android
​
Open up android/app/src/main/java/[...]/MainApplication.java
Add import com.moonmiles.APMReactPackage; and import com.moonmiles.apm.sdk.APMPublic; to the imports at the top of the file
Add new APMReactPackage() to the list returned by the getPackages() method
Append the following lines to android/settings.gradle:
   include ':react-native-appsmiles-apm'
   project(':react-native-appsmiles-apm').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-appsmiles-apm/android')
Insert the following lines inside the dependencies block in android/app/build.gradle:
 implementation project(':react-native-appsmiles-apm')
In global android/build.gradle
 Properties properties = new Properties()
 properties.load(project.rootProject.file('local.properties').newDataInputStream())
​
 //...
​
 allprojects {
     repositories {
         //...
         maven {
             url 'https://artifactory.appsmiles.eu/artifactory/list/appsmiles/'
             credentials {
                 username = properties.getProperty("maven_appsmiles.username")
                 password = properties.getProperty("maven_appsmiles.password")
             }
         }
     }
 }
Add maven_appsmiles.username and maven_appsmiles.password in file android/local.properties with your credentials
 maven_appsmiles.username=USERNAME
 maven_appsmiles.password=PASSWORD
Init the SDK APMPublic.sharedInstance(this); in the method onCreate() of the class MainApplication.java
@Override
public void onCreate() {
  super.onCreate();
  //...
​
  APMPublic.sharedInstance(this); //Init in MainApplication.java and main thread
}
Extends your MainActivity with ReactFragmentActivity
II. Configuration
iOS
Android
Add Podfile in folder ios
Add theses code in Podfile
 workspace 'example.xcworkspace' #--> name of your project
 source 'https://gitlab.appsmiles.eu/appsmiles/APMSpecs.git'
 source 'https://github.com/CocoaPods/Specs.git'
​
 target 'example' do #--> name of your project
   platform :ios, '8.0'
   use_frameworks!
   project 'example.xcodeproj' #--> name of your project
   pod 'APM', '~> 4.1.3'
​
   target 'RCTAPM' do
     platform :ios, '8.0'
     use_frameworks!
     project '../node_modules/react-native-appsmiles-apm/ios/RCTAPM.xcodeproj'
     pod 'APM', '~> 4.1.3'
   end
 end
Launch the command line pod install
Insert the following lines inside the dependencies block in android/app/build.gradle:
 implementation project(':react-native-appsmiles-apm')
In global android/build.gradle
 Properties properties = new Properties()
 properties.load(project.rootProject.file('local.properties').newDataInputStream())
​
 //...
​
 allprojects {
     repositories {
         //...
         maven {
             url 'https://artifactory.appsmiles.eu/artifactory/list/appsmiles/'
             credentials {
                 username = properties.getProperty("maven_appsmiles.username")
                 password = properties.getProperty("maven_appsmiles.password")
             }
         }
     }
 }
Add maven_appsmiles.username and maven_appsmiles.password in file android/local.properties with your credentials
 maven_appsmiles.username=USERNAME
 maven_appsmiles.password=PASSWORD
Init the SDK APMPublic.sharedInstance(this); //Init in MainApplication.java and main thread in the method onCreate()
Extends your MainActivity with ReactFragmentActivity
III. Initialization
Initialize the SDK in App.js with the keys we provided to you (partnerID, partnerSecret, baseUrl), your app's package name (appId). 
import { APMModule } from 'react-native-appsmiles-apm';
​
//...
function initSDKAPM() {
  APMModule.initAppWithAppID('<PARTNER_ID>', '<PARTNER_SECRET>', '<APP_ID>');
  APMModule.setDebugMode(true);
  APMModule.setBaseUrl('<BASE_URL>');
}
​
//...
initSDKAPM();
Environment
URL
PRODUCTION
https://api-prod1.appsmiles.eu/
SANDOX
https://api-sb.appsmiles.eu/
We host projects on multiple servers, double check with us or your team to verify the base URL
IV. Attaching
Using inheritance
Create a global class AbstractScreen (or edit an existing abstract class) that override the methods componentDidMount() and componentDidUpdate() to 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();
  }
}
Have all the screens in your application extend AbstractScreen:
class HomeScreen extends AbstractScreen {
  //... 
}
​
class ChatScreen extends AbstractScreen {
  //... 
}
​
//etc.
Using Higher Order Components
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} />;
        }
    };
}
​
You're done with the installation ! 
You should be able to see our SDK on your application.
And the banner appear !
Head to the next section to start integrating our SDK into your app's features.
Developers - Previous
React Native
Integration
Last updated 4 days ago
Environment	URL
PRODUCTION	https://api-prod1.appsmiles.eu/
SANDOX	https://api-sb.appsmiles.eu/