shopify-react-native-performance-navigation-drawer

import React, { useCallback, useContext, useState } from 'react';
import { createProfiledDrawerNavigator } from '@shopify/react-native-performance-navigation-drawer';
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';
import { GestureHandlerRootView } from '@amazon-devices/react-native-gesture-handler';

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 DrawerScreenA = () => {
  const { findReport } = useReportContext();
  const report = findReport('drawerScreenA', 'Drawer');

  return (
    <ReactNavigationPerformanceView
      screenName="drawerScreenA"
      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 "Drawer" to "Drawer
          Screen A"
        </Text>
        <Text style={styles.text}>{JSON.stringify(report)}</Text>
      </View>
    </ReactNavigationPerformanceView>
  );
};

const DrawerScreenB = () => {
  const { findReport } = useReportContext();
  const report = findReport('drawerScreenB', 'Drawer');

  return (
    <ReactNavigationPerformanceView
      screenName="drawerScreenB"
      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 "Drawer" to "Drawer
          Screen B"
        </Text>
        <Text style={styles.text}>{JSON.stringify(report)}</Text>
      </View>
    </ReactNavigationPerformanceView>
  );
};

const Drawer = createProfiledDrawerNavigator();

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 (
    <GestureHandlerRootView style={{flex: 1}}>
      <ReportContext.Provider value={{ saveReport, findReport }}>
        <PerformanceProfiler
          onReportPrepared={onReportPrepared}
          logLevel={LogLevel.Debug}
        >
          <NavigationContainer>
            <Drawer.Navigator>
              <Drawer.Screen name="Drawer Screen A" component={DrawerScreenA} />
              <Drawer.Screen name="Drawer Screen B" component={DrawerScreenB} />
            </Drawer.Navigator>
          </NavigationContainer>
        </PerformanceProfiler>
      </ReportContext.Provider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#283593',
  },
  label: {
    color: 'white',
    fontSize: 28,
  },
  text: {
    fontSize: 20,
    color: 'white',
    marginTop: 20,
  },
});