### AccessibilityInfo Example
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
This example demonstrates how to check if reduce motion is enabled and if a screen reader is active. It also sets up listeners to update the UI when these states change.
```javascript
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',
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 (
The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
status: {
margin: 30,
},
});
export default App;
```
--------------------------------
### Get Recommended Timeout Milliseconds (Android)
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Gets the user-defined timeout in milliseconds for accessibility actions. This value is set in the 'Time to take action (Accessibility timeout)' setting. If the timeout is not set, the provided originalTimeout is returned.
```typescript
static getRecommendedTimeoutMillis(originalTimeout: number): Promise;
```
--------------------------------
### getRecommendedTimeoutMillis
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Gets the recommended timeout in milliseconds for accessibility actions on Android.
```APIDOC
## getRecommendedTimeoutMillis
### Description
Gets the timeout in milliseconds that the user needs, as set in the "Time to take action (Accessibility timeout)" setting on Android. If the setting is not configured, the `originalTimeout` is returned.
### Method
`static getRecommendedTimeoutMillis(originalTimeout: number): Promise`
### Platform
Android
### Parameters
- **originalTimeout** (number) - Required - The timeout in milliseconds to return if the "Accessibility timeout" is not set.
```
--------------------------------
### setAccessibilityFocus()
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Sets the accessibility focus to a specified React component identified by its `reactTag`. This is particularly useful for guiding screen reader users.
```APIDOC
## setAccessibilityFocus()
### Description
Sets accessibility focus to a React component. On Android, this calls `UIManager.sendAccessibilityEvent` with the provided `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused`.
> **Note**: Ensure that any `View` intended to receive accessibility focus has `accessible={true}`.
### Method
static
### Parameters
#### Path Parameters
- **reactTag** (number) - Required - The accessibility tag of the React component to focus.
```
--------------------------------
### announceForAccessibilityWithOptions
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Posts a string to be announced by the screen reader with options to queue the announcement.
```APIDOC
## announceForAccessibilityWithOptions
### Description
Posts a string to be announced by the screen reader with modification options. On iOS, announcements can be queued behind existing speech by setting `queue` to `true`.
### Method
`static announceForAccessibilityWithOptions(announcement: string, options: {queue?: boolean})`
### Parameters
- **announcement** (string) - Required - The string to be announced.
- **options** (object) - Required - An object containing announcement options.
- **queue** (boolean) - Optional - If `true`, queues the announcement behind existing speech (iOS only).
```
--------------------------------
### Hello World App
Source: https://reactnative-archive-august-2023.netlify.app/docs/getting-started
A basic 'Hello World' React Native component that displays text. This can be run directly in the browser using Snack Player or pasted into your local App.js file.
```javascript
import React from 'react';
import {Text, View} from 'react-native';
const YourApp = () => {
return (
Try editing me! 🎉
);
};
export default YourApp;
```
--------------------------------
### announceForAccessibility
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Posts a string to be announced by the screen reader.
```APIDOC
## announceForAccessibility
### Description
Posts a string to be announced by the screen reader.
### Method
`static announceForAccessibility(announcement: string)`
### Parameters
- **announcement** (string) - Required - The string to be announced by the screen reader.
```
--------------------------------
### Announce for Accessibility
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Post a string to be announced by the screen reader. This is a simple way to provide spoken feedback to users.
```typescript
static announceForAccessibility(announcement: string);
```
--------------------------------
### Announce for Accessibility with Options
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Post a string to be announced by the screen reader with modification options. On iOS, announcements can be queued behind existing speech by setting the 'queue' option to true.
```typescript
static announceForAccessibilityWithOptions(
announcement: string,
options: options: {queue?: boolean},
);
```
--------------------------------
### isGrayscaleEnabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Queries whether the grayscale setting is currently enabled on iOS.
```APIDOC
## isGrayscaleEnabled
### Description
Queries whether grayscale is currently enabled on iOS. Returns a promise that resolves to a boolean: `true` if grayscale is enabled, `false` otherwise.
### Method
`static isGrayscaleEnabled(): Promise`
### Platform
iOS
```
--------------------------------
### isReduceMotionEnabled()
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Queries whether the 'reduce motion' accessibility feature is currently enabled. It returns a promise that resolves to a boolean value.
```APIDOC
## isReduceMotionEnabled()
### Description
Queries whether the 'reduce motion' accessibility feature is currently enabled. Returns a promise which resolves to a boolean.
### Method
static
### Returns
Promise - `true` when reduce motion is enabled, `false` otherwise.
```
--------------------------------
### prefersCrossFadeTransitions()
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Queries whether the 'prefer cross-fade transitions' accessibility setting is currently enabled on iOS. It returns a promise that resolves to a boolean value.
```APIDOC
## prefersCrossFadeTransitions()
### Description
Queries whether 'reduce motion' and 'prefer cross-fade transitions' settings are currently enabled on iOS. Returns a promise which resolves to a boolean.
### Method
static
### Platform
iOS
### Returns
Promise - `true` when prefer cross-fade transitions is enabled, `false` otherwise.
```
--------------------------------
### Check if Prefers Cross-Fade Transitions is Enabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Query whether reduce motion and prefer cross-fade transitions settings are currently enabled. Returns a promise which resolves to a boolean.
```javascript
static prefersCrossFadeTransitions(): Promise;
```
--------------------------------
### addEventListener
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Adds an event handler for accessibility-related events. It supports various events like accessibility service changes, announcement completion, and toggles for bold text, grayscale, invert colors, reduce motion, and reduce transparency.
```APIDOC
## addEventListener
### Description
Adds an event handler for accessibility-related events. Supported events include `accessibilityServiceChanged`, `announcementFinished`, `boldTextChanged`, `grayscaleChanged`, `invertColorsChanged`, `reduceMotionChanged`, `reduceTransparencyChanged`, and `screenReaderChanged`.
### Method
`static addEventListener(eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName, handler: (event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent) => void): EmitterSubscription`
### Parameters
#### Event Name
- **eventName** (AccessibilityChangeEventName | AccessibilityAnnouncementEventName) - Required - The name of the accessibility event to listen for.
- **handler** (function) - Required - The callback function to execute when the event is fired. The function receives an event object containing details about the event.
### Supported Events
**`accessibilityServiceChanged`** (Android)
Fires when accessibility services like TalkBack are enabled or disabled. The handler receives a boolean: `true` if a service is enabled, `false` otherwise.
**`announcementFinished`** (iOS)
Fires when the screen reader finishes an announcement. The handler receives a dictionary with `announcement` (string) and `success` (boolean).
**`boldTextChanged`** (iOS)
Fires when the bold text toggle state changes. The handler receives a boolean: `true` if bold text is enabled, `false` otherwise.
**`grayscaleChanged`** (iOS)
Fires when the grayscale toggle state changes. The handler receives a boolean: `true` if grayscale is enabled, `false` otherwise.
**`invertColorsChanged`** (iOS)
Fires when the invert colors toggle state changes. The handler receives a boolean: `true` if invert colors is enabled, `false` otherwise.
**`reduceMotionChanged`**
Fires when the reduce motion toggle state changes. The handler receives a boolean: `true` if reduce motion is enabled, `false` otherwise.
**`reduceTransparencyChanged`** (iOS)
Fires when the reduce transparency toggle state changes. The handler receives a boolean: `true` if reduce transparency is enabled, `false` otherwise.
**`screenReaderChanged`**
Fires when the screen reader state changes. The handler receives a boolean: `true` if a screen reader is enabled, `false` otherwise.
```
--------------------------------
### Check if Screen Reader is Enabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean.
```javascript
static isScreenReaderEnabled(): Promise;
```
--------------------------------
### Check if Reduce Motion is Enabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean.
```javascript
static isReduceMotionEnabled(): Promise;
```
--------------------------------
### Check if Reduce Transparency is Enabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Query whether reduce transparency is currently enabled. Returns a promise which resolves to a boolean.
```javascript
static isReduceTransparencyEnabled(): Promise;
```
--------------------------------
### isScreenReaderEnabled()
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Queries whether a screen reader is currently enabled. It returns a promise that resolves to a boolean value.
```APIDOC
## isScreenReaderEnabled()
### Description
Queries whether a screen reader is currently enabled. Returns a promise which resolves to a boolean.
### Method
static
### Returns
Promise - `true` when a screen reader is enabled, `false` otherwise.
```
--------------------------------
### Check if Grayscale is Enabled (iOS)
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Query whether the grayscale accessibility feature is currently enabled. Returns a promise that resolves to a boolean.
```typescript
static isGrayscaleEnabled(): Promise;
```
--------------------------------
### isReduceTransparencyEnabled()
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Queries whether the 'reduce transparency' accessibility feature is currently enabled on iOS. It returns a promise that resolves to a boolean value.
```APIDOC
## isReduceTransparencyEnabled()
### Description
Queries whether the 'reduce transparency' accessibility feature is currently enabled on iOS. Returns a promise which resolves to a boolean.
### Method
static
### Platform
iOS
### Returns
Promise - `true` when reduce transparency is enabled, `false` otherwise.
```
--------------------------------
### Check if Accessibility Service is Enabled (Android)
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Check whether any accessibility service, including TalkBack and third-party apps, is enabled. Returns a promise that resolves to a boolean.
```typescript
static isAccessibilityServiceEnabled(): Promise;
```
--------------------------------
### Check if Invert Colors is Enabled (iOS)
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Query whether the invert colors accessibility feature is currently enabled. Returns a promise that resolves to a boolean.
```typescript
static isInvertColorsEnabled(): Promise;
```
--------------------------------
### isInvertColorsEnabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Queries whether the invert colors setting is currently enabled on iOS.
```APIDOC
## isInvertColorsEnabled
### Description
Queries whether invert colors is currently enabled on iOS. Returns a promise that resolves to a boolean: `true` if invert colors is enabled, `false` otherwise.
### Method
`static isInvertColorsEnabled(): Promise`
### Platform
iOS
```
--------------------------------
### isAccessibilityServiceEnabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Checks if any accessibility service, including TalkBack and third-party apps, is enabled on Android.
```APIDOC
## isAccessibilityServiceEnabled
### Description
Checks whether any accessibility service is enabled on Android. This includes TalkBack and any third-party accessibility apps. Returns a promise that resolves to a boolean: `true` if an accessibility service is enabled, `false` otherwise.
> **Note**: Use `isScreenReaderEnabled` to specifically check if TalkBack is enabled.
### Method
`static isAccessibilityServiceEnabled(): Promise`
### Platform
Android
```
--------------------------------
### Add Accessibility Event Listener
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Add an event handler for accessibility-related events. Supported events include 'accessibilityServiceChanged' on Android and 'announcementFinished', 'boldTextChanged', 'grayscaleChanged', 'invertColorsChanged', 'reduceMotionChanged', 'reduceTransparencyChanged', and 'screenReaderChanged' on iOS.
```typescript
static addEventListener(
eventName: AccessibilityChangeEventName | AccessibilityAnnouncementEventName,
handler: (
event: AccessibilityChangeEvent | AccessibilityAnnouncementFinishedEvent,
) => void,
): EmitterSubscription;
```
--------------------------------
### Check if Bold Text is Enabled (iOS)
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Query whether the bold text accessibility feature is currently enabled. Returns a promise that resolves to a boolean.
```typescript
static isBoldTextEnabled(): Promise:
```
--------------------------------
### isBoldTextEnabled
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Queries whether the bold text setting is currently enabled on iOS.
```APIDOC
## isBoldTextEnabled
### Description
Queries whether a bold text is currently enabled on iOS. Returns a promise that resolves to a boolean: `true` if bold text is enabled, `false` otherwise.
### Method
`static isBoldTextEnabled(): Promise`
### Platform
iOS
```
--------------------------------
### Set Accessibility Focus
Source: https://reactnative-archive-august-2023.netlify.app/docs/accessibilityinfo
Set accessibility focus to a React component. On Android, this calls UIManager.sendAccessibilityEvent.
```javascript
static setAccessibilityFocus(reactTag: number);
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.