diff --git a/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index 428d8bc630e..e50f0c2540f 100644 --- a/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -23,6 +23,7 @@ using namespace facebook::react; UIColor *_backgroundColor; CALayer *_borderLayer; BOOL _needsInvalidateLayer; + NSSet *_propKeysManagedByAnimated; } - (instancetype)initWithFrame:(CGRect)frame @@ -83,6 +84,11 @@ using namespace facebook::react; return concreteComponentDescriptorProvider(); } +- (void)setPropKeysManagedByAnimated:(nullable NSSet *)propKeys +{ + _propKeysManagedByAnimated = propKeys; +} + - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps { #ifndef NS_BLOCK_ASSERTIONS @@ -102,7 +108,7 @@ using namespace facebook::react; BOOL needsInvalidateLayer = NO; // `opacity` - if (oldViewProps.opacity != newViewProps.opacity) { + if (oldViewProps.opacity != newViewProps.opacity && ![_propKeysManagedByAnimated containsObject:@"opacity"]) { self.layer.opacity = (CGFloat)newViewProps.opacity; needsInvalidateLayer = YES; } @@ -161,7 +167,7 @@ using namespace facebook::react; } // `transform` - if (oldViewProps.transform != newViewProps.transform) { + if (oldViewProps.transform != newViewProps.transform && ![_propKeysManagedByAnimated containsObject:@"transform"]) { self.layer.transform = RCTCATransform3DFromTransformMatrix(newViewProps.transform); self.layer.allowsEdgeAntialiasing = newViewProps.transform != Transform::Identity(); } @@ -286,6 +292,17 @@ using namespace facebook::react; - (void)prepareForRecycle { [super prepareForRecycle]; + + // If view was managed by animated, its props need to align with UIView's properties. + auto const &props = *std::static_pointer_cast(_props); + if ([_propKeysManagedByAnimated containsObject:@"transform"]) { + self.layer.transform = RCTCATransform3DFromTransformMatrix(props.transform); + } + if ([_propKeysManagedByAnimated containsObject:@"opacity"]) { + self.layer.opacity = (CGFloat)props.opacity; + } + + _propKeysManagedByAnimated = nil; _eventEmitter.reset(); } diff --git a/React/Fabric/Mounting/RCTComponentViewProtocol.h b/React/Fabric/Mounting/RCTComponentViewProtocol.h index 9c6a862aeaa..2595f3b09f1 100644 --- a/React/Fabric/Mounting/RCTComponentViewProtocol.h +++ b/React/Fabric/Mounting/RCTComponentViewProtocol.h @@ -116,6 +116,8 @@ typedef NS_OPTIONS(NSInteger, RNComponentViewUpdateMask) { */ - (facebook::react::SharedProps)props; +- (void)setPropKeysManagedByAnimated:(nullable NSSet *)propKeys; + @end NS_ASSUME_NONNULL_END diff --git a/React/Fabric/Mounting/RCTMountingManager.mm b/React/Fabric/Mounting/RCTMountingManager.mm index 6a886530487..b593f122c74 100644 --- a/React/Fabric/Mounting/RCTMountingManager.mm +++ b/React/Fabric/Mounting/RCTMountingManager.mm @@ -222,7 +222,9 @@ static void RCTPerformMountInstructions( UIView *componentView = [_componentViewRegistry findComponentViewWithTag:reactTag]; SharedProps oldProps = [componentView props]; SharedProps newProps = componentDescriptor.cloneProps(oldProps, RawProps(convertIdToFollyDynamic(props))); + [componentView setPropKeysManagedByAnimated:nil]; [componentView updateProps:newProps oldProps:oldProps]; + [componentView setPropKeysManagedByAnimated:[NSSet setWithArray:props.allKeys]]; } - (void)synchronouslyDispatchCommandOnUIThread:(ReactTag)reactTag diff --git a/React/Fabric/Mounting/UIView+ComponentViewProtocol.h b/React/Fabric/Mounting/UIView+ComponentViewProtocol.h index ab8219555b2..09d35535469 100644 --- a/React/Fabric/Mounting/UIView+ComponentViewProtocol.h +++ b/React/Fabric/Mounting/UIView+ComponentViewProtocol.h @@ -39,6 +39,8 @@ NS_ASSUME_NONNULL_BEGIN - (facebook::react::SharedProps)props; +- (void)setPropKeysManagedByAnimated:(nullable NSSet *)propKeys; + @end NS_ASSUME_NONNULL_END diff --git a/React/Fabric/Mounting/UIView+ComponentViewProtocol.mm b/React/Fabric/Mounting/UIView+ComponentViewProtocol.mm index c0de92d8c21..39d9af5cc41 100644 --- a/React/Fabric/Mounting/UIView+ComponentViewProtocol.mm +++ b/React/Fabric/Mounting/UIView+ComponentViewProtocol.mm @@ -132,4 +132,9 @@ using namespace facebook::react; return nullptr; } +- (void)setPropKeysManagedByAnimated:(nullable NSSet *)propKeys +{ + // Default implementation does nothing. +} + @end