as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

shopify-react-native-performance

@amazon-devices/shopify__react-native-performance is a library for measuring the render times for the different flows in your app.

Installation

  1. Add the JavaScript library dependency in the package.json file.

    Copied to clipboard.

     "dependencies": {
         ...
         "@amazon-devices/react-navigation__native": "~2.0.0",
         "@amazon-devices/react-navigation__stack": "~2.0.0",
         "@shopify/react-native-performance": "npm:@amazon-devices/shopify__react-native-performance@~2.0.0"
     },
    
  2. Reinstall dependencies using npm install command.

Examples

Copied to clipboard.


import React, {
  Dispatch,
  ReactNode,
  SetStateAction,
  createContext,
  useCallback,
  useContext,
  useState,
} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import {
  RenderPassReport,
  PerformanceMeasureView,
  PerformanceProfiler,
} from '@shopify/react-native-performance';

interface ReportContextType {
  report: RenderPassReport | undefined;
  setReport: Dispatch<SetStateAction<RenderPassReport | undefined>>;
}

const ReportContext = createContext<ReportContextType | null>(null);

interface ReportProviderProps {
  children: ReactNode;
}

const ReportProvider = ({ children }: ReportProviderProps) => {
  const [report, setReport] = useState<RenderPassReport>();

  return (
    <ReportContext.Provider value={{ report, setReport }}>
      {children}
    </ReportContext.Provider>
  );
};

const Stack = createStackNavigator();

const NavigationTree = () => {
  const { setReport } = useContext(ReportContext) as ReportContextType;

  const onReportPrepared = useCallback(
    (report: RenderPassReport) => {
      setReport(report);
    },
    [setReport],
  );

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="HomeScreen">
          <Stack.Screen name="HomeScreen" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

const HomeScreen = () => {
  const { report } = useContext(ReportContext) as ReportContextType;

  return (
    <PerformanceMeasureView screenName="HomeScreen" interactive>
      <View style={styles.container}>
        <Text style={styles.text}>Home screen</Text>
        {report ? (
          <>
            <Text style={styles.text}>Render pass report:</Text>
            <Text style={styles.text}>
              {JSON.stringify(report, undefined, 4)}
            </Text>
          </>
        ) : (
          <Text style={styles.text}>No render pass report generated</Text>
        )}
      </View>
    </PerformanceMeasureView>
  );
};

export const App = () => {
  return (
    <ReportProvider>
      <NavigationTree />
    </ReportProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
    fontWeight: '500',
  },
});

API reference

Check out the dedicated documentation page for info about this library, API reference and more: Official shopify/react-native-performance documentation.

Components

Component Description Platform support
PerformanceProfiler A component that collects the performance metrics. Should be mounted high in the app tree All
PerformanceMeasureView A wrapper that measures performance data for the wrapped screen or component All
PerformanceMarker An internal util component that enables marking specific points in the application for performance measurement purposes All

PerformanceProfiler props

Prop Description Platform support
onReportPrepared A callback invoked when a performance report has been prepared. Can be used to handle the performance data in a custom manner All
renderTimeoutMillis Specified the time in milliseconds to wait before considering a render operation as timed out All
errorHandler A callback that handles errors encountered during the profiling process All
enabled A flag that enables or disables the profiler. Useful for controlling profiling based on environment or conditions All
useRenderTimeouts Determines whether to use render timeouts to detect long or stalled renders All
logLevel Sets the level of logging for the profiler and ontrols the verbosity of logs generated by the profiler All

PerformanceMeasureView props

Prop Description Platform support
screenName The name or identifier for the wrapped screen or component. Helps categorizing and identifying performance metrics sepcific to the view All
optimizeForSlowRenderComponents A flag indicating whether to optimize for components that render slowly All
slowRenderPlaceholder A placeholder component to render if the main component takes too long to render All
interactive Indicates whether the component being measured is interactive All
renderPassName A name for the render pass All

PerformanceMarker props

Prop Description Platform support
componentInstanceId A unique identifier for the instance of the component being marked All
renderPassName A name for the render pass All
interactive Indicates thether the component being marked is interactive All
destinationScreen The name of the desitination screen or component where the rendering process is leading All
style Additional styles to apply to the PerformanceMarker component All
onRenderComplete A callback triggered when rendering of the marked component is complete All

Hooks

Hook Description Platform support
useComponentInstanceId An internal util hook. Creates a unique identifier that can be used for componentInstanceId All
useErrorHandler Returns an error handler callback stored in the error handler context All
useProfilerState Used to monitor the library's internal state transitions. Shouldn't be used in production All
useProfilerStateChangeListener An internal hook used by useProfilerState. Registeres a listener for internal state transition changes All
useRenderPassReport Returns the last collected render pass report All
useResetFlow Used to indicate that a screen or component is being re-painted All
useStateController An internal util hook. Returns the state controller stored in the state controller context All

Implementation details

  • useResetFlow hook doesn't work on any of the platforms including Vega.
  • Render pass reports for navigating between screens aren't currently generated on the Vega Virtual Device.

Supported versions

Package name Amazon NPM library version Vega OS build number Vega SDK version Release notes
@amazon-devices/shopify__react-native-performance 2.0.1+4.1.2 OS 1.1 (201010438050) 0.20  

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.


Last updated: Sep 30, 2025