Summary:
This PR fixes an issue with rotation decomposition matrix on android.
The issue can be illustrated with this sample code https://snack.expo.io/r1SHEJpVb
It surfaces when we have non-zero rotation in Y or X axis and when rotation Z is greater than 90deg or less than -90deg. In that case the decomposition code doesn't give a valid output and as a result the view gets rotated by 180deg in Z axis.
You may want to run the code linked above on android and iOS to see the difference. Basically the example app renders first image rotated only by 89deg and the next one by 91deg. As a result you should see the second view being pivoted just slightly more than the first image. Apparently on android the second image is completely flipped:
iOS:
Android:
The bug seemed to be caused by the code that decomposes the matrix into axis angles. It seems like that whole code has been overly complicated and we've been converting matrix first into quaternion just to extract angles. Whereas it is sufficient to extract angles directly from rotation matrix as described here: http://nghiaho.com/?page_id=846
This formula produces way simpler code and also gives correct result in the aforementioned case, so I decided not to debug quaternion code any further.
sidenote: New formula's y angle output range is now -90 to 90deg hence changes in tests.
Closes https://github.com/facebook/react-native/pull/14888
Reviewed By: astreet
Differential Revision: D5414006
Pulled By: shergin
fbshipit-source-id: 2e0a68cf4b2a9e32f10f6bfff2d484867a337fa3
Summary:
Cleanup and clarification based on my experience performing some patch releases recently.
Closes https://github.com/facebook/react-native/pull/15020
Differential Revision: D5434893
Pulled By: hramos
fbshipit-source-id: a4f65f41cd112dd3225556d7199e7c23374a1b58
Summary:
The `focusedOpacity` prop is only used inside `_opacityFocused` which is not used anywhere. This pr removes this unused code.
The code was added in https://github.com/facebook/react-native/pull/10427 but it does not appear to be used in the final version of the pr.
Closes https://github.com/facebook/react-native/pull/14984
Differential Revision: D5430611
Pulled By: shergin
fbshipit-source-id: 0bc4fdef04304eae9785caaf76ae1fb12ce6651e
Summary:
This PR fixes#15006 by removing all UI API calls from RCTScrollEvent.
`-[RCTScrollEvent arguments]` can now be called from a background thread.
The Main Thread Checker of Xcode 9 will not any longer produce runtime issues when calling this method.
1. create a React Native (version: this PR) project with a scroll view
2. open it in Xcode 9
3. launch it
4. scroll the scroll view
5. observe the runtime issues in Xcode. There should not contain "UI API called from background thread"-issues.
I verified my changes on this branch: https://github.com/HeEAaD/Demo-ReactNative-UI-not-on-main-thread/tree/fix
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15008
Differential Revision: D5424734
Pulled By: shergin
fbshipit-source-id: 56beec2d7603ea6782d55622567509f3758a4517
Summary:
Added language to explain that you still need to add keys for each section even if you use a keyExtractor method.
No code changed; just clarified documentation.
Closes https://github.com/facebook/react-native/pull/15007
Differential Revision: D5425897
Pulled By: hramos
fbshipit-source-id: db44064a28a673feeda5a6765ea45217d3ae51e2
Summary:
This was a lie, background color is not supported (yet). Sorry for the false hopes :)
Fixes#14178
Closes https://github.com/facebook/react-native/pull/15013
Differential Revision: D5424676
Pulled By: hramos
fbshipit-source-id: ea592bf633f1632c931a9f18fe2fa9ebad6136be
Summary:
This fixes support for the `backgroundColor` style prop on an `ART.Surface`.
`ARTSurfaceViewManager` inherits its `setBackgroundColor` implementation from `BaseViewManager`. This implementation broke in API 24 because API 24 removed support for `setBackgroundColor`on `TextureViews`. `ARTSurfaceView` inherits from `TextureView` so it also lost support for `setBackgroundColor`.
To fix this, the implementation of `ART.Surface's` `setBackgroundColor` was moved to the shadow node. The implementation now draws the background color on the canvas.
In a test app, verified that initializing and changing the background color on an `ART.Surface` works. Verified that the background renders as transparent when a background color isn't set. Also, this change is being used in my team's app.
Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/14117
Differential Revision: D5419574
Pulled By: hramos
fbshipit-source-id: 022bfed553e33e2d493f68b4bf5aa16dd304934d
Summary: Move the returned type of `getPolyfills` from a standard `Array` to a read-only one, so that we make sure the array is not modified once created. Also, refactor the list of polyfills included by default to a generic, central file, then require it both from the CLI utils as well as the development server.
Reviewed By: jeanlauliac
Differential Revision: D5406553
fbshipit-source-id: ab980288bb1c625338de469da77dd6fc70bcedbc
Summary:
The invariant condition doesn't allow scrolling to the last index
Here is a simple reproduction of the problem: https://snack.expo.io/BJ59gzWrZ
Surely, if the last item is rendered, we should be able to scroll to it without an invariant failing?
Tested locally that this change fixes the issue.
Closes https://github.com/facebook/react-native/pull/14934
Differential Revision: D5414535
Pulled By: shergin
fbshipit-source-id: 38dac4c0e2ae5e1e199a67ca0e98e8f7325e77f4
Summary:
This PR fixes#14975.
* Podspec: add InspectorInterfaces.h/cpp to the "jschelpers_legacy" subspec.
1. lint the Podspecs: `./scripts/process-podspecs.sh`
2. check that an iOS project can integrate "DevSupport" via Cocoapods again. I'll already checked it on this branch of the demo project: https://github.com/HeEAaD/Demo-ReactNative-0.47.0-rc2-Podspec-issue/tree/fix
Closes https://github.com/facebook/react-native/pull/14988
Differential Revision: D5411733
Pulled By: javache
fbshipit-source-id: bb46cf3461e0857c7508264dafa204067af182c6
Summary:
It is quite confusing that the 'data:' uri scheme is not documented, but working.
It is very useful when getting e.g. an icon from a REST call.
Also, the mandatory size style for network & data images should be mentioned here, not only in the image guide.
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/14826
Differential Revision: D5401671
Pulled By: hramos
fbshipit-source-id: 8f1f28a94095eeaccae9234e059e0983ba3556b2
Summary:
It's very important in complex UIs to be able to apply alpha channel-based masks to arbitrary content. Common use cases include adding gradient masks at the top or bottom of scroll views, creating masked text effects, feathering images, and generally just masking views while still allowing transparency of those views.
The original motivation for creating this component stemmed from work on `react-navigation`. As I tried to mimic behavior in the native iOS header, I needed to be able to achieve the effect pictured here (this is a screenshot from a native iOS application):
In this image, there are two masks:
- A mask on the back button chevron
- A gradient mask on the right button
In addition, the underlying view in the navigation bar is intended to be a UIBlurView. Thus, alpha masking is the only way to achieve this effect.
Behind the scenes, the `maskView` property on `UIView` is used. This is a shortcut to setting the mask on the CALayer directly.
This gives us the ability to mask any view with any other view. While building this component (and testing in the context of an Expo app), I was able to use a `GLView` (a view that renders an OpenGL context) to mask a `Video` component!
I chose to implement this only on iOS right now, as the Android implementation is a) significantly more complicated and b) will most likely not be as performant (especially when trying to mask more complex views).
Review the `<MaskedViewIOS>` section in the RNTester app, observe that views are masked appropriately.
Closes https://github.com/facebook/react-native/pull/14898
Differential Revision: D5398721
Pulled By: javache
fbshipit-source-id: 343af874e2d664541aca1fefe922cf7d82aea701
Summary:
Conflict in the project name in package.json and index.xxx.js
<!--
Thank you for sending the PR!
If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!
Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.
Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/14940
Differential Revision: D5398809
Pulled By: hramos
fbshipit-source-id: 0ed12e8a39e5c477594396b4b781acd8a93f429d
Summary:
<details>
Thanks for submitting a PR! Please read these instructions carefully:
- [ ] Explain the **motivation** for making this change.
- [ ] Provide a **test plan** demonstrating that the code is solid.
- [ ] Match the **code formatting** of the rest of the codebase.
- [ ] Target the `master` branch, NOT a "stable" branch.
Please read the [Contribution Guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md) to learn more about contributing to React Native.
</details>
_What existing problem does the pull request solve?_
On Linux, the packager caught an "Google Chrome exited with error: { Error: spawn google-chrome ENOENT}" when trying to launch the devTools because google-chrome is not installed but chromium is.
Thus, this pull request maps the platform Linux with chromium for launching the debugger automatically in the packager
_A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI or updates the website._
- enter on terminal
> react-native start
- launch the app in dev mode with "Debug JS remotely" enabled
- the packager prints "Launching Dev Tools..." and launch chromium with the debugger
Closes https://github.com/facebook/react-native/pull/14696
Differential Revision: D5398564
Pulled By: hramos
fbshipit-source-id: 151f83b549492c8716a248eb16f7e24c5658b32e
Summary:
Also: move `Button` down to UI, and `StyleSheet` up to Basic Components.
Closes https://github.com/facebook/react-native/pull/14405
Differential Revision: D5209838
Pulled By: hramos
fbshipit-source-id: ffcd3a146a5c277f8d7e824c9a7595d2e7b720ae
Summary:
New a Path instance will cause a slice call to exist path.
```js
// react-native/Libraries/ART/ARTSerializablePath.js
if (path instanceof SerializablePath) {
this.path = path.path.slice(0);
}
```
Most of d3's APIs can set context when we don't want to use d3's build-in path object. And in RN envirenment, we must use RN's path instance. So we can use RN's path as a context in d3 avoiding doing conversions from svg's path string to arrays. But with existing code, when Shape receive a `d` proprety, it new a path instance and will cause calling slice in a very large array.
Typical usage is as follows
```js
import React from 'react';
import { View, ART } from 'react-native';
import { line } from 'd3-shape';
import { scaleLinear } from 'd3-scale';
const { Path, Surface, Shape } = ART;
const width = 360;
const height = 300;
const data = [5,2,7,6,9,1,8,4,3];
const x = scaleLinear().range([0, width]).domain([0, data.length]);
const y = scaleLinear().range([height, 0]).domain([0, 9]);
const myline = line()
.x(function(d, i) {
return x(i);
})
.y(function(d) { return y(d); });
// use RN's ART Path
const path = Path();
myline.context(path)(data);
class TestArt extends React.Component {
render() {
return (
<View>
<Surface width={width} height={height}>
<Shape
stroke="red"
d={
// use RN's ART Path
path
// use d3's path
// myline(data)
}
/>
</Surface>
</View>
);
}
}
```
Closes https://github.com/facebook/react-native/pull/14551
Differential Revision: D5398653
Pulled By: javache
fbshipit-source-id: 1264acfb8844b60584604a664e0474f9e212d1d1
Belal Sejouk
Krzysztof Magiera
Héctor Ramos
Pieter De Baets
Miguel Jimenez Esun
Eli White
levi serebryanski
Steffen Matthischke
Yu Wang
Aaron Chiu
Nivetha Singara Vadivelu
Dean G
Janic Duplessis
Paco Estevez Garcia
Brian Vaughn
Adam Comella
Maarten Schumacher
Christian Brevik
Tieme van Veen
Brooks Lyrette
Georgiy Kassabli
James Ide
Felix Oghina
harry-g
Adam Miskiewicz
Raj Suvariya
Valentin Shergin
gabriel
Liu Zhanhong
