Android - Animated.event useNativeDriver:true sets incorrect translate position when moving fast

[kocburak]

Description

I have 2 transform translateY animation. When the useNativeDriver:false, there is no issue except performance. I can see the animation moves couple frames behind from native animation. When the useNativeDriver:true, while moving fast the component jumps around (usually to final position if there were no distruption to moementum scroll)

Steps to reproduce

1. Install the application to you andorid using npx expo run:android --device while useNativeDriver: true
2. Make a slide with momentum and while momentum exists stop and make small movement and remove you finger from screen. (see the video)

React Native Version

0.77.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.19045
  CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz
  Memory: 17.67 GB / 31.84 GB
Binaries:
  Node:
    version: 22.14.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 11.2.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "22"
      - "33"
      - "33"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 35.0.1
    System Images:
      - android-34 | Google APIs Intel x86_64 Atom
      - android-35 | AOSP ATD Intel x86_64 Atom
      - android-35 | Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-242.23726.103.2422.13016713
  Visual Studio:
    - 17.13.35825.156 (Visual Studio Community 2022)
Languages:
  Java: 17.0.7
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.2
    wanted: ^0.77.2
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.78.2 is now available (your project is running on v0.77.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.2
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.77.2&to=0.78.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@kocburak/usenativedriverbug

Screenshots and Videos

Screen_Recording_20250404_190621.mp4

[kocburak]

I tried it on ios there is no issue.

[kocburak]

I looked the value usingdisclaimerTranslateY.addListener(value => { console.log(value) }) and the values were correct even though the placement on the screen was wrong. If you need more clarification about the topic I am willing to help.

[kocburak]

I narrowed it down to: Animated.diffClamp function. When I remove this line there is no issue regarding the useNativeDriver:true

[kocburak]

When I looked into DiffClampAnimatedNode.kt file I noticed val animatedNode = nativeAnimatedNodesManager.getNodeById(inputNodeTag) line. Is it possible that we are reading from wrong Tag ?

[kocburak]

@react-native-bot why are you ignoring me :(
@cortinico Sorry for direct mention but even the bot ignored this issue 😄. Is there anything I should look into more?

[cortinico]

I don't have an exact answer for this one. I believe this is related to an issue we had with Animated + transforms which is still unresolved. @cipolleschi do you have more context or a issue number to link here?

[kocburak]

I found couple of issues but couldn't find any workaround.

#10174 : Suggest to use shouldComponentUpdate = () => false But I couldn't figure out how in my TypeScript with function components.
GeekyAnts/NativeBase#334 : No response
#10663 : This is a fix for iOS. I do not have an issue on iOS. Is this fix portable to Android ?

[cipolleschi]

I don't have more context on this. @kocburak here you mentioned:

I narrowed it down to: Animated.diffClamp function. When I remove this line there is no issue regarding the useNativeDriver:true

What line are you referring to?

When I looked into DiffClampAnimatedNode.kt file I noticed val animatedNode = nativeAnimatedNodesManager.getNodeById(inputNodeTag) line. Is it possible that we are reading from wrong Tag ?

It could be but it is unlikely.

About: #50496 (comment)

• [NativeAnimated][RN 0.34][iOS][Android] Misplaced animation frames while applying multiple transformations #10174 is on 0.34... Waaay too old of a version to be useful, React Native changed completely since then
• Native base is deprecated and unmaintained
• Fix NativeAnimation invalidation & races on iOS #10663 is from 2016, so again too old to be helpful. I also don't see any change to the RCTDiffClampAnimatedNode

[kocburak]

In my Reproducer, all my animation logic is as follows:

//Buggy code.
const scrollY = useRef(new Animated.Value(0));

  const handleScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
    { useNativeDriver: true }
  );

  const minusScrollY = Animated.multiply(scrollY.current, -0.1);
   const stickyTranslateY = Animated.diffClamp(scrollY, -headerHeight, 0);

  let stickyStyles: StyleProp<ViewStyle> = {
    transform: [{ translateY: stickyTranslateY , }]
  }

This is the logic of 1 scroll. Bug still can be reproduce with this much. When I changed it to:

//Working code.
const scrollY = useRef(new Animated.Value(0));

  const handleScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
    { useNativeDriver: true }
  );

  const minusScrollY = Animated.multiply(scrollY.current, -0.1);
  //const stickyTranslateY = Animated.diffClamp(minusScrollY, -headerHeight, 0);  // <- commented out

  let stickyStyles: StyleProp<ViewStyle> = {
    transform: [{ translateY: minusScrollY }] // <- changed the argument from stickyTranslateY to minusScrollY 
  }

There is no animation bug (notice the comment on const minusScrollY = Animated.diffClamp(minusScrollY, -headerHeight, 0);. Also I tried to comment out multply and leave it out the Animated.diffClamp like this:

//Buggy code.
  const scrollY = useRef(new Animated.Value(0));

  const handleScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
    { useNativeDriver: true }
  );

  //const minusScrollY = Animated.multiply(scrollY.current, -0.1);   // <- commented out
  const stickyTranslateY = Animated.diffClamp(scrollY.curent, -headerHeight, 0); // <- changed the argument from minusScrollY to scrollY.curent

  let stickyStyles: StyleProp<ViewStyle> = {
    transform: [{ translateY: stickyTranslateY }] 
  }

The issue came back.

Edit: scrollY.current.interpolate can also be removed so i did in this post.

[kocburak]

That is how I figured Animated.diffClamp causing the problem