How to sync between a render and a Reanimated animation variables update?

Expo SDK
1

If you need to simultaneously

  • update some state such that the UI re-renders
  • and update some animation variables (useSharedValue, useAnimatedStyle etc.)

what’s the best pattern for this?

I tried the following:

  • The same code updates the state and simultaneously assigns new values to the Shared Values.
  • Update the state, then in the render method, use an useEffect to change the Shared Values.
  • Update the state, then in the render method, use a setTimeout(..., 0) to change the Shared Values.

Regardless of which one I use, I always get a short time where the UI is rendered in an invalid state - for example the newly rendered UI is there, but the Shared Values are still old. Or, the Shared Values get updated before the UI render is finished. This results in ugly flickers in the UI.

Before I start to analyze this further, what is the “correct” way to do it, from a theoretical standpoint? How can I sync these two updates such that both changes get visible at the same time?

Thanks

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.