[Android] Animated Event is not firing when useNativeDriver enabled

[N3TC4T]

Description

This part of code will cause the Animated.Event to not be fired if the useNativeDriver is set to true and if event name starts with on, not sure why this code has been added in the first place.

https://github.com/facebook/react-native/blob/565a7439ac8af66ab9b15e28119388608fd287c5/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedNodesManager.java#L826-L828

Version

0.71.1

Output of npx react-native info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.68 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.1 - ~/.me/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - ~/.me/versions/node/v16.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvme/versions/node/v16.18.1/bin/npm
    Watchman: 2023.01.23.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 30, 31, 32, 33
      Build Tools: 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-30 | Google APIs ARM 64 v8a, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play ARM 64 v8a, android-30 | Google Play Intel x86 Atom_64, android-32 | Google APIs ARM 64 v8a, android-32 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.1 => 0.71.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Create a custom Animated view with an event name starts with on like onAnimatedEvent, pass the Animated.event with useNativeDriver as true in the config. the event never fires, change the event name to OnAnimatedEvent and it works as expected.

Snack, code example, screenshot, or link to a repository

https://github.com/N3TC4T/react_native_issue_36125

[redpanda-bit]

Are you able to post your implementation of this? I installed react-native-interactable on a new npx [email protected] init AwesomeApp app and it works as expected with the implementation below.

function App(): JSX.Element {
  const style = {width: 200, height: 200, backgroundColor: '#EE2C38'};

  const onSnap = (event: any) => {
    console.log('onSnap', event.nativeEvent);
  };

  return (
    <Interactable.View
      horizontalOnly={true}
      snapPoints={[{x: 0}, {x: 200}]}
      onSnap={onSnap}>
      <View style={style} />
    </Interactable.View>
  );
}

[N3TC4T]

Thanks @carlosalmonte04, this only effects Animated events when using useNativeDriver, you should be able to reproduce this with below code:

function App(): JSX.Element {
  const style = {width: 200, height: 200, backgroundColor: '#EE2C38'};

  const deltaY = new Animated.Value(0);
  const deltaX = new Animated.Value(0);

  deltaY.addListener(console.log);

  return (
    <Interactable.View
      horizontalOnly={true}
      animatedNativeDriver={true}
      snapPoints={[{x: 0}, {x: 200}]}
      animatedValueY={deltaY}
      animatedValueX={deltaX}
      <View style={style} />
    </Interactable.View>
  );
}

[bigcupcoffee]

That's not quite how you work with Animated values in functional components, try again with useAnimatedValue hook?

[N3TC4T]

That was just an example, I'm not using hooks or functional components.

[redpanda-bit]

I was able to replicate with the code you provided, thank you.

Would using onDrag={console.log} be enough for your use-case? I spent a long time trying to find the cause for deltaY.addListener not to work and no luck, sorry.

[redpanda-bit]

If you need something to update as the element moves you can try adding something on the native side of react-native-interactable, somewhere around this line https://github.com/wix/react-native-interactable/blob/master/lib/android/src/main/java/com/wix/interactable/InteractableView.java#L248

[lunaleaps]

This might be an issue for Wix's Interactable, can you reproduce with Animated.View?

[redpanda-bit]

I am not able to reproduce using Animated.View and onLayout code below.

@N3TC4T react-native-interactable might be the problem here. I would consider using a newer/better maintained library or your custom made animated component.

function App(): JSX.Element {
  const style = {width: 200, height: 200, backgroundColor: '#EE2C38'};

  const deltaY = new Animated.Value(0);
  const deltaX = new Animated.Value(0);

  deltaY.addListener(console.log);

  const onLayout = (event: any) => {
    const {width, height} = event.nativeEvent.layout;

    Animated.timing(deltaY, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Animated.View onLayout={onLayout}>
      <View style={style} />
    </Animated.View>
  );
}```

Let me know if know if help is needed!

[N3TC4T]

@carlosalmonte04 @lunaleaps I created a repo with sample code's

https://github.com/N3TC4T/react_native_issue_36125

two exact same events with one starts with lower case on and another one starts with upper case On

https://github.com/N3TC4T/react_native_issue_36125/blob/9f5ac5150a6913c91aeded939aae264987fe9783/android/app/src/main/java/com/mycustomlib/MyCustomViewManager.java#L32-L33

Just start the app and check the console and you will see that the event with uppercase On does trigger and event with lower case on does not triggered.

[redpanda-bit]

App crashes upon launch. I get the outputs below on adb logcat.

...
02-19 19:18:57.049 14639 14684 I ReactNativeJS: 'Event recieved from onAnimatedEventIssue', { value: 0 }
02-19 19:18:57.050 14639 14684 I ReactNativeJS: 'Event recieved from OnAnimatedEventWorks', { value: 0 }
02-19 19:18:57.728 14639 14684 I ReactNativeJS: 'Event recieved from OnAnimatedEventWorks', { value: 1 }
02-19 19:18:58.530 14639 14684 I ReactNativeJS: 'Event recieved from OnAnimatedEventWorks', { value: 2 }
02-19 19:18:59.332 14639 14684 I ReactNativeJS: 'Event recieved from OnAnimatedEventWorks', { value: 3 }
...

...
02-19 19:19:10.567 14639 14639 D AndroidRuntime: Shutting down VM
02-19 19:19:10.569 14639 14639 E AndroidRuntime: FATAL EXCEPTION: main
02-19 19:19:10.569 14639 14639 E AndroidRuntime: Process: com.awesomeproject, PID: 14639
02-19 19:19:10.569 14639 14639 E AndroidRuntime: com.facebook.react.bridge.NoSuchKeyException: value
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.facebook.react.bridge.ReadableNativeMap.getValue(ReadableNativeMap.java:110)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.facebook.react.bridge.ReadableNativeMap.getValue(ReadableNativeMap.java:114)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.facebook.react.bridge.ReadableNativeMap.getDouble(ReadableNativeMap.java:151)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.facebook.react.animated.EventAnimationDriver.receiveEvent(EventAnimationDriver.java:76)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.mycustomlib.Events$OnAnimatedEventWorks.dispatch(Events.java:48)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent(NativeAnimatedNodesManager.java:589)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.facebook.react.animated.NativeAnimatedNodesManager.access$000(NativeAnimatedNodesManager.java:52)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.facebook.react.animated.NativeAnimatedNodesManager$1.run(NativeAnimatedNodesManager.java:562)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:790)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:99)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:164)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:6494)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
02-19 19:19:10.569 14639 14639 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
02-19 19:19:10.573  1640  1860 W ActivityManager:   Force finishing activity com.awesomeproject/.MainActivity
02-19 19:19:10.580  1640  1655 I ActivityManager: Showing crash dialog for package com.awesomeproject u0
...

Perhaps it was not intended to be used that way? I'm not that skilled in Java so I will defer to your judgement.

Also got this error upon launch a few times. Error seems to be handled.

[serjek]

Having the same problem with wix's library, and indeed setting useNativeDriver to false would make events dispatch. I don't think there is a problem with on/On naming or whatever, because events are coming through at the end, it's just a useNativeDriver, who causes the issue.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[stianjensen]

Is this still caused by an intentional change in RN 0.71? The behavior used to work correctly before with the same version of react-native-interactable

[olessavluk]

@N3TC4T wondering if you got some workaround for this, maybe patch snippet for RN or interactable library?

[N3TC4T]

@olessavluk Yep, here is the patch file

https://gist.github.com/N3TC4T/6c81f989085a3fd3cfe6e552d2daf652

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.