react-native-performance-flipper-expo-plugin

react-native-performance-flipper-expo-plugin

This is a plugin for react-native-performance-flipper To install react-native-performance for Expo, a few things need to be done in advance.

Usage (Quick Guide)

1. This plugin does not work with Expo Go, but only with a custom dev client of Expo.

2. Install the Expo Flipper plugin. Documentation can be found here: Expo Community Flipper. Install the module along with react-native-flipper:

   TL;DR: yarn add --save-dev expo-community-flipper react-native-flipper

3. Install react-native-performance with yarn add --dev react-native-flipper-performance-plugin. You can also check out React Native Performance. Please do not make the changes manual as described in the README, because thats what this plugin is for. You might need to run npx pod-install though. Before the final version is released you need to use yarn add --dev 'https://gitpkg.now.sh/bamlab/react-native-performance/flipper-native?android-expo-compatibility'

4. Install this plugin with yarn add --save-dev react-native-performance-flipper-expo-plugin

5. Add expo-community-flipper configuration to the plugins section of your app.json, as per the examples below. Please check Expo Community Flipper for further settings.

6. Add this plugin to the plugins section of your app.json after expo-community-flipper

Configuration

{
  "expo": {
    "..."
    "plugins": [
      ["expo-community-flipper"],
      ["react-native-performance-flipper-expo-plugin"]
    ]
  }
}

If you want to pick a specific flipper version or edit the configs, check https://github.com/jakobo/expo-community-flipper

Best practice

React Native Performance helps you to calculate a LightHouse Score similar to PageSpeed Insights. However, the tool is of no use to you if you cannot draw any optimizations from it. That is why it is recommended to use the plugin together with React DevTools.

The easiest way to use React DevTools is to install it as follows:

yarn add --save-dev react-devtools-core

Then open your App.tsx/App.js and import:

import { connectToDevTools } from "react-devtools-core";

if (__DEV__) {
  connectToDevTools({
    host: "localhost",
    port: 8097,
  });
}

Testing

An /example directory is built with expo init example for each major SDK release with a default eas.json file. The plugin is directly linked using expo's filepath support for config plugins. You can run expo prebuild in the directory to verify the plugin is modifying build files appropriately.

example eas.json

{
  "cli": {
    "version": ">= 0.35.0"
  },
  "build": {
    "example": {
      "releaseChannel": "default",
      "channel": "default"
    }
  }
}

example app.json

{
  "expo": {
    "...": "... standard app.json entries ...",
    "plugins": [
      [
        "./../build/withFlipper",
        {
          "Flipper": "0.123.0",
          "ios": {
            "Flipper-Folly": "2.6.10",
            "Flipper-RSocket": "1.4.3",
            "Flipper-DoubleConversion": "3.1.7",
            "Flipper-Glog": "0.3.9",
            "Flipper-PeerTalk": "0.0.4"
          }
        }
      ]
    ]
  }
}

References

• This code is based on the Flipper Getting Started Guide
• Expo Config Plugins
• [Expo Community Flipper](