Accessibility

Reduced Motion

All motion hooks in Reactnatively read the OS reduced-motion preference via Reanimated's useReducedMotion. When the user has enabled "Reduce Motion" in their OS settings, animations snap to their final values without interpolation — automatically, with zero extra configuration.

How it works

usePressAnimationWhen reduced motion is on, press/release snap to scale/opacity end values with no spring.

useEntranceAnimationWhen reduced motion is on, visible=true instantly shows at opacity 1, visible=false instantly hides at opacity 0.

useSpringReturns a collapsed spring config (very high damping, minimal animation) when reduced motion is on.

useDurationReturns a reduced duration value (from reducedMotion.duration tokens) when reduced motion is on.

Fade / Scale / Slide / BlurTransitionTransition components use useEntranceAnimation internally and inherit the same behavior.

Reading the preference

typescript

import { useReducedMotion } from 'reactnatively';

function MyComponent() {
  const isReduced = useReducedMotion();

  // Use to conditionally skip decorative animations
  if (isReduced) {
    // render static fallback
  }
}

Writing reduced-motion-safe custom hooks

useMyAnimation.ts

1import { useReducedMotion, SPRING_LIQUID } from 'reactnatively';2import { useSharedValue, withSpring, withTiming } from 'react-native-reanimated';34export function useMyAnimation() {5  const isReduced = useReducedMotion();6  const progress = useSharedValue(0);78  function reveal() {9    'worklet';10    if (isReduced) {11      // Snap immediately12      progress.value = 1;13    } else {14      // Animate with spring15      progress.value = withSpring(1, SPRING_LIQUID);16    }17  }1819  return { progress, reveal };20}

Forcing reduced motion

Force reduced motion in a sub-tree via InteractionProvider — useful for testing or for sections of your app that should never animate:

tsx

import { InteractionProvider } from 'reactnatively';

// Force reduced motion for this screen
<InteractionProvider policy={{ reduceMotion: true }}>
  <StaticScreen />
</InteractionProvider>

Testing reduced motion

iOSSettings → Accessibility → Motion → Reduce Motion

AndroidSettings → Accessibility → Remove animations (or similar path, varies by OEM)

Simulator / EmulatorToggle the setting in the virtual device OS settings