Using Flipper with existing React Native Apps todayIf you are using a version of React Native lesser than 0.62, you would have to follow these steps to enable Flipper. These steps are applicable to both existing brownfield and greenfield React Native projects, and projects created from the command line.
This is mostly due to conflicting versions of Yoga. React Native ships Yoga as a part of the repo, while Flipper picks it up from gradle/cocoapods.
Note that these issues have been resolved in the master branch.
The code in the video is also available in a commit that can be used as a reference for integration.
AndroidAssuming <your_rn_app> is the root of your react native project,
- Create a new file called in <your_rn_app>/android/src/debug/java/com/your/package/name/ReactNativeFlipper.java and copy the contents from here. This class is responsible for initializing and adding all the plugins needed. This file is added to the "debug" folder since we don't want Flipper to be packaged in our production app.
- In <your_rn_app>/android/src/main/java/com/your/package/name/MainApplication.java
- Add this new function and its imports. This function uses reflection to ensure that Flipper is not bundled in the production copy of your app.
- In the onCreate method, add initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); to start Flipper.
- In <your_rn_app>/android/app/build.gradle, inside dependencies section, add these lines for including Flipper in the project. Note that in the dependencies, we exclude some dependencies like Yoga since we want to use the version of Yoga that is packaged with React Native.
iOSThe iOS integration is a little tricky since there is no simple way to exclude Yoga from cocoapods. I have fixed this issue using two diffs (1, 2).
- Patch React Native with my changes by running this gist of find/replace of shell commands.
- Make the changes from this commit to the <your_rn_app>/ios/Podfile and <your_rn_app>/ios/app_name/AppDelegate.m
- Run pod install to install the additional cocoapods for flipper
- Run the app
You can also check out the sample RNTester app that has flipper integration and could use the commits for Android and iOS as examples for integrating.
Flipper by DefaultFixes for the conflicts due to different versions of Yoga are solved and are in master. This means that the new templates come with files like ReactNativeFlipper.java.
Hence, for versions of React Native >= 0.62
- For Android, simply add initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); to MainApplication.java's onCreate method.
- For iOS, add [AppDelegate initializeFlipper:application]; as the first line in AppDelegate.m's didFinishLaunchingWithOptions method.
Alternatively, you can use react native from source and update your package's dependency of react-native to point to github:facebook/react-native#master instead of a specific version.
- Create a plugin that can help visualize React Performance. similar to the diagram from a previous conference talk.
- Work with the community on adding more plugins (like redux, redux-saga, mobx, etc.) to make the React Native developer experience even better !!