shopify-react-native-performance-navigation

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