shopify-react-native-performance-navigation-bottom-tabs

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,
  },
});