[NativeAnimated][iOS] Add support for value listener

Author: janicduplessis

Examples/UIExplorer/js/NativeAnimationsExample.js

@@ -347,7 +347,6 @@ exports.examples = [
   },
   {
     title: 'Animated value listener',
-    platform: 'android',
     render: function() {
       return (
         <ValueListenerExample />

Libraries/Animated/src/AnimatedImplementation.js

@@ -11,7 +11,6 @@
  */
 'use strict';
 
-var DeviceEventEmitter = require('RCTDeviceEventEmitter');
 var InteractionManager = require('InteractionManager');
 var Interpolation = require('Interpolation');
 var React = require('React');
@@ -744,23 +743,24 @@ class AnimatedValue extends AnimatedWithChildren {
   }
 
   _startListeningToNativeValueUpdates() {
-    if (this.__nativeAnimatedValueListener ||
-        !NativeAnimatedHelper.supportsNativeListener()) {
+    if (this.__nativeAnimatedValueListener) {
       return;
     }
 
     NativeAnimatedAPI.startListeningToAnimatedNodeValue(this.__getNativeTag());
-    this.__nativeAnimatedValueListener = DeviceEventEmitter.addListener('onAnimatedValueUpdate', (data) => {
-      if (data.tag !== this.__getNativeTag()) {
-        return;
+    this.__nativeAnimatedValueListener = NativeAnimatedHelper.nativeEventEmitter.addListener(
+      'onAnimatedValueUpdate',
+      (data) => {
+        if (data.tag !== this.__getNativeTag()) {
+          return;
+        }
+        this._updateValue(data.value, false /* flush */);
       }
-      this._updateValue(data.value, false /* flush */);
-    });
+    );
   }
 
   _stopListeningForNativeValueUpdates() {
-    if (!this.__nativeAnimatedValueListener ||
-        !NativeAnimatedHelper.supportsNativeListener()) {
+    if (!this.__nativeAnimatedValueListener) {
       return;
     }
 

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -11,21 +11,24 @@
  */
 'use strict';
 
-var NativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
+const NativeAnimatedModule = require('NativeModules').NativeAnimatedModule;
+const NativeEventEmitter = require('NativeEventEmitter');
 
-var invariant = require('fbjs/lib/invariant');
+const invariant = require('fbjs/lib/invariant');
 
-var __nativeAnimatedNodeTagCount = 1; /* used for animated nodes */
-var __nativeAnimationIdCount = 1; /* used for started animations */
+let __nativeAnimatedNodeTagCount = 1; /* used for animated nodes */
+let __nativeAnimationIdCount = 1; /* used for started animations */
 
 type EndResult = {finished: bool};
 type EndCallback = (result: EndResult) => void;
 
+const nativeEventEmitter = new NativeEventEmitter(NativeAnimatedModule);
+
 /**
- * Simple wrappers around NativeANimatedModule to provide flow and autocmplete support for
+ * Simple wrappers around NativeAnimatedModule to provide flow and autocmplete support for
  * the native module methods
  */
-var API = {
+const API = {
   createAnimatedNode: function(tag: number, config: Object): void {
     assertNativeAnimatedModule();
     NativeAnimatedModule.createAnimatedNode(tag, config);
@@ -79,7 +82,7 @@ var API = {
  * to be updated through the shadow view hierarchy (all non-layout properties). This list is limited
  * to the properties that will perform best when animated off the JS thread.
  */
-var PROPS_WHITELIST = {
+const PROPS_WHITELIST = {
   style: {
     opacity: true,
     transform: true,
@@ -91,7 +94,7 @@ var PROPS_WHITELIST = {
   },
 };
 
-var TRANSFORM_WHITELIST = {
+const TRANSFORM_WHITELIST = {
   translateX: true,
   translateY: true,
   scale: true,
@@ -152,11 +155,6 @@ function assertNativeAnimatedModule(): void {
   invariant(NativeAnimatedModule, 'Native animated module is not available');
 }
 
-// TODO: remove this when iOS supports native listeners.
-function supportsNativeListener(): bool {
-  return !!NativeAnimatedModule.startListeningToAnimatedNodeValue;
-}
-
 module.exports = {
   API,
   validateProps,
@@ -166,5 +164,5 @@ module.exports = {
   generateNewNodeTag,
   generateNewAnimationId,
   assertNativeAnimatedModule,
-  supportsNativeListener,
+  nativeEventEmitter,
 };

Libraries/Animated/src/__tests__/Animated-test.js

@@ -13,7 +13,8 @@ jest
   .setMock('Text', {})
   .setMock('View', {})
   .setMock('Image', {})
-  .setMock('React', {Component: class {}});
+  .setMock('React', {Component: class {}})
+  .setMock('NativeEventEmitter', class {});
 
 var Animated = require('Animated');
 

Libraries/NativeAnimation/Nodes/RCTValueAnimatedNode.h

@@ -10,8 +10,17 @@
 #import "RCTAnimatedNode.h"
 #import <UIKit/UIKit.h>
 
+@class RCTValueAnimatedNode;
+
+@protocol RCTValueAnimatedNodeObserver <NSObject>
+
+- (void)animatedNode:(RCTValueAnimatedNode *)node didUpdateValue:(CGFloat)value;
+
+@end
+
 @interface RCTValueAnimatedNode : RCTAnimatedNode
 
 @property (nonatomic, assign) CGFloat value;
+@property (nonatomic, weak) id<RCTValueAnimatedNodeObserver> valueObserver;
 
 @end

Libraries/NativeAnimation/Nodes/RCTValueAnimatedNode.m

@@ -11,4 +11,13 @@
 
 @implementation RCTValueAnimatedNode
 
+- (void)setValue:(CGFloat)value
+{
+  _value = value;
+
+  if (_valueObserver) {
+    [_valueObserver animatedNode:self didUpdateValue:_value];
+  }
+}
+
 @end

Libraries/NativeAnimation/RCTNativeAnimatedModule.h

@@ -7,7 +7,9 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 #import "RCTBridgeModule.h"
+#import "RCTValueAnimatedNode.h"
+#import "RCTEventEmitter.h"
 
-@interface RCTNativeAnimatedModule : NSObject <RCTBridgeModule>
+@interface RCTNativeAnimatedModule : RCTEventEmitter <RCTBridgeModule, RCTValueAnimatedNodeObserver>
 
 @end

Libraries/NativeAnimation/RCTNativeAnimatedModule.m

@@ -32,13 +32,12 @@ @implementation RCTNativeAnimatedModule
   CADisplayLink *_displayLink;
 }
 
-@synthesize bridge = _bridge;
-
 RCT_EXPORT_MODULE()
 
 - (void)setBridge:(RCTBridge *)bridge
 {
-  _bridge = bridge;
+  [super setBridge:bridge];
+
   _animationNodes = [NSMutableDictionary new];
   _animationDrivers = [NSMutableDictionary new];
   _activeAnimations = [NSMutableSet new];
@@ -47,11 +46,17 @@ - (void)setBridge:(RCTBridge *)bridge
   _propAnimationNodes = [NSMutableSet new];
 }
 
+
 - (dispatch_queue_t)methodQueue
 {
   return dispatch_get_main_queue();
 }
 
+- (NSArray<NSString *> *)supportedEvents
+{
+  return @[@"onAnimatedValueUpdate"];
+}
+
 RCT_EXPORT_METHOD(createAnimatedNode:(nonnull NSNumber *)tag
                   config:(NSDictionary<NSString *, id> *)config)
 {
@@ -198,6 +203,29 @@ - (dispatch_queue_t)methodQueue
   }
 }
 
+RCT_EXPORT_METHOD(startListeningToAnimatedNodeValue:(nonnull NSNumber *)tag)
+{
+  RCTAnimatedNode *node = _animationNodes[tag];
+  if (node && [node isKindOfClass:[RCTValueAnimatedNode class]]) {
+    ((RCTValueAnimatedNode *)node).valueObserver = self;
+  }
+}
+
+RCT_EXPORT_METHOD(stopListeningToAnimatedNodeValue:(nonnull NSNumber *)tag)
+{
+  RCTAnimatedNode *node = _animationNodes[tag];
+  if (node && [node isKindOfClass:[RCTValueAnimatedNode class]]) {
+    ((RCTValueAnimatedNode *)node).valueObserver = nil;
+  }
+}
+
+- (void)animatedNode:(RCTValueAnimatedNode *)node didUpdateValue:(CGFloat)value
+{
+  [self sendEventWithName:@"onAnimatedValueUpdate"
+                     body:@{@"tag": node.nodeTag, @"value": @(value)}];
+}
+
+
 #pragma mark -- Animation Loop
 
 - (void)startAnimation