shopify-react-native-performance-navigation
This package contains some additional higher-order profilers that we anticipate most apps would find helpful, as well as ReactNavigationPerformanceView
, built on top of vanilla PerformanceMeasureView
with the addition of optimizations for React Navigation library.
Installation
- Add the JavaScript library dependency in the
package.json
file:"dependencies": { ... "@shopify/react-native-performance": "npm:@amazon-devices/shopify__react-native-performance@~2.0.0", "@shopify/react-native-performance-navigation": "npm:@amazon-devices/shopify__react-native-performance-navigation@~3.0.0" },
- Add the Babel module resolver plugin to the
devDependencies
section in thepackage.json
file:"devDependencies": { ... "babel-plugin-module-resolver": "~5.0.2", },
- Configure an alias for
@amazon-devices/shopify__react-native-performance*
in theplugin
section of thebabel.config.js
file.plugins: [ ["module-resolver", { "alias": { "~@amazon-devices/shopify__react-native-performance(.*)": "@shopify/react-native-performance/\\1" } }] ]
- For projects using
@amazon-devices/react-navigation_<X>@2.0.0
libraries (where<X>
represents specific components likestack
ornative
), include these libraries in both thedependencies
andoverrides
sections of your package.json file. It is strongly recommended to upgrade to@amazon-devices/react-navigation_<X>@7.0.0
, which introduces@amazon-devices/react-native-reanimated
support for enhanced performance and animations."dependencies": { ... "@amazon-devices/react-navigation__<X>": "~2.0.0", ... }, ... "overrides": { ... "@amazon-devices/react-navigation__<X>": "~2.0.0", ... },
- Reinstall dependencies using
npm install
command.
Examples
import React, { useCallback, useContext, useState } from 'react';
import {
Button,
GestureResponderEvent,
StyleSheet,
Text,
View,
} from 'react-native';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import {
PerformanceProfiler,
RenderPassReport,
} from '@shopify/react-native-performance';
import {
ReactNavigationPerformanceView,
useProfiledNavigation,
} from '@shopify/react-native-performance-navigation';
type ReportContextState = {
saveReport: (report: RenderPassReport) => void;
findReport: (destinationScreen: string, sourceScreen?: string) => void;
};
const INITIAL_STATE = {
saveReport: () => {},
findReport: () => {},
};
const ReportContext = React.createContext<ReportContextState>(INITIAL_STATE);
const useReportContext = () => {
return useContext(ReportContext);
};
const HomeScreen = () => {
const profiledNavigation = useProfiledNavigation();
const navigateToScreenUsingPerformanceNavigation = (
uiEvent: GestureResponderEvent,
source: 'HomeScreen' | 'DestinationScreen',
destination: 'HomeScreen' | 'DestinationScreen',
) => {
profiledNavigation.navigate(
{
source: source,
uiEvent,
},
destination,
);
};
return (
<View style={styles.container}>
<Button
title="Go to DestinationScreen"
onPress={(uiEvent) =>
navigateToScreenUsingPerformanceNavigation(
uiEvent,
'HomeScreen',
'DestinationScreen',
)
}
/>
</View>
);
};
const DestinationScreen = () => {
const { findReport } = useReportContext();
const report = findReport('destinationScreen', 'HomeScreen');
return (
<ReactNavigationPerformanceView screenName="destinationScreen" interactive>
<View style={[styles.container]}>
<Text style={styles.label}>Measuring navigation render time</Text>
<Text style={styles.label}>
New report is generated after each navigation from "HomeScreen" to
"DestinationScreen"
</Text>
<Text style={styles.text}>{JSON.stringify(report)}</Text>
</View>
</ReactNavigationPerformanceView>
);
};
const Stack = createStackNavigator();
export const App = () => {
const onReportPrepared = (report: RenderPassReport) => {
saveReport(report);
};
const [reports, setReports] = useState<RenderPassReport[]>([]);
const saveReport = useCallback((report: RenderPassReport) => {
setReports((prev) => {
const filtered = prev.filter(
(r) =>
r.sourceScreen !== report.sourceScreen ||
r.destinationScreen !== report.destinationScreen,
);
return [...filtered, report];
});
}, []);
const findReport = useCallback(
(destinationScreen: string, sourceScreen?: string) => {
return reports.find(
(r) =>
r.sourceScreen === sourceScreen &&
r.destinationScreen === destinationScreen,
);
},
[reports],
);
return (
<>
<ReportContext.Provider value={{ saveReport, findReport }}>
<PerformanceProfiler onReportPrepared={onReportPrepared}>
<NavigationContainer>
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen
name="DestinationScreen"
component={DestinationScreen}
/>
</Stack.Navigator>
</NavigationContainer>
</PerformanceProfiler>
</ReportContext.Provider>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
label: {
fontSize: 28,
},
text: {
fontSize: 20,
marginTop: 20,
},
});
API reference
Check out the dedicated documentation for info about this library, API reference and more: Official react-native-performance-navigation documentation.
Hooks
Hook | Description | Platform support |
---|---|---|
useProfiledNavigation |
Using this wrapper useProfiledNavigation hook over the raw useNavigation from react-navigation combines two calls into a single call. It starts profiling the render time corresponding to a navigation flow and requests a navigation to a given destination screen |
All |
Components
Component | Description | Platform support |
---|---|---|
ReactNavigationPerformanceView |
ReactNavigationPerformanceView is built on top of vanilla PerformanceMeasureView with the addition of optimizations for React Navigation library |
All |
Implementation details
Render pass reports for navigating between screens aren't currently generated on the Vega Virtual Device.
To workaround this issue, replace dependencies in the package.json
file as shown below.
"dependencies": {
...
"@amazon-devices/shopify__react-native-performance": "~2.0.0",
"@amazon-devices/shopify__react-native-performance-navigation": "~3.0.0"
},
Supported Versions
Package version | Based on | @amazon-devices/react-native-kepler version |
---|---|---|
3.0.0 | @shopify/react-native-performance-navigation v3.0.0 | 2.0.x |
Additional resources
For information on additional libraries, see Supported Third-Party Libraries and Services.
Last updated: Sep 30, 2025