react-native-masked-view
react-native-masked-view copied to clipboard
add feather edge function
consider adding this to the component, see http://stackoverflow.com/questions/2306043/uiview-border-with-fade-or-blur-effect
CALayer *viewLayer = [self layer];
CALayer* maskLayer = [CALayer layer];
maskLayer.bounds = viewLayer.bounds;
[maskLayer setPosition:CGPointMake(CGRectGetWidth(viewLayer.frame)/2.0, CGRectGetHeight(viewLayer.frame)/2.0)];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate (NULL, viewLayer.bounds.size.width, viewLayer.bounds.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGFloat colors[] = {
0.5, 0.5, 0.5, 0.0, //BLACK
0.0, 0.0, 0.0, 1.0, //BLACK
};
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
CGColorSpaceRelease(colorSpace);
NSUInteger gradientH = 20;
NSUInteger gradientHPos = 0;
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0].CGColor);
CGContextFillRect(context, CGRectMake(0, gradientHPos + gradientH, CGRectGetWidth(maskLayer.frame), CGRectGetHeight(maskLayer.frame)));
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.0].CGColor);
CGContextFillRect(context, CGRectMake(0, 0, 320, gradientHPos));
CGContextDrawLinearGradient(context, gradient, CGPointMake(160, gradientHPos), CGPointMake(160, gradientHPos + gradientH), 0);
CGGradientRelease(gradient);
CGImageRef contextImage = CGBitmapContextCreateImage(context);
CGContextRelease(context);
[maskLayer setContents:(__bridge id)contextImage];
CGImageRelease (contextImage);
viewLayer.masksToBounds = YES;
viewLayer.mask = maskLayer;