[Rendering] Set allowsEdgeAntialiasing for transformed views
Summary: By default, the edges of rotated layers on iOS have jagged edges because they are not antialiased. Setting `allowsEdgeAntialiasing` makes them look a lot nicer by smoothing out the jaggies. This is particularly important for UIs like Tinder cards, for example. Closes https://github.com/facebook/react-native/pull/1999 Github Author: James Ide <ide@jameside.com>
This commit is contained in:
parent
2cb634bb0b
commit
b362072c83
|
@ -102,8 +102,13 @@ RCT_REMAP_VIEW_PROPERTY(shadowColor, layer.shadowColor, CGColor);
|
|||
RCT_REMAP_VIEW_PROPERTY(shadowOffset, layer.shadowOffset, CGSize);
|
||||
RCT_REMAP_VIEW_PROPERTY(shadowOpacity, layer.shadowOpacity, float)
|
||||
RCT_REMAP_VIEW_PROPERTY(shadowRadius, layer.shadowRadius, CGFloat)
|
||||
RCT_REMAP_VIEW_PROPERTY(transformMatrix, layer.transform, CATransform3D)
|
||||
RCT_REMAP_VIEW_PROPERTY(overflow, clipsToBounds, css_clip_t)
|
||||
RCT_CUSTOM_VIEW_PROPERTY(transformMatrix, CATransform3D, RCTView)
|
||||
{
|
||||
view.layer.transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
|
||||
// TODO: Improve this by enabling edge antialiasing only for transforms with rotation or skewing
|
||||
view.layer.allowsEdgeAntialiasing = !CATransform3DIsIdentity(view.layer.transform);
|
||||
}
|
||||
RCT_CUSTOM_VIEW_PROPERTY(pointerEvents, RCTPointerEvents, RCTView)
|
||||
{
|
||||
if ([view respondsToSelector:@selector(setPointerEvents:)]) {
|
||||
|
|
Loading…
Reference in New Issue