AccessibilityInfo

AccessibilityInfo

AccessibilityInfo reports the user's accessibility settings so the app can respect them. The cross-platform pair is isScreenReaderEnabled() and isReduceMotionEnabled(), each a promise with a matching screenReaderChanged or reduceMotionChanged event. Android adds isAccessibilityServiceEnabled(), isHighTextContrastEnabled() and getRecommendedTimeoutMillis(), the user's "Time to take action" setting; iOS adds bold text, grayscale, inverted colors and reduced transparency. announceForAccessibility(text) makes the screen reader speak, for example after a book is added to the cart.

src/info/A11yStatus.tsx: reading and following the reduce-motion setting (excerpt)TSX

    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
    AccessibilityInfo.isScreenReaderEnabled().then((on) => console.log('screen reader:', on));
    AccessibilityInfo.getRecommendedTimeoutMillis(5000)
      .then((ms) => console.log('timeout:', ms));
    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', (on) => {
      console.log('reduceMotionChanged:', on);
      setReduceMotion(on);
    });

On Android, React Native 36,878 reads reduce motion from the global transition animation scale (zero means reduce), so adb shell settings put global transition_animation_scale 0, then back to 1, stands in for the user:

Output of 77

 LOG  screen reader: false
 LOG  timeout: 5000
 LOG  reduceMotionChanged: true
 LOG  reduceMotionChanged: false

With no preference set, the recommended timeout is the 5,000 ms you passed in. Use it for toasts and auto-dismissing banners, and replace sliding and zooming animations with fades or nothing while reduce motion is on (Animated API).

MENU