Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Native Animated - Support events using RCT{Direct|Bubbling}EventBlock on iOS #15611

Closed
wants to merge 2 commits into from
Closed

Native Animated - Support events using RCT{Direct|Bubbling}EventBlock on iOS #15611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5fd15b3
Native Animated - Support events using RCT{Direct|Bubbling}EventBlock…
janicduplessis Apr 22, 2019
4fe14cf
Fix typo
janicduplessis Apr 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,21 @@
#import "RCTValueAnimatedNode.h"
#import "RCTTrackingAnimatedNode.h"

// We do some normalizing of the event names in RCTEventDispatcher#RCTNormalizeInputEventName.
// To make things simpler just get rid of the parts we change in the event names we use here.
// This is a lot easier than trying to denormalize because there would be multiple possible
// denormalized forms for a single input.
NSString *RCTNormalizeAnimatedEventName(NSString *eventName)
cpojer marked this conversation as resolved.
Show resolved Hide resolved
{
if ([eventName hasPrefix:@"on"]) {
return [eventName substringFromIndex:2];
}
if ([eventName hasPrefix:@"top"]) {
return [eventName substringFromIndex:3];
}
return eventName;
}

@implementation RCTNativeAnimatedNodesManager
{
__weak RCTBridge *_bridge;
Expand Down Expand Up @@ -321,7 +336,7 @@ - (void)addAnimatedEventToView:(nonnull NSNumber *)viewTag
RCTEventAnimation *driver =
[[RCTEventAnimation alloc] initWithEventPath:eventPath valueNode:(RCTValueAnimatedNode *)node];

NSString *key = [NSString stringWithFormat:@"%@%@", viewTag, eventName];
NSString *key = [NSString stringWithFormat:@"%@%@", viewTag, RCTNormalizeAnimatedEventName(eventName)];
if (_eventDrivers[key] != nil) {
[_eventDrivers[key] addObject:driver];
} else {
Expand All @@ -335,7 +350,7 @@ - (void)removeAnimatedEventFromView:(nonnull NSNumber *)viewTag
eventName:(nonnull NSString *)eventName
animatedNodeTag:(nonnull NSNumber *)animatedNodeTag
{
NSString *key = [NSString stringWithFormat:@"%@%@", viewTag, eventName];
NSString *key = [NSString stringWithFormat:@"%@%@", viewTag, RCTNormalizeAnimatedEventName(eventName)];
if (_eventDrivers[key] != nil) {
if (_eventDrivers[key].count == 1) {
[_eventDrivers removeObjectForKey:key];
Expand All @@ -357,7 +372,7 @@ - (void)handleAnimatedEvent:(id<RCTEvent>)event
return;
}

NSString *key = [NSString stringWithFormat:@"%@%@", event.viewTag, event.eventName];
NSString *key = [NSString stringWithFormat:@"%@%@", event.viewTag, RCTNormalizeAnimatedEventName(event.eventName)];
NSMutableArray<RCTEventAnimation *> *driversForKey = _eventDrivers[key];
if (driversForKey) {
for (RCTEventAnimation *driver in driversForKey) {
Expand Down
13 changes: 10 additions & 3 deletions RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ class InternalSettings extends React.Component<

class EventExample extends React.Component<{}, $FlowFixMeState> {
state = {
scrollX: new Animated.Value(0),
anim: new Animated.Value(0),
};

render() {
Expand All @@ -233,7 +233,7 @@ class EventExample extends React.Component<{}, $FlowFixMeState> {
{
transform: [
{
rotate: this.state.scrollX.interpolate({
rotate: this.state.anim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '1deg'],
}),
Expand All @@ -246,7 +246,7 @@ class EventExample extends React.Component<{}, $FlowFixMeState> {
horizontal
style={{height: 100, marginTop: 16}}
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {x: this.state.scrollX}}}],
[{nativeEvent: {contentOffset: {x: this.state.anim}}}],
{useNativeDriver: true},
)}>
<View
Expand All @@ -259,6 +259,13 @@ class EventExample extends React.Component<{}, $FlowFixMeState> {
<Text>Scroll me sideways!</Text>
</View>
</Animated.ScrollView>
<AnimatedSlider
maximumValue={200}
onValueChange={Animated.event(
[{nativeEvent: {value: this.state.anim}}],
{useNativeDriver: true},
)}
/>
</View>
);
}
Expand Down