Commit Graph

11 Commits

Author SHA1 Message Date
Jared Forsyth 9e4af68d91 [react-native] enable react devtools from JavascriptCore 2015-07-23 17:14:09 -08:00
Jared Forsyth b54594e42b [react native] fix inspector touch bug 2015-07-10 11:53:23 -08:00
Pieter De Baets effa43926b Provide root reactTag to RootComponent and use it to resolve view controllers 2015-06-24 10:20:55 -08:00
Jared Forsyth 15907419f3 [ReactNative] refactor the inspector
Summary:
The `InspectorOverlay` component was getting unwieldy, so I broke it into three components:

- Inspector
- InspectorOverlay
- InspectorPanel

and added @flow types.

The inspector was also living under the `ReactIOS` directory, and I moved it
up into the `Libraries` directory, as the inspector will soon be usable [on
Android](https://phabricator.fb.com/D2138319).

All features of the inspector should remain functional, with the addition of
one feature:

- you can toggle "touch to inspect" by tapping the "Inspect" button at the
  bottom of the inspection panel. When inspection is disabled, the panel remains, but you can interact with
  the app normally without touches being intercepted

@public

Test Plan:
Open the inspector:

- touch to inspect things, verify that margin, padding, size and position are
  reported correctly, and that the component hierarchy is navigable.
- tap the "Inspect" button, and verify that you can interact with the app
  normally.

{F22548949}

[Video of toggling inspection](https://www.latest.facebook.com/pxlcld/mrs9)
2015-06-11 13:49:54 -08:00
Alex Kotliarskyi cfa4b13472 [ReactNative] Element Inspector
Summary:
This adds new development feature to React Native that provides information
about selected element (see the demo in Test Plan).

This is how it works:

App's root component is rendered to a container that also has a hidden layer called
`<InspectorOverlay/>`. When activated, it shows full screen view and captures all
touches. On every touch we ask UIManager to find a view for given {x,y} coordinates.

Then, we use React's internals to find corresponding React component. `setRootInstance`
is used to remember the top level component to start search from, lmk if you have a
better idea how to do this. Given a component, we can climb up its owners tree
to provice more context on how/where the component is used.

In future we could use the `hierarchy` array to inspect and print their props/state.

Known bugs and limitations:
* InspectorOverlay sometimes receives touches with incorrect coordinates (wtf)
* Not integrated with React Chrome Devtools (maybe in followup diffs)
* Doesn't work with popovers (maybe put the element inspector into an `<Overlay/>`?)

@public

Test Plan:
https://www.facebook.com/pxlcld/mn5k
Works nicely with scrollviews
2015-05-26 11:19:49 -08:00
Ben Alpert 261a0af9bb [react-native] Fix Chrome debugging
Summary:
Requiring ExceptionsManager in renderApplication (added in D2023119) led to a transitive require of ExecutionEnvironment, which has to run after InitializeJavaScriptAppEngine.

InitializeJavaScriptAppEngine is the right place for this sort of logic because we control the order that things are loaded, so move the console.error hook initialization there.

@public

Test Plan: Loaded shell app in simulator with Chrome debugging with no errors.
2015-04-30 02:16:40 -08:00
Spencer Ahrens ecf7baebea [React Native] Actually bring back console.error redboxes with disable flag 2015-04-28 14:53:36 -08:00
Eric Vicenti 3f723f451d [ReactNative][RFC] Yellow Box for warnings 2015-04-27 13:32:22 -08:00
Spencer Ahrens 54889dacf3 [ReactNative] Remove experimental Portal only needed for android right now. 2015-04-04 13:16:31 -08:00
Philipp von Weitershausen 1793712c77 [ReactNative][Android] Fix after a new React version was downstreamed 2015-03-10 14:44:05 -08:00
Spencer Ahrens efae175a8e [react-packager][streamline oss] Move open sourced JS source to react-native-github 2015-02-19 21:25:11 -08:00