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
- 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", "@shopify/react-native-performance-navigation-bottom-tabs": "npm:@amazon-devices/shopify__react-native-performance-navigation-bottom-tabs@~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 { 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