Menu
When debugging a React website, I can view the component hierarchy using the React Developer Tools:
How can I do the same in React Native? The rage shake menu contains an 'inspector' but it only seems to let me inspect a single element by tapping it - I don't see any way to browse the full component hierarchy.
843
We create a tree-like diagram called component hierarchy. This gives us information about the parent-child relationship between components, tells us about which component renders other components and helps us to organize the overall state of the application.
This is an Example to Hide Show Component in React Native. To do this we will use a conditional operator and state. When we change the state view will re-render itself and after checking the state we will return the view or null. In this example, we are hiding and showing the image on a click of a button.
React-Native supports an attribute called testID for Views. Through Appium, this testID attribute is exposed directly as "name" when working with iOS. In those cases, the value of the testID set in React-Native will be shown directly under the name attribute eg. in the ObjectSpy.
Unfortunately, since version 0.12 of react-native, the Devtools "React" Tab does not work anymore. It's a known issue.
There's a quite active discussion on Github that has been open for a while, but no solutions yet.
UPDATE
The Devtools "React" tab still don't work in Chrome, but the latest Nuclide has it built in! (It's an IDE built on top of Atom).
With Atom installed with the Nuclide package, start your app and deactivate chrome or safari debugging.
Then, pressing Cmd+Shift+P in Atom will trigger the command palette and you can toggle the dev tools by searching for React Native Inspector:
146
This works for me using the standalone react-devtools app with React Native 0.55.
npm install -g react-devtools
react-devtools
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
