Skip to content

bekirc/flipper-plugin-react-native-performance

 
 

Repository files navigation

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.

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

About

Inspect React Native performance with Flipper

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 57.2%
  • JavaScript 27.2%
  • Java 10.3%
  • Objective-C 4.6%
  • Ruby 0.7%