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

shopify-react-native-performance-navigation-bottom-tabs is an extension library atop @shopify/react-native-performance-navigation with additional helper methods for @react-navigation/bottom-tabs 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",
     "@shopify/react-native-performance-navigation-bottom-tabs": "npm:@amazon-devices/shopify__react-native-performance-navigation-bottom-tabs@~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 { createProfiledBottomTabNavigator } from '@shopify/react-native-performance-navigation-bottom-tabs';
import {
  LogLevel,
  PerformanceProfiler,
  RenderPassReport,
} from '@shopify/react-native-performance';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { StyleSheet, Text, View } from 'react-native';
import { ReactNavigationPerformanceView } 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 BottomTabScreenA = () => {
  const { findReport } = useReportContext();
  const report = findReport('bottomTabScreenA', 'BottomTabBar');

  return (
    <ReactNavigationPerformanceView
      screenName="bottomTabScreenA"
      interactive={true}
    >
      <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 "Bottom Tab Bar" to
          "Bottom Tab Screen A"
        </Text>
        <Text style={styles.text}>{JSON.stringify(report)}</Text>
      </View>
    </ReactNavigationPerformanceView>
  );
};

const BottomTabScreenB = () => {
  const { findReport } = useReportContext();
  const report = findReport('bottomTabScreenB', 'BottomTabBar');

  return (
    <ReactNavigationPerformanceView
      screenName="bottomTabScreenB"
      interactive={true}
    >
      <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 "Bottom Tab Bar" to
          "Bottom Tab Screen B"
        </Text>
        <Text style={styles.text}>{JSON.stringify(report)}</Text>
      </View>
    </ReactNavigationPerformanceView>
  );
};

const { Tab, buildProfiledBottomTabBarButton } =
  createProfiledBottomTabNavigator();

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}
        logLevel={LogLevel.Debug}
      >
        <NavigationContainer>
          <Tab.Navigator initialRouteName="Bottom Tab Screen A">
            <Tab.Screen
              name="Bottom Tab Screen A"
              component={BottomTabScreenA}
              options={{
                // @ts-ignore
                tabBarButton: buildProfiledBottomTabBarButton(),
              }}
            />
            <Tab.Screen
              name="Bottom Tab Screen B"
              component={BottomTabScreenB}
              options={{
                // @ts-ignore
                tabBarButton: buildProfiledBottomTabBarButton(),
              }}
            />
          </Tab.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-bottom-tabs documentation

Functions

Function Description Platform support
createProfiledBottomTabNavigator This utility wraps over the stock createBottomTabNavigator, and allows you to profile how long it takes to render the screens hosted inside the different tabs. All

Implementation details

  • Render pass reports for navigating between the bottom tabs aren't currently correctly generated on Vega

Supported Versions

Package version Based on @amazon-devices/react-native-kepler version
3.0.0 @shopify/react-native-performance-navigation-bottom-tabs 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