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/React/Views
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
..
RCTActivityIndicatorView.h Fixes ActivityIndicatorIOS doesn't hide initially 2016-06-27 17:13:27 -07:00
RCTActivityIndicatorView.m Fixes ActivityIndicatorIOS doesn't hide initially 2016-06-27 17:13:27 -07:00
RCTActivityIndicatorViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTActivityIndicatorViewManager.m Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTAnimationType.h [LayoutAnimation] RCTAnimationTypeKeyboard 2015-06-25 09:17:01 -08:00
RCTAutoInsetsProtocol.h Automatically adjust content inset after view controller did layout subviews 2015-09-04 07:00:21 -08:00
RCTBorderDrawing.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTBorderDrawing.m Fixed border smearing issue 2016-01-07 12:03:17 -08:00
RCTBorderStyle.h Add property mapping for `borderStyle` from JS to `RCTView` (iOS) 2015-12-01 09:00:28 -08:00
RCTComponent.h Test building with clang 3.9 2016-08-10 13:13:34 -07:00
RCTComponentData.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTComponentData.m Nits: `[NSNull null] was changed to `(id)kCFNull` 2017-07-11 12:31:15 -07:00
RCTConvert+CoreLocation.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTConvert+CoreLocation.m [MapView] Support for annotation callouts, annotation press, callout presses and pin animation 2015-06-25 09:15:21 -08:00
RCTConvert+Transform.h Drive any numerical prop via NativeAnimated 2017-01-26 18:28:53 -08:00
RCTConvert+Transform.m Fixed previously broken support for negative `scale` (`transform` style property) 2017-03-24 18:15:42 -07:00
RCTDatePicker.h Added mechanism for directly mapping JS event handlers to blocks 2015-09-02 06:11:24 -08:00
RCTDatePicker.m Added mechanism for directly mapping JS event handlers to blocks 2015-09-02 06:11:24 -08:00
RCTDatePickerManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTDatePickerManager.m Removed exported constants for fixed-size views 2016-04-26 04:21:39 -07:00
RCTFont.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTFont.mm If no match return at least the first font in the family. 2016-11-07 17:14:02 -08:00
RCTMaskedView.h MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTMaskedView.m MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTMaskedViewManager.h MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTMaskedViewManager.m MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTModalHostView.h iOS `presentationStyle` Modal Appearance 2017-06-20 19:22:57 -07:00
RCTModalHostView.m iOS `presentationStyle` Modal Appearance 2017-06-20 19:22:57 -07:00
RCTModalHostViewController.h Apple TV support 1: existing Objective C code should compile for tvOS 2016-09-27 06:28:33 -07:00
RCTModalHostViewController.m Replacing all instances of [UIApplication sharedApplication] wi… 2017-04-01 03:34:41 -07:00
RCTModalHostViewManager.h iOS `presentationStyle` Modal Appearance 2017-06-20 19:22:57 -07:00
RCTModalHostViewManager.m iOS `presentationStyle` Modal Appearance 2017-06-20 19:22:57 -07:00
RCTNavItem.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTNavItem.m NavigatorIOS System Icon Support 2016-09-08 17:58:50 -07:00
RCTNavItemManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTNavItemManager.m NavigatorIOS System Icon Support 2016-09-08 17:58:50 -07:00
RCTNavigator.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTNavigator.m reverted view clipping changes 2016-11-18 14:43:31 -08:00
RCTNavigatorManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTNavigatorManager.m NavigatorIOS: Expose interactivePopGestureEnabled property 2016-05-06 03:18:20 -07:00
RCTPicker.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTPicker.m Fix warnings in React.xcodeproj 2017-03-23 11:36:17 -07:00
RCTPickerManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTPickerManager.m Improve types in RCTFont API 2016-08-05 12:44:21 -07:00
RCTPointerEvents.h [ReactNative] s/ReactKit/React/g 2015-03-26 02:42:24 -08:00
RCTProgressViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTProgressViewManager.m Apple TV support 1: existing Objective C code should compile for tvOS 2016-09-27 06:28:33 -07:00
RCTRefreshControl.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTRefreshControl.m Make RCTRefreshControl not dependent on order of setting properties 2017-02-17 15:16:01 -08:00
RCTRefreshControlManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTRefreshControlManager.m Allow to set refresh control title color 2016-04-16 15:15:25 -07:00
RCTRootShadowView.h Simplifying mess with RCTRootViewSizeFlexibility 2017-02-19 23:19:47 -08:00
RCTRootShadowView.m Setting `availableSize` for `RCTRootShadowView` on earlier stage 2017-03-08 19:00:14 -08:00
RCTScrollContentShadowView.h Better RTL support especially for ScrollView's 2017-02-02 09:58:30 -08:00
RCTScrollContentShadowView.m Better RTL support especially for ScrollView's 2017-02-02 09:58:30 -08:00
RCTScrollContentViewManager.h Better RTL support especially for ScrollView's 2017-02-02 09:58:30 -08:00
RCTScrollContentViewManager.m Better RTL support especially for ScrollView's 2017-02-02 09:58:30 -08:00
RCTScrollView.h Scrollview updatedChildFrames data controlled by prop 2017-06-08 12:03:02 -07:00
RCTScrollView.m Fixed ScrollView's .scrollToEnd to refrain from exceeding start boundary. 2017-06-21 18:20:34 -07:00
RCTScrollViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTScrollViewManager.m Scrollview updatedChildFrames data controlled by prop 2017-06-08 12:03:02 -07:00
RCTScrollableProtocol.h Add scrollToEnd to ScrollView and ListView 2017-01-27 10:13:29 -08:00
RCTSegmentedControl.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSegmentedControl.m Added lightweight generic annotations 2015-11-03 14:49:30 -08:00
RCTSegmentedControlManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSegmentedControlManager.m Removed exported constants for fixed-size views 2016-04-26 04:21:39 -07:00
RCTShadowView+Layout.h Several layout related helper methods of RCTShadowView was moved to new (+Layout) category. 2017-05-08 11:31:20 -07:00
RCTShadowView+Layout.m Several layout related helper methods of RCTShadowView was moved to new (+Layout) category. 2017-05-08 11:31:20 -07:00
RCTShadowView.h Introducing -[RCTShadowView canHaveSubviews] 2017-06-20 17:16:46 -07:00
RCTShadowView.m Fixed assertion caused by invalid layout of hidden Yoga nodes 2017-06-20 17:16:46 -07:00
RCTSlider.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSlider.m remove unused includes in fbobjc/Libraries 2017-02-19 18:33:49 -08:00
RCTSliderManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSliderManager.m Add option for both min/max track image. 2015-12-21 10:30:39 -08:00
RCTSwitch.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSwitch.m [ReactNative] s/ReactKit/React/g 2015-03-26 02:42:24 -08:00
RCTSwitchManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSwitchManager.m Added mechanism for directly mapping JS event handlers to blocks 2015-09-02 06:11:24 -08:00
RCTTVView.h Apple TV support 4: support for input (tvOS focus engine) 2016-12-19 06:28:40 -08:00
RCTTVView.m Fix warnings in React.xcodeproj 2017-03-23 11:36:17 -07:00
RCTTabBar.h Enable setting color of text and images on unselected tabs 2016-05-03 05:40:29 -07:00
RCTTabBar.m Apple TV support 4: support for input (tvOS focus engine) 2016-12-19 06:28:40 -08:00
RCTTabBarItem.h ios: exposed 'RCTConvert UITabBarSystemItem:' in the header file 2017-02-15 02:17:17 -08:00
RCTTabBarItem.m Fix badgeColor for previous iOS 10 versions 2017-02-22 12:04:10 -08:00
RCTTabBarItemManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTabBarItemManager.m Apple TV support 4: support for input (tvOS focus engine) 2016-12-19 06:28:40 -08:00
RCTTabBarManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTabBarManager.m unselectedItemTintColor property available since iOS10 2016-11-29 12:28:55 -08:00
RCTTextDecorationLineType.h <Text> module add textDecoration style attributes 2015-07-07 06:15:20 -08:00
RCTView.h Improve z-index implementation on iOS 2017-05-28 21:45:32 -07:00
RCTView.m Introducing `-[RCTView reactAccessibleView]` 2017-06-02 14:19:57 -07:00
RCTViewControllerProtocol.h [ReactNative] s/ReactKit/React/g 2015-03-26 02:42:24 -08:00
RCTViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTViewManager.m Implement nativeID prop to allow native code to reference react managed views in iOS 2017-06-20 19:01:27 -07:00
RCTWebView.h Add a injectJavaScript method to the WebView component 2017-01-06 20:29:02 -08:00
RCTWebView.m Ignore "Frame load interrupted" errors in UIWebView 2017-05-31 00:16:13 -07:00
RCTWebViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTWebViewManager.m Add a injectJavaScript method to the WebView component 2017-01-06 20:29:02 -08:00
RCTWrapperViewController.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTWrapperViewController.m Apple TV support 1: existing Objective C code should compile for tvOS 2016-09-27 06:28:33 -07:00
UIView+Private.h Improve z-index implementation on iOS 2017-05-28 21:45:32 -07:00
UIView+React.h Implement nativeID prop to allow native code to reference react managed views in iOS 2017-06-20 19:01:27 -07:00
UIView+React.m Implement nativeID prop to allow native code to reference react managed views in iOS 2017-06-20 19:01:27 -07:00