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-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

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

    Copied to clipboard.

    "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"
    },
    
  2. Add the Babel module resolver plugin to the devDependencies section in the package.json file:

    Copied to clipboard.

    "devDependencies": {
      ...
      "babel-plugin-module-resolver": "~5.0.2",
    },
    
  3. Configure an alias for @amazon-devices/shopify__react-native-performance* in the plugin section of the babel.config.js file.

    Copied to clipboard.

    plugins: [
          ["module-resolver", {
            "alias": {
              "~@amazon-devices/shopify__react-native-performance(.*)": "@shopify/react-native-performance/\\1"
            }
          }]
        ]
    
  4. For projects using @amazon-devices/react-navigation_<X>@2.0.0 libraries (where <X> represents specific components like stack or native), include these libraries in both the dependencies and overrides 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.

    Copied to clipboard.

     "dependencies": {
       ...
       "@amazon-devices/react-navigation__<X>": "~2.0.0",
       ...
     },
     ...
     "overrides": {
       ...
       "@amazon-devices/react-navigation__<X>": "~2.0.0",
       ...
     },
    
  5. Reinstall dependencies using npm install command.

Examples

Copied to clipboard.


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.

Copied to clipboard.

"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