Commit Graph

15 Commits

Author SHA1 Message Date
Nicolas Charpentier 0cce0a62c1 Add backface-visibility support on Android (#15970)
Summary:
`backfaceVisibility` was only available on iOS and 3D transformations were lacking on Android.

Backface Visibility is computed from ~the decomposed matrix of transform prop~ the view with their rotation degree values.

~`MatrixDecompositionContext` properties have been made public so we can access to decomposed matrix values from outside (`ReactViewGroup`).~

I'm not sure if this is the best implementation, so if it's not let's discuss it.

cc janicduplessis foghina

Tested in https://github.com/charpeni/react-native-backface-visibility.

| Before | Now |
| - | - |
| <img src="https://user-images.githubusercontent.com/7189823/30123717-e5361598-9300-11e7-8e2e-a87a7a8d896a.gif" width="260" /> | <img src="https://user-images.githubusercontent.com/7189823/30514997-4d203572-9aee-11e7-8542-bfde41678eb6.gif" width="244" /> |

| iOS | Android |
| - | - |
| <img src="https://user-images.githubusercontent.com/7189823/36995899-609513b4-2083-11e8-9834-ee44c1a292e1.gif" width="300" /> | <img src="https://user-images.githubusercontent.com/7189823/36995978-9ed3b158-2083-11e8-841e-b9e3357d2509.gif" width="240" /> |

[ANDROID] [FEATURE] [ReactViewGroup] - Add backface-visibility support on Android
Pull Request resolved: https://github.com/facebook/react-native/pull/15970

Differential Revision: D9411130

Pulled By: hramos

fbshipit-source-id: 62f646a4de37d83922286cb98893a95b55fa889e
2018-09-07 10:26:20 -07:00
Valentin Shergin a534672e13 Fixed problem in Text measurent on iOS
Summary: See the comment it code.

Reviewed By: mmmulani

Differential Revision: D7074168

fbshipit-source-id: e6eda9a47552142ccb0ba8e7bd9a103b0cb4f9f9
2018-02-25 09:37:38 -08:00
Valentin Shergin 114c258045 Enabling round-to-pixel Yoga feature for RN (iOS)
Summary:
This change enables built-in Yoga mechanism which rounds producing layout metrics to closest "pixel" values.
See previous diff for more context.

Reviewed By: fkgozali

Differential Revision: D6889762

fbshipit-source-id: bc2eea44704db4b377e2e14fab9f67be8c935719
2018-02-05 22:17:22 -08:00
Douglas Lowder a63fd378a4 Link both iOS and tvOS libraries with react-native link (fix #13783)
Summary:
Fix issues with the react-native CLI when linking iOS and tvOS libraries to a project created with `react-native init`. (#13783)

Verified the changes against test project at https://github.com/dlowder-salesforce/react-native-link-test.  Both `react-native link react-native-svg` and `react-native unlink react-native-svg` work correctly on this project.  Added new unit test for the new file added to `local-cli/link/ios`.

[CLI] [BUGFIX] `react-native link` has been fixed to correctly link iOS and tvOS targets.
[IOS] [BUGFIX] `react-native link` has been fixed to correctly link iOS and tvOS targets.
Closes https://github.com/facebook/react-native/pull/17231

Differential Revision: D6837567

Pulled By: hramos

fbshipit-source-id: 234d3d3966ae1b89cd16a37c95d303553f7ba5f5
2018-01-30 16:28:59 -08:00
Valentin Shergin 8c8944c10f Removing `inherited background color` optimization from RCTText
Summary:
This is a long story. Awhile ago awesome Nick Lockwood (Hey Nick!) introduced a special optimization for ReactNative rendering layer called "inherited background color".
He described this idea in D2811031:
>>>
Blending semitransparent pixels against their background is fairly a fairly expensive operation on mobile GPUs. To reduce blending, React Native has a system called "background color propagation", where the background color of parent views is automatically inherited by child views unless explicitly overridden. This means that translucent pixels can be blended directly against a known background color, avoiding the need to do this dynamically on the GPU.
In practice, this is only useful for views that do their own drawing, which is basically just <Image/> and <Text/> components, and for image components it only really matters when the image has an alpha component.
The automatic background propagation is a bit of a hack, and often does the wrong thing - for example if a view overflows its bounds, or if it overlaps a sibling, the background color will often be incorrect and need to be manually disabled. Because the only place that it provides a significant performance benefit is for text, this diff disables the behavior for everything except <Text/> nodes. It might still be useful for <Image/> nodes too, but looking through the examples in UIExplorer, the number of places where it does the wrong thing for images outnumbers the cases where it provides significant reduction in blending.

However. I think it is time to remove it. Why? There are several reasons:

* It drastically complicates rendering layer. DRASTICALLY. In many many unrelated places (try search for "backgroundColor"!);
* This mechanism is totally non-conceptual to RN and it prevents us to implement some new possible render optimization that we plan to do;
* This adopted only by two components now: Text and ART;
* This is not a significant performance drain anymore; from iOS 6 even UILabel has clear background color by default.
* I doubt that it even works now because `drawRect:` in Text component does not call super method.

So, this diff just turns this feature off for Text. If all performance metrics are neutral, I will delete this mechanism.
Peace.

Reviewed By: sahrens

Differential Revision: D6564199

fbshipit-source-id: 70524fdd955ca32bbf86d2d1ff5e73316b791219
2017-12-15 12:31:58 -08:00
Valentin Shergin a32e1cfffb Revert D5189017: [RN] Native implementation of <Image> intrinsic content size on iOS
Differential Revision: D5189017

fbshipit-source-id: 35901e0b5c289cb7ae5b4fe8b13f3da3e43e819f
2017-10-25 08:20:48 -07:00
Valentin Shergin e118d7a656 Revert D5196055: [RN] Intrinsic content size for network image sources of <Image>
Differential Revision: D5196055

fbshipit-source-id: 2122029518dc6f7d1612d31b0ecfa3dd2f0dea7d
2017-10-25 08:20:48 -07:00
Valentin Shergin f3a32895ca Intrinsic content size for network image sources of <Image>
Summary:
It makes possible to just specify remote url for the <Image> and it will work.
`<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />`

Reviewed By: javache

Differential Revision: D5196055

fbshipit-source-id: aaf139c4518cc35d1f4cf810bbf0305aad73a55b
2017-10-23 20:00:12 -07:00
Valentin Shergin 7bd0855650 Native implementation of <Image> intrinsic content size on iOS
Summary:
Now intrinsic content size of <Image> is implemented natively on iOS and now it is actually
`intrinsicContentSize`, not just overrided `height` and `width` styles (which was incorrect and hacky).
This change also removes support of nested content inside <Image>.
This is a first commit in the row where we improve <Image> implementation.

Reviewed By: mmmulani

Differential Revision: D5189017

fbshipit-source-id: eab3defa3d86a5d4219b4f4925ab7460b58d760f
2017-10-23 20:00:12 -07:00
Mehdi Mulani 6ce69dc925 Fix RNTester tests
Reviewed By: fkgozali

Differential Revision: D5881825

fbshipit-source-id: 38debe598830c4cc969b5251cfdfd8941ac36e9d
2017-09-21 12:31:42 -07:00
Kevin Gozali 2feb74dbe4 fixed image in RNTester snapshot example
Summary:
The icon size in the test/example cannot be rounded correctly as 3x image, causing redbox like:

```
-[RNTesterSnapshotTests testTabBarExample] : failed: caught "NSInternalInconsistencyException", "RedBox error: Error setting property 'icon' of RCTTabBarItem with tag #14: Image source flux@3x.png size {33, 33} does not match loaded image size {33.333333333333336, 33.333333333333336}."
```
This simply resizes them from 100x100 to 99x99

Reviewed By: javache

Differential Revision: D5747345

fbshipit-source-id: 084b4b028436b18dab324fef1fb0a4365072be75
2017-08-31 15:16:05 -07:00
Jean Regisser 5114b61b5e Add support for flashScrollIndicators on iOS
Summary:
Flashing scroll indicators is a standard behavior on iOS to show the user there's more content.

Launch RNTester on iOS, go to the ScrollView section, tap the "Flash scroll indicators" button.
You'll see this:

![Flash scroll indicators](https://cloud.githubusercontent.com/assets/57791/26250919/ebea607a-3cab-11e7-96c6-27579cc809ab.gif)

I've exposed the method `flashScrollIndicators` on all scrolling components that were already exposing a `scrollToXXX` method so it's usable from those components using a ref.

Let me know what you think.
Closes https://github.com/facebook/react-native/pull/14058

Differential Revision: D5103239

Pulled By: shergin

fbshipit-source-id: caad8474fbe475065418d771b17e4ea9766ffcdc
2017-06-06 13:06:48 -07:00
Valentin Shergin 3df537a25c Using `drawViewHierarchyInRect` instead of `renderInContext` for snapshot tests
Summary:
We found that `-[CALayer renderInContext:]` produces bad results in some cases (which is actually documented thing!),
so we decided to replace it with `-[UIView drawViewHierarchyInRect:]` which is more reliable (I hope).
As part of this change I completly removed support of `CALayer` from local fork of `RNTesterIntegrationTests`.

See https://github.com/facebook/react-native/pull/14011#issuecomment-303844580 for more details.

janicduplessis

Reviewed By: javache

Differential Revision: D5129492

fbshipit-source-id: 6a9227037c85bb8f862d55267f5301e177985ad9
2017-05-26 15:16:07 -07:00
Douglas Lowder 9e8a39ce2c Add ART library to UIExplorer for iOS, with sample and snapshot test
Summary:
**Motivation**

The ART library is part of the react-native repo, but is not included in UIExplorer and has no native testing.  This PR adds the ART library to UIExplorer, adds an example tab for it, and adds a snapshot test.

**Test plan**

New snapshot test.
Closes https://github.com/facebook/react-native/pull/13621

Differential Revision: D4954082

Pulled By: javache

fbshipit-source-id: 83e21c5df1b766ff6ca9f8914eb3382f7323627d
2017-05-25 08:45:47 -07:00
Eric Vicenti 4a80dceac7 Re-license and rename UIExplorer integration test app as RNTester
Reviewed By: yungsters

Differential Revision: D4950085

fbshipit-source-id: 44574b5d0ef0d2ad5dfc714309b18dc69cbad9ff
2017-05-08 11:31:19 -07:00