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/RCTMaskedViewManager.m

23 lines
386 B
Mathematica
Raw Normal View History

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 22:00:54 +00:00
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
Update license headers for MIT license Summary: Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs. find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$ replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree. Reviewed By: TheSavior, yungsters Differential Revision: D7007050 fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-17 02:24:55 +00:00
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
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 22:00:54 +00:00
*/
#import "RCTMaskedViewManager.h"
#import "RCTMaskedView.h"
#import "RCTUIManager.h"
@implementation RCTMaskedViewManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [RCTMaskedView new];
}
@end