Comments (17)
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.
from flipper.
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
from flipper.
@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!
from flipper.
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.
from flipper.
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
from flipper.
React Native support would be awesome!
from flipper.
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?
from flipper.
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!)
from flipper.
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 !
from flipper.
+1, nice projet by the way
from flipper.
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...
from flipper.
Even without the React devtools having a network inspector in a React native app is a great feat!
from flipper.
Looking forward to this! Thanks š
from flipper.
Our team would love that as well!
from flipper.
@sregg already using it! š
from flipper.
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?
from flipper.
Awesome!
from flipper.
Related Issues (20)
- LeakCanary plugin not showing anything
- Flipper's latest release's mac's aarch64 build not opening up in mac sonoma HOT 1
- Flipper
- Seeking Help with Hermes Debugger (RN) Issue HOT 2
- npx flipper-server doesn't run HOT 7
- Watchman was not found HOT 5
- Discussion: New MacOS icon for Desktop app HOT 1
- npm i fails because of requested [email protected] is not available
- Device plugin 'Hermes Debugger (RN)' is not supported by the selected device 'iPhone 15 Pro' (iOS). HOT 3
- watchman and idb not detected in default locations (macOS)
- Flipper Doctor incorrectly reports "Android Studio is not installed." when using Jetbrains Toolbox on OSX HOT 4
- Question: I accidentally deleted the Network plug-in, how to restore it HOT 2
- Homebrew has outdated version of flipper HOT 1
- While chrome not installed, does not opening flipper page on default browser (I am using ARC Browser) HOT 1
- It's empty in Install Plugin Tab for 0.239.0 HOT 4
- Flipper is Unsupported HOT 1
- Question: FS_ACCESS error when trying to exchange certificates with Pocophone F1 (and android emulators)
- Not able to record and get results from React Devtool profiler
- Question: Title: Unable to Open React Native Debugger in Chrome or DevTools & How Remove Flipper Completly
- Question: Support for React Native 0.73 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flipper.