Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docs/accessibilityinfo.md
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,9 @@ static isAccessibilityServiceEnabled(): Promise<boolean>;

Check whether any accessibility service is enabled. This includes TalkBack but also any third-party accessibility app that may be installed. To only check whether TalkBack is enabled, use [isScreenReaderEnabled](#isscreenreaderenabled). Returns a promise which resolves to a boolean. The result is `true` when some accessibility services is enabled and `false` otherwise.

> **Note**: Please use [isScreenReaderEnabled](#isscreenreaderenabled) if you only want to check the status of TalkBack.
:::note
Please use [`isScreenReaderEnabled`](#isscreenreaderenabled) if you only want to check the status of TalkBack.
:::

---

Expand Down Expand Up @@ -242,4 +244,6 @@ Set accessibility focus to a React component.

On Android, this calls `UIManager.sendAccessibilityEvent` method with passed `reactTag` and `UIManager.AccessibilityEventTypes.typeViewFocused` arguments.

> **Note**: Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
:::note
Make sure that any `View` you want to receive the accessibility focus has `accessible={true}`.
:::
4 changes: 3 additions & 1 deletion docs/actionsheetios.md
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,9 @@ Display the iOS share sheet. The `options` object should contain one or both of
- `subject` (string) - a subject for the message
- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet

> **Note:** If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
:::note
If `url` points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc. If `url` points to a remote file or address it must conform to URL format as described in [RFC 2396](https://www.ietf.org/rfc/rfc2396.txt). For example, a web URL without a proper protocol (HTTP/HTTPS) will not be shared.
:::

The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`.

Expand Down
190 changes: 4 additions & 186 deletions docs/alertios.md
Original file line number Diff line number Diff line change
@@ -1,190 +1,8 @@
---
id: alertios
title: '🚧 AlertIOS'
title: ' AlertIOS'
---

> **Removed.** Use [`Alert`](alert) instead.

`AlertIOS` provides functionality to create an iOS alert dialog with a message or create a prompt for user input.

Creating an iOS alert:

```jsx
AlertIOS.alert(
'Sync Complete',
'All your data are belong to us.',
);
```

Creating an iOS prompt:

```jsx
AlertIOS.prompt('Enter a value', null, text =>
console.log('You entered ' + text),
);
```

We recommend using the [`Alert.alert`](alert) method for cross-platform support if you don't need to create iOS-only prompts.

---

# Reference

## Methods

### `alert()`

```jsx
static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object]
```

Create and display a popup alert.

**Parameters:**

| Name | Type | Required | Description |
| ----------------- | --------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title | string | Yes | The dialog's title. Passing null or '' will hide the title. |
| message | string | No | An optional message that appears below the dialog's title. |
| callbackOrButtons | ?(() => void),[ButtonsArray](alertios#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys. `style` should be one of 'default', 'cancel' or 'destructive'. |
| type | [AlertType](alertios#alerttype) | No | Deprecated, do not use. |

Example with custom buttons:

```jsx
AlertIOS.alert(
'Update available',
'Keep your app up to date to enjoy the latest features',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'Install',
onPress: () => console.log('Install Pressed'),
},
],
);
```

---

### `prompt()`

```jsx
static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object]
```

Create and display a prompt to enter some text.

**Parameters:**

| Name | Type | Required | Description |
| ----------------- | --------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| title | string | Yes | The dialog's title. |
| message | string | No | An optional message that appears above the text input. |
| callbackOrButtons | ?((text: string) => void),[ButtonsArray](alertios#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys (see example). `style` should be one of 'default', 'cancel' or 'destructive'. |
| type | [AlertType](alertios#alerttype) | No | This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. |
| defaultValue | string | No | The default text in text input. |
| keyboardType | string | No | The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'. |

Example with custom buttons:

```jsx
AlertIOS.prompt(
'Enter password',
'Enter your password to claim your $1.5B in lottery winnings',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK',
onPress: password =>
console.log('OK Pressed, password: ' + password),
},
],
'secure-text',
);
```

,

Example with the default button and a custom callback:

```jsx
AlertIOS.prompt(
'Update username',
null,
text => console.log('Your username is ' + text),
null,
'default',
);
```

## Type Definitions

### AlertType

An Alert button type

| Type |
| ----- |
| $Enum |

**Constants:**

| Value | Description |
| -------------- | ---------------------------- |
| default | Default alert with no inputs |
| plain-text | Plain text input alert |
| secure-text | Secure text input alert |
| login-password | Login and password alert |

---

### AlertButtonStyle

An Alert button style

| Type |
| ----- |
| $Enum |

**Constants:**

| Value | Description |
| ----------- | ------------------------ |
| default | Default button style |
| cancel | Cancel button style |
| destructive | Destructive button style |

---

### ButtonsArray

Array or buttons

| Type |
| ----- |
| Array |

**Properties:**

| Name | Type | Description |
| --------- | --------------------------------------------- | ------------------------------------- |
| [text] | string | Button label |
| [onPress] | function | Callback function when button pressed |
| [style] | [AlertButtonStyle](alertios#alertbuttonstyle) | Button style |

**Constants:**

| Value | Description |
| ------- | ------------------------------------- |
| text | Button label |
| onPress | Callback function when button pressed |
| style | Button style |
:::danger Removed from React Native
Use [`Alert`](alert) instead.
:::
4 changes: 3 additions & 1 deletion docs/animated.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ The `Animated` library is designed to make animations fluid, powerful, and painl

The core workflow for creating an animation is to create an `Animated.Value`, hook it up to one or more style attributes of an animated component, and then drive updates via animations using `Animated.timing()`.

> Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
:::note
Don't modify the animated value directly. You can use the [`useRef` Hook](https://react.dev/reference/react/useRef) to return a mutable ref object. This ref object's `current` property is initialized as the given argument and persists throughout the component lifecycle.
:::

## Example

Expand Down
30 changes: 21 additions & 9 deletions docs/appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,27 @@ The `Appearance` module exposes information about the user's appearance preferen

<TabItem value="web">

> The `Appearance` API is inspired by the [Media Queries draft](https://drafts.csswg.org/mediaqueries-5/) from the W3C. The color scheme preference is modeled after the [`prefers-color-scheme` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
:::info
The `Appearance` API is inspired by the [Media Queries draft](https://drafts.csswg.org/mediaqueries-5/) from the W3C. The color scheme preference is modeled after the [`prefers-color-scheme` CSS media feature](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
:::

</TabItem>
<TabItem value="android">

> The color scheme preference will map to the user's Light or [Dark theme](https://developer.android.com/guide/topics/ui/look-and-feel/darktheme) preference on Android 10 (API level 29) devices and higher.
:::info
The color scheme preference will map to the user's Light or [Dark theme](https://developer.android.com/guide/topics/ui/look-and-feel/darktheme) preference on Android 10 (API level 29) devices and higher.
:::

</TabItem>
<TabItem value="ios">

> The color scheme preference will map to the user's Light or [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/) preference on iOS 13 devices and higher.
:::info
The color scheme preference will map to the user's Light or [Dark Mode](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/) preference on iOS 13 devices and higher.
:::

> Note: When taking a screenshot, by default, the color scheme may flicker between light and dark mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous.
:::note
When taking a screenshot, by default, the color scheme may flicker between light and dark mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous.
:::

</TabItem>
</Tabs>
Expand Down Expand Up @@ -63,13 +71,15 @@ Indicates the current user preferred color scheme. The value may be updated late

Supported color schemes:

- `light`: The user prefers a light color theme.
- `dark`: The user prefers a dark color theme.
- null: The user has not indicated a preferred color theme.
- `'light'`: The user prefers a light color theme.
- `'dark'`: The user prefers a dark color theme.
- `null`: The user has not indicated a preferred color theme.

See also: `useColorScheme` hook.

> Note: `getColorScheme()` will always return `light` when debugging with Chrome.
::note
`getColorScheme()` will always return `light` when debugging with Chrome.
:::

---

Expand All @@ -87,7 +97,9 @@ Supported color schemes:
- `dark`: Apply dark user interface style.
- null: Follow the system's interface style.

> Note: The change will not affect the system's selected interface style or any style set in other applications.
:::note
The change will not affect the system's selected interface style or any style set in other applications.
:::

---

Expand Down
4 changes: 3 additions & 1 deletion docs/appregistry.md
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,9 @@ Application configuration for the `registerConfig` method.
| run | function |
| section | boolean |

> **Note:** Every config is expected to set either `component` or `run` function.
:::note
Every config is expected to set either `component` or `run` function.
:::

### Registry

Expand Down
Loading