Skip to content

Commit 5fbdc99

Browse files
sammy-SCfacebook-github-bot
authored andcommitted
remove animation from borderLayer to stop unwanted animations (#42922)
Summary: Pull Request resolved: #42922 changelog: [fix][ios] prevent unwanted border animation The problem: CALayer and its properties are animatable. If RN applies mutations inside an animation block, it will animate. In this particular example, it was animated because of a transition applied by the library and because we were not creating new views, but recycling views from previous screen. This caused size of _borderLayer to change from value A to value B inside of animation block. To resolve this, call removeAllAnimations on borderLayer. Reviewed By: cipolleschi Differential Revision: D53566886 fbshipit-source-id: 98e0b01a9185046e1ee500665c1832060ecc8884
1 parent 7afc8b8 commit 5fbdc99

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

+13-13
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
@implementation RCTViewComponentView {
3030
UIColor *_backgroundColor;
31-
CALayer *_borderLayer;
31+
__weak CALayer *_borderLayer;
3232
BOOL _needsInvalidateLayer;
3333
BOOL _isJSResponder;
3434
BOOL _removeClippedSubviews;
@@ -404,9 +404,7 @@ - (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
404404
_layoutMetrics = layoutMetrics;
405405
_needsInvalidateLayer = YES;
406406

407-
if (_borderLayer) {
408-
_borderLayer.frame = self.layer.bounds;
409-
}
407+
_borderLayer.frame = self.layer.bounds;
410408

411409
if (_contentView) {
412410
_contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
@@ -610,10 +608,7 @@ - (void)invalidateLayer
610608

611609
if (useCoreAnimationBorderRendering) {
612610
layer.mask = nil;
613-
if (_borderLayer) {
614-
[_borderLayer removeFromSuperlayer];
615-
_borderLayer = nil;
616-
}
611+
[_borderLayer removeFromSuperlayer];
617612

618613
layer.borderWidth = (CGFloat)borderMetrics.borderWidths.left;
619614
CGColorRef borderColor = RCTCreateCGColorRefFromSharedColor(borderMetrics.borderColors.left);
@@ -626,11 +621,12 @@ - (void)invalidateLayer
626621
layer.backgroundColor = backgroundColor;
627622
} else {
628623
if (!_borderLayer) {
629-
_borderLayer = [CALayer new];
630-
_borderLayer.zPosition = -1024.0f;
631-
_borderLayer.frame = layer.bounds;
632-
_borderLayer.magnificationFilter = kCAFilterNearest;
633-
[layer addSublayer:_borderLayer];
624+
CALayer *borderLayer = [CALayer new];
625+
borderLayer.zPosition = -1024.0f;
626+
borderLayer.frame = layer.bounds;
627+
borderLayer.magnificationFilter = kCAFilterNearest;
628+
[layer addSublayer:borderLayer];
629+
_borderLayer = borderLayer;
634630
}
635631

636632
layer.backgroundColor = nil;
@@ -671,6 +667,10 @@ - (void)invalidateLayer
671667
}
672668
}
673669

670+
// If mutations are applied inside of Animation block, it may cause _borderLayer to be animated.
671+
// To stop that, imperatively remove all animations from _borderLayer.
672+
[_borderLayer removeAllAnimations];
673+
674674
// Stage 2.5. Custom Clipping Mask
675675
CAShapeLayer *maskLayer = nil;
676676
CGFloat cornerRadius = 0;

0 commit comments

Comments
 (0)