# Expo Shopify Performance Plugin

This Expo Config Plugin automatically configures the native initialization for the `@shopify/react-native-performance` package in your Expo project.

This project cannot be used with an [Expo Go](https://docs.expo.dev/workflow/expo-go/) app because it requires custom native code. Follow the steps in the ["Adding custom native code"](https://docs.expo.dev/workflow/customizing/) guide to create your own development build or prebuild your native projects.

This plugin automatically configures your native code when it's generated (e.g. with `npx expo prebuild`) so that it can be used with [react-native-performance](https://github.com/shopify/react-native-performance).

## Installation

```bash
npx expo install @shopify/react-native-performance expo-shopify-performance
```

After installing these packages, add the [config plugins](https://docs.expo.dev/guides/config-plugins/) to the [`plugins`](https://docs.expo.dev/versions/latest/config/app/#plugins) array in your `app.json` or `app.config.js`:

## Configuration

Add the plugin to your `app.json` or `app.config.js`:

```js
// app.config.js
module.exports = {
  expo: {
    plugins: [
      "expo-shopify-performance"
    ]
  }
}
```

Or in app.json:

```json
{
  "expo": {
    "plugins": ["expo-shopify-performance"]
  }
}
```

## Usage

After installing the plugin and rebuilding your app, you only need to add the JavaScript component in your app:

```jsx
import React, { useCallback } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { PerformanceProfiler, RenderPassReport } from '@shopify/react-native-performance';

export default function App() {
  const onReportPrepared = useCallback((report: RenderPassReport) => {
    // Send performance data to your analytics service
    console.log('Performance report:', report);
  }, []);

  return (
    <PerformanceProfiler onReportPrepared={onReportPrepared}>
      <NavigationContainer>
        {/* Your app content */}
      </NavigationContainer>
    </PerformanceProfiler>
  );
}
```

## Requirements

- Expo SDK 52 or higher
- @shopify/react-native-performance package

## How It Works

This plugin modifies your native code during the prebuild process to:

- **iOS**: Adds the necessary import and initialization code to your AppDelegate
- **Android**: Adds the necessary import and initialization code to your MainApplication

This saves you from having to manually modify native code to use the Shopify Performance library.

## Additional Resources

- [Shopify React Native Performance Documentation](https://github.com/Shopify/react-native-performance)
- [Understanding Performance Metrics](https://shopify.github.io/react-native-performance/)