Remove all listeners of AnimatedNode when detached

Summary:
changelog: [internal]

Removing listener on detached node leads to a red box, if the said node is `DiffClampAnimatedNode`. This is because calling `AnimatedNode.__getNativeTag()` makes native module call and creates node in native. This node is not completely initialised and red boxes because `[RCTAnimatedNode parentNodes]` is nil when it shouldn't be.

The fix is make sure all listeners are removed before node is destroyed. It is logically correct thing to do. The fix is global, for all components using `DiffClampAnimatedNode`.

Reviewed By: yungsters

Differential Revision: D40381895

fbshipit-source-id: 4f558faf8101b70552f30e6360998e902aacbc83

Libraries/Animated/nodes/AnimatedNode.js

@@ -12,6 +12,7 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
+import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 import invariant from 'invariant';
 
@@ -29,6 +30,9 @@ export default class AnimatedNode {
   __nativeAnimatedValueListener: ?any;
   __attach(): void {}
   __detach(): void {
+    if (ReactNativeFeatureFlags.removeListenersOnDetach()) {
+      this.removeAllListeners();
+    }
     if (this.__isNative && this.__nativeTag != null) {
       NativeAnimatedHelper.API.dropAnimatedNode(this.__nativeTag);
       this.__nativeTag = undefined;

Libraries/ReactNative/ReactNativeFeatureFlags.js

@@ -43,6 +43,8 @@ export type FeatureFlags = {|
    * to render react components driven by classes written in C++.
    */
   enableCppRenderSystem: () => boolean,
+
+  removeListenersOnDetach: () => boolean,
 |};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
@@ -52,6 +54,7 @@ const ReactNativeFeatureFlags: FeatureFlags = {
   animatedShouldDebounceQueueFlush: () => false,
   animatedShouldUseSingleOp: () => false,
   enableCppRenderSystem: () => false,
+  removeListenersOnDetach: () => false,
 };
 
 module.exports = ReactNativeFeatureFlags;