Skip to main content
Version: 4.x

useReducedMotion

useReducedMotion lets you query the reduced motion system setting. You can use it to disable animations.

Reference​

import { useReducedMotion } from 'react-native-reanimated';

function App() {
  const reduceMotion = useReducedMotion();

  if (reduceMotion) {
    // display static content ✨
  } else {
    // run animations ✨
  }

  // ...
}

Returns​

useReducedMotion returns a boolean indicating whether the reduced motion setting was enabled when the app started.

Example​

Loading...

Remarks​

  • Changing the reduced motion system setting doesn't cause your components to rerender.
  • In contrast to AccessibilityInfo.isReduceMotionEnabled() the useReducedMotion hook lets you get the value synchronously.

Platform compatibility​

AndroidiOSWeb
✅✅✅