MENU


AccessibilityInfo

The Accessibility API is used to query the current state of the screen reader and to register to be notified when its state changes.

MethodsannounceForAccessibility()isReduceMotionEnabled()isScreenReaderEnabled()removeEventListener()setAccessibilityFocus()EventsaddEventListener()announcementFinished iOSboldTextChanged iOSgrayscaleChanged iOSinvertColorsChanged iOSreduceTransparencyChangedreduceMotionChangedscreenReaderChanged Platform-specific MethodsgetRecommendedTimeoutMillis() AndroidisBoldTextEnabled() iOSisGrayscaleEnabled() iOSisInvertColorsEnabled() iOSisReduceTransparencyEnabled() iOS

RESETRUNFULL
import React, { useState, useEffect } from "react";import { AccessibilityInfo, View, Text, StyleSheet } from "react-native";const App = () => {
  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
  useEffect(() => {
    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      reduceMotionEnabled => {setReduceMotionEnabled(reduceMotionEnabled); }
    );
    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
      "screenReaderChanged",
      screenReaderEnabled => {setScreenReaderEnabled(screenReaderEnabled); }
    );
    AccessibilityInfo.isReduceMotionEnabled().then(
      reduceMotionEnabled => { setReduceMotionEnabled(reduceMotionEnabled); }
    );
    AccessibilityInfo.isScreenReaderEnabled().then(
      screenReaderEnabled => {setScreenReaderEnabled(screenReaderEnabled); }
    );
    return () => {
      reduceMotionChangedSubscription.remove();
      screenReaderChangedSubscription.remove();
    };
  }, []);
  return (
    <View style={styles.container}>
      <Text style={styles.status}>
        The reduce motion is {reduceMotionEnabled ? "enabled" : "disabled"}.
      </Text>
      <Text style={styles.status}>
        The screen reader is {screenReaderEnabled ? "enabled" : "disabled"}.
      </Text>
    </View>
  );}const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center"},
  status: { margin: 30}});export default App;