React Native Performance tooling

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

Packages

react-native-performance

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

flipper-plugin-performance

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

react-native-performance-flipper-reporter

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

isomorphic-performance

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

Demo

See the projects in the examples folder.

Development

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

License

MIT © Joel Arvidsson 2019 – present