status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix artifacting on RN-drawn borders with asymmetric radii (#21208) 

Summary:
This PR fixes an obscure rendering bug on iOS for borders with asymmetric radii. It appears to be a problem with the custom drawing that React Native performs when it cannot use native UIKit/CoreAnimation border drawing.
Pull Request resolved: https://github.com/facebook/react-native/pull/21208

Differential Revision: D10130120

Pulled By: hramos

fbshipit-source-id: d9fbc5c622c060db15658d038a068216b47bb26d
This commit is contained in:
James Reggio 2018-10-01 12:38:37 -07:00 committed by Facebook Github Bot
parent b6b0fc1f27
commit 9e6522374b
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
React/Views/RCTBorderDrawing.m
View File

@ -217,13 +217,21 @@ static UIImage *RCTGetSolidBorderImage(RCTCornerRadii cornerRadii,
(borderInsets.top + cornerInsets.topRight.height +
borderInsets.bottom + cornerInsets.bottomLeft.height <= viewSize.height);
const UIEdgeInsets edgeInsets = (UIEdgeInsets){
UIEdgeInsets edgeInsets = (UIEdgeInsets){
borderInsets.top + MAX(cornerInsets.topLeft.height, cornerInsets.topRight.height),
borderInsets.left + MAX(cornerInsets.topLeft.width, cornerInsets.bottomLeft.width),
borderInsets.bottom + MAX(cornerInsets.bottomLeft.height, cornerInsets.bottomRight.height),
borderInsets.right + MAX(cornerInsets.bottomRight.width, cornerInsets.topRight.width)
};
// Asymmetrical edgeInsets cause strange artifacting on iOS 10 and earlier.
edgeInsets = (UIEdgeInsets){
MAX(edgeInsets.top, edgeInsets.bottom),
MAX(edgeInsets.left, edgeInsets.right),
MAX(edgeInsets.top, edgeInsets.bottom),
MAX(edgeInsets.left, edgeInsets.right),
};
const CGSize size = makeStretchable ? (CGSize){
// 1pt for the middle stretchable area along each axis
edgeInsets.left + 1 + edgeInsets.right,