React Native Performance tooling

Toolchain to measure and monitor the performance of your React Native app in development, pipeline and in production.

Packages

An implementation of the Performance API for React Native.

Integrates well with React.Profiler API
Trace arbitrary events in your app such as component render time
Capture network traffic
Collect native traces such as script execution and time to interactive of root view
Collect native metrics in development such as JS bundle size

Visualize performance tracing on a timeline and generic metrics in the debug tool Flipper.

Connect the react-native-performance library with the flipper-plugin-performance visualization tool in development.

Isomorphic Performance API for Node, Browser & React Native. Useful if your app targets both web and native.

See the projects in the examples folder.

Make sure to have yarn v1 installed and run yarn in the root folder to install dependencies for all packages.

Uninstall the Flipper Performance plugin if previously installed. Then edit your ~/.flipper/config.json to look something like this:

{
  "pluginPaths": ["/path/to/react-native-performance/packages"]
}

Continously compile the plugin as you edit with:

yarn workspace flipper-plugin-performance run watch

Run the example app with:

cd examples/vanilla
yarn start # important to run this before the next step!
yarn ios # or yarn android

Run the unit tests with:

yarn test