React Native

https://reactnative-archive-august-2023.netlify.app/docs/
Admin
Archived documentation for React Native including versions 0.66, 0.68, 0.70, and the next...
Tokens:4,163
Snippets:54
Trust Score:7.6
Update:4 months ago
Show doc for...
Tokens:
Raw
### 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 (
    <View 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>
    </View>
  );
};

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<number>;
```

--------------------------------

### 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<number>`

### 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 (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Try editing me! 🎉</Text>
    </View>
  );
};

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<boolean>`

### 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<boolean> - `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<boolean> - `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<boolean>;  
```

--------------------------------

### 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<boolean>;  
```

--------------------------------

### 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<boolean>;  
```

--------------------------------

### 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<boolean>;  
```

--------------------------------

### 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<boolean> - `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<boolean>;
```

--------------------------------

### 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<boolean> - `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<boolean>;
```

--------------------------------

### 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<boolean>;
```

--------------------------------

### 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<boolean>`

### 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<boolean>`

### 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<boolean>:
```

--------------------------------

### 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<boolean>`

### 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);  
```
Tokens:
Raw