Native Animated - Support multiple events attached to the same prop

Summary:
Re-applying the diff that was reverted in D4659669 / b87f4abf78 because of some crashes with fixes from D4659708 merged in.

 ---

Fixes a bug that happens when trying to use ScrollView with sticky headers and native `Animated.event` with `onScroll`. Made a few changes to the ListViewPaging UIExplorer example to repro https://gist.github.com/janicduplessis/17e2fcd99c6ea49ced2954d881011b09.

What happens is we need to be able to add multiple events to the same prop + viewTag pair. To do that I simple changed the data structure to `Map<prop+viewTag, List<AnimatedEventDriver>>` and try to optimize for the case where there is only one item in the list since it will be the case 99% of the time.

**Test plan**
Tested by reproducing the bug with the above gist and made sure it was fixed after applying this diff.
Closes https://github.com/facebook/react-native/pull/12697

Reviewed By: fkgozali

Differential Revision: D4661105

Pulled By: sahrens

fbshipit-source-id: c719dc85f45c1a142ef5b9ebfe0a82ae8ec66497

Libraries/Animated/src/AnimatedImplementation.js

@@ -2187,7 +2187,13 @@ function attachNativeEvent(viewRef: any, eventName: string, argMapping: Array<?M
 
   return {
     detach() {
-      NativeAnimatedAPI.removeAnimatedEventFromView(viewTag, eventName);
+      eventMappings.forEach((mapping) => {
+        NativeAnimatedAPI.removeAnimatedEventFromView(
+          viewTag,
+          eventName,
+          mapping.animatedValueTag,
+        );
+      });
     },
   };
 }

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -93,9 +93,9 @@ const API = {
     assertNativeAnimatedModule();
     NativeAnimatedModule.addAnimatedEventToView(viewTag, eventName, eventMapping);
   },
-  removeAnimatedEventFromView(viewTag: ?number, eventName: string) {
+  removeAnimatedEventFromView(viewTag: ?number, eventName: string, animatedNodeTag: ?number) {
     assertNativeAnimatedModule();
-    NativeAnimatedModule.removeAnimatedEventFromView(viewTag, eventName);
+    NativeAnimatedModule.removeAnimatedEventFromView(viewTag, eventName, animatedNodeTag);
   }
 };
 

Libraries/NativeAnimation/RCTNativeAnimatedModule.m

@@ -168,10 +168,11 @@ RCT_EXPORT_METHOD(addAnimatedEventToView:(nonnull NSNumber *)viewTag
 }
 
 RCT_EXPORT_METHOD(removeAnimatedEventFromView:(nonnull NSNumber *)viewTag
-                  eventName:(nonnull NSString *)eventName)
+                  eventName:(nonnull NSString *)eventName
+            animatedNodeTag:(nonnull NSNumber *)animatedNodeTag)
 {
   [_operations addObject:^(RCTNativeAnimatedNodesManager *nodesManager) {
-    [nodesManager removeAnimatedEventFromView:viewTag eventName:eventName];
+    [nodesManager removeAnimatedEventFromView:viewTag eventName:eventName animatedNodeTag:animatedNodeTag];
   }];
 }
 

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h

@@ -9,8 +9,8 @@
 
 #import <Foundation/Foundation.h>
 
-#import <React/RCTUIManager.h>
 #import <React/RCTBridgeModule.h>
+#import <React/RCTUIManager.h>
 
 #import "RCTValueAnimatedNode.h"
 
@@ -70,7 +70,8 @@
                   eventMapping:(NSDictionary<NSString *, id> *__nonnull)eventMapping;
 
 - (void)removeAnimatedEventFromView:(nonnull NSNumber *)viewTag
-                          eventName:(nonnull NSString *)eventName;
+                          eventName:(nonnull NSString *)eventName
+                    animatedNodeTag:(nonnull NSNumber *)animatedNodeTag;
 
 - (void)handleAnimatedEvent:(nonnull id<RCTEvent>)event;
 

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

@@ -11,29 +11,29 @@
 
 #import <React/RCTConvert.h>
 
+#import "RCTAdditionAnimatedNode.h"
 #import "RCTAnimatedNode.h"
 #import "RCTAnimationDriver.h"
-#import "RCTEventAnimation.h"
-
-#import "RCTAdditionAnimatedNode.h"
-#import "RCTInterpolationAnimatedNode.h"
 #import "RCTDiffClampAnimatedNode.h"
 #import "RCTDivisionAnimatedNode.h"
+#import "RCTEventAnimation.h"
+#import "RCTFrameAnimation.h"
+#import "RCTInterpolationAnimatedNode.h"
 #import "RCTModuloAnimatedNode.h"
 #import "RCTMultiplicationAnimatedNode.h"
-#import "RCTModuloAnimatedNode.h"
 #import "RCTPropsAnimatedNode.h"
+#import "RCTSpringAnimation.h"
 #import "RCTStyleAnimatedNode.h"
 #import "RCTTransformAnimatedNode.h"
 #import "RCTValueAnimatedNode.h"
-#import "RCTFrameAnimation.h"
-#import "RCTSpringAnimation.h"
 
 @implementation RCTNativeAnimatedNodesManager
 {
   RCTUIManager *_uiManager;
   NSMutableDictionary<NSNumber *, RCTAnimatedNode *> *_animationNodes;
-  NSMutableDictionary<NSString *, RCTEventAnimation *> *_eventDrivers;
+  // Mapping of a view tag and an event name to a list of event animation drivers. 99% of the time
+  // there will be only one driver per mapping so all code code should be optimized around that.
+  NSMutableDictionary<NSString *, NSMutableArray<RCTEventAnimation *> *> *_eventDrivers;
   NSMutableSet<id<RCTAnimationDriver>> *_activeAnimations;
   CADisplayLink *_displayLink;
 }
@@ -207,7 +207,7 @@
   RCTValueAnimatedNode *valueNode = (RCTValueAnimatedNode *)_animationNodes[nodeTag];
 
   NSString *type = config[@"type"];
-  id<RCTAnimationDriver>animationDriver;
+  id<RCTAnimationDriver> animationDriver;
 
   if ([type isEqual:@"frames"]) {
     animationDriver = [[RCTFrameAnimation alloc] initWithId:animationId
@@ -233,7 +233,7 @@
 
 - (void)stopAnimation:(nonnull NSNumber *)animationId
 {
-  for (id<RCTAnimationDriver>driver in _activeAnimations) {
+  for (id<RCTAnimationDriver> driver in _activeAnimations) {
     if ([driver.animationId isEqual:animationId]) {
       [driver removeAnimation];
       [_activeAnimations removeObject:driver];
@@ -264,15 +264,36 @@
   NSArray<NSString *> *eventPath = [RCTConvert NSStringArray:eventMapping[@"nativeEventPath"]];
 
   RCTEventAnimation *driver =
-  [[RCTEventAnimation alloc] initWithEventPath:eventPath valueNode:(RCTValueAnimatedNode *)node];
+    [[RCTEventAnimation alloc] initWithEventPath:eventPath valueNode:(RCTValueAnimatedNode *)node];
 
-  _eventDrivers[[NSString stringWithFormat:@"%@%@", viewTag, eventName]] = driver;
+  NSString *key = [NSString stringWithFormat:@"%@%@", viewTag, eventName];
+  if (_eventDrivers[key] != nil) {
+    [_eventDrivers[key] addObject:driver];
+  } else {
+    NSMutableArray<RCTEventAnimation *> *drivers = [NSMutableArray new];
+    [drivers addObject:driver];
+    _eventDrivers[key] = drivers;
+  }
 }
 
 - (void)removeAnimatedEventFromView:(nonnull NSNumber *)viewTag
                           eventName:(nonnull NSString *)eventName
+                    animatedNodeTag:(nonnull NSNumber *)animatedNodeTag
 {
-  [_eventDrivers removeObjectForKey:[NSString stringWithFormat:@"%@%@", viewTag, eventName]];
+  NSString *key = [NSString stringWithFormat:@"%@%@", viewTag, eventName];
+  if (_eventDrivers[key] != nil) {
+    if (_eventDrivers[key].count == 1) {
+      [_eventDrivers removeObjectForKey:key];
+    } else {
+      NSMutableArray<RCTEventAnimation *> *driversForKey = _eventDrivers[key];
+      for (NSUInteger i = 0; i < driversForKey.count; i++) {
+        if (driversForKey[i].valueNode.nodeTag == animatedNodeTag) {
+          [driversForKey removeObjectAtIndex:i];
+          break;
+        }
+      }
+    }
+  }
 }
 
 - (void)handleAnimatedEvent:(id<RCTEvent>)event
@@ -282,9 +303,12 @@
   }
 
   NSString *key = [NSString stringWithFormat:@"%@%@", event.viewTag, event.eventName];
-  RCTEventAnimation *driver = _eventDrivers[key];
-  if (driver) {
-    [driver updateWithEvent:event];
+  NSMutableArray<RCTEventAnimation *> *driversForKey = _eventDrivers[key];
+  if (driversForKey) {
+    for (RCTEventAnimation *driver in driversForKey) {
+      [driver updateWithEvent:event];
+    }
+
     [self updateAnimations];
   }
 }
@@ -337,13 +361,13 @@
 
 - (void)stepAnimations
 {
-  for (id<RCTAnimationDriver>animationDriver in _activeAnimations) {
+  for (id<RCTAnimationDriver> animationDriver in _activeAnimations) {
     [animationDriver stepAnimation];
   }
 
   [self updateAnimations];
 
-  for (id<RCTAnimationDriver>animationDriver in [_activeAnimations copy]) {
+  for (id<RCTAnimationDriver> animationDriver in [_activeAnimations copy]) {
     if (animationDriver.animationHasFinished) {
       [animationDriver removeAnimation];
       [_activeAnimations removeObject:animationDriver];

ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java

@@ -353,11 +353,11 @@ public class NativeAnimatedModule extends ReactContextBaseJavaModule implements
   }
 
   @ReactMethod
-  public void removeAnimatedEventFromView(final int viewTag, final String eventName) {
+  public void removeAnimatedEventFromView(final int viewTag, final String eventName, final int animatedValueTag) {
     mOperations.add(new UIThreadOperation() {
       @Override
       public void execute(NativeAnimatedNodesManager animatedNodesManager) {
-        animatedNodesManager.removeAnimatedEventFromView(viewTag, eventName);
+        animatedNodesManager.removeAnimatedEventFromView(viewTag, eventName, animatedValueTag);
       }
     });
   }

ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedNodesManager.java

@@ -31,7 +31,9 @@ import java.util.ArrayDeque;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.HashMap;
+import java.util.LinkedList;
 import java.util.List;
+import java.util.ListIterator;
 import java.util.Map;
 import java.util.Queue;
 
@@ -55,12 +57,14 @@ import javax.annotation.Nullable;
   private final SparseArray<AnimatedNode> mAnimatedNodes = new SparseArray<>();
   private final SparseArray<AnimationDriver> mActiveAnimations = new SparseArray<>();
   private final SparseArray<AnimatedNode> mUpdatedNodes = new SparseArray<>();
-  private final Map<String, EventAnimationDriver> mEventDrivers = new HashMap<>();
+  // Mapping of a view tag and an event name to a list of event animation drivers. 99% of the time
+  // there will be only one driver per mapping so all code code should be optimized around that.
+  private final Map<String, List<EventAnimationDriver>> mEventDrivers = new HashMap<>();
   private final Map<String, Map<String, String>> mCustomEventTypes;
   private final UIImplementation mUIImplementation;
   private int mAnimatedGraphBFSColor = 0;
-  // Used to avoid allocating a new array on every frame in runUpdates.
-  private final List<AnimatedNode> mRunUpdateNodeList = new ArrayList<>();
+  // Used to avoid allocating a new array on every frame in `runUpdates` and `onEventDispatch`.
+  private final List<AnimatedNode> mRunUpdateNodeList = new LinkedList<>();
 
   public NativeAnimatedNodesManager(UIManagerModule uiManager) {
     mUIImplementation = uiManager.getUIImplementation();
@@ -312,11 +316,32 @@ import javax.annotation.Nullable;
     }
 
     EventAnimationDriver event = new EventAnimationDriver(pathList, (ValueAnimatedNode) node);
-    mEventDrivers.put(viewTag + eventName, event);
+    String key = viewTag + eventName;
+    if (mEventDrivers.containsKey(key)) {
+      mEventDrivers.get(key).add(event);
+    } else {
+      List<EventAnimationDriver> drivers = new ArrayList<>(1);
+      drivers.add(event);
+      mEventDrivers.put(key, drivers);
+    }
   }
 
-  public void removeAnimatedEventFromView(int viewTag, String eventName) {
-    mEventDrivers.remove(viewTag + eventName);
+  public void removeAnimatedEventFromView(int viewTag, String eventName, int animatedValueTag) {
+    String key = viewTag + eventName;
+    if (mEventDrivers.containsKey(key)) {
+      List<EventAnimationDriver> driversForKey = mEventDrivers.get(key);
+      if (driversForKey.size() == 1) {
+        mEventDrivers.remove(viewTag + eventName);
+      } else {
+        ListIterator<EventAnimationDriver> it = driversForKey.listIterator();
+        while (it.hasNext()) {
+          if (it.next().mValueNode.mTag == animatedValueTag) {
+            it.remove();
+            break;
+          }
+        }
+      }
+    }
   }
 
   @Override
@@ -334,11 +359,14 @@ import javax.annotation.Nullable;
         eventName = customEventType.get("registrationName");
       }
 
-      EventAnimationDriver eventDriver = mEventDrivers.get(event.getViewTag() + eventName);
-      if (eventDriver != null) {
-        event.dispatch(eventDriver);
-
-        updateNodes(Collections.singletonList((AnimatedNode) eventDriver.mValueNode));
+      List<EventAnimationDriver> driversForKey = mEventDrivers.get(event.getViewTag() + eventName);
+      if (driversForKey != null) {
+        for (EventAnimationDriver driver : driversForKey) {
+          event.dispatch(driver);
+          mRunUpdateNodeList.add(driver.mValueNode);
+        }
+        updateNodes(mRunUpdateNodeList);
+        mRunUpdateNodeList.clear();
       }
     }
   }