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
- Add the JavaScript library dependency in the
package.json
file."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" },
- Reinstall dependencies using
npm install
command.
Examples
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