Callbacks are not working while reduceMotion is active

[Kolahzary]

Description

We have some state changes that are covered by animations, for example the following scenario:

1. Fade out the texts
2. Change them to the new texts while faded (by changing a number in the state)
3. Fade in the texts

The second step should wait for the first step to be done, so we run it inside the callback function of the animation.

Now the problem is, if the user doesn't want to see the animations, Reanimated will not run the callback too, so the users with accessibility feature of reduceMotion will be blocked and will not be able to use the app.
Callbacks should be ran anyways, and reduceMotion should only make the animation blink to the final state only.

Steps to reproduce

1. pass a callback to withTiming

animation.value = withTiming(1, {
  duration: 500,
}, () => {
  console.log('Non-animation related step that should be done after the animation');
}),

2. Run the code normally, the callback will be executed
3. Set ReduceMotion to Always (or try your app on a phone with reduceMotion settings active)

<ReducedMotionConfig mode={ReduceMotion.Always} />

4. the callback will NOT be executed!

Snack or a link to a repository

https://snack.expo.dev/@kolahzary/react-native-animated-reducemotion-bug

Reanimated version

^3.16.1

React Native version

0.75.3

Platforms

Android

JavaScript runtime

None

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

None

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[Martinocom-Switcho]

I can confirm that in our application the same thing happens . In the documentation, I didn't find any info about callback not being called if reduceMotion is true. As workaround we made an explicit check in order to make the change happen anyway, like so:

  const reduceMotion = useReducedMotion();

  //...

  // When reaching the last slide and motion are reduced
  useEffect(() => {
    if (reduceMotion) {
      if (isLastSlide) {
        setButtonContent('text');
      } else {
        setButtonContent('icon');
      }
    }
  }, [isLastSlide, reduceMotion]);

We caught it because our test suite started to fail for no reason.