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🔗
Minimum Android version: 4.1 (API 16)
Minimum iOS version : 10.0
Minimum XCode version : 10
npm
Download the npm module:
npm install react-native-appsmiles-apm --save
iOS
Android
- 1.Add
Podfile
in folderios
- 2.Add theses code in
Podfile
platform :ios, '10.0'use_frameworks!require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'source 'https://gitlab.appsmiles.eu/appsmiles/APMSpecs.git'source 'https://github.com/CocoaPods/Specs.git'target 'example' do# Pods for example# Others pods...pod 'RCTAPM', :path => '../node_modules/react-native-appsmiles-apm/ios'use_native_modules!end - 3.Launch the command line
pod install
- 1.Insert the following lines inside the dependencies block in
android/app/build.gradle
:implementation project(':react-native-appsmiles-apm') - 2.In global
android/build.gradle
//You can set login and password in env variablesdef mavenAppsmilesUsername = System.getenv("APPSMILES_ARTIFACTORY_LOGIN") ?: ''def mavenAppsmilesPassword = System.getenv("APPSMILES_ARTIFACTORY_PASSWORD") ?: ''//Or in local.propertiesdef folder = new File( 'local.properties' )if( folder.exists() ) {properties.load(project.rootProject.file('local.properties').newDataInputStream())mavenAppsmilesUsername = properties.getProperty("maven_appsmiles.username") ?: mavenAppsmilesUsernamemavenAppsmilesPassword = properties.getProperty("maven_appsmiles.password") ?: mavenAppsmilesPassword}allprojects {repositories {//...maven {url 'https://artifactory.appsmiles.eu/artifactory/list/appsmiles/'credentials {username = mavenAppsmilesUsernamepassword = mavenAppsmilesPassword}}}} - 3.If you use a file
local.properties
, addmaven_appsmiles.username
andmaven_appsmiles.password
in fileandroid/local.properties
with your credentialsmaven_appsmiles.username=USERNAMEmaven_appsmiles.password=PASSWORD - 4.Init the SDK
APM.sharedInstance(this); //Init in MainApplication.java and main thread
in the methodonCreate()
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
Create a global class AbstractScreen (or edit an existing abstract class) that override the methods :
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
// @flow
import React, { Component } from 'react';
import { APMModule } from 'react-native-appsmiles-apm';
export default class AbstractScreen extends Component<*> {
componentDidMount() {
APMModule.componentDidMountWithScreen(getDisplayName(WrappedComponent));
}
componentDidUpdate() {
APMModule.componentDidUpdateWithScreen(getDisplayName(WrappedComponent));
}
componentWillUnmount() {
APMModule.componentWillUnmountWithScreen(getDisplayName(WrappedComponent));
}
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
}
Have all the screens in your application extend AbstractScreen:
class HomeScreen extends AbstractScreen {
//...
}
class ChatScreen extends AbstractScreen {
//...
}
//etc.
//@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.componentDidMountWithScreen(getDisplayName(WrappedComponent));
}
componentDidUpdate() {
APMModule.componentDidUpdateWithScreen(getDisplayName(WrappedComponent));
}
componentWillUnmount() {
APMModule.componentWillUnmountWithScreen(getDisplayName(WrappedComponent));
}
render() {
// ... and renders the wrapped component with the fresh data!
// Notice that we pass through any additional props
return <WrappedComponent {...this.props} />;
}
};
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
}
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.
Last modified 1yr ago