Integrate Flipper
under review
Greg
Integrating Flipper would really help in debugging apps. Flipper is now baked into RN v0.62. Let's get this bad boy into the next expo SDK!
Fábio Alvarenga
Just linking it here, it's already on Expo's blog, Jakob Heuser provides a great initial integration: https://blog.expo.dev/developing-react-native-with-expo-and-flipper-8c426bdf995a
Evan Bacon
under review
You can use the "React Native" section of Flipper with Expo Go and Expo Dev Client (been possible for a while): here's how.
However Flipper, in its current state, is not a great fit for Expo: here's why.
If someone wants to improve Flipper, here is a good place to start desktop/app/src/dispatcher/metroDevice.tsx
We haven't added the native Flipper pod to Expo Go iOS yet afaik because it breaks frequently.
Eddie Kollar
Evan Bacon: Looks like the codebase has changed since this post. Any ideas if Flipper has updated in ways to make it a better fit for Expo?
A
Alejandro Gutiérrez
Evan Bacon: Is this working with Flipper plugins? I assume not as they are underlying on react-native-flipper as dependancy.
Rajendran Nadar
Evan Bacon: Any update??? Plzz 🥲🥲
Victor
Evan Bacon: Okay, but how debugging ? Like network requests?
Victor
react-native-debugger have errors with send file with formData
A
AzureKnight876
Victor: Flipper shows network requests for me.
Ruslan Koryakin
It is already possible, just with additional steps.
For those who will find it in google like i am.
Next steps:
1)
npx crna -t with-dev-client
2) yarn add expo-cli
3) yarn android
Explanation
#1 will install RN expo app with dev-client.
#2 will add CLI, in case if your system is less then 41
#3 will initiate build of dev client.
Replace
yarn
with npm
in case if you not have yarn.Launch flipper and enjoy.
UPDATE:
Forgot to mention. To do the above you need to have SDK & Java to build dev client.
Fernando Rojo
With Expo SDK 41, this should be achieved with a config plugin.
Seanmclem
Fernando Rojo: please elaborate
Ruslan Koryakin
Seanmclem: Check my reply above how to set it up :). Config is no need since RN expo already have flipper in android at least.
Michael Wood
Seanmclem: He's talking about this: https://docs.expo.io/guides/config-plugins/
The Expo team is still working to remove the differences between the bare and managed workflows. Config plugins are part of that.
For an example of a library that has been updated with a config plugin, see here: https://github.com/react-native-voice/voice#prebuild-plugin
Ruslan Koryakin
Michael Wood: He is definitely not even checked docs. So it highly misleading. The first thing on
config-plugins
is:"The Expo Go app doesn't support custom native modules.".
So you must to eject to use it.
The proper solution is to build dev client since it alternative to "Expo Go" but with your modules. Original published/release "Expo Go" not have flipper or other modules enabled. But dev client they provide have it enabled right on start.
Fernando Rojo
Ruslan Koryakin: The dev client is required to use config plugins locally if you don't eject. Your example above doesn't look sufficient to me. Don't we have to uncomment the Podfile to enable Flipper? I tried this, but it still doesn't work for me. I have the dev client installed in my app.
I've only tried on iOS, but I haven't managed to get it working yet. Haven't tried Android, though.
Fernando Rojo
Also, no, you do not need to "eject to use it." The new dev client lets you generate a custom Expo Go app for your project, which includes any native code you want. Running expo prebuild configures your native project for you, and takes into account your config plugins. After that, you can run 'expo start --dev-client', as if you were in the managed workflow, but with custom native code.
You can stay in the "managed" workflow (ie you can gitignore /ios and /android folders) and configure everything from your app.config.js folder.
Ruslan Koryakin
Fernando Rojo: I don't have any mac around to check at the moment, but for Android for fresh app you no need to enable Flipper separately, it is already enabled in dev client. Of cos in case if you build client. Attached screen with example.
Ruslan Koryakin
Fernando Rojo: About eject, that's wording issue probably. See, to build
dev client
you need to literally build it, which means so you need to have all build infrastructure and ideally for both platforms. Which is exactly eject in my opinion, yup temporary but still, since expo
not handles build for you, so it not managed anymore. Yes once you have that dev client
you can just reuse it and stay
in managed workflow, but you still need to build it once.UPDATE: Alternatively at least from documentation you can build dev client with EAS, but I'm not tested that one.
Fernando Rojo
This would be nice to allow remote debugging with Reanimated v2. At the moment, Reanimated 2 doesn't allow remote debugging, so you have to use the terminal console logs: https://github.com/software-mansion/react-native-reanimated/issues/1127#issuecomment-772868632
W
Wayne Dunkley
I have not yet used Flipper but I can definitely see a benefit for it. I have used React Native Debugger for all my debugging purposes for quite some time and it has been indispensable to my development process. But with the imminent official release of Reanimated 2, and its use of Turbo Modules, I have had to start looking for something else as I will no longer be able to use RND. I have currently turned to Reactotron for debugging but as this is not actively maintained I can't see me relying on this for the future. This brings me full circle back to Flipper. It appears that this will cover all of our development needs and from what I can tell will work with Turbomodules enabled and does not rely on remote debugging. For this reason, I strongly think that Flipper added to the roadmap. Because what use are having all these other amazing features added if we can't debug them??
Evan
Flipper would allow debugging JS with Turbomodules enabled - right now with Reanimated2 in use, Flipper is the only way to debug.
Anna Maste
I'm using React Query (https://react-query.tanstack.com/) pretty extensively and love it, but it doesn't have a plugin for react native debugger, only for Flipper. I'm sure there are other 3rd party libraries out there that are similar, so Expo support for Flipper would really open up things.
p
That will be Great
R
Rafael Morais
This would be amazing :) Please take this into consideration
Load More
→