Set value immediately after another one have been set in Reanimated 2

[LHDi]

I am using Reanimated 2 to build a game with React Native its performance is incredibly good but I have a problem.

I am using a shared value to animate a View as we all know setting the value of the shared value will automatically change the style of the View, my problem is that let's say it will be a Button that the user presses to give the View an elevation simply by changing a shared value used in the animated style of The View, the elevation is simply translation in the y axis.

The elevation value is 0 at first. The user clicks the button the value changes to for example 500 immediately with no transition and no animation, the View will immediately show at 500 above its starting position. And from 500 the View will drop back to 0 with animation. I tried the code below but no help.

const elevation = useSharedValue(0);
const handleClick = () => {
   elevation.value = 500;
   elevation.value = withTiming(0, { duration: 1000 });
}
const viewAnimatedStyle = useAnimatedStyle(() => ({
   transform: [
        {
            translateY: elevation.value,
        }
    ]
}))

when pressing the button the view doesn't move, it seems that Reanimated skips the first elevation.value assignment, and since the second assignment is to 0 (the same old value) the View doesn't move.

P.S. Animated.View is imported from Reanimated 2 and used. I left it out for simplicity.

[Noitidart]

This is an excellent question. My elements were not taking the 2nd value assigned, and now I think it's because of this. I was just reading the discussions. Were you able to find a solution to this?

[Noitidart]

I think the solution is to make a higher order animation called withNextFrame and use it like this:

const handleClick = () => {
   elevation.value = 500;
   elevation.value = withNextFrame(withTiming(0, { duration: 1000 }));
}

This way, the first frame gets the 500, and the 2nd frame gets the timing. I'm not sure how to write withNextFrame though, will try to think.

[Noitidart]

Actually can withSequence be used? Is it possible to pass an assignment?

https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withSequence

elevation.value withSequence(500, withTiming(0))

[Noitidart]

Oh I saw your topic here, and see that this doesn't work - https://stackoverflow.com/questions/70022913/reanimated-2-cant-use-withsequence-with-direct-value

[Noitidart]

Maybe something with useAnimatedReaction?

const sequence = useSharedValue([]);

useAnimatedReaction(
  () => sequence,
  (value, prevValue) => {
    
  }
)

I'm not sure how to determine if animation currently in progress or not, and then go to next value in sequence, but maybe something along these lines, not sure at all.

[SudoPlz]

Did you guys figure it out after all?
I'm having the exact same problem!

[Noitidart]

I haven't figured it out yet. :( Is it still a problem in the latest versions of reanimated? I posted a bug report here - #2887 - maybe you could bump that to keep the discussion going.