Android - Animated.event useNativeDriver:true sets incorrect translate position when moving fast #50496
Comments
|
I tried it on ios there is no issue. |
kocburak
changed the title
|
I looked the value using |
|
I narrowed it down to: |
|
When I looked into DiffClampAnimatedNode.kt file I noticed |
|
@react-native-bot why are you ignoring me :( |
cortinico
added
Issue: Author Provided Repro
|
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? |
|
I found couple of issues but couldn't find any workaround. #10174 : Suggest to use |
|
I don't have more context on this. @kocburak here you mentioned:
What line are you referring to?
It could be but it is unlikely. About: #50496 (comment)
|
|
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 //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: |
|
That is how I figured |
|
@cortinico I saw this #50716 issue and tried #50496 (comment) with I would like to continue to use new Arch. We are using JNI Turbo Module for some performance improvements. When I tried old arch on my app, it didn't like it 😄 (didn't compile at all). |
|
I am trying to debug this. "DiffClampAnimatedNode.kt" has "prettyPrint" function. How can I enbale it so that I can see when the value changes ? |
|
I have been seeing the same issue after upgrading to React Native v0.76.8. Is their any workaround for this for the time being? Converting all off the codebase to use reanimated just because of this does not make sense, but it has become a release blocker for us. |
cipolleschi
added
the
Type: New Architecture
|
We don't have any update on this currently, but thank to @kocburak for the thorough investigation.
@cortinico do you know how to enable it? @cortinico In general, if you want to debug android, you need to build React Native from source as Android apps use a prebuild version of React Native, so modifying the files in the node_modules folder will not make any visible change in the executed code. |
It's already enabled. It prints on |
|
Hi @sarthak-cars24 Unfortunetly I couldn't find a solution. I tried to re do the same animation in reanimated. It worked but then I find out when I import the reanimated package, other pages that uses the safe-area-context package is broken. Whatever I tried the layout of the app is broken the moment I add the reanimated package. Good luck with yours. Hi @cipolleschi, I will try it. This bug looks like a race condition between the layers of architecture. Probably one of the layer does not update properly. At least thats what I think. But I am very new in react native so I don't have my hopes up |
|
@cipolleschi I failed spectacularly. I added the lines to It gave the following error: I read the lines saying "nmake System could not findt it". So I tried added this PATH to System Variables (I am on Windows 10): Do you have any comment on this ? What am I doing wrong ? |
That's because build from source doesn't work well with your Windows setup. For build form source on Android, we recommend to use either Linux or Mac machines |
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
npx expo run:android --devicewhile useNativeDriver: trueReact Native Version
0.77.2
Affected Platforms
Runtime - Android
Output of
npx @react-native-community/cli infoStacktrace or Logs
Reproducer
https://snack.expo.dev/@kocburak/usenativedriverbug
Screenshots and Videos
Screen_Recording_20250404_190621.mp4
The text was updated successfully, but these errors were encountered: