Commit Graph

11 Commits

Author SHA1 Message Date
Nick Lockwood a05e05fafb Converted zIndex to integers
Summary: Converted the zIndex property on iOS to NSInteger instead of double. This is consistent with the CSS spec, and helps to simplify the Android implementation.

Reviewed By: javache

Differential Revision: D3411491

fbshipit-source-id: 902ebc29aac39a65f7e8707a28607655f9f5052c
2016-06-09 09:58:31 -07:00
Nick Lockwood d64368b9e2 Implement CSS z-index for iOS
Summary:
This diff implement the CSS z-index for React Native iOS views. We've had numerous pull request for this feature, but they've all attempted to use the `layer.zPosition` property, which is problematic for two reasons:

1. zPosition only affects rendering order, not event processing order. Views with a higher zPosition will appear in front of others in the hierarchy, but won't be the first to receive touch events, and may be blocked by views that are visually behind them.
2. when using a perspective transform matrix, views with a nonzero zPosition will be rendered in a different position due to parallax, which probably isn't desirable.

See https://github.com/facebook/react-native/pull/7825 for further discussion of this problem.

So instead of using `layer.zPosition`, I've implemented this by actually adjusting the order of the subviews within their parent based on the zIndex. This can't be done on the JS side because it would affect layout, which is order-dependent, so I'm doing it inside the view itself.

It works as follows:

1. The `reactSubviews` array is set, whose order matches the order of the JS components and shadowView components, as specified by the UIManager.
2. `didUpdateReactSubviews` is called, which in turn calls `sortedSubviews` (which lazily generates a sorted array of  `reactSubviews` by zIndex) and inserts the result into the view.
3.  If a subview is added or removed, or the zIndex of any subview is changed, the previous `sortedSubviews` array is cleared and  `didUpdateReactSubviews` is called again.

To demonstrate it working, I've modified the UIExplorer example from https://github.com/facebook/react-native/pull/7825

Reviewed By: javache

Differential Revision: D3365717

fbshipit-source-id: b34aa8bfad577bce023f8af5414f9b974aafd8aa
2016-06-07 07:43:49 -07:00
Jesse Ruder 0176ac488e Add hitSlop prop on iOS and Android
Summary:New prop `hitSlop` allows extending the touch area of Touchable components. This makes it easier to touch small buttons without needing to change your styles.

It takes `top`, `bottom`, `left`, and `right` same as the `pressRetentionOffset` prop. When a touch is moved, `hitSlop` is combined with `pressRetentionOffset` to determine how far the touch can move off the button before deactivating the button.

On Android I had to add a new file `ids.xml` to generate a unique ID to use for the tag where I store the `hitSlop` state. The iOS side is more straightforward.

terribleben worked on the iOS and JS parts of this diff.

Fixes #110
Closes https://github.com/facebook/react-native/pull/5720

Differential Revision: D2941671

Pulled By: androidtrunkagent

fb-gh-sync-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
shipit-source-id: 07e3eb8b6a36eebf76968fdaac3c6ac335603194
2016-02-16 16:51:39 -08:00
David Aurelio a26b89f8bd Add property mapping for `borderStyle` from JS to `RCTView` (iOS)
Reviewed By: nicklockwood

Differential Revision: D2540321

fb-gh-sync-id: 57316f7b8dc734ee784179dbfde83e6034827819
2015-12-01 09:00:28 -08:00
Nick Lockwood 848839858b Added mechanism for directly mapping JS event handlers to blocks
Summary:
Currently, the system for mapping JS event handlers to blocks is quite clean on the JS side, but is clunky on the native side. The event property is passed as a boolean, which can then be checked by the native side, and if true, the native side is supposed to send an event via the event dispatcher.

This diff adds the facility to declare the property as a block instead. This means that the event side can simply call the block, and it will automatically send the event. Because the blocks for bubbling and direct events are named differently, we can also use this to generate the event registration data and get rid of the arrays of event names.

The name of the event is inferred from the property name, which means that the property for an event called "load" must be called `onLoad` or the mapping won't work. This can be optionally remapped to a different property name on the view itself if necessary, e.g.

  RCT_REMAP_VIEW_PROPERTY(onLoad, loadEventBlock, RCTDirectEventBlock)

If you don't want to use this mechanism then for now it is still possible to declare the property as a BOOL instead and use the old mechanism (this approach is now deprecated however, and may eventually be removed altogether).
2015-09-02 06:11:24 -08:00
Nick Lockwood 0c61b49f0a Improved RCTCache performance + fixed border color crash
Summary:
RCTCache had really bad insertion performance when the cache was full due to having to LRU-sort the entries. This was making color
animations very slow.

I've fixed this in two ways:

1) by removing the sort and doing a linear search to remove old entries, which changes insertion perf to O(n) in the worst case instead of O(n log n) or even (n2).

2) by reducing the size of the color cache to 128 from 1024, which should be fine for normal use, without penalising animation performance.

Separately, border colors were not being retained, which caused crashes when the color cache was cleared. I've fixed that by retaining the border colors inside RCTView.
2015-07-14 04:56:25 -08:00
Georgiy Kassabli d211359aeb Added ability to set custom accessibility tap handler to React Native 2015-05-20 08:32:15 -08:00
Alex Akers a4f92ba3db [React Native] Add magic tap accessibility gesture 2015-05-19 06:28:01 -08:00
Alex Akers 86709c15cb [React Native] Support variable corner radii on RCTView 2015-05-13 13:24:37 -07:00
Alex Akers 826b56a41b [React Native] Update RCTView border implementation 2015-04-27 04:10:43 -08:00
Tadeu Zagallo 20291a02df [ReactNative] s/ReactKit/React/g 2015-03-26 02:42:24 -08:00