### 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.