Native Animated - Coalesce onValueChanged events on iOS #15682
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| #import <React/RCTEventDispatcher.h> | ||
|
|
||
| @interface RCTAnimatedValueChangeEvent : NSObject <RCTEvent> | ||
|
|
||
| - (instancetype)initWithNodeTag:(NSNumber *)nodeTag | ||
|
Contributor
There was a problem hiding this comment. If it is not a
Contributor
Author
There was a problem hiding this comment. This should be possible, we only use viewTag to generate an id for the event based on viewTag + eventName + coalescingKey. We could make view tag optional for events that are not related to views and only use coalescingKey to identify these events. (https://github.com/facebook/react-native/blob/master/React/Base/RCTEventDispatcher.m#L34) |
||
| value:(CGFloat)value NS_DESIGNATED_INITIALIZER; | ||
|
|
||
| @end | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| #import "RCTAnimatedValueChangeEvent.h" | ||
|
|
||
| @implementation RCTAnimatedValueChangeEvent | ||
| { | ||
| CGFloat _value; | ||
| } | ||
|
|
||
| @synthesize viewTag = _viewTag; | ||
|
Contributor
There was a problem hiding this comment. Why do not declare this as regular
Contributor
Author
There was a problem hiding this comment. Same as the _bridge for native modules, it implements properties from the RCTEvent protocol. Based this on other events (https://github.com/facebook/react-native/blob/master/React/Views/RCTScrollView.m#L51) |
||
| @synthesize eventName = _eventName; | ||
| @synthesize coalescingKey = _coalescingKey; | ||
|
|
||
| - (instancetype)initWithNodeTag:(NSNumber *)nodeTag | ||
| value:(CGFloat)value | ||
| { | ||
| if (self = [super init]) { | ||
| _eventName = @"onAnimatedValueUpdate"; | ||
| _viewTag = nodeTag; | ||
|
Contributor
Author
There was a problem hiding this comment. RCTEvent protocol is a bit specific to views events but the coalescing logic can be used for any kind of event. Ideally this would not be called viewTag but for now we use this to coalesce events by node tag. It would have also been possible to use coalescingKey instead.
Contributor
There was a problem hiding this comment. How can we make it less specific or simply better? Let's do this. 😄 |
||
| _coalescingKey = 0; | ||
| _value = value; | ||
| } | ||
| return self; | ||
| } | ||
|
|
||
| RCT_NOT_IMPLEMENTED(- (instancetype)init) | ||
|
|
||
| - (BOOL)canCoalesce | ||
| { | ||
| return YES; | ||
| } | ||
|
|
||
| - (RCTAnimatedValueChangeEvent *)coalesceWithEvent:(RCTAnimatedValueChangeEvent *)newEvent | ||
| { | ||
| return newEvent; | ||
| } | ||
|
|
||
| + (NSString *)moduleDotMethod | ||
| { | ||
| return @"RCTDeviceEventEmitter.emit"; | ||
| } | ||
|
|
||
| - (NSArray *)arguments | ||
| { | ||
| return @[_eventName, @{@"tag": _viewTag, @"value": @(_value)}]; | ||
| } | ||
|
|
||
| @end | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,7 @@ | |
| */ | ||
| #import "RCTNativeAnimatedModule.h" | ||
|
|
||
| #import "RCTAnimatedValueChangeEvent.h" | ||
| #import "RCTNativeAnimatedNodesManager.h" | ||
|
|
||
| typedef void (^AnimatedOperation)(RCTNativeAnimatedNodesManager *nodesManager); | ||
|
|
@@ -21,6 +22,8 @@ @implementation RCTNativeAnimatedModule | |
| NSMutableDictionary<NSNumber *, NSNumber *> *_animIdIsManagedByFabric; | ||
| } | ||
|
|
||
| @synthesize bridge = _bridge; | ||
|
Contributor
There was a problem hiding this comment. Just serious, is this a special reason to use
Contributor
There was a problem hiding this comment. Or why don't add this as a prop to class interface inside this (.m) file?
Contributor
Author
There was a problem hiding this comment. From what I understand @synthesize is used to implement properties from a protocol without having to redefine them (https://github.com/facebook/react-native/blob/master/React/Base/RCTBridgeModule.h#L87). It's pretty much used for every native module that needs to access the bridge. |
||
|
|
||
| RCT_EXPORT_MODULE(); | ||
|
|
||
| - (void)invalidate | ||
|
|
@@ -41,7 +44,7 @@ - (dispatch_queue_t)methodQueue | |
|
|
||
| - (void)setBridge:(RCTBridge *)bridge | ||
| { | ||
| _bridge = bridge; | ||
|
|
||
| _nodesManager = [[RCTNativeAnimatedNodesManager alloc] initWithBridge:self.bridge]; | ||
| _operations = [NSMutableArray new]; | ||
|
|
@@ -293,15 +296,10 @@ - (void)uiManagerWillPerformMounting:(RCTUIManager *)uiManager | |
|
|
||
| #pragma mark -- Events | ||
|
|
||
| - (void)animatedNode:(RCTValueAnimatedNode *)node didUpdateValue:(CGFloat)value | ||
| { | ||
| RCTAnimatedValueChangeEvent *event = [[RCTAnimatedValueChangeEvent alloc] initWithNodeTag:node.nodeTag value:value]; | ||
| [self.bridge.eventDispatcher sendEvent:event]; | ||
| } | ||
|
|
||
| - (void)eventDispatcherWillDispatchEvent:(id<RCTEvent>)event | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.