Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jakobo/expo-community-flipper

Flipper Support for Expo Apps in React Native
https://github.com/jakobo/expo-community-flipper

android config-plugin debugging expo flipper flipper-plugin ios react-native

Last synced: about 18 hours ago
JSON representation

Flipper Support for Expo Apps in React Native

Host: GitHub
URL: https://github.com/jakobo/expo-community-flipper
Owner: jakobo
License: mit
Created: 2021-12-03T20:51:25.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2023-05-31T22:57:16.000Z (over 1 year ago)
Last Synced: 2024-11-09T18:09:51.557Z (10 days ago)
Topics: android, config-plugin, debugging, expo, flipper, flipper-plugin, ios, react-native
Language: TypeScript
Homepage: https://www.npmjs.com/package/expo-community-flipper
Size: 1.89 MB
Stars: 100
Watchers: 2
Forks: 8
Open Issues: 2
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # expo-community-flipper

Flipper Support for Expo Apps <= SDK 47

> 🎉 As of Expo 48, Flipper support is available via the official build-properties plugin, with a simpler interface and proper support! [read the docs](https://docs.expo.dev/versions/latest/sdk/build-properties/) [announcement](https://twitter.com/jakobo/status/1629531998262837249?s=20)


> If you're running into issues with the official build-properties plugin, [check for an existing issue](https://github.com/expo/expo/issues?q=flipper+label%3A"Development+Builds")

> ⚠️ (SDK 46, 47) Please see [this issue](https://github.com/jakobo/expo-community-flipper/issues/27) about known compatibility issues with other plugins.



> The remainder of this README applies to installing expo-community-flipper for SDK 47 and earlier.

# Usage (Quick Guide)

**1.** Install this module: `yarn add expo-community-flipper`

**2.** Add `expo-community-flipper` configuration to the `plugins` section of your `app.json`, as per the examples below. You have the option to specify the version of Flipper, though the one built in with React Native is (usually) sufficient.

If you don't specify anything, `expo-community-flipper` will default to the version of Flipper bundled with the version of React Native you're currently using.

# Configuration

```ts

type FlipperOptions =

  | undefined // take the default options for the entire plugin

  | string // sets .version and takes defaults for all nested options

  | {

      version?: string; // sets the flipper version to build against (defaults to undefined, uses react-native bundled version)

      ios?:

        | boolean // sets .ios.enabled and takes defaults for all nested options

        | {

            enabled: boolean; // enable flipper for iOS (default true)

            stripUseFrameworks?: boolean; // strip instances of use_frameworks from the Podfile (default false)

          };

      android?:

        | boolean // sets .android.enabled and takes defaults for all nested options

        | {

            enabled: boolean; // enable flipper for Android (default true)

          };

    };

```

Configuration of this plugin is done in `app.json`. all configurations are optional with defaults designed to minimize the chances of your build breaking.

```json

{

  "expo": {

    "..."

    "plugins": [

      "expo-community-flipper"

    ]

  }

}

// or configured (See FlipperOptions above):

{

  "expo": {

    "..."

    "plugins": [

      ["expo-community-flipper", FlipperOptions]

    ]

  }

}

```

## Disabling Flipper in CI (>= 45.1.0)

🛠️ 47.0.1 expo-community-flipper now supports the standard `ENV['NO_FLIPPER'] == 1` flag to disable flipper. You may also simply omit this plugin via `app.config.js` when building a production version of your app, as Flipper is not enabled by default.

> 📜 Prior to 47.0.1, Flipper was disabled using `ENV['FLIPPER_DISABLE'] == "1"`. This is still supported, but deprecated in favor of the emerging standard from the react-native team. In production, Flipper is automatically disabled by the react-native framework, but see [this issue](https://github.com/jakobo/expo-community-flipper/issues/49) regarding a possible regression in upstream react-native/flipper.

# Windows Users + Hermes

> As of right now, using Windows with the Hermes engine requires you to run your app inside of a WSL environment. [The tracked issue is here](https://github.com/jakobo/expo-community-flipper/issues/4) and if you have a `Podfile`, please let me know. It's likely an upstream issue, but we're continuing to look at build artifacts in case we spot something that may resolve this issue.

# Versions

Starting with Expo SDK 46, Flipper manages its own compatibility layer (though it can be upgraded by specifying a version of Flipper that you want). Prior to SDK 46, we recommended running Flipper @ `0.123.0` as it had the widest range of compatibility with devices and simulators.

This package follows [expo's policy for the deprecation of old SDKs](https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/). It's **MAJOR** version tracks against the Expo SDK version, making it easy to spot compatibility differences in your package.json file.

# 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**

```json

{

  "cli": {

    "version": ">= 0.35.0"

  },

  "build": {

    "example": {

      "releaseChannel": "default",

      "channel": "default"

    }

  }

}

```

**example app.json**

```json

{

  "expo": {

    "...": "... standard app.json entries ...",

    "plugins": [["./../build/withFlipper", "0.158.0"]]

  }

}

```

# References

- This code is based on the [Flipper Getting Started Guide](https://fbflipper.com/docs/getting-started/react-native/)

- [Expo Config Plugins](https://docs.expo.dev/guides/config-plugins/)

- [Using the latest Flipper SDK](https://fbflipper.com/docs/getting-started/react-native/#using-the-latest-flipper-sdk)

- [React Native Community's Typescript Template](https://github.com/react-native-community/react-native-template-typescript/tree/main/template)

## Contributors ✨

[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
_{Jakob Heuser}
💻

      
_gregfenton
📖

      
_AronBe
📖

      
_rlam3
📖

      
_Slapbox
🐛

      
_{Jeremy Gollehon}
🐛

      
_{Nikola Kalinov}
🐛

    

    

      
_{Kudo Chien}
📖 💬 💻

      
_{Maxence Gilliot}
💬

      
_{Andrew Gerber}
🐛

      
_{Pim Knops}
🐛

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!