Quickstart

​
 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 : 10.0 
Minimum XCode version : 10
I. Installation
npm
Download the npm module:
1
npm install react-native-appsmiles-apm --save
Copied!
II. Configuration
iOS
Android
1.
Add Podfile in folder ios
2.
Add theses code in Podfile
1
 platform :ios, '10.0'
2
 use_frameworks!
3
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
4
​
5
 source 'https://gitlab.appsmiles.eu/appsmiles/APMSpecs.git'
6
 source 'https://github.com/CocoaPods/Specs.git'
7
​
8
 target 'example' do
9
   # Pods for example
10
​
11
   # Others pods...
12
​
13
   pod 'RCTAPM', :path => '../node_modules/react-native-appsmiles-apm/ios'
14
​
15
   use_native_modules!
16
 end
Copied!
3.
Launch the command line pod install
1.
Insert the following lines inside the dependencies block in android/app/build.gradle:
1
 implementation project(':react-native-appsmiles-apm')
Copied!
2.
In global android/build.gradle
1
//You can set login and password in env variables
2
def mavenAppsmilesUsername = System.getenv("APPSMILES_ARTIFACTORY_LOGIN") ?: ''
3
def mavenAppsmilesPassword = System.getenv("APPSMILES_ARTIFACTORY_PASSWORD") ?: ''
4
​
5
//Or in local.properties
6
def folder = new File( 'local.properties' )
7
if( folder.exists() ) {
8
    properties.load(project.rootProject.file('local.properties').newDataInputStream())
9
    mavenAppsmilesUsername = properties.getProperty("maven_appsmiles.username") ?: mavenAppsmilesUsername
10
    mavenAppsmilesPassword = properties.getProperty("maven_appsmiles.password") ?: mavenAppsmilesPassword
11
}
12
​
13
allprojects {
14
    repositories {
15
        //...
16
​
17
        maven {
18
            url 'https://artifactory.appsmiles.eu/artifactory/list/appsmiles/'
19
            credentials {
20
                username = mavenAppsmilesUsername
21
                password = mavenAppsmilesPassword
22
            }
23
        }
24
    }
25
}
Copied!
3.
If you use a file local.properties, add maven_appsmiles.username and maven_appsmiles.password in file android/local.properties with your credentials
1
 maven_appsmiles.username=USERNAME
2
 maven_appsmiles.password=PASSWORD
Copied!
4.
Init the SDK APM.sharedInstance(this); //Init in MainApplication.java and main thread in the method onCreate()
III. Initialization
Initialize the SDK in App.js with the keys we provided to you (partnerID, partnerSecret, baseUrl), your app's package name (appId). 
1
import { APMModule } from 'react-native-appsmiles-apm';
2
​
3
//...
4
function initSDKAPM() {
5
  APMModule.initAppWithAppID('<PARTNER_ID>', '<PARTNER_SECRET>', '<APP_ID>');
6
  APMModule.setDebugMode(true);
7
  APMModule.setBaseUrl('<BASE_URL>');
8
}
9
​
10
//...
11
initSDKAPM();
Copied!
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()
componentDidUpdate()
componentWillUnmount()
1
// @flow
2
​
3
import React, { Component } from 'react';
4
import { APMModule } from 'react-native-appsmiles-apm';
5
​
6
export default class AbstractScreen extends Component<*> {
7
  componentDidMount() {
8
    APMModule.componentDidMountWithScreen(getDisplayName(WrappedComponent));
9
  }
10
​
11
  componentDidUpdate() {
12
    APMModule.componentDidUpdateWithScreen(getDisplayName(WrappedComponent));
13
  }
14
  
15
  componentWillUnmount() {
16
    APMModule.componentWillUnmountWithScreen(getDisplayName(WrappedComponent));
17
  }
18
  
19
  function getDisplayName(WrappedComponent) {
20
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
21
  }
22
}
Copied!
Have all the screens in your application extend AbstractScreen:
1
class HomeScreen extends AbstractScreen {
2
  //... 
3
}
4
​
5
class ChatScreen extends AbstractScreen {
6
  //... 
7
}
8
​
9
//etc.
Copied!
Using Higher Order Components
Also, you can use a HOC (https://reactjs.org/docs/higher-order-components.html)
1
//@flow
2
​
3
import * as React from "react";
4
import { APMModule } from "react-native-appsmiles-apm";
5
​
6
// see https://reactjs.org/docs/higher-order-components.html
7
export default function withAPM(WrappedComponent: React.ComponentType<any>) {
8
​
9
    // ...and returns another component...
10
    return class extends React.Component<{}, {}> {
11
        componentDidMount() {
12
          APMModule.componentDidMountWithScreen(getDisplayName(WrappedComponent));
13
        }
14
​
15
        componentDidUpdate() {
16
          APMModule.componentDidUpdateWithScreen(getDisplayName(WrappedComponent));
17
        }
18
    
19
        componentWillUnmount() {
20
          APMModule.componentWillUnmountWithScreen(getDisplayName(WrappedComponent));
21
        }
22
        
23
        render() {
24
            // ... and renders the wrapped component with the fresh data!
25
            // Notice that we pass through any additional props
26
            return <WrappedComponent {...this.props} />;
27
        }
28
    };
29
    
30
    function getDisplayName(WrappedComponent) {
31
      return WrappedComponent.displayName || WrappedComponent.name || 'Component';
32
    }
33
}
Copied!
​
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 modified 30d ago
Copy link
Contents
Conditions and minimum requirements