Add ReducedMotionConfig component

[piaskowyk]

Summary

This PR adds ReduceMotionConfig component that allows to determine the default animation behavior in response to the device's reduced motion accessibility setting. It affects application globally. The default behavior disables all animation if reduced motion is enabled on a device. You can utilize this component to override that behavior.

Usage

function App() {
  
  return (
    // ...
    <ReduceMotionConfig mode={ReduceMotion.Never} />
    // ...
  );
}

Demo

Screen.Recording.2024-06-24.at.18.25.37.mov

Test plan

Open Reduce Motion example from example app.

[szydlovsky]

I like the idea of overriding it this simply!

[szydlovsky]

I believe it lacks some logic

[szydlovsky]

Now it's fine 👍

[szydlovsky]

Love the refactor - just please tak a look at linter

[kacperkapusciak]

lgtm

[diegolmello]

Awesome. Thanks for working on this important topic ❤️

[vyobukhov]

Hi guys,

do we really need this annoying warning on every app init in dev mode?

console.warn(
      `[Reanimated] Reduced motion setting is overwritten with mode '${mode}'.`
    );

If it was overwritten, it was done on purpose, so what is the point to remind about it on every app reload in dev?

[piaskowyk]

To avoid confusion, if any library that you depend on call it in their code. If you want to silence this warning, just use:

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['[Reanimated] Reduced motion']);