expo-shopify-performance v0.0.1

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 app because it requires custom native code. Follow the steps in the "Adding custom native code" 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.

Installation

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

After installing these packages, add the config plugins to the plugins array in your app.json or app.config.js:

Configuration

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

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

Or in app.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:

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
• Understanding Performance Metrics