useReduceMotion

Whether the person has asked the system to reduce motion. It reads the setting once on mount and follows later changes, so animated components can skip or shorten their motion. It starts as false until the platform answers. Works in React and in React Native with no extra packages.

Installation

CLI

npx @modus-ui/cli add use-reduce-motion

Manual

1. Copy the code from the code tab, using the React or React Native switch for your project.
2. Create a file at components/ui/use-reduce-motion.ts.
3. Paste the code.

The CLI installs the React Native version in an Expo or React Native app and the React version everywhere else. In a project that targets both, keep the React file use-reduce-motion.ts and the React Native file use-reduce-motion.native.ts side by side and import ./use-reduce-motion; Metro picks the .native file on its own.

Usage

import { useEffect, useRef } from "react";
import { Animated } from "react-native";
import { useReduceMotion } from "@/components/ui/use-reduce-motion";

export default function Fade({ show }: { show: boolean }) {
  const reduce = useReduceMotion();
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (reduce) opacity.setValue(show ? 1 : 0);
    else
      Animated.timing(opacity, {
        toValue: show ? 1 : 0,
        duration: 200,
        useNativeDriver: true,
      }).start();
  }, [show, reduce, opacity]);

  return <Animated.View style={{ opacity }} />;
}

API