Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The AccessibilityInfo API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.

Example

import React, {useState, useEffect} from 'react';
import {AccessibilityInfo, Text, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

  useEffect(() => {
    const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      isReduceMotionEnabled => {
        setReduceMotionEnabled(isReduceMotionEnabled);
      },
    );
    const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      isScreenReaderEnabled => {
        setScreenReaderEnabled(isScreenReaderEnabled);
      },
    );

    AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
      setReduceMotionEnabled(isReduceMotionEnabled);
    });
    AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
      setScreenReaderEnabled(isScreenReaderEnabled);
    });

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

  return (
    <SafeAreaProvider>
      <SafeAreaView 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>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  status: {
    margin: 30,
  },
});

export default App;

Reference

Methods

addEventListener()

static addEventListener(
  eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
  handler: (
    event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
  ) => void,
): EmitterSubscription;

Add an event handler. Supported events:

announceForAccessibility()

static announceForAccessibility(announcement: string);

Post a string to be announced by the screen reader.

announceForAccessibilityWithOptions()

static announceForAccessibilityWithOptions(
  announcement: string,
  options: {queue?: boolean},
);

Post a string to be announced by the screen reader with modification options. By default announcements will interrupt any existing speech, but on iOS they can be queued behind existing speech by setting queue to true in the options object.

Parameters:

getRecommendedTimeoutMillis() <div className="label android">Android</div>

static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;

Gets the timeout in millisecond that the user needs. This value is set in "Time to take action (Accessibility timeout)" of "Accessibility" settings.

Parameters:

isAccessibilityServiceEnabled() <div className="label android">Android</div>

static isAccessibilityServiceEnabled(): Promise<boolean>;

Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use isScreenReaderEnabled. Returns a promise which resolves to a boolean. The result is true when some accessibility services is enabled and false otherwise.

Note: Please use isScreenReaderEnabled if you only want to check the status of TalkBack.

isBoldTextEnabled() <div className="label ios">iOS</div>

static isBoldTextEnabled(): Promise<boolean>:

Query whether a bold text is currently enabled. Returns a promise which resolves to a boolean. The result is true when bold text is enabled and false otherwise.

isGrayscaleEnabled() <div className="label ios">iOS</div>

static isGrayscaleEnabled(): Promise<boolean>;

Query whether grayscale is currently enabled. Returns a promise which resolves to a boolean. The result is true when grayscale is enabled and false otherwise.

isInvertColorsEnabled() <div className="label ios">iOS</div>

static isInvertColorsEnabled(): Promise<boolean>;

Query whether invert colors is currently enabled. Returns a promise which resolves to a boolean. The result is true when invert colors is enabled and false otherwise.

isReduceMotionEnabled()

static isReduceMotionEnabled(): Promise<boolean>;

Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is true when reduce motion is enabled and false otherwise.

isReduceTransparencyEnabled() <div className="label ios">iOS</div>

static isReduceTransparencyEnabled(): Promise<boolean>;

Query whether reduce transparency is currently enabled. Returns a promise which resolves to a boolean. The result is true when a reduce transparency is enabled and false otherwise.

isScreenReaderEnabled()

static isScreenReaderEnabled(): Promise<boolean>;

Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is true when a screen reader is enabled and false otherwise.

isHighTextContrastEnabled() <div className="label android">Android</div>

static isHighTextContrastEnabled(): Promise<boolean>

Query whether high text contrast is currently enabled. Returns a promise which resolves to a boolean. The result is true when high text contrast is enabled and false otherwise.

isDarkerSystemColorsEnabled() <div className="label ios">iOS</div>

static isDarkerSystemColorsEnabled(): Promise<boolean>

Query whether dark system colors is currently enabled. Returns a promise which resolves to a boolean. The result is true when dark system colors is enabled and false otherwise.

prefersCrossFadeTransitions() <div className="label ios">iOS</div>

static prefersCrossFadeTransitions(): Promise<boolean>;

Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean. The result is true when prefer cross-fade transitions is enabled and false otherwise.

setAccessibilityFocus()

:::warning Deprecated Prefer using sendAccessibilityEvent with eventType focus instead. :::

static setAccessibilityFocus(reactTag: number);

Set accessibility focus to a React component.

On Android, this calls UIManager.sendAccessibilityEvent method with passed reactTag and UIManager.AccessibilityEventTypes.typeViewFocused arguments.

:::note Make sure that any View you want to receive the accessibility focus has accessible={true}. :::

sendAccessibilityEvent()

static sendAccessibilityEvent(host: HostInstance, eventType: AccessibilityEventTypes);

Imperatively trigger an accessibility event on a React component, like changing the focused element for a screen reader.

:::note Make sure that any View you want to receive the accessibility focus has accessible={true}. :::