Skip to content

codthing-native/react-native-performance

 
 

Repository files navigation

React Native Performance Monitor Flipper plugin

Build Status

rn-perf-monitor

Usage

Here's a detailed article to go further

  1. Disable JS Dev Mode in the settings (shake your device to open the development menu, then click settings)
  2. Click Start Measuring
  3. Do stuff in your app
  4. Check the score!

This is how the score is calculated below, quite naively, but open to suggestions: plugin-score

Note that:

  • the score depends on the device used. We advice using a lower-end device to accentuate performance issues.
  • the score depends on what you do on your app while measuring. If you do nothing, your score should (hopefully) be 100!

Install

Flipper

Search for rn-perf-monitor in the list of plugins.

Install Android/iOS plugin

Install the plugin

yarn add --dev react-native-flipper-performance-plugin

Then go to iOS/Android section below to continue the install

iOS

  • Run cd ios && pod install

  • In ./ios/yourapp/AppDelegate.m (where yourapp depends on your app), add 2 lines:

#ifdef FB_SONARKIT_ENABLED
...
// Add this line
#import <FlipperPerformancePlugin.h>

static void InitializeFlipper(UIApplication *application) {
  ...

  // Add this line
  [client addPlugin:[FlipperPerformancePlugin new]];

  [client start];
}
#endif

Android

In ./android/app/src/debug/java/com/yourapp/ReactNativeFlipper.java (where com/yourapp depends on your app), add:

import tech.bam.rnperformance.flipper.RNPerfMonitorPlugin;

...

client.addPlugin(new RNPerfMonitorPlugin(reactInstanceManager));

Migrating from flipper-plugin-rn-performance-android

You might have previously installed flipper-plugin-rn-performance-android. This is now deprecated, as react-native-flipper-performance-plugin has autolinking and cross-platform support.

You also need to run these steps:

Uninstall the package:

yarn remove flipper-plugin-rn-performance-android

Then remove those lines in ./android/settings.gradle:

include ':flipper-plugin-rn-performance-android'
project(':flipper-plugin-rn-performance-android').projectDir = new File(rootProject.projectDir, '../node_modules/flipper-plugin-rn-performance-android')

and in ./android/app/build.gradle:

debugImplementation project(':flipper-plugin-rn-performance-android')

Contributing to flipper Desktop

  1. Clone the repository.
  2. Add path to your local react-native-performance folder in ~/.flipper/config.json as shown on the flipper docs
  3. Run yarn watch inside flipper-desktop
  4. Connect your debug app with the flipper android plugin installed.
  5. You should now see your plugin appear in Flipper.

About

An attempt to have a lighthouse for React Native. Flipper plugin to show a graph of the React Native performance monitor

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • TypeScript 47.1%
  • Java 19.8%
  • Objective-C 14.6%
  • JavaScript 13.2%
  • Ruby 4.1%
  • Starlark 0.8%
  • C 0.4%