Skip to content
Inspect React Native performance with Flipper
JavaScript Objective-C Ruby
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Add example and docs for react native navigation Dec 1, 2019
ios Add session start time to native payload Dec 2, 2019
src Fix line wrapping of grid axis label Dec 2, 2019
.gitignore Initial implementation Nov 30, 2019
.prettierrc Initial implementation Nov 30, 2019
LICENSE Add LICENSE Nov 30, 2019
README.md Fix typo, move screenshot and link examples Dec 2, 2019
index.js Revamp UI and add history Dec 2, 2019
package.json
yarn.lock Remove flipper dependency Nov 30, 2019

README.md

Flipper React Native Performance Plugin

This is a plugin for the debug tool Flipper that measures the startup of your React Native app.

It provides the following metrics:

  • Native startup time
  • Script download time
  • Script execution time
  • Script bundle size
  • Time to interactive of root view

Currently only these standard metrics on iOS is supported, but the aim is to further expand profiling capabilities and add Android support in the future.

Installation

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

Setup

Flipper

First, make sure you have successfully setup Flipper with your React Native app.

Flipper Desktop

  1. Go to Manage Plugins by pressing the button in the lower left corner of the Flipper app, or in the View menu
  2. Select Install Plugins and search for react-native-performance
  3. Press the Install button

iOS

Edit your Podfile by adding the following:

def flipper_pods()
  ...
+ pod 'flipper-plugin-react-native-performance', :path => "../node_modules/flipper-plugin-react-native-performance/ios", :configuration => 'Debug'
end

Edit your AppDelegate.m by adding the following:

+   #if DEBUG
+   #ifdef FB_SONARKIT_ENABLED
+   #import <flipper-plugin-react-native-performance/FlipperReactPerformancePlugin.h>
+   #endif
+   #endif

@implementation AppDelegate

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
    [self initializeFlipper:application];
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+   #if DEBUG
+   #ifdef FB_SONARKIT_ENABLED
+   [[FlipperReactPerformancePlugin sharedInstance] setBridge:bridge];
+   #endif
+   #endif
    ...
  }

  - (void) initializeFlipper:(UIApplication *)application {
    ...
+   [client addPlugin: [FlipperReactPerformancePlugin sharedInstance]];
    [client start];
    ...
  }

Setup for React Native Navigation

Edit your AppDelegate.m like above, but for the application:didFinishLaunchingWithOptions method, add the following instead:

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
    [self initializeFlipper:application];
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
+   #if DEBUG
+   #ifdef FB_SONARKIT_ENABLED
+   [[FlipperReactPerformancePlugin sharedInstance] setBridge:[ReactNativeNavigation getBridge]];
+   #endif
+   #endif
    ...
  }

Demo

See the projects in the examples folder.

License

MIT © Joel Arvidsson 2019 – present

You can’t perform that action at this time.