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
Summary:First I searched for special cases that destructor PropTypes:
```
(?s)React\s*=\s*require\('react\-native'\).*(Children|PropTypes)[^\{\}]*\}\s*=\s*React;
```
I split them up manually.
Then I replaced the React = require('react-native') + destructuring pattern...
```
(?s)(const|var)\s+React\s*=\s*require\('react\-native'\)(.*[^\{\}]*\}\s*=\s*)React;
```
...with...
```
$1 React = require('react');
$1 ReactNative = require('react-native')$2ReactNative;
```
I used lint to figure out if I left some unnecessary imports.
Finally I grepped for just
```
React\s*=\s*require\('react\-native'\)
```
to catch any remaining patterns.
Also, `} = React.NativeModules` -> `} = ReactNative.NativeModules`.
Reviewed By: spicyj
Differential Revision: D3158991
fb-gh-sync-id: f97e8e921e193d6ea1a49d8d1bf3f09be7bed5c3
fbshipit-source-id: f97e8e921e193d6ea1a49d8d1bf3f09be7bed5c3
Summary:
Support dashed and dotted border styles on iOS
public
Reviewed By: nicklockwood
Differential Revision: D2773579
fb-gh-sync-id: f4b99943f38e849602295a86bdb1780c0abbc8e8
- [ReactNative] Use deprecated ix in TabBarExample | Amjad Masad
- [ReactNative] Expanded license on obj-c files | Christopher Chedeau
- [ReactNative] Expanded license on js files | Christopher Chedeau
- [ReactNative] Fix React Devtools integration | Alex Kotliarskyi
- [Text] Account for font leading so descenders are not clipped | James Ide
- [ReactNative] Expanded license on js packager files | Christopher Chedeau
- more UIExplorer flow | Basil Hosmer
- [react-packager] Pick up package changes while running | Amjad Masad
- Added a graph view and a ReactNative metric that displays current queue and execution time for the JS thread. | Bryce Redd
- [ReactNative] Add NativeModules and DeviceEventEmitter to react-native exports | Alex Kotliarskyi
Nick Lockwood
Sokovikov
Konstantin Raev
Sebastian Markbage
Milen Dzhumerov
Mike Armstrong
Rui Chen
Tadeu Zagallo
Christopher Chedeau
Alex Kotliarskyi
Ben Alpert
