Native Animated - Restore default values when removing props on iOS

Summary: This fixes a bug that causes properties to keep stale values because they were not restored to their default after being removed when their value was controlled by native animated. To fix this we restore default values in `disconnectFromView` by updating views with null values for all props that we modified previously. However this causes another issue where we lose any props that were set by the normal process because NativeAnimated operations are always executed after UIManager operatations. To fix this I added a way to hook into UIManager view updating process to be able to execute NativeAnimated operations either before or after updating native views. In the case of disconnecting we want to do it before updating views so that it does: Value changed by native animated -> value restored to default -> (optional) value updated by normal prop. This PR also depends on #10658. **Test plan** Tested that this fixed a particular bug in an app that uses ex-navigation + native animations where a navbar w Closes https://github.com/facebook/react-native/pull/11819 Differential Revision: D4752566 Pulled By: javache fbshipit-source-id: 68ee28200ffeba859ae1b98ac753bd7dcb8910f0
2026-04-24 04:16:00 +08:00 · 2017-03-28 05:30:00 -07:00
parent acc1edd188
commit c9fae2fb93
5 changed files with 158 additions and 38 deletions
--- a/Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m
+++ b/Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m
@@ -16,10 +16,21 @@
 #import "RCTStyleAnimatedNode.h"
 #import "RCTValueAnimatedNode.h"

-@implementation RCTPropsAnimatedNode {
+@implementation RCTPropsAnimatedNode
+{
  NSNumber *_connectedViewTag;
  NSString *_connectedViewName;
  RCTUIManager *_uiManager;
+  NSMutableDictionary<NSString *, NSObject *> *_propsDictionary;
+}
+
+- (instancetype)initWithTag:(NSNumber *)tag
+                     config:(NSDictionary<NSString *, id> *)config;
+{
+  if (self = [super initWithTag:tag config:config]) {
+    _propsDictionary = [NSMutableDictionary new];
+  }
+  return self;
 }

 - (void)connectToView:(NSNumber *)viewTag
@@ -33,6 +44,17 @@

 - (void)disconnectFromView:(NSNumber *)viewTag
 {
+  // Restore the default value for all props that were modified by this node.
+  for (NSString *key in _propsDictionary.allKeys) {
+    _propsDictionary[key] = [NSNull null];
+  }
+
+  if (_propsDictionary.count) {
+    [_uiManager synchronouslyUpdateViewOnUIThread:_connectedViewTag
+                                         viewName:_connectedViewName
+                                            props:_propsDictionary];
+  }
+
  _connectedViewTag = nil;
  _connectedViewName = nil;
  _uiManager = nil;
@@ -41,7 +63,7 @@
 - (NSString *)propertyNameForParentTag:(NSNumber *)parentTag
 {
  __block NSString *propertyName;
-  [self.config[@"props"] enumerateKeysAndObjectsUsingBlock:^(NSString * _Nonnull property, NSNumber * _Nonnull tag, BOOL * _Nonnull stop) {
+  [self.config[@"props"] enumerateKeysAndObjectsUsingBlock:^(NSString *_Nonnull property, NSNumber *_Nonnull tag, BOOL *_Nonnull stop) {
    if ([tag isEqualToNumber:parentTag]) {
      propertyName = property;
      *stop = YES;
@@ -54,29 +76,29 @@
 {
  [super performUpdate];

+  // Since we are updating nodes after detaching them from views there is a time where it's
+  // possible that the view was disconnected and still receive an update, this is normal and we can
+  // simply skip that update.
  if (!_connectedViewTag) {
-    RCTLogError(@"Node has not been attached to a view");
    return;
  }

-  NSMutableDictionary *props = [NSMutableDictionary dictionary];
-  [self.parentNodes enumerateKeysAndObjectsUsingBlock:^(NSNumber * _Nonnull parentTag, RCTAnimatedNode * _Nonnull parentNode, BOOL * _Nonnull stop) {
+  [self.parentNodes enumerateKeysAndObjectsUsingBlock:^(NSNumber *_Nonnull parentTag, RCTAnimatedNode *_Nonnull parentNode, BOOL *_Nonnull stop) {

    if ([parentNode isKindOfClass:[RCTStyleAnimatedNode class]]) {
-      [props addEntriesFromDictionary:[(RCTStyleAnimatedNode *)parentNode propsDictionary]];
+      [self->_propsDictionary addEntriesFromDictionary:[(RCTStyleAnimatedNode *)parentNode propsDictionary]];

    } else if ([parentNode isKindOfClass:[RCTValueAnimatedNode class]]) {
      NSString *property = [self propertyNameForParentTag:parentTag];
      CGFloat value = [(RCTValueAnimatedNode *)parentNode value];
-      [props setObject:@(value) forKey:property];
+      self->_propsDictionary[property] = @(value);
    }
-
  }];

-  if (props.count) {
+  if (_propsDictionary.count) {
    [_uiManager synchronouslyUpdateViewOnUIThread:_connectedViewTag
                                         viewName:_connectedViewName
-                                            props:props];
+                                            props:_propsDictionary];
  }
 }

--- a/Libraries/NativeAnimation/RCTNativeAnimatedModule.h
+++ b/Libraries/NativeAnimation/RCTNativeAnimatedModule.h
@@ -10,9 +10,10 @@
 #import <React/RCTBridgeModule.h>
 #import <React/RCTEventDispatcher.h>
 #import <React/RCTEventEmitter.h>
+#import <React/RCTUIManager.h>

 #import "RCTValueAnimatedNode.h"

-@interface RCTNativeAnimatedModule : RCTEventEmitter <RCTBridgeModule, RCTValueAnimatedNodeObserver, RCTEventDispatcherObserver>
+@interface RCTNativeAnimatedModule : RCTEventEmitter <RCTBridgeModule, RCTValueAnimatedNodeObserver, RCTEventDispatcherObserver, RCTUIManagerObserver>

@end
--- a/Libraries/NativeAnimation/RCTNativeAnimatedModule.m
+++ b/Libraries/NativeAnimation/RCTNativeAnimatedModule.m
@@ -15,7 +15,11 @@ typedef void (^AnimatedOperation)(RCTNativeAnimatedNodesManager *nodesManager);
@implementation RCTNativeAnimatedModule
 {
  RCTNativeAnimatedNodesManager *_nodesManager;
+
+  // Oparations called after views have been updated.
  NSMutableArray<AnimatedOperation> *_operations;
+  // Operations called before views have been updated.
+  NSMutableArray<AnimatedOperation> *_preOperations;
 }

 RCT_EXPORT_MODULE();
@@ -23,15 +27,15 @@ RCT_EXPORT_MODULE();
 - (void)invalidate
 {
  [_nodesManager stopAnimationLoop];
-}
-
- (void)dealloc
-{
  [self.bridge.eventDispatcher removeDispatchObserver:self];
+  [self.bridge.uiManager removeUIManagerObserver:self];
 }

 - (dispatch_queue_t)methodQueue
 {
+  // This module needs to be on the same queue as the UIManager to avoid
+  // having to lock `_operations` and `_preOperations` since `uiManagerWillFlushUIBlocks`
+  // will be called from that queue.
  return RCTGetUIManagerQueue();
 }

@@ -41,8 +45,10 @@ RCT_EXPORT_MODULE();

  _nodesManager = [[RCTNativeAnimatedNodesManager alloc] initWithUIManager:self.bridge.uiManager];
  _operations = [NSMutableArray new];
+  _preOperations = [NSMutableArray new];

  [bridge.eventDispatcher addDispatchObserver:self];
+  [bridge.uiManager addUIManagerObserver:self];
 }

 #pragma mark -- API
@@ -50,7 +56,7 @@ RCT_EXPORT_MODULE();
 RCT_EXPORT_METHOD(createAnimatedNode:(nonnull NSNumber *)tag
                  config:(NSDictionary<NSString *, id> *)config)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager createAnimatedNode:tag config:config];
  }];
 }
@@ -58,7 +64,7 @@ RCT_EXPORT_METHOD(createAnimatedNode:(nonnull NSNumber *)tag
 RCT_EXPORT_METHOD(connectAnimatedNodes:(nonnull NSNumber *)parentTag
                  childTag:(nonnull NSNumber *)childTag)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager connectAnimatedNodes:parentTag childTag:childTag];
  }];
 }
@@ -66,7 +72,7 @@ RCT_EXPORT_METHOD(connectAnimatedNodes:(nonnull NSNumber *)parentTag
 RCT_EXPORT_METHOD(disconnectAnimatedNodes:(nonnull NSNumber *)parentTag
                  childTag:(nonnull NSNumber *)childTag)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager disconnectAnimatedNodes:parentTag childTag:childTag];
  }];
 }
@@ -76,14 +82,14 @@ RCT_EXPORT_METHOD(startAnimatingNode:(nonnull NSNumber *)animationId
                  config:(NSDictionary<NSString *, id> *)config
                  endCallback:(RCTResponseSenderBlock)callBack)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager startAnimatingNode:animationId nodeTag:nodeTag config:config endCallback:callBack];
  }];
 }

 RCT_EXPORT_METHOD(stopAnimation:(nonnull NSNumber *)animationId)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager stopAnimation:animationId];
  }];
 }
@@ -91,7 +97,7 @@ RCT_EXPORT_METHOD(stopAnimation:(nonnull NSNumber *)animationId)
 RCT_EXPORT_METHOD(setAnimatedNodeValue:(nonnull NSNumber *)nodeTag
                  value:(nonnull NSNumber *)value)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager setAnimatedNodeValue:nodeTag value:value];
  }];
 }
@@ -99,21 +105,21 @@ RCT_EXPORT_METHOD(setAnimatedNodeValue:(nonnull NSNumber *)nodeTag
 RCT_EXPORT_METHOD(setAnimatedNodeOffset:(nonnull NSNumber *)nodeTag
                  offset:(nonnull NSNumber *)offset)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager setAnimatedNodeOffset:nodeTag offset:offset];
  }];
 }

 RCT_EXPORT_METHOD(flattenAnimatedNodeOffset:(nonnull NSNumber *)nodeTag)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager flattenAnimatedNodeOffset:nodeTag];
  }];
 }

 RCT_EXPORT_METHOD(extractAnimatedNodeOffset:(nonnull NSNumber *)nodeTag)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager extractAnimatedNodeOffset:nodeTag];
  }];
 }
@@ -122,7 +128,7 @@ RCT_EXPORT_METHOD(connectAnimatedNodeToView:(nonnull NSNumber *)nodeTag
                  viewTag:(nonnull NSNumber *)viewTag)
 {
  NSString *viewName = [self.bridge.uiManager viewNameForReactTag:viewTag];
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager connectAnimatedNodeToView:nodeTag viewTag:viewTag viewName:viewName];
  }];
 }
@@ -130,14 +136,17 @@ RCT_EXPORT_METHOD(connectAnimatedNodeToView:(nonnull NSNumber *)nodeTag
 RCT_EXPORT_METHOD(disconnectAnimatedNodeFromView:(nonnull NSNumber *)nodeTag
                  viewTag:(nonnull NSNumber *)viewTag)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  // Disconnecting a view also restores its default values so we have to make
+  // sure this happens before views get updated with their new props. This is
+  // why we enqueue this on the pre-operations queue.
+  [self addPreOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager disconnectAnimatedNodeFromView:nodeTag viewTag:viewTag];
  }];
 }

 RCT_EXPORT_METHOD(dropAnimatedNode:(nonnull NSNumber *)tag)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager dropAnimatedNode:tag];
  }];
 }
@@ -145,7 +154,7 @@ RCT_EXPORT_METHOD(dropAnimatedNode:(nonnull NSNumber *)tag)
 RCT_EXPORT_METHOD(startListeningToAnimatedNodeValue:(nonnull NSNumber *)tag)
 {
  __weak id<RCTValueAnimatedNodeObserver> valueObserver = self;
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager startListeningToAnimatedNodeValue:tag valueObserver:valueObserver];
  }];
 }
@@ -153,7 +162,7 @@ RCT_EXPORT_METHOD(startListeningToAnimatedNodeValue:(nonnull NSNumber *)tag)
 RCT_EXPORT_METHOD(stopListeningToAnimatedNodeValue:(nonnull NSNumber *)tag)
 {
  __weak id<RCTValueAnimatedNodeObserver> valueObserver = self;
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager stopListeningToAnimatedNodeValue:tag valueObserver:valueObserver];
  }];
 }
@@ -162,7 +171,7 @@ RCT_EXPORT_METHOD(addAnimatedEventToView:(nonnull NSNumber *)viewTag
                  eventName:(nonnull NSString *)eventName
                  eventMapping:(NSDictionary<NSString *, id> *)eventMapping)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager addAnimatedEventToView:viewTag eventName:eventName eventMapping:eventMapping];
  }];
 }
@@ -171,24 +180,45 @@ RCT_EXPORT_METHOD(removeAnimatedEventFromView:(nonnull NSNumber *)viewTag
                  eventName:(nonnull NSString *)eventName
            animatedNodeTag:(nonnull NSNumber *)animatedNodeTag)
 {
-  [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
    [nodesManager removeAnimatedEventFromView:viewTag eventName:eventName animatedNodeTag:animatedNodeTag];
  }];
 }

 #pragma mark -- Batch handling

- (void)batchDidComplete
+- (void)addOperationBlock:(AnimatedOperation)operation
 {
-  NSArray *operations = _operations;
+  [_operations addObject:operation];
+}
+
+- (void)addPreOperationBlock:(AnimatedOperation)operation
+{
+  [_preOperations addObject:operation];
+}
+
+- (void)uiManagerWillFlushUIBlocks:(RCTUIManager *)uiManager
+{
+  if (_preOperations.count == 0 && _operations.count == 0) {
+    return;
+  }
+
+  NSArray<AnimatedOperation> *preOperations = _preOperations;
+  NSArray<AnimatedOperation> *operations = _operations;
+  _preOperations = [NSMutableArray new];
  _operations = [NSMutableArray new];

-  dispatch_async(dispatch_get_main_queue(), ^{
-    [operations enumerateObjectsUsingBlock:^(AnimatedOperation operation, NSUInteger i, BOOL *stop) {
+  [uiManager prependUIBlock:^(__unused RCTUIManager *manager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    for (AnimatedOperation operation in preOperations) {
      operation(self->_nodesManager);
-    }];
-    [self->_nodesManager updateAnimations];
-  });
+    }
+  }];
+
+  [uiManager addUIBlock:^(__unused RCTUIManager *manager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    for (AnimatedOperation operation in operations) {
+      operation(self->_nodesManager);
+    }
+  }];
 }

 #pragma mark -- Events