Podfile Modification for Flipper using @expo/config-plugins

README.md

Flipper Config Plugin

This is a companion piece to the article https://blog.expo.dev/developing-react-native-with-expo-and-flipper-8c426bdf995a in case you are running a managed build on EAS.

You'll need to add the expo config plugins to your dependencies: yarn add @expo/config-plugins

⚠️ This uses plugins.withDangerousMod which means you will need to reverify this file with each expo SDK release. This is because we are modifying our Podfile directly and doing so requires certain strings to exist as reference points in the Expo template. That said, the worst that happens is that your app will not include Flipper.

If you'd like to create an /eas directory and put flipper-expo.js there, you can do that and update app.config.json and the require for package.json (Line 9 of flipper-expo.js) accordingly.

How it Works

1. Reads your app's Podfile based on the EAS Managed Workflow template located at ${config.modRequest.platformProjectRoot}/Podfile
2. Verifies you've got flipper in your package.json & it's pinned to a specific version
3. Merges the useFlipper!() call into the podfile, using a version that matches the version specified in your package.json
4. Merges the post_install for Flipper into the post-install step of your Podfile

These techniques are based on the Google Maps Config Plugin which has to do similar modifications to the Podfile.

app.config.json

{
  "expo": {
    "plugins": [
      "./flipper-expo"
    ]
  }
}

flipper-expo.js

const plugins = require("@expo/config-plugins");
const {
  mergeContents,
} = require("@expo/config-plugins/build/utils/generateCode");
const fs = require("fs");
const path = require("path");

// if you move flipper-expo, update this to point to your package.json file
const pjson = require("./package.json");

let FLIPPER_VERSION;
if (pjson && pjson.dependencies && pjson.dependencies["react-native-flipper"]) {
  const v = pjson.dependencies["react-native-flipper"];
  if (/[^\d.]/.test(v)) {
    throw new Error(
      `flipper-expo requires an explicit flipper version such as 0.123.0. You listed ${v} in your package.json`
    );
  }
  FLIPPER_VERSION = v;
}

function isFlipperInstalled() {
  return !!FLIPPER_VERSION;
}

function isFlipperLinked() {
  // TODO: Autolink detection when supported
  return true;
}

module.exports = function withFlipper(config) {
  return plugins.withDangerousMod(config, [
    "ios",
    async (config) => {
      const filePath = path.join(
        config.modRequest.platformProjectRoot,
        "Podfile"
      );
      const contents = fs.readFileSync(filePath, "utf-8");
      const installed = isFlipperInstalled();
      const linked = isFlipperLinked();

      if (!installed || !linked) {
        return config;
      }

      // https://react-native-community.github.io/upgrade-helper/?from=0.63.0&to=0.64.2
      const enableFlipper = mergeContents({
        tag: "flipper",
        src: contents,
        newSrc: `  use_flipper!()`,
        anchor: /#\s*use_flipper!\(/i,
        offset: 0,
        comment: "#",
      });

      if (!enableFlipper.didMerge) {
        console.log(
          "ERROR: Cannot add react-native-flipper to the project's ios/Podfile because it's malformed. Please report this with a copy of your project Podfile."
        );
        return config;
      }

      fs.writeFileSync(filePath, enableFlipper.contents);

      return config;
    },
  ]);
};