React Native Performance Monitor Flipper plugin

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:

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.