forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cut 0.60 docs version (facebook#967)
- Loading branch information
Showing
44 changed files
with
12,220 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
188 changes: 188 additions & 0 deletions
188
website/versioned_docs/version-0.60/accessibilityinfo.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,188 @@ | ||
--- | ||
id: version-0.60-accessibilityinfo | ||
title: AccessibilityInfo | ||
original_id: accessibilityinfo | ||
--- | ||
|
||
Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The `AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes. | ||
|
||
Here's a small example illustrating how to use `AccessibilityInfo`: | ||
|
||
```javascript | ||
class AccessibilityStatusExample extends React.Component { | ||
state = { | ||
reduceMotionEnabled: false, | ||
screenReaderEnabled: false, | ||
}; | ||
|
||
componentDidMount() { | ||
AccessibilityInfo.addEventListener( | ||
'reduceMotionChanged', | ||
this._handleReduceMotionToggled, | ||
); | ||
AccessibilityInfo.addEventListener( | ||
'screenReaderChanged', | ||
this._handleScreenReaderToggled, | ||
); | ||
|
||
AccessibilityInfo.isReduceMotionEnabled().then((reduceMotionEnabled) => { | ||
this.setState({reduceMotionEnabled}); | ||
}); | ||
AccessibilityInfo.isScreenReaderEnabled().then((screenReaderEnabled) => { | ||
this.setState({screenReaderEnabled}); | ||
}); | ||
} | ||
|
||
componentWillUnmount() { | ||
AccessibilityInfo.removeEventListener( | ||
'reduceMotionChanged', | ||
this._handleReduceMotionToggled, | ||
); | ||
|
||
AccessibilityInfo.removeEventListener( | ||
'screenReaderChanged', | ||
this._handleScreenReaderToggled, | ||
); | ||
} | ||
|
||
_handleReduceMotionToggled = (reduceMotionEnabled) => { | ||
this.setState({reduceMotionEnabled}); | ||
}; | ||
|
||
_handleScreenReaderToggled = (screenReaderEnabled) => { | ||
this.setState({screenReaderEnabled}); | ||
}; | ||
|
||
render() { | ||
return ( | ||
<View> | ||
<Text> | ||
The reduce motion is{' '} | ||
{this.state.reduceMotionEnabled ? 'enabled' : 'disabled'}. | ||
</Text> | ||
<Text> | ||
The screen reader is{' '} | ||
{this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. | ||
</Text> | ||
</View> | ||
); | ||
} | ||
} | ||
``` | ||
|
||
### Methods | ||
|
||
- [`isBoldTextEnabled`](accessibilityinfo.md#isBoldTextEnabled) | ||
- [`isGrayscaleEnabled`](accessibilityinfo.md#isGrayscaleEnabled) | ||
- [`isInvertColorsEnabled`](accessibilityinfo.md#isInvertColorsEnabled) | ||
- [`isReduceMotionEnabled`](accessibilityinfo.md#isReduceMotionEnabled) | ||
- [`isReduceTransparencyEnabled`](accessibilityinfo.md#isReduceTransparencyEnabled) | ||
- [`isScreenReaderEnabled`](accessibilityinfo.md#isScreenReaderEnabled) | ||
- [`addEventListener`](accessibilityinfo.md#addeventlistener) | ||
- [`setAccessibilityFocus`](accessibilityinfo.md#setaccessibilityfocus) | ||
- [`announceForAccessibility`](accessibilityinfo.md#announceforaccessibility) | ||
- [`removeEventListener`](accessibilityinfo.md#removeeventlistener) | ||
|
||
--- | ||
|
||
# Reference | ||
|
||
## Methods | ||
|
||
### `isBoldTextEnabled()` | ||
|
||
```javascript | ||
static isBoldTextEnabled() | ||
``` | ||
|
||
iOS-Only. Query whether a bold text is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when bold text is enabled and `false` otherwise. | ||
|
||
### `isGrayscaleEnabled()` | ||
|
||
```javascript | ||
static isGrayscaleEnabled() | ||
``` | ||
|
||
Query whether grayscale is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when grayscale is enabled and `false` otherwise. | ||
|
||
### `isInvertColorsEnabled()` | ||
|
||
```javascript | ||
static isInvertColorsEnabled() | ||
``` | ||
|
||
Query whether invert colors is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when invert colors is enabled and `false` otherwise. | ||
|
||
### `isReduceMotionEnabled()` | ||
|
||
```javascript | ||
static isReduceMotionEnabled() | ||
``` | ||
|
||
Query whether reduce motion is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when reduce motion is enabled and `false` otherwise. | ||
|
||
### `isReduceTransparencyEnabled()` | ||
|
||
```javascript | ||
static isReduceTransparencyEnabled() | ||
``` | ||
|
||
Query whether reduce transparency is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a reduce transparency is enabled and `false` otherwise. | ||
|
||
### `isScreenReaderEnabled()` | ||
|
||
```javascript | ||
static isScreenReaderEnabled() | ||
``` | ||
|
||
Query whether a screen reader is currently enabled. Returns a promise which resolves to a boolean. The result is `true` when a screen reader is enabled and `false` otherwise. | ||
|
||
--- | ||
|
||
### `addEventListener()` | ||
|
||
```javascript | ||
static addEventListener(eventName, handler) | ||
``` | ||
|
||
Add an event handler. Supported events: | ||
|
||
- `boldTextChanged`: iOS-only event. Fires when the state of the bold text toggle changes. The argument to the event handler is a boolean. The boolean is `true` when bold text is enabled and `false` otherwise. | ||
- `grayscaleChanged`: iOS-only event. Fires when the state of the gray scale toggle changes. The argument to the event handler is a boolean. The boolean is `true` when a gray scale is enabled and `false` otherwise. | ||
- `invertColorsChanged`: iOS-only event. Fires when the state of the invert colors toggle changes. The argument to the event handler is a boolean. The boolean is `true` when invert colors is enabled and `false` otherwise. | ||
- `reduceMotionChanged`: Fires when the state of the reduce motion toggle changes. The argument to the event handler is a boolean. The boolean is `true` when a reduce motion is enabled (or when "Transition Animation Scale" in "Developer options" is "Animation off") and `false` otherwise. | ||
- `screenReaderChanged`: Fires when the state of the screen reader changes. The argument to the event handler is a boolean. The boolean is `true` when a screen reader is enabled and `false` otherwise. | ||
- `reduceTransparencyChanged`: iOS-only event. Fires when the state of the reduce transparency toggle changes. The argument to the event handler is a boolean. The boolean is `true` when reduce transparency is enabled and `false` otherwise. | ||
- `announcementFinished`: iOS-only event. Fires when the screen reader has finished making an announcement. The argument to the event handler is a dictionary with these keys: | ||
- `announcement`: The string announced by the screen reader. | ||
- `success`: A boolean indicating whether the announcement was successfully made. | ||
|
||
--- | ||
|
||
### `setAccessibilityFocus()` | ||
|
||
```javascript | ||
static setAccessibilityFocus(reactTag) | ||
``` | ||
|
||
Set accessibility focus to a React component. On Android, this is equivalent to `UIManager.sendAccessibilityEvent(reactTag, UIManager.AccessibilityEventTypes.typeViewFocused);`. | ||
|
||
--- | ||
|
||
### `announceForAccessibility()` | ||
|
||
```javascript | ||
static announceForAccessibility(announcement) | ||
``` | ||
|
||
Post a string to be announced by the screen reader. | ||
|
||
--- | ||
|
||
### `removeEventListener()` | ||
|
||
```javascript | ||
static removeEventListener(eventName, handler) | ||
``` | ||
|
||
Remove an event handler. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
--- | ||
id: version-0.60-actionsheetios | ||
title: ActionSheetIOS | ||
original_id: actionsheetios | ||
--- | ||
|
||
### Methods | ||
|
||
- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) | ||
- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) | ||
|
||
--- | ||
|
||
# Reference | ||
|
||
## Methods | ||
|
||
### `showActionSheetWithOptions()` | ||
|
||
```javascript | ||
static showActionSheetWithOptions(options, callback) | ||
``` | ||
|
||
Display an iOS action sheet. The `options` object must contain one or more of: | ||
|
||
- `options` (array of strings) - a list of button titles (required) | ||
- `cancelButtonIndex` (int) - index of cancel button in `options` | ||
- `destructiveButtonIndex` (int) - index of destructive button in `options` | ||
- `title` (string) - a title to show above the action sheet | ||
- `message` (string) - a message to show below the title | ||
- `anchor` (number) - the node to which the action sheet should be anchored (used for iPad) | ||
- `tintColor` (string) - the [color](colors.md) used for non-destructive button titles | ||
|
||
The 'callback' function takes one parameter, the zero-based index of the selected item. | ||
|
||
Minimal example: | ||
|
||
```javascript | ||
ActionSheetIOS.showActionSheetWithOptions( | ||
{ | ||
options: ['Cancel', 'Remove'], | ||
destructiveButtonIndex: 1, | ||
cancelButtonIndex: 0, | ||
}, | ||
(buttonIndex) => { | ||
if (buttonIndex === 1) { | ||
/* destructive action */ | ||
} | ||
}, | ||
); | ||
``` | ||
|
||
--- | ||
|
||
### `showShareActionSheetWithOptions()` | ||
|
||
```javascript | ||
static showShareActionSheetWithOptions(options, failureCallback, successCallback) | ||
``` | ||
|
||
Display the iOS share sheet. The `options` object should contain one or both of `message` and `url` and can additionally have a `subject` or `excludedActivityTypes`: | ||
|
||
- `url` (string) - a URL to share | ||
- `message` (string) - a message to share | ||
- `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. | ||
|
||
The 'failureCallback' function takes one parameter, an error object. The only property defined on this object is an optional `stack` property of type `string`. | ||
|
||
The 'successCallback' function takes two parameters: | ||
|
||
- a boolean value signifying success or failure | ||
- a string that, in the case of success, indicates the method of sharing |
100 changes: 100 additions & 0 deletions
100
website/versioned_docs/version-0.60/activityindicator.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
--- | ||
id: version-0.60-activityindicator | ||
title: ActivityIndicator | ||
original_id: activityindicator | ||
--- | ||
|
||
Displays a circular loading indicator. | ||
|
||
### Example | ||
|
||
```ReactNativeWebPlayer | ||
import React, { Component } from 'react' | ||
import { | ||
ActivityIndicator, | ||
AppRegistry, | ||
StyleSheet, | ||
Text, | ||
View, | ||
} from 'react-native' | ||
export default class App extends Component { | ||
render() { | ||
return ( | ||
<View style={[styles.container, styles.horizontal]}> | ||
<ActivityIndicator size="large" color="#0000ff" /> | ||
<ActivityIndicator size="small" color="#00ff00" /> | ||
<ActivityIndicator size="large" color="#0000ff" /> | ||
<ActivityIndicator size="small" color="#00ff00" /> | ||
</View> | ||
) | ||
} | ||
} | ||
const styles = StyleSheet.create({ | ||
container: { | ||
flex: 1, | ||
justifyContent: 'center' | ||
}, | ||
horizontal: { | ||
flexDirection: 'row', | ||
justifyContent: 'space-around', | ||
padding: 10 | ||
} | ||
}) | ||
AppRegistry.registerComponent('App', () => App) | ||
``` | ||
|
||
### Props | ||
|
||
- [View props...](view.md#props) | ||
|
||
* [`animating`](activityindicator.md#animating) | ||
* [`color`](activityindicator.md#color) | ||
* [`size`](activityindicator.md#size) | ||
* [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) | ||
|
||
--- | ||
|
||
# Reference | ||
|
||
## Props | ||
|
||
### `animating` | ||
|
||
Whether to show the indicator (true, the default) or hide it (false). | ||
|
||
| Type | Required | | ||
| ---- | -------- | | ||
| bool | No | | ||
|
||
--- | ||
|
||
### `color` | ||
|
||
The foreground color of the spinner (default is gray on iOS and dark cyan on Android). | ||
|
||
| Type | Required | | ||
| ------------------ | -------- | | ||
| [color](colors.md) | No | | ||
|
||
--- | ||
|
||
### `size` | ||
|
||
Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android. | ||
|
||
| Type | Required | | ||
| ------------------------------- | -------- | | ||
| enum('small', 'large'), ,number | No | | ||
|
||
--- | ||
|
||
### `hidesWhenStopped` | ||
|
||
Whether the indicator should hide when not animating (true by default). | ||
|
||
| Type | Required | Platform | | ||
| ---- | -------- | -------- | | ||
| bool | No | iOS | |
Oops, something went wrong.