Commit Graph

64 Commits

Author SHA1 Message Date
Alexsander Akers 9a2d05d9b2 Move color processing to JS
Reviewed By: @vjeux

Differential Revision: D2346353
2015-09-17 17:20:45 -07:00
Martin Konicek 42eb5464fd Release React Native for Android
This is an early release and there are several things that are known
not to work if you're porting your iOS app to Android.

See the Known Issues guide on the website.

We will work with the community to reach platform parity with iOS.
2015-09-14 18:13:39 +01:00
Eric Vicenti 6f17dba39b [ReactNative] Remove POPAnimation
Summary:
Thanks to @vjeux' work on Animated, we have transitioned away from POPAnimation entirely
2015-08-20 22:24:28 -07:00
Spencer Ahrens f1bd1cbc94 [ReactNative] cleanup native components 2015-07-24 18:54:35 -08:00
Jared Forsyth 9e4af68d91 [react-native] enable react devtools from JavascriptCore 2015-07-23 17:14:09 -08:00
Christopher Chedeau 725053acfe [Animated][BREAKING_CHANGE] Convert <TouchableOpacity> to Animated
Summary:
Because we don't want to integrate Animated inside of the core of React, we can only pass Animated.Value to styles of <Animated.View>. TouchableOpacity unfortunately used cloneElement. This means that we should have asked every single call site to replace their children to Animated.View. This isn't great.

The other solution is to stop using cloneElement and instead wrap the children inside of an <Animated.View>. This has many advantages:
- We no longer use cloneElement so we're no longer messing up with elements that are not our own.
- Refs are now working correctly for children elements
- No longer need to enforce that there's only one child and that this child is a native element

The downside is that we're introducing a <View> into the hierarchy. Sadly with CSS there is no way to have a View that doesn't affect layout. What we need to do is to remove the inner <View> and transfer all the styles to the TouchableOpacity. It is annoying but fortunately a pretty mechanical process.

I think that having a wrapper is the best solution. I will investigate to see if we can make wrappers on TouchableHighliht and TouchableWithoutFeedback as well.

**Upgrade Path:**

If the child is a View, move the style of the View to TouchableOpacity and remove the View itself.

```
<TouchableOpacity onPress={...}>
  <View style={...}>
    ...
  </View>
</TouchableOpacity>

-->

<TouchableOpacity onPress={...} style={...}>
  ...
</TouchableOpacity>
```

If the child is an Image or Text, on all the examples at Facebook it worked without any change. But it is a great idea to double check them anyway.
2015-07-20 16:44:36 -08:00
Spencer Ahrens 5d4140c513 [ReactNative] deepDiff by default 2015-07-14 17:32:25 -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
Gabe Levi b05e99a531 [Flow] Fix or suppress react-native github errors for Flow v0.12.0 2015-06-10 13:34:19 -08:00
Philipp von Weitershausen 8e2727ad52 Back out D2128859: interop with react devtools 2015-06-08 20:54:21 -08:00
Jared Forsyth d68776d5de interop with react devtools 2015-06-08 09:04:09 -08:00
Jared Forsyth 53b2c39cc0 select up and down the inspector hierarchy
Summary:
This allows you to select the displayed owner hierarchy, and see the styles,
props, and position.

@public

Test Plan:
Open the inspector, select something in the middle of the page. Click the
breadcrumb train in the inspector, and verify that:
- styles are reflected
- margin/padding/box is correct
- the highlight updates to show the selected item

See video as well.

[Video](https://www.latest.facebook.com/pxlcld/mqnl)

Screenshot
{F22518618}
2015-06-04 10:18:56 -08:00
Jared Forsyth b2b89c0b68 add style inspector + more margin + styles
Summary:
- make overlay transparent to avoid obscuring the app
- show style in the inspector pane
- show margin+padding values, also width/height and abs position

@public

Test Plan:
Open the inspector somewhere, start selecting things. You should see correct
padding, margin, and dimentions values; in addition to all style properties
enumerated.
2015-06-03 14:02:18 -08:00
Jared Forsyth 7be471d1fe visualize padding and margin in inspector
Summary:
This shows margin and padding visually when inspecting an element.

@public

Test Plan:
Go to the "UIExplorer", to the <View> page. Open the inspector, and start
selecting things. Padding and margin should be indicated. (Padding in dark
blue and margin in orange).
2015-06-03 12:49:19 -08:00
Jared Forsyth e6c04df5a1 fix bug with inspector clicking
Summary:
Previously, if you were already inspecting an element, touching again would
select a completely different element because the touch position was
calculated relative to the current overlay.

This fixes it.

@public

Test Plan:
Open the inspector, click around, verify that every click selects the thing
you clicked on.
2015-06-01 18:02:26 -08:00
Christopher Chedeau 3c1eaf7a6e [ReactNative] Fix inspect element crash 2015-05-28 10:03:06 -08:00
Spencer Ahrens a4442e4576 [ReactNative] rename nativeProps const to NativeProps 2015-05-26 19:28:07 -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
Alex Kotliarskyi 53ea27c7b8 [ReactNative] Warn when native component does not exist 2015-05-22 16:29:59 -08:00
Spencer Ahrens 11b515b1b0 [ReactNative] clean lint in all of Libraries/ 2015-05-19 13:47:04 -08:00
Luke de27f1db54 fix exception when ES6 class with no propTypes defined before calling requireNativeComponent
Summary:
Closes https://github.com/facebook/react-native/pull/1260
Github Author: Luke <kejinlu@gmail.com>

Test Plan: Created `class Foo extends React.Component` and made sure error messages were good.
2015-05-18 11:47:42 -08:00
Spencer Ahrens 4771806c44 [ReactNative] Fix some mount callback issues 2015-05-15 10:59:09 -08:00
Spencer Ahrens 6e179fb7cd [ReactNative] introduce mountSafeCallback
Summary:
`mountSafeCallback` simply wraps a callback in an `isMounted()` check to prevent crashes when old callbacks are called on unmounted components.

@public

Test Plan:
Added logging and made sure callbacks were getting called through
`mountSafeCallback` and that things worked (e.g. photo viewer rotation etc).
2015-05-13 18:36:53 -08:00
Ben Alpert a0440daf98 [react-native] Codemod .getNodeHandle, .getNativeNode to React.findNodeHandle 2015-05-13 13:24:37 -07:00
Krzysztof Magiera ff00e1496c [ReactNative] Rename ReactIOS JS module (and relatives) to ReactNative. 2015-05-13 13:24:35 -07:00
Spencer Ahrens 1ef4e00fba [ReactNative] Introduce onLayout events
Summary:
Simply add an `onLayout` callback to a native view component, and the callback
will be invoked with the current layout information when the view is mounted and
whenever the layout changes.

The only limitation is that scroll position and other stuff the layout system
isn't aware of is not taken into account.  This is because onLayout events
wouldn't be triggered for these changes and if they are desired they should be
tracked separately (e.g. with `onScroll`) and combined.

Also fixes some bugs with LayoutAnimation callbacks.

@public

Test Plan:
- Run new LayoutEventsExample in UIExplorer and see it work correctly.
- New integration test passes internally (IntegrationTest project seems busted).
- New jest test case passes.

{F22318433}

```
2015-05-06 15:45:05.848 [info][tid:com.facebook.React.JavaScript] "Running application "UIExplorerApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF"
2015-05-06 15:45:05.881 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":123,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.882 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":122,"width":50,"height":50}}
2015-05-06 15:45:05.883 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":204}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":287.5}}
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "layout animation done."
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":82,"width":50,"height":50}}
2015-05-06 15:45:09.848 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":110.5,"x":60,"width":214,"height":287.5}}
2015-05-06 15:45:09.862 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":120,"height":68}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":55,"width":50,"height":50}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":128,"x":60,"width":160,"height":337.5}}
```
2015-05-07 12:27:44 -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
Ben Alpert dd56ccb9c7 [react-native] Fix capitalization of "REact" 2015-04-27 13:52:57 -08:00
Eric Vicenti 3f723f451d [ReactNative][RFC] Yellow Box for warnings 2015-04-27 13:32:22 -08:00
Nick Lockwood 77e38b26c5 Improved RCTActivityIndicatorView and fixed some flow errors 2015-04-26 02:17:13 -08:00
Bill Fisher 357a54500e Implement transform styles, redux 2015-04-23 10:17:39 -08:00
Nick Lockwood 462224727a Reduced prop mapping overhead 2015-04-22 04:13:25 -08:00
Spencer Ahrens 58a550fa06 [ReactNative] use requireNativeComponent to clean up a bunch of boilerplate 2015-04-21 21:06:48 -08:00
Andy Street 2186691812 Revert "[ReactNative] implement transform styles" 2015-04-18 11:54:08 -08:00
Bill Fisher bd5b12c535 [ReactNative] implement transform styles 2015-04-17 22:30:21 -08:00
Spencer Ahrens 915151c5d7 [ReactNative] verifyPropTypes against native exports 2015-04-16 18:15:36 -08:00
Spencer Ahrens 764854c04a [ReactNative] introduce requireNativeComponent 2015-04-16 17:12:12 -08:00
Spencer Ahrens 54889dacf3 [ReactNative] Remove experimental Portal only needed for android right now. 2015-04-04 13:16:31 -08:00
Ben Alpert 03cf69dde1 [react-native] Nicer error for undefined or string tag names 2015-04-02 16:40:24 -08:00
Ben Alpert b2fc956858 [react-native] Fix documentation extraction for View 2015-03-31 16:20:14 -08:00
Ben Alpert d75bd44e27 [react-native] Bring React.render behavior in line with web 2015-03-31 10:52:42 -08:00
Ben Alpert 19969149ad [react-native] Support returning null from a component 2015-03-31 01:33:44 -08:00
Martin Konicek bf4bd4b08e [ReactNative] JS files for D1947217 2015-03-27 13:48:41 -08:00
Marshall Roch 7ffa7942aa flowify Libraries/ReactIOS 2015-03-25 17:09:51 -08:00
Marshall Roch 0315719507 Flowify ReactIOSEventEmitter 2015-03-25 10:10:47 -08:00
Marshall Roch 9eec8aa9d5 Flowify a bunch of Libraries 2015-03-24 18:22:05 -08:00
Marshall Roch 9a12b9c728 Flowify renderApplication 2015-03-24 11:16:19 -08:00