What about React Native?

[facebook]

What about React Native?

[danielbuechele]

I agree! React Native support is something we should look into. From my understanding the actual views created by React Native should already show up in the layout inspector. What we could offer, is adding React Dev Tools to Sonar as a separate plugin, showing the React components. Linking between the layout inspector with the actual views and a React plugin showing the component tree would be great.

The biggest task I see with this project, is to send the component hierarchy to the desktop. We will need to create a connection from JS to the desktop app.

[sregg]

https://github.com/infinitered/reactotron works very well with React Native.
It offers network inspection, better stack traces and redux actions/state logging and replay.
Checkout this video for more details: https://www.youtube.com/watch?v=UiPo9A9k7xc

[estevaolucas]

@axe-fb is working to make it happen 🙌.

RN 0.61.0 will come with default setup on Android. And for iOS, per discussion here facebook/react-native#26053, Yoga dependence in Layout plugin clashes with RN one's (causing a The 'Pods-xxx' target has libraries with conflicting names: libyoga.a) and it should get fixed with those two commits: facebook/react-native@82a8080 facebook/react-native@a58dd96. 🤞

Thanks @axe-fb!

[mweststrate]

We are working on standardizing this, so ideally in 0.62 Flipper should work out of the box on React Native. In a later version it will also be possible to directly integrate with Flipper from the JavaScript side of things on RN.

[mateosilguero]

I made this tutorial https://fbflipper.com/docs/getting-started.html#setup-your-react-native-app for React native integration. Currently there is no full support, but you could use some features

[carloscuesta]

React Native support would be awesome!

[trungtin]

If trying to add this pod 'Yoga','~>1.8.1', :modular_headers => true to the Podfile we stuck on #30. And when trying to install Yoga from podspec like this:

pod 'Yoga', :podspec => 'https://raw.githubusercontent.com/facebook/yoga/50e3714b21437d244e51874435953a2d011d1618/Yoga.podspec', :modular_headers => true

We stumble upon this issue The 'Pods-xxx' target has libraries with conflicting names: libyoga.a. as indeed in our Podfile we already have this:

pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"

Any idea :D?

[alioguzhan]

Since integration is being done at native level, we should be able to use this tool for React-Native projects as well. Just update related files under ios and android projects. (default react native apps, not expo!)

[TommyLeong]

Somehow the default Flipper setup on Android (RN0.61.0) does not connect my app with flipper. Guessing some dependencies weren't included on Android.

Anyway, my app has successfully integrated with Flipper following this guide. Thanks to guide from @mateosilguero !

[maxence-machu]

+1, nice projet by the way

[NSExceptional]

It isn't usually useful to inspect React Native views. There are no unique class names so everything looks the same when it's in a flat list. Not great for debugging.

That's my experience using FLEX on a RN app, anyway...

[koox00]

Even without the React devtools having a network inspector in a React native app is a great feat!

[kashishgrover]

Looking forward to this! Thanks 😄

[timsaval]

Our team would love that as well!

[kashishgrover]

@sregg already using it! 😄

[freysie]

Trying to get Flipper to work with RN 0.59 and ExpoKit, I’m getting that libyoga.a error. Does anyone know of some kind of Podfile workaround or must I wait until Expo ships with RN 0.61?

[MakhouT]

Awesome!