AccessibilityInfo

AccessibilityInfo allows you to query the current state of accessibility features and register to be notified when they change.

Methods

`isScreenReaderEnabled()`

static isScreenReaderEnabled(): Promise<boolean>

Query whether a screen reader is currently enabled (VoiceOver on iOS, TalkBack on Android). Returns:

Promise that resolves to true when a screen reader is enabled, false otherwise

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isScreenReaderEnabled().then(enabled => {
  console.log('Screen reader enabled:', enabled);
});

`isBoldTextEnabled()`

static isBoldTextEnabled(): Promise<boolean>

iOS only. Query whether bold text is currently enabled. Returns:

Promise that resolves to true when bold text is enabled, false otherwise
On Android, always resolves to false

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isBoldTextEnabled().then(enabled => {
  if (enabled) {
    // Adjust font weights
  }
});

`isGrayscaleEnabled()`

static isGrayscaleEnabled(): Promise<boolean>

Query whether grayscale is currently enabled. Returns:

Promise that resolves to true when grayscale is enabled, false otherwise

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isGrayscaleEnabled().then(enabled => {
  console.log('Grayscale enabled:', enabled);
});

`isInvertColorsEnabled()`

static isInvertColorsEnabled(): Promise<boolean>

Query whether inverted colors are currently enabled. Returns:

Promise that resolves to true when invert colors is enabled, false otherwise

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isInvertColorsEnabled().then(enabled => {
  console.log('Inverted colors:', enabled);
});

`isReduceMotionEnabled()`

static isReduceMotionEnabled(): Promise<boolean>

Query whether reduced motion is currently enabled. Returns:

Promise that resolves to true when reduce motion is enabled, false otherwise

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isReduceMotionEnabled().then(enabled => {
  if (enabled) {
    // Disable or simplify animations
  }
});

`isReduceTransparencyEnabled()`

static isReduceTransparencyEnabled(): Promise<boolean>

iOS only. Query whether reduced transparency is currently enabled. Returns:

Promise that resolves to true when reduce transparency is enabled, false otherwise
On Android, always resolves to false

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isReduceTransparencyEnabled().then(enabled => {
  if (enabled) {
    // Reduce or remove transparency effects
  }
});

`isHighTextContrastEnabled()`

static isHighTextContrastEnabled(): Promise<boolean>

Android only. Query whether high text contrast is currently enabled. Returns:

Promise that resolves to true when high text contrast is enabled, false otherwise

Example:

import { AccessibilityInfo, Platform } from 'react-native';

if (Platform.OS === 'android') {
  AccessibilityInfo.isHighTextContrastEnabled().then(enabled => {
    if (enabled) {
      // Increase text contrast
    }
  });
}

`isDarkerSystemColorsEnabled()`

static isDarkerSystemColorsEnabled(): Promise<boolean>

iOS only. Query whether darker system colors are currently enabled. Returns:

Promise that resolves to true when darker system colors are enabled, false otherwise

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.isDarkerSystemColorsEnabled().then(enabled => {
  if (enabled) {
    // Use darker system color variants
  }
});

`prefersCrossFadeTransitions()`

static prefersCrossFadeTransitions(): Promise<boolean>

iOS only. Query whether the user prefers cross-fade transitions. Returns:

Promise that resolves to true when cross-fade transitions are preferred, false otherwise

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.prefersCrossFadeTransitions().then(enabled => {
  if (enabled) {
    // Use cross-fade instead of slide transitions
  }
});

`isAccessibilityServiceEnabled()`

static isAccessibilityServiceEnabled(): Promise<boolean>

Android only. Query whether any accessibility service is currently enabled. Returns:

Promise that resolves to true when any accessibility service is enabled, false otherwise

Example:

import { AccessibilityInfo, Platform } from 'react-native';

if (Platform.OS === 'android') {
  AccessibilityInfo.isAccessibilityServiceEnabled().then(enabled => {
    console.log('Accessibility service enabled:', enabled);
  });
}

`addEventListener()`

static addEventListener(
  eventName: AccessibilityEventName,
  handler: Function
): EventSubscription

Add an event handler that fires when accessibility settings change. Supported Events: Cross-platform:

'screenReaderChanged': Screen reader state changed
'reduceMotionChanged': Reduce motion setting changed

iOS only:

'boldTextChanged': Bold text setting changed
'grayscaleChanged': Grayscale setting changed
'invertColorsChanged': Invert colors setting changed
'reduceTransparencyChanged': Reduce transparency setting changed
'announcementFinished': Screen reader finished an announcement
'darkerSystemColorsChanged': Darker system colors setting changed

Android only:

'highTextContrastChanged': High text contrast setting changed
'accessibilityServiceChanged': Accessibility service state changed

Returns:

EventSubscription with a remove() method

Example:

import { AccessibilityInfo } from 'react-native';

const subscription = AccessibilityInfo.addEventListener(
  'screenReaderChanged',
  enabled => {
    console.log('Screen reader is now:', enabled ? 'ON' : 'OFF');
  }
);

// Later, remove the listener
subscription.remove();

Announcement Finished (iOS):

AccessibilityInfo.addEventListener(
  'announcementFinished',
  ({ announcement, success }) => {
    console.log(`Announced "${announcement}"`, success ? 'successfully' : 'failed');
  }
);

`announceForAccessibility()`

static announceForAccessibility(announcement: string): void

Post a string to be announced by the screen reader. Parameters:

announcement: The string to be announced

Example:

import { AccessibilityInfo } from 'react-native';

AccessibilityInfo.announceForAccessibility('Form submitted successfully');

`announceForAccessibilityWithOptions()`

static announceForAccessibilityWithOptions(
  announcement: string,
  options: {
    queue?: boolean;
    priority?: 'low' | 'default' | 'high';
  }
): void

Post a string to be announced by the screen reader with additional options. Parameters:

announcement: The string to be announced
options:
- queue (iOS only): Queue announcement behind existing ones
- priority (iOS only):
  - 'high': Interrupts ongoing speech, cannot be interrupted
  - 'default': Interrupts ongoing speech, can be interrupted
  - 'low': Won’t interrupt, can be interrupted

Example:

import { AccessibilityInfo } from 'react-native';

// High priority announcement
AccessibilityInfo.announceForAccessibilityWithOptions(
  'Error: Please check your input',
  { priority: 'high' }
);

// Queued announcement
AccessibilityInfo.announceForAccessibilityWithOptions(
  'Loading complete',
  { queue: true, priority: 'default' }
);

`sendAccessibilityEvent()`

static sendAccessibilityEvent(
  handle: HostInstance,
  eventType: 'click' | 'focus' | 'viewHoverEnter' | 'windowStateChange'
): void

Send a named accessibility event to a component. Parameters:

handle: Reference to a host component
eventType: Type of event to send
- 'focus': Set accessibility focus
- 'click': Announce click (Android only)
- 'viewHoverEnter': Announce hover (Android only)
- 'windowStateChange': Announce window change (Android only)

Example:

import { AccessibilityInfo, View, findNodeHandle } from 'react-native';

function MyComponent() {
  const viewRef = useRef(null);

  const focusElement = () => {
    if (viewRef.current) {
      AccessibilityInfo.sendAccessibilityEvent(
        viewRef.current,
        'focus'
      );
    }
  };

  return <View ref={viewRef}>...</View>;
}

`getRecommendedTimeoutMillis()`

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

Android only. Get the recommended timeout for UI changes based on user accessibility settings. Parameters:

originalTimeout: Your default timeout in milliseconds

Returns:

Promise that resolves to the recommended timeout

Example:

import { AccessibilityInfo } from 'react-native';

const defaultTimeout = 3000;
AccessibilityInfo.getRecommendedTimeoutMillis(defaultTimeout)
  .then(recommendedTimeout => {
    // Use recommendedTimeout for toast/snackbar duration
    showToast(message, recommendedTimeout);
  });

Complete Example

import React, { useState, useEffect } from 'react';
import { View, Text, AccessibilityInfo, Button } from 'react-native';

function AccessibilityDemo() {
  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
  const [reduceMotion, setReduceMotion] = useState(false);

  useEffect(() => {
    // Check initial states
    AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled);
    AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);

    // Listen for changes
    const screenReaderSub = AccessibilityInfo.addEventListener(
      'screenReaderChanged',
      setScreenReaderEnabled
    );
    
    const reduceMotionSub = AccessibilityInfo.addEventListener(
      'reduceMotionChanged',
      setReduceMotion
    );

    return () => {
      screenReaderSub.remove();
      reduceMotionSub.remove();
    };
  }, []);

  const announce = () => {
    AccessibilityInfo.announceForAccessibility(
      'Button was pressed'
    );
  };

  return (
    <View>
      <Text>Screen Reader: {screenReaderEnabled ? 'ON' : 'OFF'}</Text>
      <Text>Reduce Motion: {reduceMotion ? 'ON' : 'OFF'}</Text>
      <Button title="Announce" onPress={announce} />
    </View>
  );
}

Best Practices

Respect reduce motion: Disable or simplify animations when isReduceMotionEnabled() returns true
Announce important changes: Use announceForAccessibility() for dynamic content updates
Test with screen readers: Enable VoiceOver (iOS) or TalkBack (Android) during development
Adjust timeouts: Use getRecommendedTimeoutMillis() on Android for dismissible messages
Handle events: Listen to accessibility changes and update your UI accordingly

Core APIs

Hooks

Interaction

Accessibility & Internationalization

Developer Tools

Networking

Storage

Android APIs

iOS APIs

Methods

`isScreenReaderEnabled()`

`isBoldTextEnabled()`

`isGrayscaleEnabled()`

`isInvertColorsEnabled()`

`isReduceMotionEnabled()`

`isReduceTransparencyEnabled()`

`isHighTextContrastEnabled()`

`isDarkerSystemColorsEnabled()`

`prefersCrossFadeTransitions()`

`isAccessibilityServiceEnabled()`

`addEventListener()`

`announceForAccessibility()`

`announceForAccessibilityWithOptions()`

`sendAccessibilityEvent()`

`getRecommendedTimeoutMillis()`

Complete Example

Best Practices

​Methods

​isScreenReaderEnabled()

​isBoldTextEnabled()

​isGrayscaleEnabled()

​isInvertColorsEnabled()

​isReduceMotionEnabled()

​isReduceTransparencyEnabled()

​isHighTextContrastEnabled()

​isDarkerSystemColorsEnabled()

​prefersCrossFadeTransitions()

​isAccessibilityServiceEnabled()

​addEventListener()

​announceForAccessibility()

​announceForAccessibilityWithOptions()

​sendAccessibilityEvent()

​getRecommendedTimeoutMillis()

​Complete Example

​Best Practices

Methods

`isScreenReaderEnabled()`

`isBoldTextEnabled()`

`isGrayscaleEnabled()`

`isInvertColorsEnabled()`

`isReduceMotionEnabled()`

`isReduceTransparencyEnabled()`

`isHighTextContrastEnabled()`

`isDarkerSystemColorsEnabled()`

`prefersCrossFadeTransitions()`

`isAccessibilityServiceEnabled()`

`addEventListener()`

`announceForAccessibility()`

`announceForAccessibilityWithOptions()`

`sendAccessibilityEvent()`

`getRecommendedTimeoutMillis()`

Complete Example

Best Practices