Small gist to showcase the usage of isReduceMotionEnabled with react-native-reanimated to disable animations

reduce-motion-check.js

import React, { useState, useEffect } from "react";
import { AccessibilityInfo, View, Text } from "react-native";
import Animated from "react-native-reanimated";

const { block, cond, eq, useCode } = Animated;

const App = () => {
  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);

  useEffect(() => {
    AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      handleReduceMotionToggled
    );

    AccessibilityInfo.isReduceMotionEnabled().then(
      reduceMotionEnabled => {
        setReduceMotionEnabled(reduceMotionEnabled);
      }
    );

    return () => {
      AccessibilityInfo.removeEventListener(
        "reduceMotionChanged",
        handleReduceMotionToggled
      );
    };
  }, []);

  const handleReduceMotionToggled = reduceMotionEnabled => {
    setReduceMotionEnabled(reduceMotionEnabled);
  };
  
  // check for reduceMotion and instead of playing an animation, set the animation to its final state
  const shouldPlay = new Animated.Value(reduceMotionEnabled ? 0 : 1);
  const someAnimatedValue = new Animated.Value(0);
  
  useCode(
    () =>
      block([
        cond(
          eq(shouldPlay, 1),
          spring(), // your animation goes here 
          set(someAnimatedValue, 1) // setting without animation when it should not play 
        ),
      ]),
    []
  )

  return (
    // your component with Animated.View and the style
  );
}

export default App;