### Install Dependencies and Start Local Development

Source: https://github.com/shopify/react-native-performance/blob/main/docs/README.md

Run these commands in the `documentation` folder to install dependencies and start the local development server. Changes are usually reflected live.

```bash
yarn install # installs the dependencies
yarn start   # builds and serves the local content
```

--------------------------------

### Project Setup and Dependency Installation

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Installs all project dependencies and pods, preparing the project for development.

```sh
yarn up
```

--------------------------------

### Start Metro Server

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Starts the Metro bundler, which is necessary for running the example app during development. Changes in JavaScript code are reflected without a rebuild.

```sh
yarn start
```

--------------------------------

### Install Drawer Performance Navigation Package

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/react-native-performance-navigation-drawer.md

Install the package using yarn. Ensure peer dependencies are also installed.

```bash
yarn add @shopify/react-native-performance-navigation-drawer
```

```bash
yarn add @react-navigation/core @react-navigation/stack @react-navigation/native @react-navigation/drawer-tabs @shopify/react-native-performance @shopify/react-native-performance-navigation react-native-reanimated react-native-gesture-handler
```

--------------------------------

### Install React Native Performance Navigation

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/getting-started.md

Install the @shopify/react-native-performance-navigation package using Yarn.

```bash
yarn add @shopify/react-native-performance-navigation
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Launches the fixture application on an iOS simulator or device. Native code changes require a rebuild.

```sh
yarn ios
```

--------------------------------

### Run Example App on Android

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Launches the fixture application on an Android device or emulator. Native code changes require a rebuild.

```sh
yarn android
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all necessary project dependencies. This project uses Yarn as its package manager.

```sh
yarn
```

--------------------------------

### Install Bottom Tabs Performance Navigation

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/react-native-performance-navigation-bottom-tabs.md

Install the necessary packages for bottom tabs performance navigation, including peer dependencies.

```bash
yarn add @shopify/react-native-performance-navigation-bottom-tabs
yarn add @react-navigation/core @react-navigation/stack @react-navigation/native @react-navigation/bottom-tabs @shopify/react-native-performance @shopify/react-native-performance-navigation
```

--------------------------------

### Install Lists Profiler Package

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-lists-profiler.md

Install the necessary packages for list profiling. This includes the main profiler library and Flipper for debugging.

```bash
yarn add @shopify/react-native-performance-lists-profiler react-native-flipper
```

--------------------------------

### Install React Native Performance Package

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/getting-started.md

Use this command to add the performance profiling package to your project.

```bash
yarn add @shopify/react-native-performance
```

--------------------------------

### Link Native Dependencies

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/getting-started.md

After installing the package, run this command to link native code for Android and iOS.

```bash
npx pod-install
```

--------------------------------

### Navigate with Profiling using `useProfiledNavigation`

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/profiling-navigation.md

Use this hook to combine starting a profiler and navigating to a screen. The first argument to `navigate` is passed to `startProfiler`, and the rest are sent to the internal navigation call.

```tsx
const ScreenA = ({navigation}) => {
  const profiledNavigation = useProfiledNavigation();

  return (
    <>
      {/* some JSX */}
      <TouchableWithoutFeedback
        onPress={uiEvent => {
          profiledNavigation.navigate({source: 'ScreenA', uiEvent}, 'ScreenB');
        }}
      />
    </>
  );
};
```

--------------------------------

### Render Pass Report JSON Example

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/render-pass-report.md

This is an example of the JSON report emitted for a completed render pass. It includes details about the render pass, flow instance, and timing information.

```json
{
  "reportId": "3edb5bb5-8799-4322-899d-f5b6faf5dade",
  "flowInstanceId": "bc738def-da39-4b7e-8965-c97110c12336",
  "sourceScreen": "PackageExamples",
  "destinationScreen": "SomeScreen",
  "flowStartTimeSinceEpochMillis": 1611603113725.3179,
  "timeToConsumeTouchEventMillis": 2.682223916053772,
  "renderPassName": "interactive",
  "timeToRenderMillis": 5085.299072265625,
  "interactive": true
}
```

--------------------------------

### Wrap Screens with PerformanceMeasureView

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/FAQ.md

Example of how to wrap screen components with PerformanceMeasureView when configuring react-navigation. This approach is generally discouraged unless the app is static and screens render interactively immediately.

```tsx
function withPerformanceMeasureView<TProps>(Screen: (props: TProps) => React.ReactElement, screenName: string) {
  const ProfiledScreen = (props: TProps) => {
    return (
      <PerformanceMeasureView screenName={screenName}>
        <Screen {...props} />
      </PerformanceMeasureView>
    );
  };

  return ProfiledScreen;
}

function NavigationTree() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name={NavigationKeys.SCREEN_1}
          component={withPerformanceMeasureView(Screen1, NavigationKeys.SCREEN_1)}
        />
        <Stack.Screen
          name={NavigationKeys.SCREEN_2}
          component={withPerformanceMeasureView(Screen2, NavigationKeys.SCREEN_1)}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

--------------------------------

### Start Navigation Timer with useStartProfiler

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/measuring-render-times.md

Use the `useStartProfiler` hook to initiate a timer when a navigation action begins. This hook should be called within the `onPress` handler of a `Touchable` component before calling `navigation.navigate`.

```tsx
const ScreenA = ({navigation}) => {
  const startNavigationTTITimer = useStartProfiler();

  return (
    <>
      {/* some JSX */}
      <TouchableWithoutFeedback
        onPress={uiEvent => {
          startNavigationTTITimer({
            source: 'ScreenA',
            uiEvent,
          });
          navigation.navigate('ScreenB');
        }}
      />
    </>
  );
};
```

--------------------------------

### Initialize Performance Profiler in TypeScript

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/getting-started.md

Mount the `<PerformanceProfiler/>` component high up in your App tree. The `onReportPrepared` callback can be used to handle performance reports, for example, by logging them or sending them to an analytics service.

```tsx
import {RenderPassReport, PerformanceProfiler} from '@shopify/react-native-performance';

const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    // The console shown above is exclusively used for testing purposes.
    // It has been designed to be flexible and can be replaced with any analytics library of your choice. 
    console.log(JSON.stringify(report, null, 2))
  }, []);

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}> 
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

```

--------------------------------

### Log Profiler State Transitions

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/monitoring-internal-state.md

Use the `useProfilerState` hook to get a dump of state machine transitions. This hook must be rendered as a child of `PerformanceProfiler`. It defaults to logging every profiled screen, but can be configured with a `destinationScreen` regex.

```tsx
const StateLogger = () => {
  const state = useProfilerState({
    // optional. Defaults to every profiled screen
    destinationScreen: new RegExp('^Home.*$'),
  });
  useEffect(() => {
    console.log('State:', JSON.stringify(state));
  }, [state]);
};
```

--------------------------------

### Measure Screen Re-render with useResetFlow

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/measuring-render-times.md

Use the `useResetFlow` hook to start measuring screen re-render times. Pass the `componentInstanceId` to `PerformanceMeasureView` to correlate the measurement. This is useful for tracking re-renders triggered by UI events within the same screen.

```tsx
const HomeScreen = () => {
  const {resetFlow, componentInstanceId} = useResetFlow();

  const {data, refetch, networkStatus} = useQuery(...)
  const homeItems = data?.homeItems

  const renderStateProps: RenderStateProps = {
    interactive: data !== undefined,
    renderPassName: data === undefined ? 'loading' : (isNetworkRequestInFlight(networkStatus) ? 'cached_render' : 'network_render')
  }

  return (
    <PerformanceMeasureView componentInstanceId={componentInstanceId} screenName="HomeScreen" {...renderStateProps}>
      <FlatList
        { /* configure your FlatList */ }
        onRefresh={() => {
          resetFlow({
            destination: 'ScreenA'
          })
          refetch()
        }}
      />
    </PerformanceMeasureView>
  )
}
```

--------------------------------

### Dynamically Enable/Disable Profiler

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/global-switch.md

Control the profiler's active state by passing a boolean to the `enabled` prop. This example uses a feature flag hook (`useFeatureFlag`) to determine whether the profiler should be active.

```tsx
const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    monorail.produce(convertReportToMonorailObject(report));
  }, []);

  const isProfilerEnabled = useFeatureFlag('PERFORMANCE_PROFILER');

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared} enabled={isProfilerEnabled}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

```

--------------------------------

### Build and Serve Production Website

Source: https://github.com/shopify/react-native-performance/blob/main/docs/README.md

Commands to build a production version of the website and serve it locally for testing. The build output is placed in the `build` directory.

```bash
yarn build     # builds a production version of the website
yarn serve    # Serves from the "build" directory
```

--------------------------------

### Build and Serve Documentation Locally

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Commands to build and run the Docusaurus documentation website locally. Navigate to the documentation directory first.

```sh
cd documentation && yarn
yarn run build && yarn run server
```

--------------------------------

### Run Release Command

Source: https://github.com/shopify/react-native-performance/blob/main/RELEASE.md

Execute this command to initiate the release process. It will prompt for updates to modules with pending changes and automatically determine package versions and update changelogs using lerna.

```bash
yarn release
```

--------------------------------

### Measure App Startup Render Time

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/measuring-render-times.md

Wrap your screen components with `PerformanceMeasureView` to measure app startup render times. Use the `interactive` prop to indicate if the current render pass is meaningful for stopping the timer.

```tsx
const HomeScreen = () => {
    const {data} = useQuery(...)
    const homeItems = data?.homeItems

    return (
        <PerformanceMeasureView interactive={homeItems !== undefined} screenName="HomeScreen">
            {
              homeItems === undefined
                ? <LoadingIndicator /> : <HomeListView items={homeItems}/>
            }
        </PerformanceMeasureView>
    )
}
```

--------------------------------

### Initialize Performance Profiler in iOS

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/getting-started.md

Add this snippet to your iOS `AppDelegate.m`. Ensure `[ReactNativePerformance onAppStarted]` is the first line in the app startup routine for early initialization.

```objectivec
#import <ReactNativePerformance/ReactNativePerformance.h>

// ...

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [ReactNativePerformance onAppStarted];
  // other stuff
}
```

--------------------------------

### Initialize Performance Profiler in Android

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/getting-started.md

Add this snippet to your Android `MainApplication.java`. Ensure `ReactNativePerformance.onAppStarted()` is the first line in `onCreate` to initialize the profiler as early as possible.

```java
import com.shopify.reactnativeperformance.ReactNativePerformance;

// ...

@Override
public void onCreate() {
  ReactNativePerformance.onAppStarted();
  super.onCreate();
  // other stuff
}
```

--------------------------------

### Create Profiled Drawer Navigator

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/react-native-performance-navigation-drawer.md

Use `createProfiledDrawerNavigator` to wrap the stock `createDrawerNavigator`. This utility helps profile render times for screens within the drawer, accounting for scenarios where screens might be kept in memory.

```tsx
const Drawer = createProfiledDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name={NavigationKeys.DRAWER_NAVIGATOR_SCREEN_1} component={TabScreen1} />
      <Drawer.Screen name={NavigationKeys.DRAWER_NAVIGATOR_SCREEN_2} component={TabScreen2} />
    </Drawer.Navigator>
  );
};

```

--------------------------------

### Add Peer Dependencies

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/getting-started.md

Ensure the following peer dependencies are listed in your app's package.json when using this package.

```bash
yarn add @react-navigation/core @react-navigation/stack @react-navigation/native @shopify/react-native-performance
```

--------------------------------

### Create Profiled Bottom Tab Navigator

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/react-native-performance-navigation-bottom-tabs.md

Use `createProfiledBottomTabNavigator` to wrap the stock `createBottomTabNavigator` for profiling tab screen render times. This utility correctly handles scenarios where tabs might be kept in memory.

```tsx
const {Tab, buildProfiledBottomTabBarButton} = createProfiledBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name={NavigationKeys.TAB_NAVIGATOR_SCREEN_1}
        component={TabScreen1}
        options={{
          tabBarButton: buildProfiledBottomTabBarButton(),
        }}
      />
      <Tab.Screen
        name={NavigationKeys.TAB_NAVIGATOR_SCREEN_2}
        component={TabScreen2}
        options={{
          // buildProfiledBottomTabBarButton can optionally receive a `Touchable` prop
          // if you want to use something other than TouchableWithoutFeedback
          tabBarButton: buildProfiledBottomTabBarButton(),
        }}
      />
    </Tab.Navigator>
  );
};
```

--------------------------------

### Run TypeScript and ESLint Checks

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Verifies that the code adheres to TypeScript types and ESLint rules. This command should be run before submitting changes.

```sh
yarn flightcheck
```

--------------------------------

### Type-Check Files with TypeScript

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Runs TypeScript to perform static type checking on the project files.

```sh
yarn typescript
```

--------------------------------

### Run Unit Tests

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Executes the project's unit tests using Jest. Ensure all tests pass before submitting changes.

```sh
yarn test
```

--------------------------------

### Import Jest Mock for Performance Profiler

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/stubbing-in-test.md

Import the jest mock file in your jest config script to set up necessary mocks for the library to function correctly in a test environment.

```ts
// in your jest config file
import '@shopify/react-native-performance/jest-mock';
```

--------------------------------

### Profile a FlashList Instance

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-lists-profiler.md

Wrap your FlashList component with FlashListPerformanceView to profile its performance. Its API is identical to FlatListPerformanceView.

```tsx
<FlashListPerformanceView listName="FlashList">
  <FlashList
    keyExtractor={...}
    renderItem={...}
    data={data}
  />
</FlashListPerformanceView>
```

--------------------------------

### Profile a FlatList Instance

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-lists-profiler.md

Wrap your FlatList component with FlatListPerformanceView to profile its performance. The listName prop is used in profiling callbacks.

```tsx
<FlatListPerformanceView listName="FlatList">
  <FlatList
    keyExtractor={...}
    renderItem={...}
    data={data}
  />
</FlatListPerformanceView>
```

--------------------------------

### Lint Files with ESLint

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Runs ESLint to check for code style and potential errors. The `--fix` flag attempts to resolve issues automatically.

```sh
yarn lint
yarn lint --fix
```

--------------------------------

### Optimize Slow Renders with PerformanceMeasureView

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/optimizing-long-running-components.md

Use `PerformanceMeasureView` to delay rendering of components that take a long time to process. It displays a placeholder during animations and renders the actual content afterward. This is useful for improving navigation performance by preventing slow components from blocking animations.

```tsx
<PerformanceMeasureView
  optimizeForSlowRenderComponents
  slowRenderPlaceholder={<View style={{backgroundColor: 'red', flex: 1}} />}
>
  {/* actual screen contents */}
</PerformanceMeasureView>
```

--------------------------------

### Conditional Rendering with ReactNavigationPerformanceView

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-navigation/best-practices.md

Demonstrates how to conditionally render child components while ensuring `ReactNavigationPerformanceView` remains unconditionally rendered. This is crucial for accurate performance tracking.

```typescript
let componentNumber = 0;
const childView = componentNumber === 0 ? <Component0 /> : <Component1 />;

<ReactNavigationPerformanceView screenName="MyScreen" interactive renderPassName={`interactive_${componentNumber}`}>
  {childView}
</ReactNavigationPerformanceView>;
```

--------------------------------

### Mount ListsProfiler Component

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/react-native-performance-lists-profiler.md

Mount the ListsProfiler component at the root of your application to enable profiling for lists. It accepts optional callbacks for processing profiling results.

```tsx
import {ListsProfiler} from '@shopify/react-native-performance-lists-profiler';

const App = () => {
  const onInteractiveCallback = useCallback((TTI: number, listName: string) => {
    console.log(`${listName}'s TTI: ${TTI}`);
  }, []);

  const onBlankAreaCallback = useCallback((offsetStart: number, offsetEnd: number, listName: string) => {
    console.log(`Blank area for ${listName}: ${Math.max(offsetStart, offsetEnd)}`);
  }, []);

  return (
    <>
      <ListsProfiler onInteractive={onInteractiveCallback} onBlankArea={onBlankAreaCallback}>
        <NavigationTree />
      </ListsProfiler>
    </>
  );
};

```

--------------------------------

### Set Log Level to Debug

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/debugging.md

Configure the PerformanceProfiler to log detailed debug information by setting the logLevel prop to LogLevel.Debug. This is useful for in-depth performance issue analysis.

```tsx
<PerformanceProfiler logLevel={LogLevel.Debug}>
```

--------------------------------

### Render Test Context with Disabled Profiler

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/stubbing-in-test.md

Configure `PerformanceProfiler` with `enabled={false}` when setting up the test context. This ensures the profiler is disabled and has minimal interference with your business logic tests.

```tsx
import {render} from 'react-native-testing-library';

const TestRenderContext = ({children}: {children: React.ReactNode}) => {
  return (
    <PerformanceProfiler enabled={false} onReportPrepared={() => {}}>
      {children}
    </PerformanceProfiler>
  );
};

describe('MyScreenTest', () => {
  it('does something', () => {
    render(
      <TestRenderContext>
        <MyScreen />
      </TestRenderContext>,
    );

    // assert things
  });
});
```

--------------------------------

### Configuring an Error Handler

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/error-handling.md

Set up a custom error handler for the PerformanceProfiler to manage API usage errors and unexpected issues. This callback is invoked for render watchdog timer triggers and library errors.

```tsx
const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    monorail.produce(convertReportToMonorailObject(report));
  }, []);

  const errorHandler = useCallback((error: Error) => {
    // Do stuff with error
  }, []);

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared} errorHandler={errorHandler}> 
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

```

--------------------------------

### Fix initialRouteName Bug in React Navigation

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/known-issues.md

When using bottom tabs or drawers with `initialRouteName` set to a screen other than the first, ensure `backBehavior` is set to 'history' to prevent inaccurate performance measurements. This is a workaround for a known issue tracked in the project's issue tracker.

```diff
```diff
- <Tab.Navigator initialRouteName="Screen2">
+ <Tab.Navigator initialRouteName="Screen2" backBehavior="history">
  <Tab.Screen
    name="Screen1"
    component={Screen1}
  />
  <Tab.Screen
    name="Screen2"
    component={Screen2}
  />
</Tab.Navigator>
```
```

--------------------------------

### Fix Linting Errors

Source: https://github.com/shopify/react-native-performance/blob/main/CONTRIBUTING.md

Automatically attempts to fix code formatting and linting issues according to project standards.

```sh
yarn lint --fix
```

--------------------------------

### Add Kotlin Gradle Plugin for Bare React Native Projects

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/known-issues.md

If encountering a 'Plugin with id 'kotlin-android' not found' error during build in a bare React Native project, add the Kotlin Gradle plugin to your top-level Android `build.gradle` file. This ensures the Kotlin Android plugin is available for the project.

```gradle
buildscript {
  ext.kotlin_version = '1.6.21'
  ...

  dependencies {
    ...
    classpath('org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version')
  }
}
```

--------------------------------

### Configure Render Timeout in PerformanceProfiler

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/render-watchdog-timers.md

Set a custom render timeout for the entire application using the `renderTimeoutMillis` prop on the `PerformanceProfiler` component. This overrides the default 5000ms timeout.

```tsx
const App = () => {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    monorail.produce(convertReportToMonorailObject(report));
  }, []);

  return (
    // renderTimeoutMillis defaults to 5000ms
    <PerformanceProfiler renderTimeoutMillis={7000} useRenderTimeouts onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </PerformanceProfiler>
  );
};

```

--------------------------------

### Override Render Timeout for a Specific Flow

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/fundamentals/render-watchdog-timers.md

Provide a `renderTimeoutMillisOverride` prop to `useStartProfiler` (via navigation) to set a specific timeout for a particular flow. This value is used instead of the one set on `PerformanceProfiler`.

```tsx
onPress={uiEvent => {
  navigate(
    {
      source: NavigationKeys.EXAMPLES,
      uiEvent,
      renderTimeoutMillisOverride: 3000,
    },
    item.destination,
  );
}}

```

--------------------------------

### Track Render Pass Reports with Amplitude

Source: https://github.com/shopify/react-native-performance/blob/main/docs/docs/guides/reporting.md

Use this snippet to send render pass reports to Amplitude by calling the track function within the onReportPrepared callback of the PerformanceProfiler component. Ensure Amplitude React Native SDK is integrated.

```tsx
import {PerformanceProfiler, LogLevel} from '@shopify/react-native-performance';
import { track } from '@amplitude/analytics-react-native';



const App = () => {
...
  return (
    ...
      <PerformanceProfiler
        logLevel={LogLevel.Debug}
        onReportPrepared={report =>
            track('react_native_performance', report)
         }>
      </PerformanceProfiler>
    </>
  );
};

export default App;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.