useReducedMotion hook - get if user has requested Prefers reduced motion (iOS) or Remove animations (Android). Live updates values

useReducedMotion.tsx

import {AccessibilityInfo} from 'react-native';
import {createContext, PropsWithChildren, useContext, useEffect, useState} from 'react';

type AccessibilitySettingsT = {
  isReduceMotionEnabled: boolean;
};

const ReducedMotionContext = createContext<AccessibilitySettingsT>({isReduceMotionEnabled: false});

/**
 * Wrap your root component in this to get access to the user's accessibility settings.
 */
export const AccessibilitySettingsProvider = (props: PropsWithChildren) => {
  const [isReduceMotionEnabled, setIsReduceMotionEnabled] = useState(false);
  useEffect(() => {
    (async () => {
      const isEnabled = await AccessibilityInfo.isReduceMotionEnabled();
      setIsReduceMotionEnabled(isEnabled);
    })();

    // listen for changes
    const listener = AccessibilityInfo.addEventListener('reduceMotionChanged', async isEnabled => {
      setIsReduceMotionEnabled(isEnabled);
    });

    return () => {
      listener.remove();
    };
  }, []);

  return (
    <ReducedMotionContext.Provider value={{isReduceMotionEnabled}}>{props.children}</ReducedMotionContext.Provider>
  );
};

/**
 * Returns true if the user has enabled reduced motion / remove animations in their OS settings.
 * Listens for changes and will update live.
 * Use this to turn on and off animated background, auto-playing videos etc.
 *
 * DEFAULTS TO OFF! i.e. you should ensure your animations can be disabled as we'll send false at the start before we've been able to read the value
 */
export const useReducedMotion = () => {
  const context = useContext(ReducedMotionContext);
  if (!context) {
    throw new Error(
      'useReducedMotion must be used within a AccessibilitySettingsProvider. Wrap your root component in <AccessibilitySettingsProvider> to fix this error.'
    );
  }
  return context.isReduceMotionEnabled;
};

 // add additional hooks if you want to monitor other accessibility settings