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
Minimum Android version: 4.1 (API 16) Minimum iOS version : 10.0 Minimum XCode version : 10
Download the npm module:
npm install react-native-appsmiles-apm --save
Add Podfile
in folder ios
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
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
//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}}}}
If you use a file local.properties
, add maven_appsmiles.username
and maven_appsmiles.password
in file android/local.properties
with your credentials
maven_appsmiles.username=USERNAMEmaven_appsmiles.password=PASSWORD
Init the SDK APMPublic.sharedInstance(this); //Init in MainApplication.java and main thread
in the method onCreate()
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()
// @flowimport 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.
Also, you can use a HOC (https://reactjs.org/docs/higher-order-components.html)
//@flowimport * as React from "react";import { APMModule } from "react-native-appsmiles-apm";// see https://reactjs.org/docs/higher-order-components.htmlexport 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 propsreturn <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.
Head to the next section to start integrating our SDK into your app's features.