status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/RNTester/js
History
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
..
AnimatedGratuitousApp Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
Thumbnails Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ARTExample.js Fix header on RNTester file 2017-06-13 12:18:45 -07:00
AccessibilityAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AccessibilityIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ActionSheetIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ActivityIndicatorExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AdSupportIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AlertExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AlertIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AnimatedExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AppStateExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AssetScaledImageExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AsyncStorageExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
BorderExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
BoxShadowExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ButtonExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
CameraRollExample.js Codemod prettier to 1.5.2 2017-06-28 12:50:30 -07:00
CameraRollView.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ClipboardExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
DatePickerAndroidExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
DatePickerIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ExampleTypes.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
FlatListExample.js Add inverted option 2017-06-12 22:45:49 -07:00
GeolocationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageCapInsetsExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageEditingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
KeyboardAvoidingViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LayoutAnimationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LayoutEventsExample.js Add type for onLayout 2017-07-07 03:06:21 -07:00
LayoutExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LinkingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ListExampleShared.js Revert D5321193: BREAKING: Add regenerator-runtime on demand, based on the files 2017-07-07 10:48:37 -07:00
ListViewExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ListViewGridLayoutExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ListViewPagingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
MaskedViewExample.js MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
ModalExample.js iOS `presentationStyle` Modal Appearance 2017-06-20 19:22:57 -07:00
MultiColumnExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
NativeAnimationsExample.js Native Animated - Support Animated.loop on iOS 2017-05-26 03:30:33 -07:00
NavigatorIOSColorsExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
NavigatorIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
NetInfoExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
OrientationChangeExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PanResponderExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
PermissionsExampleAndroid.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PickerExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PickerIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
PointerEventsExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ProgressBarAndroidExample.android.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ProgressViewIOSExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
PushNotificationIOSExample.js Expose content-available APS key for iOS silent push 2017-06-19 16:46:31 -07:00
RCTRootViewIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterActions.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterApp.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterApp.ios.js Deploy v0.47.0 to xplat/js 2017-05-25 23:00:37 -07:00
RNTesterBlock.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterButton.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterExampleContainer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterExampleList.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterList.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterList.ios.js MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RNTesterNavigationReducer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterPage.js Remove RN fiber createClass wrapper around View 2017-06-21 12:38:06 -07:00
RNTesterSettingSwitchRow.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterStatePersister.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterTitle.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RTLExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RefreshControlExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RootViewSizeFlexibilityExampleApp.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ScrollViewExample.js Add support for flashScrollIndicators on iOS 2017-06-06 13:06:48 -07:00
ScrollViewSimpleExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SectionListExample.js Render section footer in <SectionList> sections with no data 2017-05-25 10:30:55 -07:00
SegmentedControlIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SetPropertiesExampleApp.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ShareExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SliderExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SnapshotExample.js Fix SnapshotExample 2017-06-27 09:40:24 -07:00
StatusBarExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
SwipeableListViewExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
SwitchExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TabBarIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TextExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TextExample.ios.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
TextInputExample.android.js Fixed <TextInput>.onContentSizeChange on Android 2017-05-25 19:31:31 -07:00
TextInputExample.ios.js Support `<TextInput keyboardType="numeric" returnKeyType="done" />` on iOS 2017-06-27 16:22:45 -07:00
TimePickerAndroidExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TimerExample.js Replace React.createClass with create-react-class 2017-07-07 14:36:01 -07:00
ToastAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ToolbarAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TouchableExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TransformExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
TransparentHitTestExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
URIActionMap.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ViewPagerAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
WebSocketExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
WebViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleBinaryUpload.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleCookies.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleDownload.js update xplat/js to flow 0.48.0 2017-06-14 15:47:21 -07:00
XHRExampleFetch.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleFormData.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleHeaders.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleOnTimeOut.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
bunny.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
createExamplePage.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
flux@3x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
hawk.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
helloworld.html Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
http_test_server.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
imageMask.png MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
messagingtest.html Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
relay@3x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-left.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-left@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_highlighted@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_big.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_selected@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
websocket_test_server.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00