Reactotron_Flipper.md

Download Flipper

Download watchman and add the \bin to the PATH the install openssl

choco install openssl

Download Reactotron

npm install react-native-flipper
npm install --save-dev reactotron-react-native
npm install @react-native-community/async-storage

//ReactotronConfig.js

import Reactotron from "reactotron-react-native";
import ReactotronFlipper from "reactotron-react-native/dist/flipper";
import AsyncStorage from "@react-native-community/async-storage";

Reactotron.setAsyncStorageHandler(AsyncStorage)
  .configure({
    name: "AppName",
    createSocket: (p) => new ReactotronFlipper(p),
  })
  .useReactNative()
  .connect();

In App.tsx add

if (__DEV__) {
  import("./ReactotronConfig").then(() => {
    console.log("Reactotron Configured");
  });
}

In android/app/build.gradle add

defaultConfig {
    multiDexEnabled true
}

In AndroidManifest.xml add

<activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity"
        android:exported="true"/>

Set up port forwarding

adb reverse tcp:9090 tcp:9090

Useful commands

adb reverse --list
adb kill-server
adb start-server
adb forward --remove-all

Get-Process -ID (Get-NetTCPConnection -LocalPort 8088).OwningProcess

npx react-devtools

Talks

Flipper: The Extensible DevTool Platform for React Native - Michel Weststrate aka @mweststrate

Flipper: The Extensible DevTool Platform for React Native - Michel Weststrate

Issues

facebook/react-native#31179 Xcode 12.5 troubleshooting guide (RN 0.61/0.62/0.63/0.64)