Commit Graph

5 Commits

Author SHA1 Message Date
KhietVo-AgilityIO a004e2b77c Wrong name
Summary:
MaskedViewIOS instead of MaskedView
Closes https://github.com/facebook/react-native/pull/16135

Differential Revision: D5942428

Pulled By: shergin

fbshipit-source-id: 44e771d9a318c66c8721775bcaf8506eb0fbbecd
2017-09-29 15:03:23 -07:00
Caleb Meredith 90eaeb019b Upgrade fbsource/xplat/js to Flow v0.53.0
Reviewed By: avikchaudhuri

Differential Revision:
D5648819
Ninja: T20988071

fbshipit-source-id: 66e5b6747c79ae66b6eb69d40ede5e982c26174f
2017-08-17 18:45:01 -07:00
Chirag Jain bf752014a9 use propTypes directly
Summary:
Just noticed this commit creates a new variable for propTypes instead of using it directly. c2c97ae4b1

Should be straighforward.
Closes https://github.com/facebook/react-native/pull/15113

Differential Revision: D5460980

Pulled By: javache

fbshipit-source-id: 7446be8af22557d4bd4eddb711272b914ca48112
2017-07-20 03:19:45 -07:00
Brian Vaughn c2c97ae4b1 Ran PropTypes -> prop-types codemod
Reviewed By: gaearon

Differential Revision: D5453511

fbshipit-source-id: 6abe3dfa6d8cf70cc49ce2b6a7d3e94679398c5e
2017-07-19 15:02:05 -07:00
Adam Miskiewicz 8ea6cea39a MaskedViewIOS -- A way to apply alpha masks to views on iOS
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):

![iOS native navbar animation](https://slack-imgs.com/?c=1&url=https%3A%2F%2Fd3vv6lp55qjaqc.cloudfront.net%2Fitems%2F0N3g1Q3H423P3m1c1z3E%2FScreen%2520Shot%25202017-07-06%2520at%252011.57.29%2520AM.png)

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.

![example](https://d3vv6lp55qjaqc.cloudfront.net/items/250X092v2k3f212f3O16/Screen%20Recording%202017-07-07%20at%2012.18%20PM.gif?X-CloudApp-Visitor-Id=abb33b3e3769bbe2f7b26d13dc5d1442&v=5f9e2d4c)
Closes https://github.com/facebook/react-native/pull/14898

Differential Revision: D5398721

Pulled By: javache

fbshipit-source-id: 343af874e2d664541aca1fefe922cf7d82aea701
2017-07-11 15:05:57 -07:00