rnpl

react-native-perf-logger

background

This library created to enable production measurement of your react native application.

• In the first phase (based on Parashuram's blog: React Native Performance Playbook) - I tried to measure the duration of app's startup time.
• On the way, allow measurement of memory consumption, battery consumption and other footprints of your application.

Getting started

$ npm install react-native-perf-logger --save

Manual installation

iOS

[ WIP]

• In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
• Go to node_modules ➜ react-native-perf-logger and add PerfLogger.xcodeproj
• In XCode, in the project navigator, select your project. Add libPerfLogger.a to your project's Build Phases ➜ Link Binary With Libraries
• Run your project (Cmd+R)<

Android

• Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.reactnativeperflogger.PerfLoggerPackage; to the imports at the top of the file

• Add new PerfLoggerPackage() to the list returned by the getPackages() method

• Add ReactNativePerfLogger.Initialize(); to the first line of onCreate() method:

@Override
public void onCreate() {
  ReactNativePerfLogger.Initialize();
  super.onCreate();
  ...
}

• Append the following lines to android/settings.gradle:

  include ':react-native-perf-logger'
  project(':react-native-perf-logger').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-perf-logger/android')
  

• Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile project(':react-native-perf-logger')
  

Usage

• Add a prop nativeID="tti_complete" to the last view of the first screen of your application.
• Register to TTI completed event, and get the JSON includes all the recorded markers:

import PerfLogger from 'react-native-perf-logger';
    PerfLogger.registerTTICompletedListener(async () => {
      const result = await PerfLogger.getMarkersJSON();
      console.log(result);
    })
  }

• Do whatever you want with this JSON (send to your server, send bi..)