React Native Performance

Welcome to React Native Performance 👋

React Native Performance is a group of packages built at Shopify for profiling React Native app performance.

Getting started

React Native Performance monorepo contains several packages:

• react-native-performance - a core library for measuring the render times for the different flows in your app.
• Extension libraries atop of react-native-performance:
  • react-native-performance-navigation - useful higher-order profiles as well as additional components for easier profiling of apps using the React Navigation library.
    • react-native-performance-navigation-bottom-tabs - extension library atop react-native-performance-navigation with additional helper methods for @react-navigation/bottom-tabs library.
    • react-native-performance-navigation-drawer - extension library atop react-native-performance-navigation with additional helper methods for @react-navigation/drawer library.
• react-native-performance-lists-profiler contains utilities for profiling FlatList and FlashList.
• flipper-plugin-react-native-performance contains a Flipper plugin to make lists profiling easier. The plugin visualises TTI, blank areas, and its averages.

note

react-native-performance is the core library which provides basic building blocks for profiling operations but we recommend using the other packages for convenience and alignment with other Shopify apps.

To know more about the individual packages, follow the links to their documentation.