Documentation Index
Fetch the complete documentation index at: https://mintlify.com/facebook/react-native/llms.txt
Use this file to discover all available pages before exploring further.
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>
- 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>
- 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>
- 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>
- 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>
- 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>
- 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>
- 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>
- 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>
- 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>
- 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
'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();
AccessibilityInfo.addEventListener(
'announcementFinished',
({ announcement, success }) => {
console.log(`Announced "${announcement}"`, success ? 'successfully' : 'failed');
}
);
announceForAccessibility()
static announceForAccessibility(announcement: string): void
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
announcement: The string to be announcedoptions:
queue (iOS only): Queue announcement behind existing onespriority (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
handle: Reference to a host componenteventType: 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>
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