Flatten jsdocs to markdown plaintext
Differential Revision: D6261799 fbshipit-source-id: 269e151c5d136c1d508d9f2a060c0c670d0fe0f2
This commit is contained in:
parent
7df58e23a3
commit
9ec9567390
|
@ -96,11 +96,11 @@ Please make sure the following is done when submitting a pull request:
|
|||
|
||||
1. Fork [the repository](https://github.com/facebook/react-native) and create your branch from `master`.
|
||||
2. Add the copyright notice to the top of any new files you've added.
|
||||
3. Describe your [**test plan**](/react-native/docs/contributing.html#test-plan) in your pull request description. Make sure to [test your changes](/react-native/docs/testing.html)!
|
||||
3. Describe your [**test plan**](https://facebook.github.io/react-native/docs/contributing.html#test-plan) in your pull request description. Make sure to [test your changes](https://facebook.github.io/react-native/docs/testing.html)!
|
||||
4. Make sure your code lints (`npm run lint`).
|
||||
5. If you haven't already, [sign the CLA](https://code.facebook.com/cla).
|
||||
|
||||
All pull requests should be opened against the `master` branch. After opening your pull request, ensure [**all tests pass**](/react-native/docs/contributing.html#contrinuous-integration-tests) on Circle CI. If a test fails and you believe it is unrelated to your change, leave a comment on the pull request explaining why.
|
||||
All pull requests should be opened against the `master` branch. After opening your pull request, ensure [**all tests pass**](https://facebook.github.io/react-native/docs/contributing.html#contrinuous-integration-tests) on Circle CI. If a test fails and you believe it is unrelated to your change, leave a comment on the pull request explaining why.
|
||||
|
||||
> **Note:** It is not necessary to keep clicking `Merge master to your branch` on the PR page. You would want to merge master if there are conflicts or tests are failing. The Facebook-GitHub-Bot ultimately squashes all commits to a single one before merging your PR.
|
||||
|
||||
|
@ -116,7 +116,7 @@ See [What is a Test Plan?](https://medium.com/@martinkonicek/what-is-a-test-plan
|
|||
|
||||
#### Continuous integration tests
|
||||
|
||||
Make sure all **tests pass** on [Circle CI][circle]. PRs that break tests are unlikely to be merged. Learn more about [testing your changes here](/react-native/docs/testing.html).
|
||||
Make sure all **tests pass** on [Circle CI][circle]. PRs that break tests are unlikely to be merged. Learn more about [testing your changes here](https://facebook.github.io/react-native/docs/testing.html).
|
||||
|
||||
[circle]: http://circleci.com/gh/facebook/react-native
|
||||
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
id: android-ui-performance
|
||||
title: Profiling Android UI Performance
|
||||
layout: redirect
|
||||
permalink: docs/android-ui-performance.html
|
||||
destinationUrl: performance.html
|
||||
---
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
id: NativeMethodsMixin
|
||||
title: NativeMethodsMixin
|
||||
layout: redirect
|
||||
permalink: docs/nativemethodsmixin.html
|
||||
destinationUrl: direct-manipulation.html#other-native-methods
|
||||
---
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
id: running-on-device-android
|
||||
title: Running On Device
|
||||
layout: redirect
|
||||
permalink: docs/running-on-device-android.html
|
||||
destinationUrl: running-on-device.html
|
||||
---
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
id: running-on-device-ios
|
||||
title: Running On Device
|
||||
layout: redirect
|
||||
permalink: docs/running-on-device-ios.html
|
||||
destinationUrl: running-on-device.html
|
||||
---
|
|
@ -0,0 +1,156 @@
|
|||
---
|
||||
id: accessibilityinfo
|
||||
title: AccessibilityInfo
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/accessibilityinfo.html
|
||||
next: actionsheetios
|
||||
previous: webview
|
||||
---
|
||||
|
||||
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 ScreenReaderStatusExample extends React.Component {
|
||||
state = {
|
||||
screenReaderEnabled: false,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
AccessibilityInfo.addEventListener(
|
||||
'change',
|
||||
this._handleScreenReaderToggled
|
||||
);
|
||||
AccessibilityInfo.fetch().done((isEnabled) => {
|
||||
this.setState({
|
||||
screenReaderEnabled: isEnabled
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
AccessibilityInfo.removeEventListener(
|
||||
'change',
|
||||
this._handleScreenReaderToggled
|
||||
);
|
||||
}
|
||||
|
||||
_handleScreenReaderToggled = (isEnabled) => {
|
||||
this.setState({
|
||||
screenReaderEnabled: isEnabled,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text>
|
||||
The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`fetch`](docs/accessibilityinfo.html#fetch)
|
||||
- [`addEventListener`](docs/accessibilityinfo.html#addeventlistener)
|
||||
- [`setAccessibilityFocus`](docs/accessibilityinfo.html#setaccessibilityfocus)
|
||||
- [`announceForAccessibility`](docs/accessibilityinfo.html#announceforaccessibility)
|
||||
- [`removeEventListener`](docs/accessibilityinfo.html#removeeventlistener)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `fetch()`
|
||||
|
||||
```javascript
|
||||
static fetch()
|
||||
```
|
||||
|
||||
|
||||
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:
|
||||
|
||||
- `change`: 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.
|
||||
- `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)
|
||||
```
|
||||
|
||||
|
||||
iOS-Only. Set accessibility focus to a react component.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `announceForAccessibility()`
|
||||
|
||||
```javascript
|
||||
static announceForAccessibility(announcement)
|
||||
```
|
||||
|
||||
|
||||
iOS-Only. Post a string to be announced by the screen reader.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
static removeEventListener(eventName, handler)
|
||||
```
|
||||
|
||||
|
||||
Remove an event handler.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
---
|
||||
id: actionsheetios
|
||||
title: ActionSheetIOS
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/actionsheetios.html
|
||||
next: alert
|
||||
previous: accessibilityinfo
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`showActionSheetWithOptions`](docs/actionsheetios.html#showactionsheetwithoptions)
|
||||
- [`showShareActionSheetWithOptions`](docs/actionsheetios.html#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
|
||||
|
||||
The 'callback' function takes one parameter, the zero-based index
|
||||
of the selected item.
|
||||
|
||||
Minimal example:
|
||||
|
||||
```
|
||||
ActionSheetIOS.showActionSheetWithOptions({
|
||||
options: ['Remove', 'Cancel'],
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
---
|
||||
id: activityindicator
|
||||
title: ActivityIndicator
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/activityindicator.html
|
||||
next: button
|
||||
previous: null
|
||||
---
|
||||
Displays a circular loading indicator.
|
||||
|
||||
### Example
|
||||
|
||||
```ReactNativeWebPlayer
|
||||
import React, { Component } from 'react'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
AppRegistry,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native'
|
||||
|
||||
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
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`animating`](docs/activityindicator.html#animating)
|
||||
- [`color`](docs/activityindicator.html#color)
|
||||
- [`size`](docs/activityindicator.html#size)
|
||||
- [`hidesWhenStopped`](docs/activityindicator.html#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).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | 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 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
id: alert
|
||||
title: Alert
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/alert.html
|
||||
next: alertios
|
||||
previous: actionsheetios
|
||||
---
|
||||
|
||||
Launches an alert dialog with the specified title and message.
|
||||
|
||||
Optionally provide a list of buttons. Tapping any button will fire the
|
||||
respective onPress callback and dismiss the alert. By default, the only
|
||||
button will be an 'OK' button.
|
||||
|
||||
This is an API that works both on iOS and Android and can show static
|
||||
alerts. To show an alert that prompts the user to enter some information,
|
||||
see `AlertIOS`; entering text in an alert is common on iOS only.
|
||||
|
||||
## iOS
|
||||
|
||||
On iOS you can specify any number of buttons. Each button can optionally
|
||||
specify a style, which is one of 'default', 'cancel' or 'destructive'.
|
||||
|
||||
## Android
|
||||
|
||||
On Android at most three buttons can be specified. Android has a concept
|
||||
of a neutral, negative and a positive button:
|
||||
|
||||
- If you specify one button, it will be the 'positive' one (such as 'OK')
|
||||
- Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
|
||||
- Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')
|
||||
|
||||
By default alerts on Android can be dismissed by tapping outside of the alert
|
||||
box. This event can be handled by providing an optional `options` parameter,
|
||||
with an `onDismiss` callback property `{ onDismiss: () => {} }`.
|
||||
|
||||
Alternatively, the dismissing behavior can be disabled altogether by providing
|
||||
an optional `options` parameter with the `cancelable` property set to `false`
|
||||
i.e. `{ cancelable: false }`
|
||||
|
||||
Example usage:
|
||||
```
|
||||
// Works on both iOS and Android
|
||||
Alert.alert(
|
||||
'Alert Title',
|
||||
'My Alert Msg',
|
||||
[
|
||||
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
|
||||
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
|
||||
{text: 'OK', onPress: () => console.log('OK Pressed')},
|
||||
],
|
||||
{ cancelable: false }
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`alert`](docs/alert.html#alert)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `alert()`
|
||||
|
||||
```javascript
|
||||
static alert(title, message?, buttons?, options?, type?)
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
---
|
||||
id: alertios
|
||||
title: AlertIOS
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/alertios.html
|
||||
next: animated
|
||||
previous: alert
|
||||
---
|
||||
`AlertIOS` provides functionality to create an iOS alert dialog with a
|
||||
message or create a prompt for user input.
|
||||
|
||||
Creating an iOS alert:
|
||||
|
||||
```
|
||||
AlertIOS.alert(
|
||||
'Sync Complete',
|
||||
'All your data are belong to us.'
|
||||
);
|
||||
```
|
||||
|
||||
Creating an iOS prompt:
|
||||
|
||||
```
|
||||
AlertIOS.prompt(
|
||||
'Enter a value',
|
||||
null,
|
||||
text => console.log("You entered "+text)
|
||||
);
|
||||
```
|
||||
|
||||
We recommend using the [`Alert.alert`](docs/alert.html) method for
|
||||
cross-platform support if you don't need to create iOS-only prompts.
|
||||
|
||||
### Methods
|
||||
|
||||
- [`alert`](docs/alertios.html#alert)
|
||||
- [`prompt`](docs/alertios.html#prompt)
|
||||
|
||||
|
||||
### Type Definitions
|
||||
|
||||
- [`AlertType`](docs/alertios.html#alerttype)
|
||||
- [`AlertButtonStyle`](docs/alertios.html#alertbuttonstyle)
|
||||
- [`ButtonsArray`](docs/alertios.html#buttonsarray)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `alert()`
|
||||
|
||||
```javascript
|
||||
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 | No | The dialog's title. Passing null or '' will hide the title. |
|
||||
| message | string | Yes | An optional message that appears below the dialog's title. |
|
||||
| callbackOrButtons | ?(() => void),[ButtonsArray](docs/alertios.html#buttonsarray) | Yes | 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](docs/alertios.html#alerttype) | Yes | Deprecated, do not use. |
|
||||
|
||||
|
||||
|
||||
|
||||
Example with custom buttons:
|
||||
|
||||
```javascript
|
||||
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()`
|
||||
|
||||
```javascript
|
||||
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 | No | The dialog's title. |
|
||||
| message | string | Yes | An optional message that appears above the text input. |
|
||||
| callbackOrButtons | ?((text: string) => void),[ButtonsArray](docs/alertios.html#buttonsarray) | Yes | 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](docs/alertios.html#alerttype) | Yes | This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. |
|
||||
| defaultValue | string | Yes | The default text in text input. |
|
||||
| keyboardType | string | Yes | 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:
|
||||
|
||||
```javascript
|
||||
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:
|
||||
|
||||
```javascript
|
||||
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](docs/alertios.html#alertbuttonstyle) | Button style |
|
||||
|
||||
|
||||
**Constants:**
|
||||
|
||||
| Value | Description |
|
||||
| - | - |
|
||||
| text | Button label |
|
||||
| onPress | Callback function when button pressed |
|
||||
| style | Button style |
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Building React Native from source
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/android-building-from-source.html
|
||||
banner: ejected
|
||||
next: communication-android
|
||||
previous: android-ui-performance
|
||||
---
|
|
@ -0,0 +1,557 @@
|
|||
---
|
||||
id: animated
|
||||
title: Animated
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/animated.html
|
||||
next: appregistry
|
||||
previous: alertios
|
||||
---
|
||||
|
||||
The `Animated` library is designed to make animations fluid, powerful, and
|
||||
easy to build and maintain. `Animated` focuses on declarative relationships
|
||||
between inputs and outputs, with configurable transforms in between, and
|
||||
simple `start`/`stop` methods to control time-based animation execution.
|
||||
|
||||
The simplest 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()`:
|
||||
|
||||
```javascript
|
||||
Animated.timing( // Animate value over time
|
||||
this.state.fadeAnim, // The value to drive
|
||||
{
|
||||
toValue: 1, // Animate to final value of 1
|
||||
}
|
||||
).start(); // Start the animation
|
||||
```
|
||||
|
||||
Refer to the [Animations](docs/animations.html#animated-api) guide to see
|
||||
additional examples of `Animated` in action.
|
||||
|
||||
## Overview
|
||||
|
||||
There are two value types you can use with `Animated`:
|
||||
|
||||
- [`Animated.Value()`](docs/animated.html#value) for single values
|
||||
- [`Animated.ValueXY()`](docs/animated.html#valuexy) for vectors
|
||||
|
||||
`Animated.Value` can bind to style properties or other props, and can be
|
||||
interpolated as well. A single `Animated.Value` can drive any number of
|
||||
properties.
|
||||
|
||||
### Configuring animations
|
||||
|
||||
`Animated` provides three types of animation types. Each animation type
|
||||
provides a particular animation curve that controls how your values animate
|
||||
from their initial value to the final value:
|
||||
|
||||
- [`Animated.decay()`](docs/animated.html#decay) starts with an initial
|
||||
velocity and gradually slows to a stop.
|
||||
- [`Animated.spring()`](docs/animated.html#spring) provides a simple
|
||||
spring physics model.
|
||||
- [`Animated.timing()`](docs/animated.html#timing) animates a value over time
|
||||
using [easing functions](docs/easing.html).
|
||||
|
||||
In most cases, you will be using `timing()`. By default, it uses a symmetric
|
||||
easeInOut curve that conveys the gradual acceleration of an object to full
|
||||
speed and concludes by gradually decelerating to a stop.
|
||||
|
||||
### Working with animations
|
||||
|
||||
Animations are started by calling `start()` on your animation. `start()`
|
||||
takes a completion callback that will be called when the animation is done.
|
||||
If the animation finished running normally, the completion callback will be
|
||||
invoked with `{finished: true}`. If the animation is done because `stop()`
|
||||
was called on it before it could finish (e.g. because it was interrupted by a
|
||||
gesture or another animation), then it will receive `{finished: false}`.
|
||||
|
||||
### Using the native driver
|
||||
|
||||
By using the native driver, we send everything about the animation to native
|
||||
before starting the animation, allowing native code to perform the animation
|
||||
on the UI thread without having to go through the bridge on every frame.
|
||||
Once the animation has started, the JS thread can be blocked without
|
||||
affecting the animation.
|
||||
|
||||
You can use the native driver by specifying `useNativeDriver: true` in your
|
||||
animation configuration. See the
|
||||
[Animations](docs/animations.html#using-the-native-driver) guide to learn
|
||||
more.
|
||||
|
||||
### Animatable components
|
||||
|
||||
Only animatable components can be animated. These special components do the
|
||||
magic of binding the animated values to the properties, and do targeted
|
||||
native updates to avoid the cost of the react render and reconciliation
|
||||
process on every frame. They also handle cleanup on unmount so they are safe
|
||||
by default.
|
||||
|
||||
- [`createAnimatedComponent()`](docs/animated.html#createanimatedcomponent)
|
||||
can be used to make a component animatable.
|
||||
|
||||
`Animated` exports the following animatable components using the above
|
||||
wrapper:
|
||||
|
||||
- `Animated.Image`
|
||||
- `Animated.ScrollView`
|
||||
- `Animated.Text`
|
||||
- `Animated.View`
|
||||
|
||||
### Composing animations
|
||||
|
||||
Animations can also be combined in complex ways using composition functions:
|
||||
|
||||
- [`Animated.delay()`](docs/animated.html#delay) starts an animation after
|
||||
a given delay.
|
||||
- [`Animated.parallel()`](docs/animated.html#parallel) starts a number of
|
||||
animations at the same time.
|
||||
- [`Animated.sequence()`](docs/animated.html#sequence) starts the animations
|
||||
in order, waiting for each to complete before starting the next.
|
||||
- [`Animated.stagger()`](docs/animated.html#stagger) starts animations in
|
||||
order and in parallel, but with successive delays.
|
||||
|
||||
Animations can also be chained together simply by setting the `toValue` of
|
||||
one animation to be another `Animated.Value`. See
|
||||
[Tracking dynamic values](docs/animations.html#tracking-dynamic-values) in
|
||||
the Animations guide.
|
||||
|
||||
By default, if one animation is stopped or interrupted, then all other
|
||||
animations in the group are also stopped.
|
||||
|
||||
### Combining animated values
|
||||
|
||||
You can combine two animated values via addition, multiplication, division,
|
||||
or modulo to make a new animated value:
|
||||
|
||||
- [`Animated.add()`](docs/animated.html#add)
|
||||
- [`Animated.divide()`](docs/animated.html#divide)
|
||||
- [`Animated.modulo()`](docs/animated.html#modulo)
|
||||
- [`Animated.multiply()`](docs/animated.html#multiply)
|
||||
|
||||
### Interpolation
|
||||
|
||||
The `interpolate()` function allows input ranges to map to different output
|
||||
ranges. By default, it will extrapolate the curve beyond the ranges given,
|
||||
but you can also have it clamp the output value. It uses lineal interpolation
|
||||
by default but also supports easing functions.
|
||||
|
||||
- [`interpolate()`](docs/animated.html#interpolate)
|
||||
|
||||
Read more about interpolation in the
|
||||
[Animation](docs/animations.html#interpolation) guide.
|
||||
|
||||
### Handling gestures and other events
|
||||
|
||||
Gestures, like panning or scrolling, and other events can map directly to
|
||||
animated values using `Animated.event()`. This is done with a structured map
|
||||
syntax so that values can be extracted from complex event objects. The first
|
||||
level is an array to allow mapping across multiple args, and that array
|
||||
contains nested objects.
|
||||
|
||||
- [`Animated.event()`](docs/animated.html#event)
|
||||
|
||||
For example, when working with horizontal scrolling gestures, you would do
|
||||
the following in order to map `event.nativeEvent.contentOffset.x` to
|
||||
`scrollX` (an `Animated.Value`):
|
||||
|
||||
```javascript
|
||||
onScroll={Animated.event(
|
||||
// scrollX = e.nativeEvent.contentOffset.x
|
||||
[{ nativeEvent: {
|
||||
contentOffset: {
|
||||
x: scrollX
|
||||
}
|
||||
}
|
||||
}]
|
||||
)}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`decay`](docs/animated.html#decay)
|
||||
- [`timing`](docs/animated.html#timing)
|
||||
- [`spring`](docs/animated.html#spring)
|
||||
- [`add`](docs/animated.html#add)
|
||||
- [`divide`](docs/animated.html#divide)
|
||||
- [`multiply`](docs/animated.html#multiply)
|
||||
- [`modulo`](docs/animated.html#modulo)
|
||||
- [`diffClamp`](docs/animated.html#diffclamp)
|
||||
- [`delay`](docs/animated.html#delay)
|
||||
- [`sequence`](docs/animated.html#sequence)
|
||||
- [`parallel`](docs/animated.html#parallel)
|
||||
- [`stagger`](docs/animated.html#stagger)
|
||||
- [`loop`](docs/animated.html#loop)
|
||||
- [`event`](docs/animated.html#event)
|
||||
- [`forkEvent`](docs/animated.html#forkevent)
|
||||
- [`unforkEvent`](docs/animated.html#unforkevent)
|
||||
|
||||
|
||||
### Properties
|
||||
|
||||
- [`Value`](docs/animated.html#value)
|
||||
- [`ValueXY`](docs/animated.html#valuexy)
|
||||
- [`Interpolation`](docs/animated.html#interpolation)
|
||||
- [`Node`](docs/animated.html#node)
|
||||
- [`createAnimatedComponent`](docs/animated.html#createanimatedcomponent)
|
||||
- [`attachNativeEvent`](docs/animated.html#attachnativeevent)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `decay()`
|
||||
|
||||
```javascript
|
||||
static decay(value, config)
|
||||
```
|
||||
|
||||
|
||||
Animates a value from an initial velocity to zero based on a decay
|
||||
coefficient.
|
||||
|
||||
Config is an object that may have the following options:
|
||||
|
||||
- `velocity`: Initial velocity. Required.
|
||||
- `deceleration`: Rate of decay. Default 0.997.
|
||||
- `isInteraction`: Whether or not this animation creates an "interaction handle" on the
|
||||
`InteractionManager`. Default true.
|
||||
- `useNativeDriver`: Uses the native driver when true. Default false.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `timing()`
|
||||
|
||||
```javascript
|
||||
static timing(value, config)
|
||||
```
|
||||
|
||||
|
||||
Animates a value along a timed easing curve. The
|
||||
[`Easing`](docs/easing.html) module has tons of predefined curves, or you
|
||||
can use your own function.
|
||||
|
||||
Config is an object that may have the following options:
|
||||
|
||||
- `duration`: Length of animation (milliseconds). Default 500.
|
||||
- `easing`: Easing function to define curve.
|
||||
Default is `Easing.inOut(Easing.ease)`.
|
||||
- `delay`: Start the animation after delay (milliseconds). Default 0.
|
||||
- `isInteraction`: Whether or not this animation creates an "interaction handle" on the
|
||||
`InteractionManager`. Default true.
|
||||
- `useNativeDriver`: Uses the native driver when true. Default false.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `spring()`
|
||||
|
||||
```javascript
|
||||
static spring(value, config)
|
||||
```
|
||||
|
||||
|
||||
Animates a value according to an analytical spring model based on
|
||||
[damped harmonic oscillation](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator).
|
||||
Tracks velocity state to create fluid motions as the `toValue` updates, and
|
||||
can be chained together.
|
||||
|
||||
Config is an object that may have the following options.
|
||||
|
||||
Note that you can only define one of bounciness/speed, tension/friction, or
|
||||
stiffness/damping/mass, but not more than one:
|
||||
|
||||
The friction/tension or bounciness/speed options match the spring model in
|
||||
[Facebook Pop](https://github.com/facebook/pop), [Rebound](http://facebook.github.io/rebound/),
|
||||
and [Origami](http://origami.design/).
|
||||
|
||||
- `friction`: Controls "bounciness"/overshoot. Default 7.
|
||||
- `tension`: Controls speed. Default 40.
|
||||
- `speed`: Controls speed of the animation. Default 12.
|
||||
- `bounciness`: Controls bounciness. Default 8.
|
||||
|
||||
Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an
|
||||
analytical spring model based on the motion equations of a [damped harmonic
|
||||
oscillator](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator).
|
||||
This behavior is slightly more precise and faithful to the physics behind
|
||||
spring dynamics, and closely mimics the implementation in iOS's
|
||||
CASpringAnimation primitive.
|
||||
|
||||
- `stiffness`: The spring stiffness coefficient. Default 100.
|
||||
- `damping`: Defines how the spring’s motion should be damped due to the forces of friction.
|
||||
Default 10.
|
||||
- `mass`: The mass of the object attached to the end of the spring. Default 1.
|
||||
|
||||
Other configuration options are as follows:
|
||||
|
||||
- `velocity`: The initial velocity of the object attached to the spring. Default 0 (object
|
||||
is at rest).
|
||||
- `overshootClamping`: Boolean indiciating whether the spring should be clamped and not
|
||||
bounce. Default false.
|
||||
- `restDisplacementThreshold`: The threshold of displacement from rest below which the
|
||||
spring should be considered at rest. Default 0.001.
|
||||
- `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels
|
||||
per second. Default 0.001.
|
||||
- `delay`: Start the animation after delay (milliseconds). Default 0.
|
||||
- `isInteraction`: Whether or not this animation creates an "interaction handle" on the
|
||||
`InteractionManager`. Default true.
|
||||
- `useNativeDriver`: Uses the native driver when true. Default false.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `add()`
|
||||
|
||||
```javascript
|
||||
static add(a, b)
|
||||
```
|
||||
|
||||
|
||||
Creates a new Animated value composed from two Animated values added
|
||||
together.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `divide()`
|
||||
|
||||
```javascript
|
||||
static divide(a, b)
|
||||
```
|
||||
|
||||
|
||||
Creates a new Animated value composed by dividing the first Animated value
|
||||
by the second Animated value.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `multiply()`
|
||||
|
||||
```javascript
|
||||
static multiply(a, b)
|
||||
```
|
||||
|
||||
|
||||
Creates a new Animated value composed from two Animated values multiplied
|
||||
together.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `modulo()`
|
||||
|
||||
```javascript
|
||||
static modulo(a, modulus)
|
||||
```
|
||||
|
||||
|
||||
Creates a new Animated value that is the (non-negative) modulo of the
|
||||
provided Animated value
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `diffClamp()`
|
||||
|
||||
```javascript
|
||||
static diffClamp(a, min, max)
|
||||
```
|
||||
|
||||
|
||||
Create a new Animated value that is limited between 2 values. It uses the
|
||||
difference between the last value so even if the value is far from the bounds
|
||||
it will start changing when the value starts getting closer again.
|
||||
(`value = clamp(value + diff, min, max)`).
|
||||
|
||||
This is useful with scroll events, for example, to show the navbar when
|
||||
scrolling up and to hide it when scrolling down.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `delay()`
|
||||
|
||||
```javascript
|
||||
static delay(time)
|
||||
```
|
||||
|
||||
|
||||
Starts an animation after the given delay.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `sequence()`
|
||||
|
||||
```javascript
|
||||
static sequence(animations)
|
||||
```
|
||||
|
||||
|
||||
Starts an array of animations in order, waiting for each to complete
|
||||
before starting the next. If the current running animation is stopped, no
|
||||
following animations will be started.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `parallel()`
|
||||
|
||||
```javascript
|
||||
static parallel(animations, config?)
|
||||
```
|
||||
|
||||
|
||||
Starts an array of animations all at the same time. By default, if one
|
||||
of the animations is stopped, they will all be stopped. You can override
|
||||
this with the `stopTogether` flag.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `stagger()`
|
||||
|
||||
```javascript
|
||||
static stagger(time, animations)
|
||||
```
|
||||
|
||||
|
||||
Array of animations may run in parallel (overlap), but are started in
|
||||
sequence with successive delays. Nice for doing trailing effects.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `loop()`
|
||||
|
||||
```javascript
|
||||
static loop(animation)
|
||||
```
|
||||
|
||||
|
||||
Loops a given animation continuously, so that each time it reaches the
|
||||
end, it resets and begins again from the start. Can specify number of
|
||||
times to loop using the key `iterations` in the config. Will loop without
|
||||
blocking the UI thread if the child animation is set to `useNativeDriver: true`.
|
||||
In addition, loops can prevent `VirtualizedList`-based components from rendering
|
||||
more rows while the animation is running. You can pass `isInteraction: false` in the
|
||||
child animation config to fix this.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `event()`
|
||||
|
||||
```javascript
|
||||
static event(argMapping, config?)
|
||||
```
|
||||
|
||||
|
||||
Takes an array of mappings and extracts values from each arg accordingly,
|
||||
then calls `setValue` on the mapped outputs. e.g.
|
||||
|
||||
```javascript
|
||||
onScroll={Animated.event(
|
||||
[{nativeEvent: {contentOffset: {x: this._scrollX}}}],
|
||||
{listener: (event) => console.log(event)}, // Optional async listener
|
||||
)}
|
||||
...
|
||||
onPanResponderMove: Animated.event([
|
||||
null, // raw event arg ignored
|
||||
{dx: this._panX}, // gestureState arg
|
||||
{listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
|
||||
]),
|
||||
```
|
||||
|
||||
Config is an object that may have the following options:
|
||||
|
||||
- `listener`: Optional async listener.
|
||||
- `useNativeDriver`: Uses the native driver when true. Default false.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `forkEvent()`
|
||||
|
||||
```javascript
|
||||
static forkEvent(event, listener)
|
||||
```
|
||||
|
||||
|
||||
Advanced imperative API for snooping on animated events that are passed in through props. Use
|
||||
values directly where possible.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `unforkEvent()`
|
||||
|
||||
```javascript
|
||||
static unforkEvent(event, listener)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
---
|
||||
id: appregistry
|
||||
title: AppRegistry
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/appregistry.html
|
||||
next: appstate
|
||||
previous: animated
|
||||
---
|
||||
|
||||
<div class="banner-crna-ejected">
|
||||
<h3>Project with Native Code Required</h3>
|
||||
<p>
|
||||
This API only works in projects made with <code>react-native init</code>
|
||||
or in those made with Create React Native App which have since ejected. For
|
||||
more information about ejecting, please see
|
||||
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
|
||||
the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
`AppRegistry` is the JS entry point to running all React Native apps. App
|
||||
root components should register themselves with
|
||||
`AppRegistry.registerComponent`, then the native system can load the bundle
|
||||
for the app and then actually run the app when it's ready by invoking
|
||||
`AppRegistry.runApplication`.
|
||||
|
||||
To "stop" an application when a view should be destroyed, call
|
||||
`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was
|
||||
passed into `runApplication`. These should always be used as a pair.
|
||||
|
||||
`AppRegistry` should be `require`d early in the `require` sequence to make
|
||||
sure the JS execution environment is setup before other modules are
|
||||
`require`d.
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`setWrapperComponentProvider`](docs/appregistry.html#setwrappercomponentprovider)
|
||||
- [`registerConfig`](docs/appregistry.html#registerconfig)
|
||||
- [`registerComponent`](docs/appregistry.html#registercomponent)
|
||||
- [`registerRunnable`](docs/appregistry.html#registerrunnable)
|
||||
- [`registerSection`](docs/appregistry.html#registersection)
|
||||
- [`getAppKeys`](docs/appregistry.html#getappkeys)
|
||||
- [`getSectionKeys`](docs/appregistry.html#getsectionkeys)
|
||||
- [`getSections`](docs/appregistry.html#getsections)
|
||||
- [`getRunnable`](docs/appregistry.html#getrunnable)
|
||||
- [`getRegistry`](docs/appregistry.html#getregistry)
|
||||
- [`setComponentProviderInstrumentationHook`](docs/appregistry.html#setcomponentproviderinstrumentationhook)
|
||||
- [`runApplication`](docs/appregistry.html#runapplication)
|
||||
- [`unmountApplicationComponentAtRootTag`](docs/appregistry.html#unmountapplicationcomponentatroottag)
|
||||
- [`registerHeadlessTask`](docs/appregistry.html#registerheadlesstask)
|
||||
- [`startHeadlessTask`](docs/appregistry.html#startheadlesstask)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `setWrapperComponentProvider()`
|
||||
|
||||
```javascript
|
||||
static setWrapperComponentProvider(provider)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `registerConfig()`
|
||||
|
||||
```javascript
|
||||
static registerConfig(config)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `registerComponent()`
|
||||
|
||||
```javascript
|
||||
static registerComponent(appKey, componentProvider, section?)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `registerRunnable()`
|
||||
|
||||
```javascript
|
||||
static registerRunnable(appKey, run)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `registerSection()`
|
||||
|
||||
```javascript
|
||||
static registerSection(appKey, component)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getAppKeys()`
|
||||
|
||||
```javascript
|
||||
static getAppKeys()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getSectionKeys()`
|
||||
|
||||
```javascript
|
||||
static getSectionKeys()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getSections()`
|
||||
|
||||
```javascript
|
||||
static getSections()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getRunnable()`
|
||||
|
||||
```javascript
|
||||
static getRunnable(appKey)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getRegistry()`
|
||||
|
||||
```javascript
|
||||
static getRegistry()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setComponentProviderInstrumentationHook()`
|
||||
|
||||
```javascript
|
||||
static setComponentProviderInstrumentationHook(hook)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `runApplication()`
|
||||
|
||||
```javascript
|
||||
static runApplication(appKey, appParameters)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `unmountApplicationComponentAtRootTag()`
|
||||
|
||||
```javascript
|
||||
static unmountApplicationComponentAtRootTag(rootTag)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `registerHeadlessTask()`
|
||||
|
||||
```javascript
|
||||
static registerHeadlessTask(taskKey, task)
|
||||
```
|
||||
|
||||
|
||||
Register a headless task. A headless task is a bit of code that runs without a UI.
|
||||
@param taskKey the key associated with this task
|
||||
@param task a promise returning function that takes some data passed from the native side as
|
||||
the only argument; when the promise is resolved or rejected the native side is
|
||||
notified of this event and it may decide to destroy the JS context.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `startHeadlessTask()`
|
||||
|
||||
```javascript
|
||||
static startHeadlessTask(taskId, taskKey, data)
|
||||
```
|
||||
|
||||
|
||||
Only called from native code. Starts a headless task.
|
||||
|
||||
@param taskId the native id for this task instance to keep track of its execution
|
||||
@param taskKey the key for the task to start
|
||||
@param data the data to pass to the task
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
---
|
||||
id: appstate
|
||||
title: AppState
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/appstate.html
|
||||
next: asyncstorage
|
||||
previous: appregistry
|
||||
---
|
||||
|
||||
`AppState` can tell you if the app is in the foreground or background,
|
||||
and notify you when the state changes.
|
||||
|
||||
AppState is frequently used to determine the intent and proper behavior when
|
||||
handling push notifications.
|
||||
|
||||
### App States
|
||||
|
||||
- `active` - The app is running in the foreground
|
||||
- `background` - The app is running in the background. The user is either
|
||||
in another app or on the home screen
|
||||
- `inactive` - This is a state that occurs when transitioning between
|
||||
foreground & background, and during periods of inactivity such as
|
||||
entering the Multitasking view or in the event of an incoming call
|
||||
|
||||
For more information, see
|
||||
[Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html)
|
||||
|
||||
### Basic Usage
|
||||
|
||||
To see the current state, you can check `AppState.currentState`, which
|
||||
will be kept up-to-date. However, `currentState` will be null at launch
|
||||
while `AppState` retrieves it over the bridge.
|
||||
|
||||
```
|
||||
import React, {Component} from 'react'
|
||||
import {AppState, Text} from 'react-native'
|
||||
|
||||
class AppStateExample extends Component {
|
||||
|
||||
state = {
|
||||
appState: AppState.currentState
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
AppState.addEventListener('change', this._handleAppStateChange);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
AppState.removeEventListener('change', this._handleAppStateChange);
|
||||
}
|
||||
|
||||
_handleAppStateChange = (nextAppState) => {
|
||||
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
|
||||
console.log('App has come to the foreground!')
|
||||
}
|
||||
this.setState({appState: nextAppState});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Text>Current state is: {this.state.appState}</Text>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
This example will only ever appear to say "Current state is: active" because
|
||||
the app is only visible to the user when in the `active` state, and the null
|
||||
state will happen only momentarily.
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`=`](docs/appstate.html#)
|
||||
- [`addEventListener`](docs/appstate.html#addeventlistener)
|
||||
- [`removeEventListener`](docs/appstate.html#removeeventlistener)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `=()`
|
||||
|
||||
```javascript
|
||||
=(;, ()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `addEventListener()`
|
||||
|
||||
```javascript
|
||||
addEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Add a handler to AppState changes by listening to the `change` event type
|
||||
and providing the handler
|
||||
|
||||
TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate
|
||||
`addEventListener` and `removeEventListener` and just use `addListener` and
|
||||
`listener.remove()` directly. That will be a breaking change though, as both
|
||||
the method and event names are different (addListener events are currently
|
||||
required to be globally unique).
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
removeEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Remove a handler by passing the `change` event type and the handler
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,420 @@
|
|||
---
|
||||
id: asyncstorage
|
||||
title: AsyncStorage
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/asyncstorage.html
|
||||
next: backandroid
|
||||
previous: appstate
|
||||
---
|
||||
`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage
|
||||
system that is global to the app. It should be used instead of LocalStorage.
|
||||
|
||||
It is recommended that you use an abstraction on top of `AsyncStorage`
|
||||
instead of `AsyncStorage` directly for anything more than light usage since
|
||||
it operates globally.
|
||||
|
||||
On iOS, `AsyncStorage` is backed by native code that stores small values in a
|
||||
serialized dictionary and larger values in separate files. On Android,
|
||||
`AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite
|
||||
based on what is available.
|
||||
|
||||
The `AsyncStorage` JavaScript code is a simple facade that provides a clear
|
||||
JavaScript API, real `Error` objects, and simple non-multi functions. Each
|
||||
method in the API returns a `Promise` object.
|
||||
|
||||
Persisting data:
|
||||
```
|
||||
try {
|
||||
await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
|
||||
} catch (error) {
|
||||
// Error saving data
|
||||
}
|
||||
```
|
||||
|
||||
Fetching data:
|
||||
```
|
||||
try {
|
||||
const value = await AsyncStorage.getItem('@MySuperStore:key');
|
||||
if (value !== null){
|
||||
// We have data!!
|
||||
console.log(value);
|
||||
}
|
||||
} catch (error) {
|
||||
// Error retrieving data
|
||||
}
|
||||
```
|
||||
|
||||
### Methods
|
||||
|
||||
- [`getItem`](docs/asyncstorage.html#getitem)
|
||||
- [`setItem`](docs/asyncstorage.html#setitem)
|
||||
- [`removeItem`](docs/asyncstorage.html#removeitem)
|
||||
- [`mergeItem`](docs/asyncstorage.html#mergeitem)
|
||||
- [`clear`](docs/asyncstorage.html#clear)
|
||||
- [`getAllKeys`](docs/asyncstorage.html#getallkeys)
|
||||
- [`flushGetRequests`](docs/asyncstorage.html#flushgetrequests)
|
||||
- [`multiGet`](docs/asyncstorage.html#multiget)
|
||||
- [`multiSet`](docs/asyncstorage.html#multiset)
|
||||
- [`multiRemove`](docs/asyncstorage.html#multiremove)
|
||||
- [`multiMerge`](docs/asyncstorage.html#multimerge)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `getItem()`
|
||||
|
||||
```javascript
|
||||
static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void)
|
||||
```
|
||||
|
||||
Fetches an item for a `key` and invokes a callback upon completion.
|
||||
Returns a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| key | string | No | Key of the item to fetch. |
|
||||
| callback | ?(error: ?Error, result: ?string) => void | Yes | Function that will be called with a result if found or any error. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setItem()`
|
||||
|
||||
```javascript
|
||||
static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void)
|
||||
```
|
||||
|
||||
Sets the value for a `key` and invokes a callback upon completion.
|
||||
Returns a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| key | string | No | Key of the item to set. |
|
||||
| value | string | No | Value to set for the `key`. |
|
||||
| callback | ?(error: ?Error) => void | Yes | Function that will be called with any error. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeItem()`
|
||||
|
||||
```javascript
|
||||
static removeItem(key: string, [callback]: ?(error: ?Error) => void)
|
||||
```
|
||||
|
||||
Removes an item for a `key` and invokes a callback upon completion.
|
||||
Returns a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| key | string | No | Key of the item to remove. |
|
||||
| callback | ?(error: ?Error) => void | Yes | Function that will be called with any error. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `mergeItem()`
|
||||
|
||||
```javascript
|
||||
static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void)
|
||||
```
|
||||
|
||||
Merges an existing `key` value with an input value, assuming both values
|
||||
are stringified JSON. Returns a `Promise` object.
|
||||
|
||||
**NOTE:** This is not supported by all native implementations.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| key | string | No | Key of the item to modify. |
|
||||
| value | string | No | New value to merge for the `key`. |
|
||||
| callback | ?(error: ?Error) => void | Yes | Function that will be called with any error. |
|
||||
|
||||
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
|
||||
let UID123_object = {
|
||||
name: 'Chris',
|
||||
age: 30,
|
||||
traits: {hair: 'brown', eyes: 'brown'},
|
||||
};
|
||||
// You only need to define what will be added or updated
|
||||
let UID123_delta = {
|
||||
age: 31,
|
||||
traits: {eyes: 'blue', shoe_size: 10}
|
||||
};
|
||||
|
||||
AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => {
|
||||
AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => {
|
||||
AsyncStorage.getItem('UID123', (err, result) => {
|
||||
console.log(result);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Console log result:
|
||||
// => {'name':'Chris','age':31,'traits':
|
||||
// {'shoe_size':10,'hair':'brown','eyes':'blue'}}
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `clear()`
|
||||
|
||||
```javascript
|
||||
static clear([callback]: ?(error: ?Error) => void)
|
||||
```
|
||||
|
||||
Erases *all* `AsyncStorage` for all clients, libraries, etc. You probably
|
||||
don't want to call this; use `removeItem` or `multiRemove` to clear only
|
||||
your app's keys. Returns a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| callback | ?(error: ?Error) => void | Yes | Function that will be called with any error. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getAllKeys()`
|
||||
|
||||
```javascript
|
||||
static getAllKeys([callback]: ?(error: ?Error, keys: ?Array<string>) => void)
|
||||
```
|
||||
|
||||
Gets *all* keys known to your app; for all callers, libraries, etc.
|
||||
Returns a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| callback | ?(error: ?Error, keys: ?Array<string>) => void | Yes | Function that will be called the keys found and any error. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flushGetRequests()`
|
||||
|
||||
```javascript
|
||||
static flushGetRequests(): [object Object]
|
||||
```
|
||||
|
||||
Flushes any pending requests using a single batch call to get the data.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `multiGet()`
|
||||
|
||||
```javascript
|
||||
static multiGet(keys: Array<string>, [callback]: ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void)
|
||||
```
|
||||
|
||||
This allows you to batch the fetching of items given an array of `key`
|
||||
inputs. Your callback will be invoked with an array of corresponding
|
||||
key-value pairs found:
|
||||
|
||||
```
|
||||
multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])
|
||||
```
|
||||
|
||||
The method returns a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| keys | Array<string> | No | Array of key for the items to get. |
|
||||
| callback | ?(errors: ?Array<Error>, result: ?Array<Array<string>>) => void | Yes | Function that will be called with a key-value array of the results, plus an array of any key-specific errors found. |
|
||||
|
||||
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
AsyncStorage.getAllKeys((err, keys) => {
|
||||
AsyncStorage.multiGet(keys, (err, stores) => {
|
||||
stores.map((result, i, store) => {
|
||||
// get at each store's key/value so you can work with it
|
||||
let key = store[i][0];
|
||||
let value = store[i][1];
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `multiSet()`
|
||||
|
||||
```javascript
|
||||
static multiSet(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
|
||||
```
|
||||
|
||||
Use this as a batch operation for storing multiple key-value pairs. When
|
||||
the operation completes you'll get a single callback with any errors:
|
||||
|
||||
```
|
||||
multiSet([['k1', 'val1'], ['k2', 'val2']], cb);
|
||||
```
|
||||
|
||||
The method returns a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| keyValuePairs | Array<Array<string>> | No | Array of key-value array for the items to set. |
|
||||
| callback | ?(errors: ?Array<Error>) => void | Yes | Function that will be called with an array of any key-specific errors found. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `multiRemove()`
|
||||
|
||||
```javascript
|
||||
static multiRemove(keys: Array<string>, [callback]: ?(errors: ?Array<Error>) => void)
|
||||
```
|
||||
|
||||
Call this to batch the deletion of all keys in the `keys` array. Returns
|
||||
a `Promise` object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| keys | Array<string> | No | Array of key for the items to delete. |
|
||||
| callback | ?(errors: ?Array<Error>) => void | Yes | Function that will be called an array of any key-specific errors found. |
|
||||
|
||||
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
|
||||
let keys = ['k1', 'k2'];
|
||||
AsyncStorage.multiRemove(keys, (err) => {
|
||||
// keys k1 & k2 removed, if they existed
|
||||
// do most stuff after removal (if you want)
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `multiMerge()`
|
||||
|
||||
```javascript
|
||||
static multiMerge(keyValuePairs: Array<Array<string>>, [callback]: ?(errors: ?Array<Error>) => void)
|
||||
```
|
||||
|
||||
Batch operation to merge in existing and new values for a given set of
|
||||
keys. This assumes that the values are stringified JSON. Returns a
|
||||
`Promise` object.
|
||||
|
||||
**NOTE**: This is not supported by all native implementations.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| keyValuePairs | Array<Array<string>> | No | Array of key-value array for the items to merge. |
|
||||
| callback | ?(errors: ?Array<Error>) => void | Yes | Function that will be called with an array of any key-specific errors found. |
|
||||
|
||||
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
|
||||
// first user, initial values
|
||||
let UID234_object = {
|
||||
name: 'Chris',
|
||||
age: 30,
|
||||
traits: {hair: 'brown', eyes: 'brown'},
|
||||
};
|
||||
|
||||
// first user, delta values
|
||||
let UID234_delta = {
|
||||
age: 31,
|
||||
traits: {eyes: 'blue', shoe_size: 10},
|
||||
};
|
||||
|
||||
// second user, initial values
|
||||
let UID345_object = {
|
||||
name: 'Marge',
|
||||
age: 25,
|
||||
traits: {hair: 'blonde', eyes: 'blue'},
|
||||
};
|
||||
|
||||
// second user, delta values
|
||||
let UID345_delta = {
|
||||
age: 26,
|
||||
traits: {eyes: 'green', shoe_size: 6},
|
||||
};
|
||||
|
||||
let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]]
|
||||
let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]]
|
||||
|
||||
AsyncStorage.multiSet(multi_set_pairs, (err) => {
|
||||
AsyncStorage.multiMerge(multi_merge_pairs, (err) => {
|
||||
AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => {
|
||||
stores.map( (result, i, store) => {
|
||||
let key = store[i][0];
|
||||
let val = store[i][1];
|
||||
console.log(key, val);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Console log results:
|
||||
// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}}
|
||||
// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
---
|
||||
id: backandroid
|
||||
title: BackAndroid
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/backandroid.html
|
||||
next: backhandler
|
||||
previous: asyncstorage
|
||||
---
|
||||
|
||||
Deprecated. Use BackHandler instead.
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`exitApp`](docs/backandroid.html#exitapp)
|
||||
- [`addEventListener`](docs/backandroid.html#addeventlistener)
|
||||
- [`removeEventListener`](docs/backandroid.html#removeeventlistener)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `exitApp()`
|
||||
|
||||
```javascript
|
||||
static exitApp()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `addEventListener()`
|
||||
|
||||
```javascript
|
||||
static addEventListener(eventName, handler)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
static removeEventListener(eventName, handler)
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
id: backhandler
|
||||
title: BackHandler
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/backhandler.html
|
||||
next: cameraroll
|
||||
previous: backhandler
|
||||
---
|
||||
|
||||
Detect hardware button presses for back navigation.
|
||||
|
||||
Android: Detect hardware back button presses, and programmatically invoke the default back button
|
||||
functionality to exit the app if there are no listeners or if none of the listeners return true.
|
||||
|
||||
tvOS: Detect presses of the menu button on the TV remote. (Still to be implemented:
|
||||
programmatically disable menu button handling
|
||||
functionality to exit the app if there are no listeners or if none of the listeners return true.)
|
||||
|
||||
iOS: Not applicable.
|
||||
|
||||
The event subscriptions are called in reverse order (i.e. last registered subscription first),
|
||||
and if one subscription returns true then subscriptions registered earlier will not be called.
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
BackHandler.addEventListener('hardwareBackPress', function() {
|
||||
// this.onMainScreen and this.goBack are just examples, you need to use your own implementation here
|
||||
// Typically you would use the navigator here to go to the last state.
|
||||
|
||||
if (!this.onMainScreen()) {
|
||||
this.goBack();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`exitApp`](docs/backhandler.html#exitapp)
|
||||
- [`addEventListener`](docs/backhandler.html#addeventlistener)
|
||||
- [`removeEventListener`](docs/backhandler.html#removeeventlistener)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `exitApp()`
|
||||
|
||||
```javascript
|
||||
static exitApp()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `addEventListener()`
|
||||
|
||||
```javascript
|
||||
static addEventListener(eventName, handler)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
static removeEventListener(eventName, handler)
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Building For Apple TV
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/building-for-apple-tv.html
|
||||
banner: ejected
|
||||
next: app-extensions
|
||||
previous: communication-ios
|
||||
---
|
|
@ -0,0 +1,148 @@
|
|||
---
|
||||
id: button
|
||||
title: Button
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/button.html
|
||||
next: checkbox
|
||||
previous: activityindicator
|
||||
---
|
||||
A basic button component that should render nicely on any platform. Supports
|
||||
a minimal level of customization.
|
||||
|
||||
<center><img src="img/buttonExample.png"></img></center>
|
||||
|
||||
If this button doesn't look right for your app, you can build your own
|
||||
button using [TouchableOpacity](docs/touchableopacity.html)
|
||||
or [TouchableNativeFeedback](docs/touchablenativefeedback.html).
|
||||
For inspiration, look at the [source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js).
|
||||
Or, take a look at the [wide variety of button components built by the community](https://js.coach/react-native?search=button).
|
||||
|
||||
Example usage:
|
||||
|
||||
```
|
||||
import { Button } from 'react-native';
|
||||
...
|
||||
|
||||
<Button
|
||||
onPress={onPressLearnMore}
|
||||
title="Learn More"
|
||||
color="#841584"
|
||||
accessibilityLabel="Learn more about this purple button"
|
||||
/>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
- [`onPress`](docs/button.html#onpress)
|
||||
- [`title`](docs/button.html#title)
|
||||
- [`accessibilityLabel`](docs/button.html#accessibilitylabel)
|
||||
- [`color`](docs/button.html#color)
|
||||
- [`disabled`](docs/button.html#disabled)
|
||||
- [`testID`](docs/button.html#testid)
|
||||
- [`hasTVPreferredFocus`](docs/button.html#hastvpreferredfocus)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `onPress`
|
||||
|
||||
Handler to be called when the user taps the button
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `title`
|
||||
|
||||
Text to display inside the button
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `accessibilityLabel`
|
||||
|
||||
Text to display for blindness accessibility features
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `color`
|
||||
|
||||
Color of the text (iOS), or background color of the button (Android)
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `disabled`
|
||||
|
||||
If true, disable all interactions for this component.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
Used to locate this view in end-to-end tests.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `hasTVPreferredFocus`
|
||||
|
||||
*(Apple TV only)* TV preferred focus (see documentation for the View component).
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
---
|
||||
id: cameraroll
|
||||
title: CameraRoll
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/cameraroll.html
|
||||
next: clipboard
|
||||
previous: backhandler
|
||||
---
|
||||
|
||||
`CameraRoll` provides access to the local camera roll / gallery.
|
||||
Before using this you must link the `RCTCameraRoll` library.
|
||||
You can refer to [Linking](docs/linking-libraries-ios.html) for help.
|
||||
|
||||
### Permissions
|
||||
The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
|
||||
Add the `NSPhotoLibraryUsageDescription` key in your `Info.plist` with a string that describes how your
|
||||
app will use this data. This key will appear as `Privacy - Photo Library Usage Description` in Xcode.
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`=`](docs/cameraroll.html#)
|
||||
- [`saveToCameraRoll`](docs/cameraroll.html#savetocameraroll)
|
||||
- [`getPhotos`](docs/cameraroll.html#getphotos)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `=()`
|
||||
|
||||
```javascript
|
||||
=(;, AssetTypeOptions, static, (, :)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `saveToCameraRoll()`
|
||||
|
||||
```javascript
|
||||
static saveToCameraRoll(tag, type?)
|
||||
```
|
||||
|
||||
|
||||
Saves the photo or video to the camera roll / gallery.
|
||||
|
||||
On Android, the tag must be a local image or video URI, such as `"file:///sdcard/img.png"`.
|
||||
|
||||
On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs)
|
||||
or a local video file URI (remote or data URIs are not supported for saving video at this time).
|
||||
|
||||
If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise
|
||||
it will be treated as a photo. To override the automatic choice, you can pass an optional
|
||||
`type` parameter that must be one of 'photo' or 'video'.
|
||||
|
||||
Returns a Promise which will resolve with the new URI.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getPhotos()`
|
||||
|
||||
```javascript
|
||||
static getPhotos(params)
|
||||
```
|
||||
|
||||
|
||||
Returns a Promise with photo identifier objects from the local camera
|
||||
roll of the device matching shape defined by `getPhotosReturnChecker`.
|
||||
|
||||
Expects a params object of the following shape:
|
||||
|
||||
- `first` : {number} : The number of photos wanted in reverse order of the photo application (i.e. most recent first for SavedPhotos).
|
||||
- `after` : {string} : A cursor that matches `page_info { end_cursor }` returned from a previous call to `getPhotos`.
|
||||
- `groupTypes` : {string} : Specifies which group types to filter the results to. Valid values are:
|
||||
- `Album`
|
||||
- `All`
|
||||
- `Event`
|
||||
- `Faces`
|
||||
- `Library`
|
||||
- `PhotoStream`
|
||||
- `SavedPhotos` // default
|
||||
- `groupName` : {string} : Specifies filter on group names, like 'Recent Photos' or custom album titles.
|
||||
- `assetType` : {string} : Specifies filter on asset type. Valid values are:
|
||||
- `All`
|
||||
- `Videos`
|
||||
- `Photos` // default
|
||||
- `mimeTypes` : {string} : Filter by mimetype (e.g. image/jpeg).
|
||||
|
||||
Returns a Promise which when resolved will be of the following shape:
|
||||
|
||||
- `edges` : {Array<node>} An array of node objects
|
||||
- `node`: {object} An object with the following shape:
|
||||
- `type`: {string}
|
||||
- `group_name`: {string}
|
||||
- `image`: {object} : An object with the following shape:
|
||||
- `uri`: {string}
|
||||
- `height`: {number}
|
||||
- `width`: {number}
|
||||
- `isStored`: {boolean}
|
||||
- `timestamp`: {number}
|
||||
- `location`: {object} : An object with the following shape:
|
||||
- `latitude`: {number}
|
||||
- `longitude`: {number}
|
||||
- `altitude`: {number}
|
||||
- `heading`: {number}
|
||||
- `speed`: {number}
|
||||
- `page_info` : {object} : An object with the following shape:
|
||||
- `has_next_page`: {boolean}
|
||||
- `start_cursor`: {boolean}
|
||||
- `end_cursor`: {boolean}
|
||||
|
||||
Loading images:
|
||||
```
|
||||
_handleButtonPress = () => {
|
||||
CameraRoll.getPhotos({
|
||||
first: 20,
|
||||
assetType: 'All',
|
||||
})
|
||||
.then(r => {
|
||||
this.setState({ photos: r.edges });
|
||||
})
|
||||
.catch((err) => {
|
||||
//Error Loading Images
|
||||
});
|
||||
};
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Button title="Load Images" onPress={this._handleButtonPress} />
|
||||
<ScrollView>
|
||||
{this.state.photos.map((p, i) => {
|
||||
return (
|
||||
<Image
|
||||
key={i}
|
||||
style={{
|
||||
width: 300,
|
||||
height: 100,
|
||||
}}
|
||||
source={{ uri: p.node.image.uri }}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
id: checkbox
|
||||
title: CheckBox
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/checkbox.html
|
||||
next: datepickerios
|
||||
previous: button
|
||||
---
|
||||
Renders a boolean input (Android only).
|
||||
|
||||
This is a controlled component that requires an `onValueChange` callback that
|
||||
updates the `value` prop in order for the component to reflect user actions.
|
||||
If the `value` prop is not updated, the component will continue to render
|
||||
the supplied `value` prop instead of the expected result of any user actions.
|
||||
|
||||
@keyword checkbox
|
||||
@keyword toggle
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`disabled`](docs/checkbox.html#disabled)
|
||||
- [`onChange`](docs/checkbox.html#onchange)
|
||||
- [`onValueChange`](docs/checkbox.html#onvaluechange)
|
||||
- [`testID`](docs/checkbox.html#testid)
|
||||
- [`value`](docs/checkbox.html#value)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `disabled`
|
||||
|
||||
If true the user won't be able to toggle the checkbox.
|
||||
Default value is false.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onChange`
|
||||
|
||||
Used in case the props change removes the component.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onValueChange`
|
||||
|
||||
Invoked with the new value when the value changes.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
Used to locate this view in end-to-end tests.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `value`
|
||||
|
||||
The value of the checkbox. If true the checkbox will be turned on.
|
||||
Default value is false.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
id: clipboard
|
||||
title: Clipboard
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/clipboard.html
|
||||
next: datepickerandroid
|
||||
previous: cameraroll
|
||||
---
|
||||
|
||||
`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`getString`](docs/clipboard.html#getstring)
|
||||
- [`setString`](docs/clipboard.html#setstring)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `getString()`
|
||||
|
||||
```javascript
|
||||
static getString()
|
||||
```
|
||||
|
||||
|
||||
Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content
|
||||
```javascript
|
||||
async _getContent() {
|
||||
var content = await Clipboard.getString();
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setString()`
|
||||
|
||||
```javascript
|
||||
static setString(content)
|
||||
```
|
||||
|
||||
|
||||
Set content of string type. You can use following code to set clipboard content
|
||||
```javascript
|
||||
_setContent() {
|
||||
Clipboard.setString('hello world');
|
||||
}
|
||||
```
|
||||
@param the content to be stored in the clipboard.
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Communication between native and React Native
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/communication-android.html
|
||||
banner: ejected
|
||||
next: contributing
|
||||
previous: android-building-from-source
|
||||
---
|
|
@ -4,7 +4,6 @@ title: Communication between native and React Native
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/communication-ios.html
|
||||
banner: ejected
|
||||
next: building-for-apple-tv
|
||||
previous: linking-libraries-ios
|
||||
---
|
|
@ -4,7 +4,6 @@ title: Custom WebView
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/custom-webview-android.html
|
||||
banner: ejected
|
||||
next: headless-js-android
|
||||
previous: native-components-android
|
||||
---
|
|
@ -4,7 +4,6 @@ title: Custom WebView
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/custom-webview-ios.html
|
||||
banner: ejected
|
||||
next: linking-libraries-ios
|
||||
previous: native-components-ios
|
||||
---
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
id: datepickerandroid
|
||||
title: DatePickerAndroid
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/datepickerandroid.html
|
||||
next: dimensions
|
||||
previous: clipboard
|
||||
---
|
||||
|
||||
Opens the standard Android date picker dialog.
|
||||
|
||||
### Example
|
||||
|
||||
```
|
||||
try {
|
||||
const {action, year, month, day} = await DatePickerAndroid.open({
|
||||
// Use `new Date()` for current date.
|
||||
// May 25 2020. Month 0 is January.
|
||||
date: new Date(2020, 4, 25)
|
||||
});
|
||||
if (action !== DatePickerAndroid.dismissedAction) {
|
||||
// Selected year, month (0-11), day
|
||||
}
|
||||
} catch ({code, message}) {
|
||||
console.warn('Cannot open date picker', message);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`open`](docs/datepickerandroid.html#open)
|
||||
- [`dateSetAction`](docs/datepickerandroid.html#datesetaction)
|
||||
- [`dismissedAction`](docs/datepickerandroid.html#dismissedaction)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `open()`
|
||||
|
||||
```javascript
|
||||
static open(options)
|
||||
```
|
||||
|
||||
|
||||
Opens the standard Android date picker dialog.
|
||||
|
||||
The available keys for the `options` object are:
|
||||
|
||||
- `date` (`Date` object or timestamp in milliseconds) - date to show by default
|
||||
- `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected
|
||||
- `maxDate` (`Date` object or timestamp in milliseconds) - maximum date that can be selected
|
||||
- `mode` (`enum('calendar', 'spinner', 'default')`) - To set the date-picker mode to calendar/spinner/default
|
||||
- 'calendar': Show a date picker in calendar mode.
|
||||
- 'spinner': Show a date picker in spinner mode.
|
||||
- 'default': Show a default native date picker(spinner/calendar) based on android versions.
|
||||
|
||||
Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11),
|
||||
`day` if the user picked a date. If the user dismissed the dialog, the Promise will
|
||||
still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys
|
||||
being undefined. **Always** check whether the `action` before reading the values.
|
||||
|
||||
Note the native date picker dialog has some UI glitches on Android 4 and lower
|
||||
when using the `minDate` and `maxDate` options.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `dateSetAction()`
|
||||
|
||||
```javascript
|
||||
static dateSetAction()
|
||||
```
|
||||
|
||||
|
||||
A date has been selected.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `dismissedAction()`
|
||||
|
||||
```javascript
|
||||
static dismissedAction()
|
||||
```
|
||||
|
||||
|
||||
The dialog has been dismissed.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
id: datepickerios
|
||||
title: DatePickerIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/datepickerios.html
|
||||
next: drawerlayoutandroid
|
||||
previous: checkbox
|
||||
---
|
||||
Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is
|
||||
a controlled component, so you must hook in to the `onDateChange` callback
|
||||
and update the `date` prop in order for the component to update, otherwise
|
||||
the user's change will be reverted immediately to reflect `props.date` as the
|
||||
source of truth.
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`date`](docs/datepickerios.html#date)
|
||||
- [`onDateChange`](docs/datepickerios.html#ondatechange)
|
||||
- [`maximumDate`](docs/datepickerios.html#maximumdate)
|
||||
- [`minimumDate`](docs/datepickerios.html#minimumdate)
|
||||
- [`minuteInterval`](docs/datepickerios.html#minuteinterval)
|
||||
- [`mode`](docs/datepickerios.html#mode)
|
||||
- [`timeZoneOffsetInMinutes`](docs/datepickerios.html#timezoneoffsetinminutes)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `date`
|
||||
|
||||
The currently selected date.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Date | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onDateChange`
|
||||
|
||||
Date change handler.
|
||||
|
||||
This is called when the user changes the date or time in the UI.
|
||||
The first and only argument is a Date object representing the new
|
||||
date and time.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `maximumDate`
|
||||
|
||||
Maximum date.
|
||||
|
||||
Restricts the range of possible date/time values.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Date | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minimumDate`
|
||||
|
||||
Minimum date.
|
||||
|
||||
Restricts the range of possible date/time values.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Date | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minuteInterval`
|
||||
|
||||
The interval at which minutes can be selected.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `mode`
|
||||
|
||||
The date picker mode.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('date', 'time', 'datetime') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `timeZoneOffsetInMinutes`
|
||||
|
||||
Timezone offset in minutes.
|
||||
|
||||
By default, the date picker will use the device's timezone. With this
|
||||
parameter, it is possible to force a certain timezone offset. For
|
||||
instance, to show times in Pacific Standard Time, pass -7 * 60.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
---
|
||||
id: dimensions
|
||||
title: Dimensions
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/dimensions.html
|
||||
next: easing
|
||||
previous: datepickerandroid
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`set`](docs/dimensions.html#set)
|
||||
- [`get`](docs/dimensions.html#get)
|
||||
- [`addEventListener`](docs/dimensions.html#addeventlistener)
|
||||
- [`removeEventListener`](docs/dimensions.html#removeeventlistener)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `set()`
|
||||
|
||||
```javascript
|
||||
static set(dims)
|
||||
```
|
||||
|
||||
|
||||
This should only be called from native code by sending the
|
||||
didUpdateDimensions event.
|
||||
|
||||
@param {object} dims Simple string-keyed object of dimensions to set
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `get()`
|
||||
|
||||
```javascript
|
||||
static get(dim)
|
||||
```
|
||||
|
||||
|
||||
Initial dimensions are set before `runApplication` is called so they should
|
||||
be available before any other require's are run, but may be updated later.
|
||||
|
||||
Note: Although dimensions are available immediately, they may change (e.g
|
||||
due to device rotation) so any rendering logic or styles that depend on
|
||||
these constants should try to call this function on every render, rather
|
||||
than caching the value (for example, using inline styles rather than
|
||||
setting a value in a `StyleSheet`).
|
||||
|
||||
Example: `var {height, width} = Dimensions.get('window');`
|
||||
|
||||
@param {string} dim Name of dimension as defined when calling `set`.
|
||||
@returns {Object?} Value for the dimension.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `addEventListener()`
|
||||
|
||||
```javascript
|
||||
static addEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Add an event handler. Supported events:
|
||||
|
||||
- `change`: Fires when a property within the `Dimensions` object changes. The argument
|
||||
to the event handler is an object with `window` and `screen` properties whose values
|
||||
are the same as the return values of `Dimensions.get('window')` and
|
||||
`Dimensions.get('screen')`, respectively.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
static removeEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Remove an event handler.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
---
|
||||
id: drawerlayoutandroid
|
||||
title: DrawerLayoutAndroid
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/drawerlayoutandroid.html
|
||||
next: flatlist
|
||||
previous: datepickerios
|
||||
---
|
||||
React component that wraps the platform `DrawerLayout` (Android only). The
|
||||
Drawer (typically used for navigation) is rendered with `renderNavigationView`
|
||||
and direct children are the main view (where your content goes). The navigation
|
||||
view is initially not visible on the screen, but can be pulled in from the
|
||||
side of the window specified by the `drawerPosition` prop and its width can
|
||||
be set by the `drawerWidth` prop.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
render: function() {
|
||||
var navigationView = (
|
||||
<View style={{flex: 1, backgroundColor: '#fff'}}>
|
||||
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
|
||||
</View>
|
||||
);
|
||||
return (
|
||||
<DrawerLayoutAndroid
|
||||
drawerWidth={300}
|
||||
drawerPosition={DrawerLayoutAndroid.positions.Left}
|
||||
renderNavigationView={() => navigationView}>
|
||||
<View style={{flex: 1, alignItems: 'center'}}>
|
||||
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
|
||||
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
|
||||
</View>
|
||||
</DrawerLayoutAndroid>
|
||||
);
|
||||
},
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`renderNavigationView`](docs/drawerlayoutandroid.html#rendernavigationview)
|
||||
- [`onDrawerClose`](docs/drawerlayoutandroid.html#ondrawerclose)
|
||||
- [`drawerPosition`](docs/drawerlayoutandroid.html#drawerposition)
|
||||
- [`drawerWidth`](docs/drawerlayoutandroid.html#drawerwidth)
|
||||
- [`keyboardDismissMode`](docs/drawerlayoutandroid.html#keyboarddismissmode)
|
||||
- [`drawerLockMode`](docs/drawerlayoutandroid.html#drawerlockmode)
|
||||
- [`onDrawerOpen`](docs/drawerlayoutandroid.html#ondraweropen)
|
||||
- [`onDrawerSlide`](docs/drawerlayoutandroid.html#ondrawerslide)
|
||||
- [`onDrawerStateChanged`](docs/drawerlayoutandroid.html#ondrawerstatechanged)
|
||||
- [`drawerBackgroundColor`](docs/drawerlayoutandroid.html#drawerbackgroundcolor)
|
||||
- [`statusBarBackgroundColor`](docs/drawerlayoutandroid.html#statusbarbackgroundcolor)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`openDrawer`](docs/drawerlayoutandroid.html#opendrawer)
|
||||
- [`closeDrawer`](docs/drawerlayoutandroid.html#closedrawer)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `renderNavigationView`
|
||||
|
||||
The navigation view that will be rendered to the side of the screen and can be pulled in.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onDrawerClose`
|
||||
|
||||
Function called whenever the navigation view has been closed.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `drawerPosition`
|
||||
|
||||
Specifies the side of the screen from which the drawer will slide in.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `drawerWidth`
|
||||
|
||||
Specifies the width of the drawer, more precisely the width of the view that be pulled in
|
||||
from the edge of the window.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `keyboardDismissMode`
|
||||
|
||||
Determines whether the keyboard gets dismissed in response to a drag.
|
||||
- 'none' (the default), drags do not dismiss the keyboard.
|
||||
- 'on-drag', the keyboard is dismissed when a drag begins.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('none', 'on-drag') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `drawerLockMode`
|
||||
|
||||
Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
|
||||
- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
|
||||
- locked-closed, meaning that the drawer will stay closed and not respond to gestures.
|
||||
- locked-open, meaning that the drawer will stay opened and not respond to gestures.
|
||||
The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('unlocked', 'locked-closed', 'locked-open') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onDrawerOpen`
|
||||
|
||||
Function called whenever the navigation view has been opened.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onDrawerSlide`
|
||||
|
||||
Function called whenever there is an interaction with the navigation view.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onDrawerStateChanged`
|
||||
|
||||
Function called when the drawer state has changed. The drawer can be in 3 states:
|
||||
- idle, meaning there is no interaction with the navigation view happening at the time
|
||||
- dragging, meaning there is currently an interaction with the navigation view
|
||||
- settling, meaning that there was an interaction with the navigation view, and the
|
||||
navigation view is now finishing its closing or opening animation
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `drawerBackgroundColor`
|
||||
|
||||
Specifies the background color of the drawer. The default value is white.
|
||||
If you want to set the opacity of the drawer, use rgba. Example:
|
||||
|
||||
```
|
||||
return (
|
||||
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
|
||||
</DrawerLayoutAndroid>
|
||||
);
|
||||
```
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `statusBarBackgroundColor`
|
||||
|
||||
Make the drawer take the entire screen and draw the background of the
|
||||
status bar to allow it to open over the status bar. It will only have an
|
||||
effect on API 21+.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `openDrawer()`
|
||||
|
||||
```javascript
|
||||
openDrawer()
|
||||
```
|
||||
|
||||
Opens the drawer.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `closeDrawer()`
|
||||
|
||||
```javascript
|
||||
closeDrawer()
|
||||
```
|
||||
|
||||
Closes the drawer.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
---
|
||||
id: easing
|
||||
title: Easing
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/easing.html
|
||||
next: geolocation
|
||||
previous: dimensions
|
||||
---
|
||||
|
||||
The `Easing` module implements common easing functions. This module is used
|
||||
by [Animate.timing()](docs/animate.html#timing) to convey physically
|
||||
believable motion in animations.
|
||||
|
||||
You can find a visualization of some common easing functions at
|
||||
http://easings.net/
|
||||
|
||||
### Predefined animations
|
||||
|
||||
The `Easing` module provides several predefined animations through the
|
||||
following methods:
|
||||
|
||||
- [`back`](docs/easing.html#back) provides a simple animation where the
|
||||
object goes slightly back before moving forward
|
||||
- [`bounce`](docs/easing.html#bounce) provides a bouncing animation
|
||||
- [`ease`](docs/easing.html#ease) provides a simple inertial animation
|
||||
- [`elastic`](docs/easing.html#elastic) provides a simple spring interaction
|
||||
|
||||
### Standard functions
|
||||
|
||||
Three standard easing functions are provided:
|
||||
|
||||
- [`linear`](docs/easing.html#linear)
|
||||
- [`quad`](docs/easing.html#quad)
|
||||
- [`cubic`](docs/easing.html#cubic)
|
||||
|
||||
The [`poly`](docs/easing.html#poly) function can be used to implement
|
||||
quartic, quintic, and other higher power functions.
|
||||
|
||||
### Additional functions
|
||||
|
||||
Additional mathematical functions are provided by the following methods:
|
||||
|
||||
- [`bezier`](docs/easing.html#bezier) provides a cubic bezier curve
|
||||
- [`circle`](docs/easing.html#circle) provides a circular function
|
||||
- [`sin`](docs/easing.html#sin) provides a sinusoidal function
|
||||
- [`exp`](docs/easing.html#exp) provides an exponential function
|
||||
|
||||
The following helpers are used to modify other easing functions.
|
||||
|
||||
- [`in`](docs/easing.html#in) runs an easing function forwards
|
||||
- [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
|
||||
- [`out`](docs/easing.html#out) runs an easing function backwards
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`step0`](docs/easing.html#step0)
|
||||
- [`step1`](docs/easing.html#step1)
|
||||
- [`linear`](docs/easing.html#linear)
|
||||
- [`ease`](docs/easing.html#ease)
|
||||
- [`quad`](docs/easing.html#quad)
|
||||
- [`cubic`](docs/easing.html#cubic)
|
||||
- [`poly`](docs/easing.html#poly)
|
||||
- [`sin`](docs/easing.html#sin)
|
||||
- [`circle`](docs/easing.html#circle)
|
||||
- [`exp`](docs/easing.html#exp)
|
||||
- [`elastic`](docs/easing.html#elastic)
|
||||
- [`back`](docs/easing.html#back)
|
||||
- [`bounce`](docs/easing.html#bounce)
|
||||
- [`bezier`](docs/easing.html#bezier)
|
||||
- [`in`](docs/easing.html#in)
|
||||
- [`out`](docs/easing.html#out)
|
||||
- [`inOut`](docs/easing.html#inout)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `step0()`
|
||||
|
||||
```javascript
|
||||
static step0(n)
|
||||
```
|
||||
|
||||
|
||||
A stepping function, returns 1 for any positive value of `n`.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `step1()`
|
||||
|
||||
```javascript
|
||||
static step1(n)
|
||||
```
|
||||
|
||||
|
||||
A stepping function, returns 1 if `n` is greater than or equal to 1.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `linear()`
|
||||
|
||||
```javascript
|
||||
static linear(t)
|
||||
```
|
||||
|
||||
|
||||
A linear function, `f(t) = t`. Position correlates to elapsed time one to
|
||||
one.
|
||||
|
||||
http://cubic-bezier.com/#0,0,1,1
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `ease()`
|
||||
|
||||
```javascript
|
||||
static ease(t)
|
||||
```
|
||||
|
||||
|
||||
A simple inertial interaction, similar to an object slowly accelerating to
|
||||
speed.
|
||||
|
||||
http://cubic-bezier.com/#.42,0,1,1
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `quad()`
|
||||
|
||||
```javascript
|
||||
static quad(t)
|
||||
```
|
||||
|
||||
|
||||
A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
|
||||
time.
|
||||
|
||||
http://easings.net/#easeInQuad
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `cubic()`
|
||||
|
||||
```javascript
|
||||
static cubic(t)
|
||||
```
|
||||
|
||||
|
||||
A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
|
||||
time.
|
||||
|
||||
http://easings.net/#easeInCubic
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `poly()`
|
||||
|
||||
```javascript
|
||||
static poly(n)
|
||||
```
|
||||
|
||||
|
||||
A power function. Position is equal to the Nth power of elapsed time.
|
||||
|
||||
n = 4: http://easings.net/#easeInQuart
|
||||
n = 5: http://easings.net/#easeInQuint
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `sin()`
|
||||
|
||||
```javascript
|
||||
static sin(t)
|
||||
```
|
||||
|
||||
|
||||
A sinusoidal function.
|
||||
|
||||
http://easings.net/#easeInSine
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `circle()`
|
||||
|
||||
```javascript
|
||||
static circle(t)
|
||||
```
|
||||
|
||||
|
||||
A circular function.
|
||||
|
||||
http://easings.net/#easeInCirc
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `exp()`
|
||||
|
||||
```javascript
|
||||
static exp(t)
|
||||
```
|
||||
|
||||
|
||||
An exponential function.
|
||||
|
||||
http://easings.net/#easeInExpo
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `elastic()`
|
||||
|
||||
```javascript
|
||||
static elastic(bounciness)
|
||||
```
|
||||
|
||||
|
||||
A simple elastic interaction, similar to a spring oscillating back and
|
||||
forth.
|
||||
|
||||
Default bounciness is 1, which overshoots a little bit once. 0 bounciness
|
||||
doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
|
||||
times.
|
||||
|
||||
http://easings.net/#easeInElastic
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `back()`
|
||||
|
||||
```javascript
|
||||
static back(s)
|
||||
```
|
||||
|
||||
|
||||
Use with `Animated.parallel()` to create a simple effect where the object
|
||||
animates back slightly as the animation starts.
|
||||
|
||||
Wolfram Plot:
|
||||
|
||||
- http://tiny.cc/back_default (s = 1.70158, default)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `bounce()`
|
||||
|
||||
```javascript
|
||||
static bounce(t)
|
||||
```
|
||||
|
||||
|
||||
Provides a simple bouncing effect.
|
||||
|
||||
http://easings.net/#easeInBounce
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `bezier()`
|
||||
|
||||
```javascript
|
||||
static bezier(x1, y1, x2, y2)
|
||||
```
|
||||
|
||||
|
||||
Provides a cubic bezier curve, equivalent to CSS Transitions'
|
||||
`transition-timing-function`.
|
||||
|
||||
A useful tool to visualize cubic bezier curves can be found at
|
||||
http://cubic-bezier.com/
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `in()`
|
||||
|
||||
```javascript
|
||||
static in(easing)
|
||||
```
|
||||
|
||||
|
||||
Runs an easing function forwards.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `out()`
|
||||
|
||||
```javascript
|
||||
static out(easing)
|
||||
```
|
||||
|
||||
|
||||
Runs an easing function backwards.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `inOut()`
|
||||
|
||||
```javascript
|
||||
static inOut(easing)
|
||||
```
|
||||
|
||||
|
||||
Makes any easing function symmetrical. The easing function will run
|
||||
forwards for half of the duration, then backwards for the rest of the
|
||||
duration.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
---
|
||||
id: flatlist
|
||||
title: FlatList
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/flatlist.html
|
||||
next: image
|
||||
previous: drawerlayoutandroid
|
||||
---
|
||||
A performant interface for rendering simple, flat lists, supporting the most handy features:
|
||||
|
||||
- Fully cross-platform.
|
||||
- Optional horizontal mode.
|
||||
- Configurable viewability callbacks.
|
||||
- Header support.
|
||||
- Footer support.
|
||||
- Separator support.
|
||||
- Pull to Refresh.
|
||||
- Scroll loading.
|
||||
- ScrollToIndex support.
|
||||
|
||||
If you need section support, use [`<SectionList>`](docs/sectionlist.html).
|
||||
|
||||
Minimal Example:
|
||||
|
||||
<FlatList
|
||||
data={[{key: 'a'}, {key: 'b'}]}
|
||||
renderItem={({item}) => <Text>{item.key}</Text>}
|
||||
/>
|
||||
|
||||
More complex, multi-select example demonstrating `PureComponent` usage for perf optimization and avoiding bugs.
|
||||
|
||||
- By binding the `onPressItem` handler, the props will remain `===` and `PureComponent` will
|
||||
prevent wasteful re-renders unless the actual `id`, `selected`, or `title` props change, even
|
||||
if the components rendered in `MyListItem` did not have such optimizations.
|
||||
- By passing `extraData={this.state}` to `FlatList` we make sure `FlatList` itself will re-render
|
||||
when the `state.selected` changes. Without setting this prop, `FlatList` would not know it
|
||||
needs to re-render any items because it is also a `PureComponent` and the prop comparison will
|
||||
not show any changes.
|
||||
- `keyExtractor` tells the list to use the `id`s for the react keys instead of the default `key` property.
|
||||
|
||||
|
||||
class MyListItem extends React.PureComponent {
|
||||
_onPress = () => {
|
||||
this.props.onPressItem(this.props.id);
|
||||
};
|
||||
|
||||
render() {
|
||||
const textColor = this.props.selected ? "red" : "black";
|
||||
return (
|
||||
<TouchableOpacity onPress={this._onPress}>
|
||||
<View>
|
||||
<Text style={{ color: textColor }}>
|
||||
{this.props.title}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MultiSelectList extends React.PureComponent {
|
||||
state = {selected: (new Map(): Map<string, boolean>)};
|
||||
|
||||
_keyExtractor = (item, index) => item.id;
|
||||
|
||||
_onPressItem = (id: string) => {
|
||||
// updater functions are preferred for transactional updates
|
||||
this.setState((state) => {
|
||||
// copy the map rather than modifying state.
|
||||
const selected = new Map(state.selected);
|
||||
selected.set(id, !selected.get(id)); // toggle
|
||||
return {selected};
|
||||
});
|
||||
};
|
||||
|
||||
_renderItem = ({item}) => (
|
||||
<MyListItem
|
||||
id={item.id}
|
||||
onPressItem={this._onPressItem}
|
||||
selected={!!this.state.selected.get(item.id)}
|
||||
title={item.title}
|
||||
/>
|
||||
);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<FlatList
|
||||
data={this.props.data}
|
||||
extraData={this.state}
|
||||
keyExtractor={this._keyExtractor}
|
||||
renderItem={this._renderItem}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
|
||||
and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
|
||||
here, along with the following caveats:
|
||||
|
||||
- Internal state is not preserved when content scrolls out of the render window. Make sure all
|
||||
your data is captured in the item data or external stores like Flux, Redux, or Relay.
|
||||
- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
|
||||
equal. Make sure that everything your `renderItem` function depends on is passed as a prop
|
||||
(e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
|
||||
changes. This includes the `data` prop and parent component state.
|
||||
- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
|
||||
offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see
|
||||
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
|
||||
and we are working on improving it behind the scenes.
|
||||
- By default, the list looks for a `key` prop on each item and uses that for the React key.
|
||||
Alternatively, you can provide a custom `keyExtractor` prop.
|
||||
|
||||
Also inherits [ScrollView Props](docs/scrollview.html#props), unless it is nested in another FlatList of same orientation.
|
||||
|
||||
### Props
|
||||
|
||||
- [`numColumns`](docs/flatlist.html#numcolumns)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`scrollToEnd`](docs/flatlist.html#scrolltoend)
|
||||
- [`scrollToIndex`](docs/flatlist.html#scrolltoindex)
|
||||
- [`scrollToItem`](docs/flatlist.html#scrolltoitem)
|
||||
- [`scrollToOffset`](docs/flatlist.html#scrolltooffset)
|
||||
- [`recordInteraction`](docs/flatlist.html#recordinteraction)
|
||||
- [`flashScrollIndicators`](docs/flatlist.html#flashscrollindicators)
|
||||
|
||||
|
||||
### Type Definitions
|
||||
|
||||
- [`Props`](docs/flatlist.html#props)
|
||||
- [`DefaultProps`](docs/flatlist.html#defaultprops)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `numColumns`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `scrollToEnd()`
|
||||
|
||||
```javascript
|
||||
scrollToEnd([params]: object)
|
||||
```
|
||||
|
||||
Scrolls to the end of the content. May be janky without `getItemLayout` prop.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollToIndex()`
|
||||
|
||||
```javascript
|
||||
scrollToIndex(params: object)
|
||||
```
|
||||
|
||||
Scrolls to the item at the specified index such that it is positioned in the viewable area
|
||||
such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the
|
||||
middle. `viewOffset` is a fixed number of pixels to offset the final target position.
|
||||
|
||||
Note: cannot scroll to locations outside the render window without specifying the
|
||||
`getItemLayout` prop.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollToItem()`
|
||||
|
||||
```javascript
|
||||
scrollToItem(params: object)
|
||||
```
|
||||
|
||||
Requires linear scan through data - use `scrollToIndex` instead if possible.
|
||||
|
||||
Note: cannot scroll to locations outside the render window without specifying the
|
||||
`getItemLayout` prop.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollToOffset()`
|
||||
|
||||
```javascript
|
||||
scrollToOffset(params: object)
|
||||
```
|
||||
|
||||
Scroll to a specific content pixel offset in the list.
|
||||
|
||||
Check out [scrollToOffset](docs/virtualizedlist.html#scrolltooffset) of VirtualizedList
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `recordInteraction()`
|
||||
|
||||
```javascript
|
||||
recordInteraction()
|
||||
```
|
||||
|
||||
Tells the list an interaction has occurred, which should trigger viewability calculations, e.g.
|
||||
if `waitForInteractions` is true and the user has not scrolled. This is typically called by
|
||||
taps on items or by navigation actions.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flashScrollIndicators()`
|
||||
|
||||
```javascript
|
||||
flashScrollIndicators()
|
||||
```
|
||||
|
||||
Displays the scroll indicators momentarily.
|
||||
|
||||
|
||||
|
||||
## Type Definitions
|
||||
|
||||
### Props
|
||||
|
||||
| Type |
|
||||
| - |
|
||||
| IntersectionTypeAnnotation |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### DefaultProps
|
||||
|
||||
| Type |
|
||||
| - |
|
||||
| TypeofTypeAnnotation |
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
---
|
||||
id: geolocation
|
||||
title: Geolocation
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/geolocation.html
|
||||
next: imageeditor
|
||||
previous: easing
|
||||
---
|
||||
|
||||
The Geolocation API extends the web spec:
|
||||
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation
|
||||
|
||||
As a browser polyfill, this API is available through the `navigator.geolocation`
|
||||
global - you do not need to `import` it.
|
||||
|
||||
### Configuration and Permissions
|
||||
|
||||
<div class="banner-crna-ejected">
|
||||
<h3>Projects with Native Code Only</h3>
|
||||
<p>
|
||||
This section only applies to projects made with <code>react-native init</code>
|
||||
or to those made with Create React Native App which have since ejected. For
|
||||
more information about ejecting, please see
|
||||
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
|
||||
the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
#### iOS
|
||||
You need to include the `NSLocationWhenInUseUsageDescription` key
|
||||
in Info.plist to enable geolocation when using the app. Geolocation is
|
||||
enabled by default when you create a project with `react-native init`.
|
||||
|
||||
In order to enable geolocation in the background, you need to include the
|
||||
'NSLocationAlwaysUsageDescription' key in Info.plist and add location as
|
||||
a background mode in the 'Capabilities' tab in Xcode.
|
||||
|
||||
#### Android
|
||||
To request access to location, you need to add the following line to your
|
||||
app's `AndroidManifest.xml`:
|
||||
|
||||
`<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />`
|
||||
|
||||
Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position
|
||||
was created from a mock provider.
|
||||
|
||||
<p>
|
||||
Android API >= 23 Requires an additional step to check for, and request
|
||||
the ACCESS_FINE_LOCATION permission using
|
||||
the <a href="https://facebook.github.io/react-native/docs/permissionsandroid.html" target="_blank">PermissionsAndroid API</a>.
|
||||
Failure to do so may result in a hard crash.
|
||||
</p>
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`setRNConfiguration`](docs/geolocation.html#setrnconfiguration)
|
||||
- [`requestAuthorization`](docs/geolocation.html#requestauthorization)
|
||||
- [`getCurrentPosition`](docs/geolocation.html#getcurrentposition)
|
||||
- [`watchPosition`](docs/geolocation.html#watchposition)
|
||||
- [`clearWatch`](docs/geolocation.html#clearwatch)
|
||||
- [`stopObserving`](docs/geolocation.html#stopobserving)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `setRNConfiguration()`
|
||||
|
||||
```javascript
|
||||
static setRNConfiguration(config)
|
||||
```
|
||||
|
||||
|
||||
Sets configuration options that will be used in all location requests.
|
||||
|
||||
### Options
|
||||
|
||||
#### iOS
|
||||
|
||||
- `skipPermissionRequests` - defaults to `false`, if `true` you must request permissions
|
||||
before using Geolocation APIs.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `requestAuthorization()`
|
||||
|
||||
```javascript
|
||||
static requestAuthorization()
|
||||
```
|
||||
|
||||
|
||||
Request suitable Location permission based on the key configured on pList.
|
||||
If NSLocationAlwaysUsageDescription is set, it will request Always authorization,
|
||||
although if NSLocationWhenInUseUsageDescription is set, it will request InUse
|
||||
authorization.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getCurrentPosition()`
|
||||
|
||||
```javascript
|
||||
static getCurrentPosition(geo_success, geo_error?, geo_options?)
|
||||
```
|
||||
|
||||
|
||||
Invokes the success callback once with the latest location info. Supported
|
||||
options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool)
|
||||
On Android, if the location is cached this can return almost immediately,
|
||||
or it will request an update which might take a while.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `watchPosition()`
|
||||
|
||||
```javascript
|
||||
static watchPosition(success, error?, options?)
|
||||
```
|
||||
|
||||
|
||||
Invokes the success callback whenever the location changes. Supported
|
||||
options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m), useSignificantChanges (bool)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `clearWatch()`
|
||||
|
||||
```javascript
|
||||
static clearWatch(watchID)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `stopObserving()`
|
||||
|
||||
```javascript
|
||||
static stopObserving()
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -5,6 +5,7 @@ layout: docs
|
|||
category: The Basics
|
||||
permalink: docs/getting-started.html
|
||||
next: tutorial
|
||||
previous: undefined
|
||||
---
|
||||
|
||||
<style>
|
|
@ -4,7 +4,6 @@ title: Headless JS
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/headless-js-android.html
|
||||
banner: ejected
|
||||
next: signed-apk-android
|
||||
previous: custom-webview-android
|
||||
---
|
||||
|
@ -90,7 +89,7 @@ Following lines shows part of Android manifest file for registering broadcast re
|
|||
</receiver>
|
||||
```
|
||||
|
||||
Broadcast receiver then handles intent that was broadcasted in onReceive function. This is a great place to check whether your app is on foreground or not. If app is not on foreground we can prepare our intent to be started, with no information or additional information bundled using putExtra (keep in mind bundle can handle only parcelable values). In the end service is started and wakelock is acquired.
|
||||
Broadcast receiver then handles intent that was broadcasted in onReceive function. This is a great place to check whether your app is on foreground or not. If app is not on foreground we can prepare our intent to be started, with no information or additional information bundled using putExta (keep in mind bundle can handle only parcelable values). In the end service is started and wakelock is acquired.
|
||||
|
||||
```java
|
||||
public class NetworkChangeReceiver extends BroadcastReceiver {
|
|
@ -0,0 +1,540 @@
|
|||
---
|
||||
id: image
|
||||
title: Image
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/image.html
|
||||
next: keyboardavoidingview
|
||||
previous: flatlist
|
||||
---
|
||||
A React component for displaying different types of images,
|
||||
including network images, static resources, temporary local images, and
|
||||
images from local disk, such as the camera roll.
|
||||
|
||||
This example shows fetching and displaying an image from local storage
|
||||
as well as one from network and even from data provided in the `'data:'` uri scheme.
|
||||
|
||||
> Note that for network and data images, you will need to manually specify the dimensions of your image!
|
||||
|
||||
```ReactNativeWebPlayer
|
||||
import React, { Component } from 'react';
|
||||
import { AppRegistry, View, Image } from 'react-native';
|
||||
|
||||
export default class DisplayAnImage extends Component {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Image
|
||||
source={require('./img/favicon.png')}
|
||||
/>
|
||||
<Image
|
||||
style={{width: 50, height: 50}}
|
||||
source={{uri: 'https://facebook.github.io/react-native/img/favicon.png'}}
|
||||
/>
|
||||
<Image
|
||||
style={{width: 66, height: 58}}
|
||||
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);
|
||||
```
|
||||
|
||||
You can also add `style` to an image:
|
||||
|
||||
```ReactNativeWebPlayer
|
||||
import React, { Component } from 'react';
|
||||
import { AppRegistry, View, Image, StyleSheet } from 'react-native';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
stretch: {
|
||||
width: 50,
|
||||
height: 200
|
||||
}
|
||||
});
|
||||
|
||||
export default class DisplayAnImageWithStyle extends Component {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Image
|
||||
style={styles.stretch}
|
||||
source={require('./img/favicon.png')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// skip these lines if using Create React Native App
|
||||
AppRegistry.registerComponent(
|
||||
'DisplayAnImageWithStyle',
|
||||
() => DisplayAnImageWithStyle
|
||||
);
|
||||
```
|
||||
|
||||
### GIF and WebP support on Android
|
||||
|
||||
When building your own native code, GIF and WebP are not supported by default on Android.
|
||||
|
||||
You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app.
|
||||
|
||||
```
|
||||
dependencies {
|
||||
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
|
||||
compile 'com.facebook.fresco:animated-base-support:1.3.0'
|
||||
|
||||
// For animated GIF support
|
||||
compile 'com.facebook.fresco:animated-gif:1.3.0'
|
||||
|
||||
// For WebP support, including animated WebP
|
||||
compile 'com.facebook.fresco:animated-webp:1.3.0'
|
||||
compile 'com.facebook.fresco:webpsupport:1.3.0'
|
||||
|
||||
// For WebP support, without animations
|
||||
compile 'com.facebook.fresco:webpsupport:1.3.0'
|
||||
}
|
||||
```
|
||||
|
||||
Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` :
|
||||
```
|
||||
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
|
||||
public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
|
||||
}
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
- [`style`](docs/image.html#style)
|
||||
- [`blurRadius`](docs/image.html#blurradius)
|
||||
- [`onLayout`](docs/image.html#onlayout)
|
||||
- [`onLoad`](docs/image.html#onload)
|
||||
- [`onLoadEnd`](docs/image.html#onloadend)
|
||||
- [`onLoadStart`](docs/image.html#onloadstart)
|
||||
- [`resizeMode`](docs/image.html#resizemode)
|
||||
- [`source`](docs/image.html#source)
|
||||
- [`onError`](docs/image.html#onerror)
|
||||
- [`testID`](docs/image.html#testid)
|
||||
- [`resizeMethod`](docs/image.html#resizemethod)
|
||||
- [`accessibilityLabel`](docs/image.html#accessibilitylabel)
|
||||
- [`accessible`](docs/image.html#accessible)
|
||||
- [`capInsets`](docs/image.html#capinsets)
|
||||
- [`defaultSource`](docs/image.html#defaultsource)
|
||||
- [`onPartialLoad`](docs/image.html#onpartialload)
|
||||
- [`onProgress`](docs/image.html#onprogress)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`getSize`](docs/image.html#getsize)
|
||||
- [`prefetch`](docs/image.html#prefetch)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `style`
|
||||
|
||||
> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the
|
||||
> `resizeMode` style property on `Image` components. The values are `contain`, `cover`,
|
||||
> `stretch`, `center`, `repeat`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| style | No |
|
||||
|
||||
|
||||
- [Layout Props...](docs/layout-props.html#props)
|
||||
|
||||
- [Shadow Props...](docs/shadow-props.html#props)
|
||||
|
||||
- [Transforms...](docs/transforms.html#props)
|
||||
|
||||
- **`borderTopRightRadius`**: number
|
||||
|
||||
- **`backfaceVisibility`**: enum('visible', 'hidden')
|
||||
|
||||
- **`borderBottomLeftRadius`**: number
|
||||
|
||||
- **`borderBottomRightRadius`**: number
|
||||
|
||||
- **`borderColor`**: [color](docs/colors.html)
|
||||
|
||||
- **`borderRadius`**: number
|
||||
|
||||
- **`borderTopLeftRadius`**: number
|
||||
|
||||
- **`backgroundColor`**: [color](docs/colors.html)
|
||||
|
||||
- **`borderWidth`**: number
|
||||
|
||||
- **`opacity`**: number
|
||||
|
||||
- **`overflow`**: enum('visible', 'hidden')
|
||||
|
||||
- **`resizeMode`**: Object.keys(ImageResizeMode)
|
||||
|
||||
- **`tintColor`**: [color](docs/colors.html)
|
||||
|
||||
Changes the color of all the non-transparent pixels to the tintColor.
|
||||
|
||||
- **`overlayColor`**: string (_Android_)
|
||||
|
||||
When the image has rounded corners, specifying an overlayColor will
|
||||
cause the remaining space in the corners to be filled with a solid color.
|
||||
This is useful in cases which are not supported by the Android
|
||||
implementation of rounded corners:
|
||||
- Certain resize modes, such as 'contain'
|
||||
- Animated GIFs
|
||||
|
||||
A typical way to use this prop is with images displayed on a solid
|
||||
background and setting the `overlayColor` to the same color
|
||||
as the background.
|
||||
|
||||
For details of how this works under the hood, see
|
||||
http://frescolib.org/docs/rounded-corners-and-circles.html
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `blurRadius`
|
||||
|
||||
blurRadius: the blur radius of the blur filter added to the image
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onLayout`
|
||||
|
||||
Invoked on mount and layout changes with
|
||||
`{nativeEvent: {layout: {x, y, width, height}}}`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onLoad`
|
||||
|
||||
Invoked when load completes successfully.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onLoadEnd`
|
||||
|
||||
Invoked when load either succeeds or fails.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onLoadStart`
|
||||
|
||||
Invoked on load start.
|
||||
|
||||
e.g., `onLoadStart={(e) => this.setState({loading: true})}`
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `resizeMode`
|
||||
|
||||
Determines how to resize the image when the frame doesn't match the raw
|
||||
image dimensions.
|
||||
|
||||
- `cover`: Scale the image uniformly (maintain the image's aspect ratio)
|
||||
so that both dimensions (width and height) of the image will be equal
|
||||
to or larger than the corresponding dimension of the view (minus padding).
|
||||
|
||||
- `contain`: Scale the image uniformly (maintain the image's aspect ratio)
|
||||
so that both dimensions (width and height) of the image will be equal to
|
||||
or less than the corresponding dimension of the view (minus padding).
|
||||
|
||||
- `stretch`: Scale width and height independently, This may change the
|
||||
aspect ratio of the src.
|
||||
|
||||
- `repeat`: Repeat the image to cover the frame of the view. The
|
||||
image will keep it's size and aspect ratio. (iOS only)
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('cover', 'contain', 'stretch', 'repeat', 'center') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `source`
|
||||
|
||||
The image source (either a remote URL or a local file resource).
|
||||
|
||||
This prop can also contain several remote URLs, specified together with
|
||||
their width and height and potentially with scale/other URI arguments.
|
||||
The native side will then choose the best `uri` to display based on the
|
||||
measured size of the image container. A `cache` property can be added to
|
||||
control how networked request interacts with the local cache.
|
||||
|
||||
The currently supported formats are `png`, `jpg`, `jpeg`, `bmp`, `gif`,
|
||||
`webp` (Android only), `psd` (iOS only).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| ImageSourcePropType | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onError`
|
||||
|
||||
Invoked on load error with `{nativeEvent: {error}}`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
A unique identifier for this element to be used in UI Automation
|
||||
testing scripts.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `resizeMethod`
|
||||
|
||||
The mechanism that should be used to resize the image when the image's dimensions
|
||||
differ from the image view's dimensions. Defaults to `auto`.
|
||||
|
||||
- `auto`: Use heuristics to pick between `resize` and `scale`.
|
||||
|
||||
- `resize`: A software operation which changes the encoded image in memory before it
|
||||
gets decoded. This should be used instead of `scale` when the image is much larger
|
||||
than the view.
|
||||
|
||||
- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is
|
||||
faster (usually hardware accelerated) and produces higher quality images. This
|
||||
should be used if the image is smaller than the view. It should also be used if the
|
||||
image is slightly bigger than the view.
|
||||
|
||||
More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('auto', 'resize', 'scale') | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `accessibilityLabel`
|
||||
|
||||
The text that's read by the screen reader when the user interacts with
|
||||
the image.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| node | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `accessible`
|
||||
|
||||
When true, indicates the image is an accessibility element.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `capInsets`
|
||||
|
||||
When the image is resized, the corners of the size specified
|
||||
by `capInsets` will stay a fixed size, but the center content and borders
|
||||
of the image will be stretched. This is useful for creating resizable
|
||||
rounded buttons, shadows, and other resizable assets. More info in the
|
||||
[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets).
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| object: {top: number, left: number, bottom: number, right: number} | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `defaultSource`
|
||||
|
||||
A static image to display while loading the image source.
|
||||
|
||||
- `uri` - a string representing the resource identifier for the image, which
|
||||
should be either a local file path or the name of a static image resource
|
||||
(which should be wrapped in the `require('./path/to/image.png')` function).
|
||||
- `width`, `height` - can be specified if known at build time, in which case
|
||||
these will be used to set the default `<Image/>` component dimensions.
|
||||
- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if
|
||||
unspecified, meaning that one image pixel equates to one display point / DIP.
|
||||
- `number` - Opaque type returned by something like `require('./image.jpg')`.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| object: {uri: string,width: number,height: number,scale: number}, ,number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onPartialLoad`
|
||||
|
||||
Invoked when a partial load of the image is complete. The definition of
|
||||
what constitutes a "partial load" is loader specific though this is meant
|
||||
for progressive JPEG loads.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| function | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onProgress`
|
||||
|
||||
Invoked on download progress with `{nativeEvent: {loaded, total}}`.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| function | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `getSize()`
|
||||
|
||||
```javascript
|
||||
static getSize(uri: string, success: function, [failure]: function):
|
||||
```
|
||||
|
||||
Retrieve the width and height (in pixels) of an image prior to displaying it.
|
||||
This method can fail if the image cannot be found, or fails to download.
|
||||
|
||||
In order to retrieve the image dimensions, the image may first need to be
|
||||
loaded or downloaded, after which it will be cached. This means that in
|
||||
principle you could use this method to preload images, however it is not
|
||||
optimized for that purpose, and may in future be implemented in a way that
|
||||
does not fully load/download the image data. A proper, supported way to
|
||||
preload images will be provided as a separate API.
|
||||
|
||||
Does not work for static image resources.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| uri | string | No | The location of the image. |
|
||||
| success | function | No | The function that will be called if the image was successfully found and widthand height retrieved. |
|
||||
| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `prefetch()`
|
||||
|
||||
```javascript
|
||||
static prefetch(url: string):
|
||||
```
|
||||
|
||||
Prefetches a remote image for later use by downloading it to the disk
|
||||
cache
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| url | string | No | The remote location of the image. |
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
id: imageeditor
|
||||
title: ImageEditor
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/imageeditor.html
|
||||
next: imagepickerios
|
||||
previous: geolocation
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`cropImage`](docs/imageeditor.html#cropimage)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `cropImage()`
|
||||
|
||||
```javascript
|
||||
static cropImage(uri, cropData, success, failure)
|
||||
```
|
||||
|
||||
|
||||
Crop the image specified by the URI param. If URI points to a remote
|
||||
image, it will be downloaded automatically. If the image cannot be
|
||||
loaded/downloaded, the failure callback will be called.
|
||||
|
||||
If the cropping process is successful, the resultant cropped image
|
||||
will be stored in the ImageStore, and the URI returned in the success
|
||||
callback will point to the image in the store. Remember to delete the
|
||||
cropped image from the ImageStore when you are done with it.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
id: imagepickerios
|
||||
title: ImagePickerIOS
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/imagepickerios.html
|
||||
next: imagestore
|
||||
previous: imageeditor
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`canRecordVideos`](docs/imagepickerios.html#canrecordvideos)
|
||||
- [`canUseCamera`](docs/imagepickerios.html#canusecamera)
|
||||
- [`openCameraDialog`](docs/imagepickerios.html#opencameradialog)
|
||||
- [`openSelectDialog`](docs/imagepickerios.html#openselectdialog)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `canRecordVideos()`
|
||||
|
||||
```javascript
|
||||
static canRecordVideos(callback)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `canUseCamera()`
|
||||
|
||||
```javascript
|
||||
static canUseCamera(callback)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `openCameraDialog()`
|
||||
|
||||
```javascript
|
||||
static openCameraDialog(config, successCallback, cancelCallback)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `openSelectDialog()`
|
||||
|
||||
```javascript
|
||||
static openSelectDialog(config, successCallback, cancelCallback)
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
---
|
||||
id: imagestore
|
||||
title: ImageStore
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/imagestore.html
|
||||
next: interactionmanager
|
||||
previous: imagepickerios
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`hasImageForTag`](docs/imagestore.html#hasimagefortag)
|
||||
- [`removeImageForTag`](docs/imagestore.html#removeimagefortag)
|
||||
- [`addImageFromBase64`](docs/imagestore.html#addimagefrombase64)
|
||||
- [`getBase64ForTag`](docs/imagestore.html#getbase64fortag)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `hasImageForTag()`
|
||||
|
||||
```javascript
|
||||
static hasImageForTag(uri, callback)
|
||||
```
|
||||
|
||||
|
||||
Check if the ImageStore contains image data for the specified URI.
|
||||
@platform ios
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeImageForTag()`
|
||||
|
||||
```javascript
|
||||
static removeImageForTag(uri)
|
||||
```
|
||||
|
||||
|
||||
Delete an image from the ImageStore. Images are stored in memory and
|
||||
must be manually removed when you are finished with them, otherwise they
|
||||
will continue to use up RAM until the app is terminated. It is safe to
|
||||
call `removeImageForTag()` without first calling `hasImageForTag()`, it
|
||||
will simply fail silently.
|
||||
@platform ios
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `addImageFromBase64()`
|
||||
|
||||
```javascript
|
||||
static addImageFromBase64(base64ImageData, success, failure)
|
||||
```
|
||||
|
||||
|
||||
Stores a base64-encoded image in the ImageStore, and returns a URI that
|
||||
can be used to access or display the image later. Images are stored in
|
||||
memory only, and must be manually deleted when you are finished with
|
||||
them by calling `removeImageForTag()`.
|
||||
|
||||
Note that it is very inefficient to transfer large quantities of binary
|
||||
data between JS and native code, so you should avoid calling this more
|
||||
than necessary.
|
||||
@platform ios
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getBase64ForTag()`
|
||||
|
||||
```javascript
|
||||
static getBase64ForTag(uri, success, failure)
|
||||
```
|
||||
|
||||
|
||||
Retrieves the base64-encoded data for an image in the ImageStore. If the
|
||||
specified URI does not match an image in the store, the failure callback
|
||||
will be called.
|
||||
|
||||
Note that it is very inefficient to transfer large quantities of binary
|
||||
data between JS and native code, so you should avoid calling this more
|
||||
than necessary. To display an image in the ImageStore, you can just pass
|
||||
the URI to an `<Image/>` component; there is no need to retrieve the
|
||||
base64 data.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
---
|
||||
id: imagestyleproptypes
|
||||
title: ImageStylePropTypes
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/imagestyleproptypes.html
|
||||
next: null
|
||||
previous: textstyleproptypes
|
||||
---
|
||||
### Props
|
||||
|
||||
- [`borderTopRightRadius`](docs/imagestyleproptypes.html#bordertoprightradius)
|
||||
- [`backfaceVisibility`](docs/imagestyleproptypes.html#backfacevisibility)
|
||||
- [`borderBottomLeftRadius`](docs/imagestyleproptypes.html#borderbottomleftradius)
|
||||
- [`borderBottomRightRadius`](docs/imagestyleproptypes.html#borderbottomrightradius)
|
||||
- [`borderColor`](docs/imagestyleproptypes.html#bordercolor)
|
||||
- [`borderRadius`](docs/imagestyleproptypes.html#borderradius)
|
||||
- [`borderTopLeftRadius`](docs/imagestyleproptypes.html#bordertopleftradius)
|
||||
- [`backgroundColor`](docs/imagestyleproptypes.html#backgroundcolor)
|
||||
- [`borderWidth`](docs/imagestyleproptypes.html#borderwidth)
|
||||
- [`opacity`](docs/imagestyleproptypes.html#opacity)
|
||||
- [`overflow`](docs/imagestyleproptypes.html#overflow)
|
||||
- [`resizeMode`](docs/imagestyleproptypes.html#resizemode)
|
||||
- [`tintColor`](docs/imagestyleproptypes.html#tintcolor)
|
||||
- [`overlayColor`](docs/imagestyleproptypes.html#overlaycolor)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `borderTopRightRadius`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `backfaceVisibility`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('visible', 'hidden') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderBottomLeftRadius`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderBottomRightRadius`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderColor`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderRadius`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderTopLeftRadius`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `backgroundColor`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderWidth`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `opacity`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `overflow`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('visible', 'hidden') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `resizeMode`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Object.keys(ImageResizeMode) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `tintColor`
|
||||
|
||||
Changes the color of all the non-transparent pixels to the tintColor.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `overlayColor`
|
||||
|
||||
When the image has rounded corners, specifying an overlayColor will
|
||||
cause the remaining space in the corners to be filled with a solid color.
|
||||
This is useful in cases which are not supported by the Android
|
||||
implementation of rounded corners:
|
||||
- Certain resize modes, such as 'contain'
|
||||
- Animated GIFs
|
||||
|
||||
A typical way to use this prop is with images displayed on a solid
|
||||
background and setting the `overlayColor` to the same color
|
||||
as the background.
|
||||
|
||||
For details of how this works under the hood, see
|
||||
http://frescolib.org/docs/rounded-corners-and-circles.html
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| string | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Integration with Existing Apps
|
|||
layout: docs
|
||||
category: Guides
|
||||
permalink: docs/integration-with-existing-apps.html
|
||||
banner: ejected
|
||||
next: running-on-device
|
||||
previous: colors
|
||||
---
|
||||
|
@ -362,7 +361,7 @@ const styles = StyleSheet.create({
|
|||
});
|
||||
|
||||
// Module name
|
||||
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);
|
||||
```
|
||||
|
||||
> `RNHighScores` is the name of your module that will be used when you add a view to React Native from within your iOS application.
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
id: interactionmanager
|
||||
title: InteractionManager
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/interactionmanager.html
|
||||
next: keyboard
|
||||
previous: imagestore
|
||||
---
|
||||
|
||||
InteractionManager allows long-running work to be scheduled after any
|
||||
interactions/animations have completed. In particular, this allows JavaScript
|
||||
animations to run smoothly.
|
||||
|
||||
Applications can schedule tasks to run after interactions with the following:
|
||||
|
||||
```
|
||||
InteractionManager.runAfterInteractions(() => {
|
||||
// ...long-running synchronous task...
|
||||
});
|
||||
```
|
||||
|
||||
Compare this to other scheduling alternatives:
|
||||
|
||||
- requestAnimationFrame(): for code that animates a view over time.
|
||||
- setImmediate/setTimeout(): run code later, note this may delay animations.
|
||||
- runAfterInteractions(): run code later, without delaying active animations.
|
||||
|
||||
The touch handling system considers one or more active touches to be an
|
||||
'interaction' and will delay `runAfterInteractions()` callbacks until all
|
||||
touches have ended or been cancelled.
|
||||
|
||||
InteractionManager also allows applications to register animations by
|
||||
creating an interaction 'handle' on animation start, and clearing it upon
|
||||
completion:
|
||||
|
||||
```
|
||||
var handle = InteractionManager.createInteractionHandle();
|
||||
// run animation... (`runAfterInteractions` tasks are queued)
|
||||
// later, on animation completion:
|
||||
InteractionManager.clearInteractionHandle(handle);
|
||||
// queued tasks run if all handles were cleared
|
||||
```
|
||||
|
||||
`runAfterInteractions` takes either a plain callback function, or a
|
||||
`PromiseTask` object with a `gen` method that returns a `Promise`. If a
|
||||
`PromiseTask` is supplied, then it is fully resolved (including asynchronous
|
||||
dependencies that also schedule more tasks via `runAfterInteractions`) before
|
||||
starting on the next task that might have been queued up synchronously
|
||||
earlier.
|
||||
|
||||
By default, queued tasks are executed together in a loop in one
|
||||
`setImmediate` batch. If `setDeadline` is called with a positive number, then
|
||||
tasks will only be executed until the deadline (in terms of js event loop run
|
||||
time) approaches, at which point execution will yield via setTimeout,
|
||||
allowing events such as touches to start interactions and block queued tasks
|
||||
from executing, making apps more responsive.
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`runAfterInteractions`](docs/interactionmanager.html#runafterinteractions)
|
||||
- [`createInteractionHandle`](docs/interactionmanager.html#createinteractionhandle)
|
||||
- [`clearInteractionHandle`](docs/interactionmanager.html#clearinteractionhandle)
|
||||
- [`setDeadline`](docs/interactionmanager.html#setdeadline)
|
||||
|
||||
|
||||
### Properties
|
||||
|
||||
- [`Events`](docs/interactionmanager.html#events)
|
||||
- [`addListener`](docs/interactionmanager.html#addlistener)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `runAfterInteractions()`
|
||||
|
||||
```javascript
|
||||
static runAfterInteractions(task)
|
||||
```
|
||||
|
||||
|
||||
Schedule a function to run after all interactions have completed. Returns a cancellable
|
||||
"promise".
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `createInteractionHandle()`
|
||||
|
||||
```javascript
|
||||
static createInteractionHandle()
|
||||
```
|
||||
|
||||
|
||||
Notify manager that an interaction has started.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `clearInteractionHandle()`
|
||||
|
||||
```javascript
|
||||
static clearInteractionHandle(handle)
|
||||
```
|
||||
|
||||
|
||||
Notify manager that an interaction has completed.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setDeadline()`
|
||||
|
||||
```javascript
|
||||
static setDeadline(deadline)
|
||||
```
|
||||
|
||||
|
||||
A positive number will use setTimeout to schedule any tasks after the
|
||||
eventLoopRunningTime hits the deadline value, otherwise all tasks will be
|
||||
executed in one setImmediate batch (default).
|
||||
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
id: keyboard
|
||||
title: Keyboard
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/keyboard.html
|
||||
next: layoutanimation
|
||||
previous: interactionmanager
|
||||
---
|
||||
|
||||
`Keyboard` module to control keyboard events.
|
||||
|
||||
### Usage
|
||||
|
||||
The Keyboard module allows you to listen for native events and react to them, as
|
||||
well as make changes to the keyboard, like dismissing it.
|
||||
|
||||
```
|
||||
import React, { Component } from 'react';
|
||||
import { Keyboard, TextInput } from 'react-native';
|
||||
|
||||
class Example extends Component {
|
||||
componentWillMount () {
|
||||
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
|
||||
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.keyboardDidShowListener.remove();
|
||||
this.keyboardDidHideListener.remove();
|
||||
}
|
||||
|
||||
_keyboardDidShow () {
|
||||
alert('Keyboard Shown');
|
||||
}
|
||||
|
||||
_keyboardDidHide () {
|
||||
alert('Keyboard Hidden');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<TextInput
|
||||
onSubmitEditing={Keyboard.dismiss}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`addListener`](docs/keyboard.html#addlistener)
|
||||
- [`removeListener`](docs/keyboard.html#removelistener)
|
||||
- [`removeAllListeners`](docs/keyboard.html#removealllisteners)
|
||||
- [`dismiss`](docs/keyboard.html#dismiss)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `addListener()`
|
||||
|
||||
```javascript
|
||||
static addListener(eventName, callback)
|
||||
```
|
||||
|
||||
|
||||
The `addListener` function connects a JavaScript function to an identified native
|
||||
keyboard notification event.
|
||||
|
||||
This function then returns the reference to the listener.
|
||||
|
||||
@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. This
|
||||
can be any of the following:
|
||||
|
||||
- `keyboardWillShow`
|
||||
- `keyboardDidShow`
|
||||
- `keyboardWillHide`
|
||||
- `keyboardDidHide`
|
||||
- `keyboardWillChangeFrame`
|
||||
- `keyboardDidChangeFrame`
|
||||
|
||||
Note that if you set `android:windowSoftInputMode` to `adjustResize` or `adjustNothing`,
|
||||
only `keyboardDidShow` and `keyboardDidHide` events will be available on Android.
|
||||
`keyboardWillShow` as well as `keyboardWillHide` are generally not available on Android
|
||||
since there is no native corresponding event.
|
||||
|
||||
@param {function} callback function to be called when the event fires.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeListener()`
|
||||
|
||||
```javascript
|
||||
static removeListener(eventName, callback)
|
||||
```
|
||||
|
||||
|
||||
Removes a specific listener.
|
||||
|
||||
@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for.
|
||||
@param {function} callback function to be called when the event fires.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeAllListeners()`
|
||||
|
||||
```javascript
|
||||
static removeAllListeners(eventName)
|
||||
```
|
||||
|
||||
|
||||
Removes all listeners for a specific event type.
|
||||
|
||||
@param {string} eventType The native event string listeners are watching which will be removed.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `dismiss()`
|
||||
|
||||
```javascript
|
||||
static dismiss()
|
||||
```
|
||||
|
||||
|
||||
Dismisses the active keyboard and removes focus.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
---
|
||||
id: keyboardavoidingview
|
||||
title: KeyboardAvoidingView
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/keyboardavoidingview.html
|
||||
next: listview
|
||||
previous: image
|
||||
---
|
||||
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard.
|
||||
It can automatically adjust either its position or bottom padding based on the position of the keyboard.
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`keyboardVerticalOffset`](docs/keyboardavoidingview.html#keyboardverticaloffset)
|
||||
- [`behavior`](docs/keyboardavoidingview.html#behavior)
|
||||
- [`contentContainerStyle`](docs/keyboardavoidingview.html#contentcontainerstyle)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`relativeKeyboardHeight`](docs/keyboardavoidingview.html#relativekeyboardheight)
|
||||
- [`onKeyboardChange`](docs/keyboardavoidingview.html#onkeyboardchange)
|
||||
- [`onLayout`](docs/keyboardavoidingview.html#onlayout)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `keyboardVerticalOffset`
|
||||
|
||||
This is the distance between the top of the user screen and the react native view,
|
||||
may be non-zero in some use cases.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `behavior`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('height', 'position', 'padding') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `contentContainerStyle`
|
||||
|
||||
The style of the content container(View) when behavior is 'position'.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| ViewPropTypes.style | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `relativeKeyboardHeight()`
|
||||
|
||||
```javascript
|
||||
relativeKeyboardHeight(keyboardFrame: object):
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onKeyboardChange()`
|
||||
|
||||
```javascript
|
||||
onKeyboardChange(event: object)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onLayout()`
|
||||
|
||||
```javascript
|
||||
onLayout(event: ViewLayoutEvent)
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,965 @@
|
|||
---
|
||||
id: layout-props
|
||||
title: Layout Props
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/layout-props.html
|
||||
next: shadow-props
|
||||
previous: vibrationios
|
||||
---
|
||||
### Props
|
||||
|
||||
- [`marginHorizontal`](docs/layout-props.html#marginhorizontal)
|
||||
- [`alignContent`](docs/layout-props.html#aligncontent)
|
||||
- [`alignSelf`](docs/layout-props.html#alignself)
|
||||
- [`aspectRatio`](docs/layout-props.html#aspectratio)
|
||||
- [`borderBottomWidth`](docs/layout-props.html#borderbottomwidth)
|
||||
- [`borderEndWidth`](docs/layout-props.html#borderendwidth)
|
||||
- [`borderLeftWidth`](docs/layout-props.html#borderleftwidth)
|
||||
- [`borderRightWidth`](docs/layout-props.html#borderrightwidth)
|
||||
- [`borderStartWidth`](docs/layout-props.html#borderstartwidth)
|
||||
- [`borderTopWidth`](docs/layout-props.html#bordertopwidth)
|
||||
- [`borderWidth`](docs/layout-props.html#borderwidth)
|
||||
- [`bottom`](docs/layout-props.html#bottom)
|
||||
- [`display`](docs/layout-props.html#display)
|
||||
- [`end`](docs/layout-props.html#end)
|
||||
- [`flex`](docs/layout-props.html#flex)
|
||||
- [`flexBasis`](docs/layout-props.html#flexbasis)
|
||||
- [`flexDirection`](docs/layout-props.html#flexdirection)
|
||||
- [`flexGrow`](docs/layout-props.html#flexgrow)
|
||||
- [`flexShrink`](docs/layout-props.html#flexshrink)
|
||||
- [`flexWrap`](docs/layout-props.html#flexwrap)
|
||||
- [`height`](docs/layout-props.html#height)
|
||||
- [`justifyContent`](docs/layout-props.html#justifycontent)
|
||||
- [`left`](docs/layout-props.html#left)
|
||||
- [`margin`](docs/layout-props.html#margin)
|
||||
- [`marginBottom`](docs/layout-props.html#marginbottom)
|
||||
- [`marginEnd`](docs/layout-props.html#marginend)
|
||||
- [`alignItems`](docs/layout-props.html#alignitems)
|
||||
- [`marginLeft`](docs/layout-props.html#marginleft)
|
||||
- [`marginRight`](docs/layout-props.html#marginright)
|
||||
- [`marginStart`](docs/layout-props.html#marginstart)
|
||||
- [`marginTop`](docs/layout-props.html#margintop)
|
||||
- [`marginVertical`](docs/layout-props.html#marginvertical)
|
||||
- [`maxHeight`](docs/layout-props.html#maxheight)
|
||||
- [`maxWidth`](docs/layout-props.html#maxwidth)
|
||||
- [`minHeight`](docs/layout-props.html#minheight)
|
||||
- [`minWidth`](docs/layout-props.html#minwidth)
|
||||
- [`overflow`](docs/layout-props.html#overflow)
|
||||
- [`padding`](docs/layout-props.html#padding)
|
||||
- [`paddingBottom`](docs/layout-props.html#paddingbottom)
|
||||
- [`paddingEnd`](docs/layout-props.html#paddingend)
|
||||
- [`paddingHorizontal`](docs/layout-props.html#paddinghorizontal)
|
||||
- [`paddingLeft`](docs/layout-props.html#paddingleft)
|
||||
- [`paddingRight`](docs/layout-props.html#paddingright)
|
||||
- [`paddingStart`](docs/layout-props.html#paddingstart)
|
||||
- [`paddingTop`](docs/layout-props.html#paddingtop)
|
||||
- [`paddingVertical`](docs/layout-props.html#paddingvertical)
|
||||
- [`position`](docs/layout-props.html#position)
|
||||
- [`right`](docs/layout-props.html#right)
|
||||
- [`start`](docs/layout-props.html#start)
|
||||
- [`top`](docs/layout-props.html#top)
|
||||
- [`width`](docs/layout-props.html#width)
|
||||
- [`zIndex`](docs/layout-props.html#zindex)
|
||||
- [`direction`](docs/layout-props.html#direction)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `marginHorizontal`
|
||||
|
||||
Setting `marginHorizontal` has the same effect as setting
|
||||
both `marginLeft` and `marginRight`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `alignContent`
|
||||
|
||||
`alignContent` controls how rows align in the cross direction,
|
||||
overriding the `alignContent` of the parent.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `alignSelf`
|
||||
|
||||
`alignSelf` controls how a child aligns in the cross direction,
|
||||
overriding the `alignItems` of the parent. It works like `align-self`
|
||||
in CSS (default: auto).
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `aspectRatio`
|
||||
|
||||
Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a
|
||||
non-standard property only available in react native and not CSS.
|
||||
|
||||
- On a node with a set width/height aspect ratio control the size of the unset dimension
|
||||
- On a node with a set flex basis aspect ratio controls the size of the node in the cross axis
|
||||
if unset
|
||||
- On a node with a measure function aspect ratio works as though the measure function measures
|
||||
the flex basis
|
||||
- On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis
|
||||
if unset
|
||||
- Aspect ratio takes min/max dimensions into account
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderBottomWidth`
|
||||
|
||||
`borderBottomWidth` works like `border-bottom-width` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderEndWidth`
|
||||
|
||||
When direction is `ltr`, `borderEndWidth` is equivalent to `borderRightWidth`.
|
||||
When direction is `rtl`, `borderEndWidth` is equivalent to `borderLeftWidth`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderLeftWidth`
|
||||
|
||||
`borderLeftWidth` works like `border-left-width` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderRightWidth`
|
||||
|
||||
`borderRightWidth` works like `border-right-width` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderStartWidth`
|
||||
|
||||
When direction is `ltr`, `borderStartWidth` is equivalent to `borderLeftWidth`.
|
||||
When direction is `rtl`, `borderStartWidth` is equivalent to `borderRightWidth`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderTopWidth`
|
||||
|
||||
`borderTopWidth` works like `border-top-width` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `borderWidth`
|
||||
|
||||
`borderWidth` works like `border-width` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `bottom`
|
||||
|
||||
`bottom` is the number of logical pixels to offset the bottom edge of
|
||||
this component.
|
||||
|
||||
It works similarly to `bottom` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
|
||||
for more details of how `bottom` affects layout.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `display`
|
||||
|
||||
`display` sets the display type of this component.
|
||||
|
||||
It works similarly to `display` in CSS, but only support 'flex' and 'none'.
|
||||
'flex' is the default.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('none', 'flex') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `end`
|
||||
|
||||
When the direction is `ltr`, `end` is equivalent to `right`.
|
||||
When the direction is `rtl`, `end` is equivalent to `left`.
|
||||
|
||||
This style takes precedence over the `left` and `right` styles.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flex`
|
||||
|
||||
In React Native `flex` does not work the same way that it does in CSS.
|
||||
`flex` is a number rather than a string, and it works
|
||||
according to the `Yoga` library
|
||||
at https://github.com/facebook/yoga
|
||||
|
||||
When `flex` is a positive number, it makes the component flexible
|
||||
and it will be sized proportional to its flex value. So a
|
||||
component with `flex` set to 2 will take twice the space as a
|
||||
component with `flex` set to 1.
|
||||
|
||||
When `flex` is 0, the component is sized according to `width`
|
||||
and `height` and it is inflexible.
|
||||
|
||||
When `flex` is -1, the component is normally sized according
|
||||
`width` and `height`. However, if there's not enough space,
|
||||
the component will shrink to its `minWidth` and `minHeight`.
|
||||
|
||||
flexGrow, flexShrink, and flexBasis work the same as in CSS.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flexBasis`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flexDirection`
|
||||
|
||||
`flexDirection` controls which directions children of a container go.
|
||||
`row` goes left to right, `column` goes top to bottom, and you may
|
||||
be able to guess what the other two do. It works like `flex-direction`
|
||||
in CSS, except the default is `column`.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('row', 'row-reverse', 'column', 'column-reverse') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flexGrow`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flexShrink`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flexWrap`
|
||||
|
||||
`flexWrap` controls whether children can wrap around after they
|
||||
hit the end of a flex container.
|
||||
It works like `flex-wrap` in CSS (default: nowrap).
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('wrap', 'nowrap') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `height`
|
||||
|
||||
`height` sets the height of this component.
|
||||
|
||||
It works similarly to `height` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `justifyContent`
|
||||
|
||||
`justifyContent` aligns children in the main direction.
|
||||
For example, if children are flowing vertically, `justifyContent`
|
||||
controls how they align vertically.
|
||||
It works like `justify-content` in CSS (default: flex-start).
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `left`
|
||||
|
||||
`left` is the number of logical pixels to offset the left edge of
|
||||
this component.
|
||||
|
||||
It works similarly to `left` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/left
|
||||
for more details of how `left` affects layout.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `margin`
|
||||
|
||||
Setting `margin` has the same effect as setting each of
|
||||
`marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `marginBottom`
|
||||
|
||||
`marginBottom` works like `margin-bottom` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `marginEnd`
|
||||
|
||||
When direction is `ltr`, `marginEnd` is equivalent to `marginRight`.
|
||||
When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `alignItems`
|
||||
|
||||
`alignItems` aligns children in the cross direction.
|
||||
For example, if children are flowing vertically, `alignItems`
|
||||
controls how they align horizontally.
|
||||
It works like `align-items` in CSS (default: stretch).
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `marginLeft`
|
||||
|
||||
`marginLeft` works like `margin-left` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `marginRight`
|
||||
|
||||
`marginRight` works like `margin-right` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `marginStart`
|
||||
|
||||
When direction is `ltr`, `marginStart` is equivalent to `marginLeft`.
|
||||
When direction is `rtl`, `marginStart` is equivalent to `marginRight`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `marginTop`
|
||||
|
||||
`marginTop` works like `margin-top` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `marginVertical`
|
||||
|
||||
Setting `marginVertical` has the same effect as setting both
|
||||
`marginTop` and `marginBottom`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `maxHeight`
|
||||
|
||||
`maxHeight` is the maximum height for this component, in logical pixels.
|
||||
|
||||
It works similarly to `max-height` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `maxWidth`
|
||||
|
||||
`maxWidth` is the maximum width for this component, in logical pixels.
|
||||
|
||||
It works similarly to `max-width` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minHeight`
|
||||
|
||||
`minHeight` is the minimum height for this component, in logical pixels.
|
||||
|
||||
It works similarly to `min-height` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minWidth`
|
||||
|
||||
`minWidth` is the minimum width for this component, in logical pixels.
|
||||
|
||||
It works similarly to `min-width` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `overflow`
|
||||
|
||||
`overflow` controls how children are measured and displayed.
|
||||
`overflow: hidden` causes views to be clipped while `overflow: scroll`
|
||||
causes views to be measured independently of their parents main axis.
|
||||
It works like `overflow` in CSS (default: visible).
|
||||
See https://developer.mozilla.org/en/docs/Web/CSS/overflow
|
||||
for more details.
|
||||
`overflow: visible` only works on iOS. On Android, all views will clip
|
||||
their children.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('visible', 'hidden', 'scroll') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `padding`
|
||||
|
||||
Setting `padding` has the same effect as setting each of
|
||||
`paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingBottom`
|
||||
|
||||
`paddingBottom` works like `padding-bottom` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingEnd`
|
||||
|
||||
When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`.
|
||||
When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingHorizontal`
|
||||
|
||||
Setting `paddingHorizontal` is like setting both of
|
||||
`paddingLeft` and `paddingRight`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingLeft`
|
||||
|
||||
`paddingLeft` works like `padding-left` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingRight`
|
||||
|
||||
`paddingRight` works like `padding-right` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingStart`
|
||||
|
||||
When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`.
|
||||
When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingTop`
|
||||
|
||||
`paddingTop` works like `padding-top` in CSS.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
|
||||
for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `paddingVertical`
|
||||
|
||||
Setting `paddingVertical` is like setting both of
|
||||
`paddingTop` and `paddingBottom`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `position`
|
||||
|
||||
`position` in React Native is similar to regular CSS, but
|
||||
everything is set to `relative` by default, so `absolute`
|
||||
positioning is always just relative to the parent.
|
||||
|
||||
If you want to position a child using specific numbers of logical
|
||||
pixels relative to its parent, set the child to have `absolute`
|
||||
position.
|
||||
|
||||
If you want to position a child relative to something
|
||||
that is not its parent, just don't use styles for that. Use the
|
||||
component tree.
|
||||
|
||||
See https://github.com/facebook/yoga
|
||||
for more details on how `position` differs between React Native
|
||||
and CSS.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('absolute', 'relative') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `right`
|
||||
|
||||
`right` is the number of logical pixels to offset the right edge of
|
||||
this component.
|
||||
|
||||
It works similarly to `right` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/right
|
||||
for more details of how `right` affects layout.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `start`
|
||||
|
||||
When the direction is `ltr`, `start` is equivalent to `left`.
|
||||
When the direction is `rtl`, `start` is equivalent to `right`.
|
||||
|
||||
This style takes precedence over the `left`, `right`, and `end` styles.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `top`
|
||||
|
||||
`top` is the number of logical pixels to offset the top edge of
|
||||
this component.
|
||||
|
||||
It works similarly to `top` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/top
|
||||
for more details of how `top` affects layout.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `width`
|
||||
|
||||
`width` sets the width of this component.
|
||||
|
||||
It works similarly to `width` in CSS, but in React Native you
|
||||
must use points or percentages. Ems and other units are not supported.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number, ,string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `zIndex`
|
||||
|
||||
`zIndex` controls which components display on top of others.
|
||||
Normally, you don't use `zIndex`. Components render according to
|
||||
their order in the document tree, so later components draw over
|
||||
earlier ones. `zIndex` may be useful if you have animations or custom
|
||||
modal interfaces where you don't want this behavior.
|
||||
|
||||
It works like the CSS `z-index` property - components with a larger
|
||||
`zIndex` will render on top. Think of the z-direction like it's
|
||||
pointing from the phone into your eyeball.
|
||||
See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for
|
||||
more details.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `direction`
|
||||
|
||||
`direction` specifies the directional flow of the user interface.
|
||||
The default is `inherit`, except for root node which will have
|
||||
value based on the current locale.
|
||||
See https://facebook.github.io/yoga/docs/rtl/
|
||||
for more details.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('inherit', 'ltr', 'rtl') | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
---
|
||||
id: layoutanimation
|
||||
title: LayoutAnimation
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/layoutanimation.html
|
||||
next: linking
|
||||
previous: keyboard
|
||||
---
|
||||
|
||||
Automatically animates views to their new positions when the
|
||||
next layout happens.
|
||||
|
||||
A common way to use this API is to call it before calling `setState`.
|
||||
|
||||
Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
|
||||
|
||||
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`configureNext`](docs/layoutanimation.html#configurenext)
|
||||
- [`create`](docs/layoutanimation.html#create)
|
||||
- [`checkConfig`](docs/layoutanimation.html#checkconfig)
|
||||
|
||||
|
||||
### Properties
|
||||
|
||||
- [`Types`](docs/layoutanimation.html#types)
|
||||
- [`Properties`](docs/layoutanimation.html#properties)
|
||||
- [`Presets`](docs/layoutanimation.html#presets)
|
||||
- [`easeInEaseOut`](docs/layoutanimation.html#easeineaseout)
|
||||
- [`linear`](docs/layoutanimation.html#linear)
|
||||
- [`spring`](docs/layoutanimation.html#spring)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `configureNext()`
|
||||
|
||||
```javascript
|
||||
static configureNext(config, onAnimationDidEnd?)
|
||||
```
|
||||
|
||||
|
||||
Schedules an animation to happen on the next layout.
|
||||
|
||||
@param config Specifies animation properties:
|
||||
|
||||
- `duration` in milliseconds
|
||||
- `create`, config for animating in new views (see `Anim` type)
|
||||
- `update`, config for animating views that have been updated
|
||||
(see `Anim` type)
|
||||
|
||||
@param onAnimationDidEnd Called when the animation finished.
|
||||
Only supported on iOS.
|
||||
@param onError Called on error. Only supported on iOS.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `create()`
|
||||
|
||||
```javascript
|
||||
static create(duration, type, creationProp)
|
||||
```
|
||||
|
||||
|
||||
Helper for creating a config for `configureNext`.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `checkConfig()`
|
||||
|
||||
```javascript
|
||||
static checkConfig(config, location, name)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Linking Libraries
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/linking-libraries-ios.html
|
||||
banner: ejected
|
||||
next: running-on-simulator-ios
|
||||
previous: custom-webview-ios
|
||||
---
|
|
@ -0,0 +1,254 @@
|
|||
---
|
||||
id: linking
|
||||
title: Linking
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/linking.html
|
||||
next: netinfo
|
||||
previous: layoutanimation
|
||||
---
|
||||
|
||||
<div class="banner-crna-ejected">
|
||||
<h3>Projects with Native Code Only</h3>
|
||||
<p>
|
||||
This section only applies to projects made with <code>react-native init</code>
|
||||
or to those made with Create React Native App which have since ejected. For
|
||||
more information about ejecting, please see
|
||||
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
|
||||
the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
`Linking` gives you a general interface to interact with both incoming
|
||||
and outgoing app links.
|
||||
|
||||
### Basic Usage
|
||||
|
||||
#### Handling deep links
|
||||
|
||||
If your app was launched from an external url registered to your app you can
|
||||
access and handle it from any component you want with
|
||||
|
||||
```
|
||||
componentDidMount() {
|
||||
Linking.getInitialURL().then((url) => {
|
||||
if (url) {
|
||||
console.log('Initial url is: ' + url);
|
||||
}
|
||||
}).catch(err => console.error('An error occurred', err));
|
||||
}
|
||||
```
|
||||
|
||||
NOTE: For instructions on how to add support for deep linking on Android,
|
||||
refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters).
|
||||
|
||||
If you wish to receive the intent in an existing instance of MainActivity,
|
||||
you may set the `launchMode` of MainActivity to `singleTask` in
|
||||
`AndroidManifest.xml`. See [`<activity>`](http://developer.android.com/guide/topics/manifest/activity-element.html)
|
||||
documentation for more information.
|
||||
|
||||
```
|
||||
<activity
|
||||
android:name=".MainActivity"
|
||||
android:launchMode="singleTask">
|
||||
```
|
||||
|
||||
NOTE: On iOS, you'll need to link `RCTLinking` to your project by following
|
||||
the steps described [here](docs/linking-libraries-ios.html#manual-linking).
|
||||
If you also want to listen to incoming app links during your app's
|
||||
execution, you'll need to add the following lines to your `*AppDelegate.m`:
|
||||
|
||||
```
|
||||
// iOS 9.x or newer
|
||||
#import <React/RCTLinkingManager.h>
|
||||
|
||||
- (BOOL)application:(UIApplication *)application
|
||||
openURL:(NSURL *)url
|
||||
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
|
||||
{
|
||||
return [RCTLinkingManager application:application openURL:url options:options];
|
||||
}
|
||||
```
|
||||
|
||||
If you're targeting iOS 8.x or older, you can use the following code instead:
|
||||
|
||||
```
|
||||
// iOS 8.x or older
|
||||
#import <React/RCTLinkingManager.h>
|
||||
|
||||
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
|
||||
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
|
||||
{
|
||||
return [RCTLinkingManager application:application openURL:url
|
||||
sourceApplication:sourceApplication annotation:annotation];
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
// If your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html),
|
||||
you'll need to add the following code as well:
|
||||
|
||||
```
|
||||
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity
|
||||
restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler
|
||||
{
|
||||
return [RCTLinkingManager application:application
|
||||
continueUserActivity:userActivity
|
||||
restorationHandler:restorationHandler];
|
||||
}
|
||||
```
|
||||
|
||||
And then on your React component you'll be able to listen to the events on
|
||||
`Linking` as follows
|
||||
|
||||
```
|
||||
componentDidMount() {
|
||||
Linking.addEventListener('url', this._handleOpenURL);
|
||||
},
|
||||
componentWillUnmount() {
|
||||
Linking.removeEventListener('url', this._handleOpenURL);
|
||||
},
|
||||
_handleOpenURL(event) {
|
||||
console.log(event.url);
|
||||
}
|
||||
```
|
||||
#### Opening external links
|
||||
|
||||
To start the corresponding activity for a link (web URL, email, contact etc.), call
|
||||
|
||||
```
|
||||
Linking.openURL(url).catch(err => console.error('An error occurred', err));
|
||||
```
|
||||
|
||||
If you want to check if any installed app can handle a given URL beforehand you can call
|
||||
```
|
||||
Linking.canOpenURL(url).then(supported => {
|
||||
if (!supported) {
|
||||
console.log('Can\'t handle url: ' + url);
|
||||
} else {
|
||||
return Linking.openURL(url);
|
||||
}
|
||||
}).catch(err => console.error('An error occurred', err));
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`constructor`](docs/linking.html#constructor)
|
||||
- [`addEventListener`](docs/linking.html#addeventlistener)
|
||||
- [`removeEventListener`](docs/linking.html#removeeventlistener)
|
||||
- [`openURL`](docs/linking.html#openurl)
|
||||
- [`canOpenURL`](docs/linking.html#canopenurl)
|
||||
- [`getInitialURL`](docs/linking.html#getinitialurl)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `constructor()`
|
||||
|
||||
```javascript
|
||||
constructor()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `addEventListener()`
|
||||
|
||||
```javascript
|
||||
addEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Add a handler to Linking changes by listening to the `url` event type
|
||||
and providing the handler
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
removeEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Remove a handler by passing the `url` event type and the handler
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `openURL()`
|
||||
|
||||
```javascript
|
||||
openURL(url)
|
||||
```
|
||||
|
||||
|
||||
Try to open the given `url` with any of the installed apps.
|
||||
|
||||
You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android
|
||||
or "http://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact,
|
||||
or any other URL that can be opened with the installed apps.
|
||||
|
||||
The method returns a `Promise` object. If the user confirms the open dialog or the
|
||||
url automatically opens, the promise is resolved. If the user cancels the open dialog
|
||||
or there are no registered applications for the url, the promise is rejected.
|
||||
|
||||
NOTE: This method will fail if the system doesn't know how to open the specified URL.
|
||||
If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.
|
||||
|
||||
NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `canOpenURL()`
|
||||
|
||||
```javascript
|
||||
canOpenURL(url)
|
||||
```
|
||||
|
||||
|
||||
Determine whether or not an installed app can handle a given URL.
|
||||
|
||||
NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!
|
||||
|
||||
NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key
|
||||
inside `Info.plist` or canOpenURL will always return false.
|
||||
|
||||
@param URL the URL to open
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getInitialURL()`
|
||||
|
||||
```javascript
|
||||
getInitialURL()
|
||||
```
|
||||
|
||||
|
||||
If the app launch was triggered by an app link,
|
||||
it will give the link url, otherwise it will give `null`
|
||||
|
||||
NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,436 @@
|
|||
---
|
||||
id: listview
|
||||
title: ListView
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/listview.html
|
||||
next: maskedviewios
|
||||
previous: keyboardavoidingview
|
||||
---
|
||||
DEPRECATED - use one of the new list components, such as [`FlatList`](docs/flatlist.html)
|
||||
or [`SectionList`](docs/sectionlist.html) for bounded memory use, fewer bugs,
|
||||
better performance, an easier to use API, and more features. Check out this
|
||||
[blog post](https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html)
|
||||
for more details.
|
||||
|
||||
ListView - A core component designed for efficient display of vertically
|
||||
scrolling lists of changing data. The minimal API is to create a
|
||||
[`ListView.DataSource`](docs/listviewdatasource.html), populate it with a simple
|
||||
array of data blobs, and instantiate a `ListView` component with that data
|
||||
source and a `renderRow` callback which takes a blob from the data array and
|
||||
returns a renderable component.
|
||||
|
||||
Minimal example:
|
||||
|
||||
```
|
||||
class MyComponent extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
|
||||
this.state = {
|
||||
dataSource: ds.cloneWithRows(['row 1', 'row 2']),
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ListView
|
||||
dataSource={this.state.dataSource}
|
||||
renderRow={(rowData) => <Text>{rowData}</Text>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
ListView also supports more advanced features, including sections with sticky
|
||||
section headers, header and footer support, callbacks on reaching the end of
|
||||
the available data (`onEndReached`) and on the set of rows that are visible
|
||||
in the device viewport change (`onChangeVisibleRows`), and several
|
||||
performance optimizations.
|
||||
|
||||
There are a few performance operations designed to make ListView scroll
|
||||
smoothly while dynamically loading potentially very large (or conceptually
|
||||
infinite) data sets:
|
||||
|
||||
* Only re-render changed rows - the rowHasChanged function provided to the
|
||||
data source tells the ListView if it needs to re-render a row because the
|
||||
source data has changed - see ListViewDataSource for more details.
|
||||
|
||||
* Rate-limited row rendering - By default, only one row is rendered per
|
||||
event-loop (customizable with the `pageSize` prop). This breaks up the
|
||||
work into smaller chunks to reduce the chance of dropping frames while
|
||||
rendering rows.
|
||||
|
||||
### Props
|
||||
|
||||
* [ScrollView props...](docs/scrollview.html#props)
|
||||
- [`dataSource`](docs/listview.html#datasource)
|
||||
- [`initialListSize`](docs/listview.html#initiallistsize)
|
||||
- [`onEndReachedThreshold`](docs/listview.html#onendreachedthreshold)
|
||||
- [`pageSize`](docs/listview.html#pagesize)
|
||||
- [`renderRow`](docs/listview.html#renderrow)
|
||||
- [`renderScrollComponent`](docs/listview.html#renderscrollcomponent)
|
||||
- [`scrollRenderAheadDistance`](docs/listview.html#scrollrenderaheaddistance)
|
||||
- [`stickyHeaderIndices`](docs/listview.html#stickyheaderindices)
|
||||
- [`enableEmptySections`](docs/listview.html#enableemptysections)
|
||||
- [`renderHeader`](docs/listview.html#renderheader)
|
||||
- [`onEndReached`](docs/listview.html#onendreached)
|
||||
- [`stickySectionHeadersEnabled`](docs/listview.html#stickysectionheadersenabled)
|
||||
- [`renderSectionHeader`](docs/listview.html#rendersectionheader)
|
||||
- [`renderSeparator`](docs/listview.html#renderseparator)
|
||||
- [`onChangeVisibleRows`](docs/listview.html#onchangevisiblerows)
|
||||
- [`removeClippedSubviews`](docs/listview.html#removeclippedsubviews)
|
||||
- [`renderFooter`](docs/listview.html#renderfooter)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`getMetrics`](docs/listview.html#getmetrics)
|
||||
- [`scrollTo`](docs/listview.html#scrollto)
|
||||
- [`scrollToEnd`](docs/listview.html#scrolltoend)
|
||||
- [`flashScrollIndicators`](docs/listview.html#flashscrollindicators)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `dataSource`
|
||||
|
||||
An instance of [ListView.DataSource](docs/listviewdatasource.html) to use
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| ListViewDataSource | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `initialListSize`
|
||||
|
||||
How many rows to render on initial component mount. Use this to make
|
||||
it so that the first screen worth of data appears at one time instead of
|
||||
over the course of multiple frames.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onEndReachedThreshold`
|
||||
|
||||
Threshold in pixels (virtual, not physical) for calling onEndReached.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `pageSize`
|
||||
|
||||
Number of rows to render per event loop. Note: if your 'rows' are actually
|
||||
cells, i.e. they don't span the full width of your view (as in the
|
||||
ListViewGridLayoutExample), you should set the pageSize to be a multiple
|
||||
of the number of cells per row, otherwise you're likely to see gaps at
|
||||
the edge of the ListView as new pages are loaded.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `renderRow`
|
||||
|
||||
(rowData, sectionID, rowID, highlightRow) => renderable
|
||||
|
||||
Takes a data entry from the data source and its ids and should return
|
||||
a renderable component to be rendered as the row. By default the data
|
||||
is exactly what was put into the data source, but it's also possible to
|
||||
provide custom extractors. ListView can be notified when a row is
|
||||
being highlighted by calling `highlightRow(sectionID, rowID)`. This
|
||||
sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you
|
||||
to control the separators above and below the highlighted row. The highlighted
|
||||
state of a row can be reset by calling highlightRow(null).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `renderScrollComponent`
|
||||
|
||||
(props) => renderable
|
||||
|
||||
A function that returns the scrollable component in which the list rows
|
||||
are rendered. Defaults to returning a ScrollView with the given props.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollRenderAheadDistance`
|
||||
|
||||
How early to start rendering rows before they come on screen, in
|
||||
pixels.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `stickyHeaderIndices`
|
||||
|
||||
An array of child indices determining which children get docked to the
|
||||
top of the screen when scrolling. For example, passing
|
||||
`stickyHeaderIndices={[0]}` will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with `horizontal={true}`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| array of number | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `enableEmptySections`
|
||||
|
||||
Flag indicating whether empty section headers should be rendered. In the future release
|
||||
empty section headers will be rendered by default, and the flag will be deprecated.
|
||||
If empty sections are not desired to be rendered their indices should be excluded from sectionID object.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `renderHeader`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onEndReached`
|
||||
|
||||
Called when all rows have been rendered and the list has been scrolled
|
||||
to within onEndReachedThreshold of the bottom. The native scroll
|
||||
event is provided.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `stickySectionHeadersEnabled`
|
||||
|
||||
Makes the sections headers sticky. The sticky behavior means that it
|
||||
will scroll with the content at the top of the section until it reaches
|
||||
the top of the screen, at which point it will stick to the top until it
|
||||
is pushed off the screen by the next section header. This property is
|
||||
not supported in conjunction with `horizontal={true}`. Only enabled by
|
||||
default on iOS because of typical platform standards.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `renderSectionHeader`
|
||||
|
||||
(sectionData, sectionID) => renderable
|
||||
|
||||
If provided, a header is rendered for this section.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `renderSeparator`
|
||||
|
||||
(sectionID, rowID, adjacentRowHighlighted) => renderable
|
||||
|
||||
If provided, a renderable component to be rendered as the separator
|
||||
below each row but not the last row if there is a section header below.
|
||||
Take a sectionID and rowID of the row above and whether its adjacent row
|
||||
is highlighted.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onChangeVisibleRows`
|
||||
|
||||
(visibleRows, changedRows) => void
|
||||
|
||||
Called when the set of visible rows changes. `visibleRows` maps
|
||||
{ sectionID: { rowID: true }} for all the visible rows, and
|
||||
`changedRows` maps { sectionID: { rowID: true | false }} for the rows
|
||||
that have changed their visibility, with true indicating visible, and
|
||||
false indicating the view has moved out of view.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeClippedSubviews`
|
||||
|
||||
A performance optimization for improving scroll perf of
|
||||
large lists, used in conjunction with overflow: 'hidden' on the row
|
||||
containers. This is enabled by default.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `renderFooter`
|
||||
|
||||
() => renderable
|
||||
|
||||
The header and footer are always rendered (if these props are provided)
|
||||
on every render pass. If they are expensive to re-render, wrap them
|
||||
in StaticContainer or other mechanism as appropriate. Footer is always
|
||||
at the bottom of the list, and header at the top, on every render pass.
|
||||
In a horizontal ListView, the header is rendered on the left and the
|
||||
footer on the right.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `getMetrics()`
|
||||
|
||||
```javascript
|
||||
getMetrics()
|
||||
```
|
||||
|
||||
Exports some data, e.g. for perf investigations or analytics.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollTo()`
|
||||
|
||||
```javascript
|
||||
scrollTo(...args: Array)
|
||||
```
|
||||
|
||||
Scrolls to a given x, y offset, either immediately or with a smooth animation.
|
||||
|
||||
See `ScrollView#scrollTo`.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollToEnd()`
|
||||
|
||||
```javascript
|
||||
scrollToEnd([options]: object)
|
||||
```
|
||||
|
||||
If this is a vertical ListView scrolls to the bottom.
|
||||
If this is a horizontal ListView scrolls to the right.
|
||||
|
||||
Use `scrollToEnd({animated: true})` for smooth animated scrolling,
|
||||
`scrollToEnd({animated: false})` for immediate scrolling.
|
||||
If no options are passed, `animated` defaults to true.
|
||||
|
||||
See `ScrollView#scrollToEnd`.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flashScrollIndicators()`
|
||||
|
||||
```javascript
|
||||
flashScrollIndicators()
|
||||
```
|
||||
|
||||
Displays the scroll indicators momentarily.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
---
|
||||
id: listviewdatasource
|
||||
title: ListViewDataSource
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/listviewdatasource.html
|
||||
next: netinfo
|
||||
previous: linking
|
||||
---
|
||||
|
||||
Provides efficient data processing and access to the
|
||||
`ListView` component. A `ListViewDataSource` is created with functions for
|
||||
extracting data from the input blob, and comparing elements (with default
|
||||
implementations for convenience). The input blob can be as simple as an
|
||||
array of strings, or an object with rows nested inside section objects.
|
||||
|
||||
To update the data in the datasource, use `cloneWithRows` (or
|
||||
`cloneWithRowsAndSections` if you care about sections). The data in the
|
||||
data source is immutable, so you can't modify it directly. The clone methods
|
||||
suck in the new data and compute a diff for each row so ListView knows
|
||||
whether to re-render it or not.
|
||||
|
||||
In this example, a component receives data in chunks, handled by
|
||||
`_onDataArrived`, which concats the new data onto the old data and updates the
|
||||
data source. We use `concat` to create a new array - mutating `this._data`,
|
||||
e.g. with `this._data.push(newRowData)`, would be an error. `_rowHasChanged`
|
||||
understands the shape of the row data and knows how to efficiently compare
|
||||
it.
|
||||
|
||||
```
|
||||
getInitialState: function() {
|
||||
var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});
|
||||
return {ds};
|
||||
},
|
||||
_onDataArrived(newData) {
|
||||
this._data = this._data.concat(newData);
|
||||
this.setState({
|
||||
ds: this.state.ds.cloneWithRows(this._data)
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`constructor`](docs/listviewdatasource.html#constructor)
|
||||
- [`cloneWithRows`](docs/listviewdatasource.html#clonewithrows)
|
||||
- [`cloneWithRowsAndSections`](docs/listviewdatasource.html#clonewithrowsandsections)
|
||||
- [`getRowCount`](docs/listviewdatasource.html#getrowcount)
|
||||
- [`getRowAndSectionCount`](docs/listviewdatasource.html#getrowandsectioncount)
|
||||
- [`rowShouldUpdate`](docs/listviewdatasource.html#rowshouldupdate)
|
||||
- [`getRowData`](docs/listviewdatasource.html#getrowdata)
|
||||
- [`getRowIDForFlatIndex`](docs/listviewdatasource.html#getrowidforflatindex)
|
||||
- [`getSectionIDForFlatIndex`](docs/listviewdatasource.html#getsectionidforflatindex)
|
||||
- [`getSectionLengths`](docs/listviewdatasource.html#getsectionlengths)
|
||||
- [`sectionHeaderShouldUpdate`](docs/listviewdatasource.html#sectionheadershouldupdate)
|
||||
- [`getSectionHeaderData`](docs/listviewdatasource.html#getsectionheaderdata)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `constructor()`
|
||||
|
||||
```javascript
|
||||
constructor(params)
|
||||
```
|
||||
|
||||
|
||||
You can provide custom extraction and `hasChanged` functions for section
|
||||
headers and rows. If absent, data will be extracted with the
|
||||
`defaultGetRowData` and `defaultGetSectionHeaderData` functions.
|
||||
|
||||
The default extractor expects data of one of the following forms:
|
||||
|
||||
{ sectionID_1: { rowID_1: <rowData1>, ... }, ... }
|
||||
|
||||
or
|
||||
|
||||
{ sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }
|
||||
|
||||
or
|
||||
|
||||
[ [ <rowData1>, <rowData2>, ... ], ... ]
|
||||
|
||||
The constructor takes in a params argument that can contain any of the
|
||||
following:
|
||||
|
||||
- getRowData(dataBlob, sectionID, rowID);
|
||||
- getSectionHeaderData(dataBlob, sectionID);
|
||||
- rowHasChanged(prevRowData, nextRowData);
|
||||
- sectionHeaderHasChanged(prevSectionData, nextSectionData);
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `cloneWithRows()`
|
||||
|
||||
```javascript
|
||||
cloneWithRows(dataBlob, rowIdentities)
|
||||
```
|
||||
|
||||
|
||||
Clones this `ListViewDataSource` with the specified `dataBlob` and
|
||||
`rowIdentities`. The `dataBlob` is just an arbitrary blob of data. At
|
||||
construction an extractor to get the interesting information was defined
|
||||
(or the default was used).
|
||||
|
||||
The `rowIdentities` is a 2D array of identifiers for rows.
|
||||
ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's
|
||||
assumed that the keys of the section data are the row identities.
|
||||
|
||||
Note: This function does NOT clone the data in this data source. It simply
|
||||
passes the functions defined at construction to a new data source with
|
||||
the data specified. If you wish to maintain the existing data you must
|
||||
handle merging of old and new data separately and then pass that into
|
||||
this function as the `dataBlob`.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `cloneWithRowsAndSections()`
|
||||
|
||||
```javascript
|
||||
cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIdentities)
|
||||
```
|
||||
|
||||
|
||||
This performs the same function as the `cloneWithRows` function but here
|
||||
you also specify what your `sectionIdentities` are. If you don't care
|
||||
about sections you should safely be able to use `cloneWithRows`.
|
||||
|
||||
`sectionIdentities` is an array of identifiers for sections.
|
||||
ie. ['s1', 's2', ...]. The identifiers should correspond to the keys or array indexes
|
||||
of the data you wish to include. If not provided, it's assumed that the
|
||||
keys of dataBlob are the section identities.
|
||||
|
||||
Note: this returns a new object!
|
||||
|
||||
```
|
||||
const dataSource = ds.cloneWithRowsAndSections({
|
||||
addresses: ['row 1', 'row 2'],
|
||||
phone_numbers: ['data 1', 'data 2'],
|
||||
}, ['phone_numbers']);
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getRowCount()`
|
||||
|
||||
```javascript
|
||||
getRowCount()
|
||||
```
|
||||
|
||||
|
||||
Returns the total number of rows in the data source.
|
||||
|
||||
If you are specifying the rowIdentities or sectionIdentities, then `getRowCount` will return the number of rows in the filtered data source.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getRowAndSectionCount()`
|
||||
|
||||
```javascript
|
||||
getRowAndSectionCount()
|
||||
```
|
||||
|
||||
|
||||
Returns the total number of rows in the data source (see `getRowCount` for how this is calculated) plus the number of sections in the data.
|
||||
|
||||
If you are specifying the rowIdentities or sectionIdentities, then `getRowAndSectionCount` will return the number of rows & sections in the filtered data source.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `rowShouldUpdate()`
|
||||
|
||||
```javascript
|
||||
rowShouldUpdate(sectionIndex, rowIndex)
|
||||
```
|
||||
|
||||
|
||||
Returns if the row is dirtied and needs to be rerendered
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getRowData()`
|
||||
|
||||
```javascript
|
||||
getRowData(sectionIndex, rowIndex)
|
||||
```
|
||||
|
||||
|
||||
Gets the data required to render the row.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getRowIDForFlatIndex()`
|
||||
|
||||
```javascript
|
||||
getRowIDForFlatIndex(index)
|
||||
```
|
||||
|
||||
|
||||
Gets the rowID at index provided if the dataSource arrays were flattened,
|
||||
or null of out of range indexes.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getSectionIDForFlatIndex()`
|
||||
|
||||
```javascript
|
||||
getSectionIDForFlatIndex(index)
|
||||
```
|
||||
|
||||
|
||||
Gets the sectionID at index provided if the dataSource arrays were flattened,
|
||||
or null for out of range indexes.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getSectionLengths()`
|
||||
|
||||
```javascript
|
||||
getSectionLengths()
|
||||
```
|
||||
|
||||
|
||||
Returns an array containing the number of rows in each section
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `sectionHeaderShouldUpdate()`
|
||||
|
||||
```javascript
|
||||
sectionHeaderShouldUpdate(sectionIndex)
|
||||
```
|
||||
|
||||
|
||||
Returns if the section header is dirtied and needs to be rerendered
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getSectionHeaderData()`
|
||||
|
||||
```javascript
|
||||
getSectionHeaderData(sectionIndex)
|
||||
```
|
||||
|
||||
|
||||
Gets the data required to render the section header
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
id: maskedviewios
|
||||
title: MaskedViewIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/maskedviewios.html
|
||||
next: modal
|
||||
previous: listview
|
||||
---
|
||||
Renders the child view with a mask specified in the `maskElement` prop.
|
||||
|
||||
```
|
||||
import React from 'react';
|
||||
import { MaskedViewIOS, Text, View } from 'react-native';
|
||||
|
||||
class MyMaskedView extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<MaskedViewIOS
|
||||
style={{ flex: 1 }}
|
||||
maskElement={
|
||||
<View style={styles.maskContainerStyle}>
|
||||
<Text style={styles.maskTextStyle}>
|
||||
Basic Mask
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
>
|
||||
<View style={{ flex: 1, backgroundColor: 'blue' }} />
|
||||
</MaskedViewIOS>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The above example will render a view with a blue background that fills its
|
||||
parent, and then mask that view with text that says "Basic Mask".
|
||||
|
||||
The alpha channel of the view rendered by the `maskElement` prop determines how
|
||||
much of the view's content and background shows through. Fully or partially
|
||||
opaque pixels allow the underlying content to show through but fully
|
||||
transparent pixels block that content.
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`maskElement`](docs/maskedviewios.html#maskelement)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `maskElement`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| element | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
---
|
||||
id: modal
|
||||
title: Modal
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/modal.html
|
||||
next: navigatorios
|
||||
previous: maskedviewios
|
||||
---
|
||||
### Props
|
||||
|
||||
- [`visible`](docs/modal.html#visible)
|
||||
- [`supportedOrientations`](docs/modal.html#supportedorientations)
|
||||
- [`onRequestClose`](docs/modal.html#onrequestclose)
|
||||
- [`onShow`](docs/modal.html#onshow)
|
||||
- [`transparent`](docs/modal.html#transparent)
|
||||
- [`animationType`](docs/modal.html#animationtype)
|
||||
- [`hardwareAccelerated`](docs/modal.html#hardwareaccelerated)
|
||||
- [`onDismiss`](docs/modal.html#ondismiss)
|
||||
- [`onOrientationChange`](docs/modal.html#onorientationchange)
|
||||
- [`presentationStyle`](docs/modal.html#presentationstyle)
|
||||
- [`animated`](docs/modal.html#animated)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `visible`
|
||||
|
||||
The `visible` prop determines whether your modal is visible.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `supportedOrientations`
|
||||
|
||||
The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations.
|
||||
On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.
|
||||
When using `presentationStyle` of `pageSheet` or `formSheet`, this property will be ignored by iOS.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| array of enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right') | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onRequestClose`
|
||||
|
||||
The `onRequestClose` callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| (Platform.isTVOS || Platform.OS === 'android') ? PropTypes.func.isRequired : PropTypes.func | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onShow`
|
||||
|
||||
The `onShow` prop allows passing a function that will be called once the modal has been shown.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `transparent`
|
||||
|
||||
The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `animationType`
|
||||
|
||||
The `animationType` prop controls how the modal animates.
|
||||
|
||||
- `slide` slides in from the bottom
|
||||
- `fade` fades into view
|
||||
- `none` appears without an animation
|
||||
|
||||
Default is set to `none`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('none', 'slide', 'fade') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `hardwareAccelerated`
|
||||
|
||||
The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onDismiss`
|
||||
|
||||
The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| function | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onOrientationChange`
|
||||
|
||||
The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed.
|
||||
The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| function | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `presentationStyle`
|
||||
|
||||
The `presentationStyle` prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones).
|
||||
See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.
|
||||
|
||||
|
||||
- `fullScreen` covers the screen completely
|
||||
- `pageSheet` covers portrait-width view centered (only on larger devices)
|
||||
- `formSheet` covers narrow-width view centered (only on larger devices)
|
||||
- `overFullScreen` covers the screen completely, but allows transparency
|
||||
|
||||
Default is set to `overFullScreen` or `fullScreen` depending on `transparent` property.
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `animated`
|
||||
|
||||
**Deprecated.** Use the `animationType` prop instead.
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Native UI Components
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/native-components-android.html
|
||||
banner: ejected
|
||||
next: custom-webview-android
|
||||
previous: native-modules-android
|
||||
---
|
|
@ -4,7 +4,6 @@ title: Native UI Components
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/native-components-ios.html
|
||||
banner: ejected
|
||||
next: custom-webview-ios
|
||||
previous: native-modules-ios
|
||||
---
|
|
@ -4,7 +4,6 @@ title: Native Modules
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/native-modules-android.html
|
||||
banner: ejected
|
||||
next: native-components-android
|
||||
previous: app-extensions
|
||||
---
|
|
@ -4,7 +4,6 @@ title: Native Modules
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/native-modules-ios.html
|
||||
banner: ejected
|
||||
next: native-components-ios
|
||||
previous: testing
|
||||
---
|
|
@ -0,0 +1,550 @@
|
|||
---
|
||||
id: navigatorios
|
||||
title: NavigatorIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/navigatorios.html
|
||||
next: picker
|
||||
previous: modal
|
||||
---
|
||||
`NavigatorIOS` is a wrapper around
|
||||
[`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/),
|
||||
enabling you to implement a navigation stack. It works exactly the same as it
|
||||
would on a native app using `UINavigationController`, providing the same
|
||||
animations and behavior from UIKit.
|
||||
|
||||
As the name implies, it is only available on iOS. Take a look at
|
||||
[`React Navigation`](https://reactnavigation.org/) for a cross-platform
|
||||
solution in JavaScript, or check out either of these components for native
|
||||
solutions: [native-navigation](http://airbnb.io/native-navigation/),
|
||||
[react-native-navigation](https://github.com/wix/react-native-navigation).
|
||||
|
||||
To set up the navigator, provide the `initialRoute` prop with a route
|
||||
object. A route object is used to describe each scene that your app
|
||||
navigates to. `initialRoute` represents the first route in your navigator.
|
||||
|
||||
```
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { NavigatorIOS, Text } from 'react-native';
|
||||
|
||||
export default class NavigatorIOSApp extends Component {
|
||||
render() {
|
||||
return (
|
||||
<NavigatorIOS
|
||||
initialRoute={{
|
||||
component: MyScene,
|
||||
title: 'My Initial Scene',
|
||||
}}
|
||||
style={{flex: 1}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyScene extends Component {
|
||||
static propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
navigator: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
_onForward = () => {
|
||||
this.props.navigator.push({
|
||||
title: 'Scene ' + nextIndex,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text>Current Scene: { this.props.title }</Text>
|
||||
<TouchableHighlight onPress={this._onForward}>
|
||||
<Text>Tap me to load the next scene</Text>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this code, the navigator renders the component specified in initialRoute,
|
||||
which in this case is `MyScene`. This component will receive a `route` prop
|
||||
and a `navigator` prop representing the navigator. The navigator's navigation
|
||||
bar will render the title for the current scene, "My Initial Scene".
|
||||
|
||||
You can optionally pass in a `passProps` property to your `initialRoute`.
|
||||
`NavigatorIOS` passes this in as props to the rendered component:
|
||||
|
||||
```
|
||||
initialRoute={{
|
||||
component: MyScene,
|
||||
title: 'My Initial Scene',
|
||||
passProps: { myProp: 'foo' }
|
||||
}}
|
||||
```
|
||||
|
||||
You can then access the props passed in via `{this.props.myProp}`.
|
||||
|
||||
#### Handling Navigation
|
||||
|
||||
To trigger navigation functionality such as pushing or popping a view, you
|
||||
have access to a `navigator` object. The object is passed in as a prop to any
|
||||
component that is rendered by `NavigatorIOS`. You can then call the
|
||||
relevant methods to perform the navigation action you need:
|
||||
|
||||
```
|
||||
class MyView extends Component {
|
||||
_handleBackPress() {
|
||||
this.props.navigator.pop();
|
||||
}
|
||||
|
||||
_handleNextPress(nextRoute) {
|
||||
this.props.navigator.push(nextRoute);
|
||||
}
|
||||
|
||||
render() {
|
||||
const nextRoute = {
|
||||
component: MyView,
|
||||
title: 'Bar That',
|
||||
passProps: { myProp: 'bar' }
|
||||
};
|
||||
return(
|
||||
<TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>
|
||||
<Text style={{marginTop: 200, alignSelf: 'center'}}>
|
||||
See you on the other nav {this.props.myProp}!
|
||||
</Text>
|
||||
</TouchableHighlight>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can also trigger navigator functionality from the `NavigatorIOS`
|
||||
component:
|
||||
|
||||
```
|
||||
class NavvyIOS extends Component {
|
||||
_handleNavigationRequest() {
|
||||
this.refs.nav.push({
|
||||
component: MyView,
|
||||
title: 'Genius',
|
||||
passProps: { myProp: 'genius' },
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NavigatorIOS
|
||||
ref='nav'
|
||||
initialRoute={{
|
||||
component: MyView,
|
||||
title: 'Foo This',
|
||||
passProps: { myProp: 'foo' },
|
||||
rightButtonTitle: 'Add',
|
||||
onRightButtonPress: () => this._handleNavigationRequest(),
|
||||
}}
|
||||
style={{flex: 1}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The code above adds a `_handleNavigationRequest` private method that is
|
||||
invoked from the `NavigatorIOS` component when the right navigation bar item
|
||||
is pressed. To get access to the navigator functionality, a reference to it
|
||||
is saved in the `ref` prop and later referenced to push a new scene into the
|
||||
navigation stack.
|
||||
|
||||
#### Navigation Bar Configuration
|
||||
|
||||
Props passed to `NavigatorIOS` will set the default configuration
|
||||
for the navigation bar. Props passed as properties to a route object will set
|
||||
the configuration for that route's navigation bar, overriding any props
|
||||
passed to the `NavigatorIOS` component.
|
||||
|
||||
```
|
||||
_handleNavigationRequest() {
|
||||
this.refs.nav.push({
|
||||
//...
|
||||
passProps: { myProp: 'genius' },
|
||||
barTintColor: '#996699',
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<NavigatorIOS
|
||||
//...
|
||||
style={{flex: 1}}
|
||||
barTintColor='#ffffcc'
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In the example above the navigation bar color is changed when the new route
|
||||
is pushed.
|
||||
|
||||
### Props
|
||||
|
||||
- [`initialRoute`](docs/navigatorios.html#initialroute)
|
||||
- [`barStyle`](docs/navigatorios.html#barstyle)
|
||||
- [`barTintColor`](docs/navigatorios.html#bartintcolor)
|
||||
- [`interactivePopGestureEnabled`](docs/navigatorios.html#interactivepopgestureenabled)
|
||||
- [`itemWrapperStyle`](docs/navigatorios.html#itemwrapperstyle)
|
||||
- [`navigationBarHidden`](docs/navigatorios.html#navigationbarhidden)
|
||||
- [`shadowHidden`](docs/navigatorios.html#shadowhidden)
|
||||
- [`tintColor`](docs/navigatorios.html#tintcolor)
|
||||
- [`titleTextColor`](docs/navigatorios.html#titletextcolor)
|
||||
- [`translucent`](docs/navigatorios.html#translucent)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`push`](docs/navigatorios.html#push)
|
||||
- [`popN`](docs/navigatorios.html#popn)
|
||||
- [`pop`](docs/navigatorios.html#pop)
|
||||
- [`replaceAtIndex`](docs/navigatorios.html#replaceatindex)
|
||||
- [`replace`](docs/navigatorios.html#replace)
|
||||
- [`replacePrevious`](docs/navigatorios.html#replaceprevious)
|
||||
- [`popToTop`](docs/navigatorios.html#poptotop)
|
||||
- [`popToRoute`](docs/navigatorios.html#poptoroute)
|
||||
- [`replacePreviousAndPop`](docs/navigatorios.html#replacepreviousandpop)
|
||||
- [`resetTo`](docs/navigatorios.html#resetto)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `initialRoute`
|
||||
|
||||
NavigatorIOS uses `route` objects to identify child views, their props,
|
||||
and navigation bar configuration. Navigation operations such as push
|
||||
operations expect routes to look like this the `initialRoute`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,leftButtonSystemIcon: Object.keys(SystemIcons),onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,rightButtonSystemIcon: Object.keys(SystemIcons),onRightButtonPress: function,wrapperStyle: ViewPropTypes.style,navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,barStyle: enum('default', 'black'),titleTextColor: string,translucent: bool} | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `barStyle`
|
||||
|
||||
The style of the navigation bar. Supported values are 'default', 'black'.
|
||||
Use 'black' instead of setting `barTintColor` to black. This produces
|
||||
a navigation bar with the native iOS style with higher translucency.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('default', 'black') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `barTintColor`
|
||||
|
||||
The default background color of the navigation bar.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `interactivePopGestureEnabled`
|
||||
|
||||
Boolean value that indicates whether the interactive pop gesture is
|
||||
enabled. This is useful for enabling/disabling the back swipe navigation
|
||||
gesture.
|
||||
|
||||
If this prop is not provided, the default behavior is for the back swipe
|
||||
gesture to be enabled when the navigation bar is shown and disabled when
|
||||
the navigation bar is hidden. Once you've provided the
|
||||
`interactivePopGestureEnabled` prop, you can never restore the default
|
||||
behavior.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `itemWrapperStyle`
|
||||
|
||||
The default wrapper style for components in the navigator.
|
||||
A common use case is to set the `backgroundColor` for every scene.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| ViewPropTypes.style | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `navigationBarHidden`
|
||||
|
||||
Boolean value that indicates whether the navigation bar is hidden
|
||||
by default.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `shadowHidden`
|
||||
|
||||
Boolean value that indicates whether to hide the 1px hairline shadow
|
||||
by default.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `tintColor`
|
||||
|
||||
The default color used for the buttons in the navigation bar.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `titleTextColor`
|
||||
|
||||
The default text color of the navigation bar title.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `translucent`
|
||||
|
||||
Boolean value that indicates whether the navigation bar is
|
||||
translucent by default
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `push()`
|
||||
|
||||
```javascript
|
||||
push(route: object)
|
||||
```
|
||||
|
||||
Navigate forward to a new route.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| route | object | No | The new route to navigate to. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `popN()`
|
||||
|
||||
```javascript
|
||||
popN(n: number)
|
||||
```
|
||||
|
||||
Go back N scenes at once. When N=1, behavior matches `pop()`.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| n | number | No | The number of scenes to pop. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `pop()`
|
||||
|
||||
```javascript
|
||||
pop()
|
||||
```
|
||||
|
||||
Pop back to the previous scene.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `replaceAtIndex()`
|
||||
|
||||
```javascript
|
||||
replaceAtIndex(route: object, index: number)
|
||||
```
|
||||
|
||||
Replace a route in the navigation stack.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| route | object | No | The new route that will replace the specified one. |
|
||||
| index | number | No | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `replace()`
|
||||
|
||||
```javascript
|
||||
replace(route: object)
|
||||
```
|
||||
|
||||
Replace the route for the current scene and immediately
|
||||
load the view for the new route.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| route | object | No | The new route to navigate to. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `replacePrevious()`
|
||||
|
||||
```javascript
|
||||
replacePrevious(route: object)
|
||||
```
|
||||
|
||||
Replace the route/view for the previous scene.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| route | object | No | The new route to will replace the previous scene. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `popToTop()`
|
||||
|
||||
```javascript
|
||||
popToTop()
|
||||
```
|
||||
|
||||
Go back to the topmost item in the navigation stack.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `popToRoute()`
|
||||
|
||||
```javascript
|
||||
popToRoute(route: object)
|
||||
```
|
||||
|
||||
Go back to the item for a particular route object.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| route | object | No | The new route to navigate to. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `replacePreviousAndPop()`
|
||||
|
||||
```javascript
|
||||
replacePreviousAndPop(route: object)
|
||||
```
|
||||
|
||||
Replaces the previous route/view and transitions back to it.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| route | object | No | The new route that replaces the previous scene. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `resetTo()`
|
||||
|
||||
```javascript
|
||||
resetTo(route: object)
|
||||
```
|
||||
|
||||
Replaces the top item and pop to it.
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| route | object | No | The new route that will replace the topmost item. |
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
---
|
||||
id: netinfo
|
||||
title: NetInfo
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/netinfo.html
|
||||
next: panresponder
|
||||
previous: linking
|
||||
---
|
||||
|
||||
NetInfo exposes info about online/offline status
|
||||
|
||||
```
|
||||
NetInfo.getConnectionInfo().then((connectionInfo) => {
|
||||
console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
|
||||
});
|
||||
function handleFirstConnectivityChange(connectionInfo) {
|
||||
console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
|
||||
NetInfo.removeEventListener(
|
||||
'connectionChange',
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.addEventListener(
|
||||
'connectionChange',
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
```
|
||||
|
||||
### ConnectionType enum
|
||||
|
||||
`ConnectionType` describes the type of connection the device is using to communicate with the network.
|
||||
|
||||
Cross platform values for `ConnectionType`:
|
||||
- `none` - device is offline
|
||||
- `wifi` - device is online and connected via wifi, or is the iOS simulator
|
||||
- `cellular` - device is connected via Edge, 3G, WiMax, or LTE
|
||||
- `unknown` - error case and the network status is unknown
|
||||
|
||||
Android-only values for `ConnectionType`:
|
||||
- `bluetooth` - device is connected via Bluetooth
|
||||
- `ethernet` - device is connected via Ethernet
|
||||
- `wimax` - device is connected via WiMAX
|
||||
|
||||
### EffectiveConnectionType enum
|
||||
|
||||
Cross platform values for `EffectiveConnectionType`:
|
||||
- `2g`
|
||||
- `3g`
|
||||
- `4g`
|
||||
- `unknown`
|
||||
|
||||
### Android
|
||||
|
||||
To request network info, you need to add the following line to your
|
||||
app's `AndroidManifest.xml`:
|
||||
|
||||
`<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />`
|
||||
|
||||
### isConnectionExpensive
|
||||
|
||||
Available on Android. Detect if the current active connection is metered or not. A network is
|
||||
classified as metered when the user is sensitive to heavy data usage on that connection due to
|
||||
monetary costs, data limitations or battery/performance issues.
|
||||
|
||||
```
|
||||
NetInfo.isConnectionExpensive()
|
||||
.then(isConnectionExpensive => {
|
||||
console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive'));
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
```
|
||||
|
||||
### isConnected
|
||||
|
||||
Available on all platforms. Asynchronously fetch a boolean to determine
|
||||
internet connectivity.
|
||||
|
||||
```
|
||||
NetInfo.isConnected.fetch().then(isConnected => {
|
||||
console.log('First, is ' + (isConnected ? 'online' : 'offline'));
|
||||
});
|
||||
function handleFirstConnectivityChange(isConnected) {
|
||||
console.log('Then, is ' + (isConnected ? 'online' : 'offline'));
|
||||
NetInfo.isConnected.removeEventListener(
|
||||
'connectionChange',
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
}
|
||||
NetInfo.isConnected.addEventListener(
|
||||
'connectionChange',
|
||||
handleFirstConnectivityChange
|
||||
);
|
||||
```
|
||||
|
||||
### Connectivity Types (deprecated)
|
||||
|
||||
The following connectivity types are deprecated. They're used by the deprecated APIs `fetch` and the `change` event.
|
||||
|
||||
iOS connectivity types (deprecated):
|
||||
- `none` - device is offline
|
||||
- `wifi` - device is online and connected via wifi, or is the iOS simulator
|
||||
- `cell` - device is connected via Edge, 3G, WiMax, or LTE
|
||||
- `unknown` - error case and the network status is unknown
|
||||
|
||||
Android connectivity types (deprecated).
|
||||
- `NONE` - device is offline
|
||||
- `BLUETOOTH` - The Bluetooth data connection.
|
||||
- `DUMMY` - Dummy data connection.
|
||||
- `ETHERNET` - The Ethernet data connection.
|
||||
- `MOBILE` - The Mobile data connection.
|
||||
- `MOBILE_DUN` - A DUN-specific Mobile data connection.
|
||||
- `MOBILE_HIPRI` - A High Priority Mobile data connection.
|
||||
- `MOBILE_MMS` - An MMS-specific Mobile data connection.
|
||||
- `MOBILE_SUPL` - A SUPL-specific Mobile data connection.
|
||||
- `VPN` - A virtual network using one or more native bearers. Requires API Level 21
|
||||
- `WIFI` - The WIFI data connection.
|
||||
- `WIMAX` - The WiMAX data connection.
|
||||
- `UNKNOWN` - Unknown data connection.
|
||||
|
||||
The rest of the connectivity types are hidden by the Android API, but can be used if necessary.
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`addEventListener`](docs/netinfo.html#addeventlistener)
|
||||
- [`removeEventListener`](docs/netinfo.html#removeeventlistener)
|
||||
- [`fetch`](docs/netinfo.html#fetch)
|
||||
- [`getConnectionInfo`](docs/netinfo.html#getconnectioninfo)
|
||||
- [`isConnectionExpensive`](docs/netinfo.html#isconnectionexpensive)
|
||||
|
||||
|
||||
### Properties
|
||||
|
||||
- [`isConnected`](docs/netinfo.html#isconnected)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `addEventListener()`
|
||||
|
||||
```javascript
|
||||
static addEventListener(eventName, handler)
|
||||
```
|
||||
|
||||
|
||||
Adds an event handler. Supported events:
|
||||
|
||||
- `connectionChange`: Fires when the network status changes. The argument to the event
|
||||
handler is an object with keys:
|
||||
- `type`: A `ConnectionType` (listed above)
|
||||
- `effectiveType`: An `EffectiveConnectionType` (listed above)
|
||||
- `change`: This event is deprecated. Listen to `connectionChange` instead. Fires when
|
||||
the network status changes. The argument to the event handler is one of the deprecated
|
||||
connectivity types listed above.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
static removeEventListener(eventName, handler)
|
||||
```
|
||||
|
||||
|
||||
Removes the listener for network status changes.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `fetch()`
|
||||
|
||||
```javascript
|
||||
static fetch()
|
||||
```
|
||||
|
||||
|
||||
This function is deprecated. Use `getConnectionInfo` instead. Returns a promise that
|
||||
resolves with one of the deprecated connectivity types listed above.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getConnectionInfo()`
|
||||
|
||||
```javascript
|
||||
static getConnectionInfo()
|
||||
```
|
||||
|
||||
|
||||
Returns a promise that resolves to an object with `type` and `effectiveType` keys
|
||||
whose values are a `ConnectionType` and an `EffectiveConnectionType`, (described above),
|
||||
respectively.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `isConnectionExpensive()`
|
||||
|
||||
```javascript
|
||||
static isConnectionExpensive()
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
---
|
||||
id: panresponder
|
||||
title: PanResponder
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/panresponder.html
|
||||
next: permissionsandroid
|
||||
previous: netinfo
|
||||
---
|
||||
|
||||
`PanResponder` reconciles several touches into a single gesture. It makes
|
||||
single-touch gestures resilient to extra touches, and can be used to
|
||||
recognize simple multi-touch gestures.
|
||||
|
||||
By default, `PanResponder` holds an `InteractionManager` handle to block
|
||||
long-running JS events from interrupting active gestures.
|
||||
|
||||
It provides a predictable wrapper of the responder handlers provided by the
|
||||
[gesture responder system](docs/gesture-responder-system.html).
|
||||
For each handler, it provides a new `gestureState` object alongside the
|
||||
native event object:
|
||||
|
||||
```
|
||||
onPanResponderMove: (event, gestureState) => {}
|
||||
```
|
||||
|
||||
A native event is a synthetic touch event with the following form:
|
||||
|
||||
- `nativeEvent`
|
||||
+ `changedTouches` - Array of all touch events that have changed since the last event
|
||||
+ `identifier` - The ID of the touch
|
||||
+ `locationX` - The X position of the touch, relative to the element
|
||||
+ `locationY` - The Y position of the touch, relative to the element
|
||||
+ `pageX` - The X position of the touch, relative to the root element
|
||||
+ `pageY` - The Y position of the touch, relative to the root element
|
||||
+ `target` - The node id of the element receiving the touch event
|
||||
+ `timestamp` - A time identifier for the touch, useful for velocity calculation
|
||||
+ `touches` - Array of all current touches on the screen
|
||||
|
||||
A `gestureState` object has the following:
|
||||
|
||||
- `stateID` - ID of the gestureState- persisted as long as there at least
|
||||
one touch on screen
|
||||
- `moveX` - the latest screen coordinates of the recently-moved touch
|
||||
- `moveY` - the latest screen coordinates of the recently-moved touch
|
||||
- `x0` - the screen coordinates of the responder grant
|
||||
- `y0` - the screen coordinates of the responder grant
|
||||
- `dx` - accumulated distance of the gesture since the touch started
|
||||
- `dy` - accumulated distance of the gesture since the touch started
|
||||
- `vx` - current velocity of the gesture
|
||||
- `vy` - current velocity of the gesture
|
||||
- `numberActiveTouches` - Number of touches currently on screen
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```
|
||||
componentWillMount: function() {
|
||||
this._panResponder = PanResponder.create({
|
||||
// Ask to be the responder:
|
||||
onStartShouldSetPanResponder: (evt, gestureState) => true,
|
||||
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
|
||||
onMoveShouldSetPanResponder: (evt, gestureState) => true,
|
||||
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
|
||||
|
||||
onPanResponderGrant: (evt, gestureState) => {
|
||||
// The gesture has started. Show visual feedback so the user knows
|
||||
// what is happening!
|
||||
|
||||
// gestureState.d{x,y} will be set to zero now
|
||||
},
|
||||
onPanResponderMove: (evt, gestureState) => {
|
||||
// The most recent move distance is gestureState.move{X,Y}
|
||||
|
||||
// The accumulated gesture distance since becoming responder is
|
||||
// gestureState.d{x,y}
|
||||
},
|
||||
onPanResponderTerminationRequest: (evt, gestureState) => true,
|
||||
onPanResponderRelease: (evt, gestureState) => {
|
||||
// The user has released all touches while this view is the
|
||||
// responder. This typically means a gesture has succeeded
|
||||
},
|
||||
onPanResponderTerminate: (evt, gestureState) => {
|
||||
// Another component has become the responder, so this gesture
|
||||
// should be cancelled
|
||||
},
|
||||
onShouldBlockNativeResponder: (evt, gestureState) => {
|
||||
// Returns whether this component should block native components from becoming the JS
|
||||
// responder. Returns true by default. Is currently only supported on android.
|
||||
return true;
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<View {...this._panResponder.panHandlers} />
|
||||
);
|
||||
},
|
||||
|
||||
```
|
||||
|
||||
### Working Example
|
||||
|
||||
To see it in action, try the
|
||||
[PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js)
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`create`](docs/panresponder.html#create)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `create()`
|
||||
|
||||
```javascript
|
||||
static create(config)
|
||||
```
|
||||
|
||||
|
||||
@param {object} config Enhanced versions of all of the responder callbacks
|
||||
that provide not only the typical `ResponderSyntheticEvent`, but also the
|
||||
`PanResponder` gesture state. Simply replace the word `Responder` with
|
||||
`PanResponder` in each of the typical `onResponder*` callbacks. For
|
||||
example, the `config` object would look like:
|
||||
|
||||
- `onMoveShouldSetPanResponder: (e, gestureState) => {...}`
|
||||
- `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}`
|
||||
- `onStartShouldSetPanResponder: (e, gestureState) => {...}`
|
||||
- `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}`
|
||||
- `onPanResponderReject: (e, gestureState) => {...}`
|
||||
- `onPanResponderGrant: (e, gestureState) => {...}`
|
||||
- `onPanResponderStart: (e, gestureState) => {...}`
|
||||
- `onPanResponderEnd: (e, gestureState) => {...}`
|
||||
- `onPanResponderRelease: (e, gestureState) => {...}`
|
||||
- `onPanResponderMove: (e, gestureState) => {...}`
|
||||
- `onPanResponderTerminate: (e, gestureState) => {...}`
|
||||
- `onPanResponderTerminationRequest: (e, gestureState) => {...}`
|
||||
- `onShouldBlockNativeResponder: (e, gestureState) => {...}`
|
||||
|
||||
In general, for events that have capture equivalents, we update the
|
||||
gestureState once in the capture phase and can use it in the bubble phase
|
||||
as well.
|
||||
|
||||
Be careful with onStartShould* callbacks. They only reflect updated
|
||||
`gestureState` for start/end events that bubble/capture to the Node.
|
||||
Once the node is the responder, you can rely on every start/end event
|
||||
being processed by the gesture and `gestureState` being updated
|
||||
accordingly. (numberActiveTouches) may not be totally accurate unless you
|
||||
are the responder.
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
---
|
||||
id: permissionsandroid
|
||||
title: PermissionsAndroid
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/permissionsandroid.html
|
||||
next: pixelratio
|
||||
previous: panresponder
|
||||
---
|
||||
|
||||
<div class="banner-crna-ejected">
|
||||
<h3>Project with Native Code Required</h3>
|
||||
<p>
|
||||
This API only works in projects made with <code>react-native init</code>
|
||||
or in those made with Create React Native App which have since ejected. For
|
||||
more information about ejecting, please see
|
||||
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
|
||||
the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
`PermissionsAndroid` provides access to Android M's new permissions model.
|
||||
Some permissions are granted by default when the application is installed
|
||||
so long as they appear in `AndroidManifest.xml`. However, "dangerous"
|
||||
permissions require a dialog prompt. You should use this module for those
|
||||
permissions.
|
||||
|
||||
On devices before SDK version 23, the permissions are automatically granted
|
||||
if they appear in the manifest, so `check` and `request`
|
||||
should always be true.
|
||||
|
||||
If a user has previously turned off a permission that you prompt for, the OS
|
||||
will advise your app to show a rationale for needing the permission. The
|
||||
optional `rationale` argument will show a dialog prompt only if
|
||||
necessary - otherwise the normal permission prompt will appear.
|
||||
|
||||
### Example
|
||||
```
|
||||
import { PermissionsAndroid } from 'react-native';
|
||||
|
||||
async function requestCameraPermission() {
|
||||
try {
|
||||
const granted = await PermissionsAndroid.request(
|
||||
PermissionsAndroid.PERMISSIONS.CAMERA,
|
||||
{
|
||||
'title': 'Cool Photo App Camera Permission',
|
||||
'message': 'Cool Photo App needs access to your camera ' +
|
||||
'so you can take awesome pictures.'
|
||||
}
|
||||
)
|
||||
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||||
console.log("You can use the camera")
|
||||
} else {
|
||||
console.log("Camera permission denied")
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(err)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`constructor`](docs/permissionsandroid.html#constructor)
|
||||
- [`checkPermission`](docs/permissionsandroid.html#checkpermission)
|
||||
- [`check`](docs/permissionsandroid.html#check)
|
||||
- [`requestPermission`](docs/permissionsandroid.html#requestpermission)
|
||||
- [`request`](docs/permissionsandroid.html#request)
|
||||
- [`requestMultiple`](docs/permissionsandroid.html#requestmultiple)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `constructor()`
|
||||
|
||||
```javascript
|
||||
constructor()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `checkPermission()`
|
||||
|
||||
```javascript
|
||||
checkPermission(permission)
|
||||
```
|
||||
|
||||
|
||||
DEPRECATED - use check
|
||||
|
||||
Returns a promise resolving to a boolean value as to whether the specified
|
||||
permissions has been granted
|
||||
|
||||
@deprecated
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `check()`
|
||||
|
||||
```javascript
|
||||
check(permission)
|
||||
```
|
||||
|
||||
|
||||
Returns a promise resolving to a boolean value as to whether the specified
|
||||
permissions has been granted
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `requestPermission()`
|
||||
|
||||
```javascript
|
||||
requestPermission(permission, rationale?)
|
||||
```
|
||||
|
||||
|
||||
DEPRECATED - use request
|
||||
|
||||
Prompts the user to enable a permission and returns a promise resolving to a
|
||||
boolean value indicating whether the user allowed or denied the request
|
||||
|
||||
If the optional rationale argument is included (which is an object with a
|
||||
`title` and `message`), this function checks with the OS whether it is
|
||||
necessary to show a dialog explaining why the permission is needed
|
||||
(https://developer.android.com/training/permissions/requesting.html#explain)
|
||||
and then shows the system permission dialog
|
||||
|
||||
@deprecated
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `request()`
|
||||
|
||||
```javascript
|
||||
request(permission, rationale?)
|
||||
```
|
||||
|
||||
|
||||
Prompts the user to enable a permission and returns a promise resolving to a
|
||||
string value indicating whether the user allowed or denied the request
|
||||
|
||||
If the optional rationale argument is included (which is an object with a
|
||||
`title` and `message`), this function checks with the OS whether it is
|
||||
necessary to show a dialog explaining why the permission is needed
|
||||
(https://developer.android.com/training/permissions/requesting.html#explain)
|
||||
and then shows the system permission dialog
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `requestMultiple()`
|
||||
|
||||
```javascript
|
||||
requestMultiple(permissions)
|
||||
```
|
||||
|
||||
|
||||
Prompts the user to enable multiple permissions in the same dialog and
|
||||
returns an object with the permissions as keys and strings as values
|
||||
indicating whether the user allowed or denied the request
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
---
|
||||
id: picker
|
||||
title: Picker
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/picker.html
|
||||
next: pickerios
|
||||
previous: navigatorios
|
||||
---
|
||||
Renders the native picker component on iOS and Android. Example:
|
||||
|
||||
<Picker
|
||||
selectedValue={this.state.language}
|
||||
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
|
||||
<Picker.Item label="Java" value="java" />
|
||||
<Picker.Item label="JavaScript" value="js" />
|
||||
</Picker>
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`onValueChange`](docs/picker.html#onvaluechange)
|
||||
- [`selectedValue`](docs/picker.html#selectedvalue)
|
||||
- [`style`](docs/picker.html#style)
|
||||
- [`testID`](docs/picker.html#testid)
|
||||
- [`enabled`](docs/picker.html#enabled)
|
||||
- [`mode`](docs/picker.html#mode)
|
||||
- [`prompt`](docs/picker.html#prompt)
|
||||
- [`itemStyle`](docs/picker.html#itemstyle)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `onValueChange`
|
||||
|
||||
Callback for when an item is selected. This is called with the following parameters:
|
||||
- `itemValue`: the `value` prop of the item that was selected
|
||||
- `itemPosition`: the index of the selected item in this picker
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `selectedValue`
|
||||
|
||||
Value matching value of one of the items. Can be a string or an integer.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| any | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `style`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| pickerStyleType | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
Used to locate this view in end-to-end tests.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `enabled`
|
||||
|
||||
If set to false, the picker will be disabled, i.e. the user will not be able to make a
|
||||
selection.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `mode`
|
||||
|
||||
On Android, specifies how to display the selection items when the user taps on the picker:
|
||||
|
||||
- 'dialog': Show a modal dialog. This is the default.
|
||||
- 'dropdown': Shows a dropdown anchored to the picker view
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('dialog', 'dropdown') | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `prompt`
|
||||
|
||||
Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| string | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `itemStyle`
|
||||
|
||||
Style to apply to each of the item labels.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| itemStylePropType | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
id: pickerios
|
||||
title: PickerIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/pickerios.html
|
||||
next: progressbarandroid
|
||||
previous: picker
|
||||
---
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`itemStyle`](docs/pickerios.html#itemstyle)
|
||||
- [`onValueChange`](docs/pickerios.html#onvaluechange)
|
||||
- [`selectedValue`](docs/pickerios.html#selectedvalue)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `itemStyle`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| itemStylePropType | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onValueChange`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `selectedValue`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| any | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
---
|
||||
id: pixelratio
|
||||
title: PixelRatio
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/pixelratio.html
|
||||
next: pushnotificationios
|
||||
previous: permissionsandroid
|
||||
---
|
||||
|
||||
PixelRatio class gives access to the device pixel density.
|
||||
|
||||
## Fetching a correctly sized image
|
||||
|
||||
You should get a higher resolution image if you are on a high pixel density
|
||||
device. A good rule of thumb is to multiply the size of the image you display
|
||||
by the pixel ratio.
|
||||
|
||||
```
|
||||
var image = getImage({
|
||||
width: PixelRatio.getPixelSizeForLayoutSize(200),
|
||||
height: PixelRatio.getPixelSizeForLayoutSize(100),
|
||||
});
|
||||
<Image source={image} style={{width: 200, height: 100}} />
|
||||
```
|
||||
|
||||
## Pixel grid snapping
|
||||
|
||||
In iOS, you can specify positions and dimensions for elements with arbitrary
|
||||
precision, for example 29.674825. But, ultimately the physical display only
|
||||
have a fixed number of pixels, for example 640×960 for iPhone 4 or 750×1334
|
||||
for iPhone 6. iOS tries to be as faithful as possible to the user value by
|
||||
spreading one original pixel into multiple ones to trick the eye. The
|
||||
downside of this technique is that it makes the resulting element look
|
||||
blurry.
|
||||
|
||||
In practice, we found out that developers do not want this feature and they
|
||||
have to work around it by doing manual rounding in order to avoid having
|
||||
blurry elements. In React Native, we are rounding all the pixels
|
||||
automatically.
|
||||
|
||||
We have to be careful when to do this rounding. You never want to work with
|
||||
rounded and unrounded values at the same time as you're going to accumulate
|
||||
rounding errors. Having even one rounding error is deadly because a one
|
||||
pixel border may vanish or be twice as big.
|
||||
|
||||
In React Native, everything in JavaScript and within the layout engine works
|
||||
with arbitrary precision numbers. It's only when we set the position and
|
||||
dimensions of the native element on the main thread that we round. Also,
|
||||
rounding is done relative to the root rather than the parent, again to avoid
|
||||
accumulating rounding errors.
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`get`](docs/pixelratio.html#get)
|
||||
- [`getFontScale`](docs/pixelratio.html#getfontscale)
|
||||
- [`getPixelSizeForLayoutSize`](docs/pixelratio.html#getpixelsizeforlayoutsize)
|
||||
- [`roundToNearestPixel`](docs/pixelratio.html#roundtonearestpixel)
|
||||
- [`startDetecting`](docs/pixelratio.html#startdetecting)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `get()`
|
||||
|
||||
```javascript
|
||||
static get()
|
||||
```
|
||||
|
||||
|
||||
Returns the device pixel density. Some examples:
|
||||
|
||||
- PixelRatio.get() === 1
|
||||
- mdpi Android devices (160 dpi)
|
||||
- PixelRatio.get() === 1.5
|
||||
- hdpi Android devices (240 dpi)
|
||||
- PixelRatio.get() === 2
|
||||
- iPhone 4, 4S
|
||||
- iPhone 5, 5c, 5s
|
||||
- iPhone 6
|
||||
- xhdpi Android devices (320 dpi)
|
||||
- PixelRatio.get() === 3
|
||||
- iPhone 6 plus
|
||||
- xxhdpi Android devices (480 dpi)
|
||||
- PixelRatio.get() === 3.5
|
||||
- Nexus 6
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getFontScale()`
|
||||
|
||||
```javascript
|
||||
static getFontScale()
|
||||
```
|
||||
|
||||
|
||||
Returns the scaling factor for font sizes. This is the ratio that is used to calculate the
|
||||
absolute font size, so any elements that heavily depend on that should use this to do
|
||||
calculations.
|
||||
|
||||
If a font scale is not set, this returns the device pixel ratio.
|
||||
|
||||
Currently this is only implemented on Android and reflects the user preference set in
|
||||
Settings > Display > Font size, on iOS it will always return the default pixel ratio.
|
||||
@platform android
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getPixelSizeForLayoutSize()`
|
||||
|
||||
```javascript
|
||||
static getPixelSizeForLayoutSize(layoutSize)
|
||||
```
|
||||
|
||||
|
||||
Converts a layout size (dp) to pixel size (px).
|
||||
|
||||
Guaranteed to return an integer number.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `roundToNearestPixel()`
|
||||
|
||||
```javascript
|
||||
static roundToNearestPixel(layoutSize)
|
||||
```
|
||||
|
||||
|
||||
Rounds a layout size (dp) to the nearest layout size that corresponds to
|
||||
an integer number of pixels. For example, on a device with a PixelRatio
|
||||
of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to
|
||||
exactly (8.33 * 3) = 25 pixels.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `startDetecting()`
|
||||
|
||||
```javascript
|
||||
static startDetecting()
|
||||
```
|
||||
|
||||
// No-op for iOS, but used on the web. Should not be documented.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
---
|
||||
id: progressbarandroid
|
||||
title: ProgressBarAndroid
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/progressbarandroid.html
|
||||
next: progressviewios
|
||||
previous: pickerios
|
||||
---
|
||||
React component that wraps the Android-only `ProgressBar`. This component is used to indicate
|
||||
that the app is loading or there is some activity in the app.
|
||||
|
||||
Example:
|
||||
|
||||
```
|
||||
render: function() {
|
||||
var progressBar =
|
||||
<View style={styles.container}>
|
||||
<ProgressBar styleAttr="Inverse" />
|
||||
</View>;
|
||||
|
||||
return (
|
||||
<MyLoadingComponent
|
||||
componentView={componentView}
|
||||
loadingView={progressBar}
|
||||
style={styles.loadingComponent}
|
||||
/>
|
||||
);
|
||||
},
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`animating`](docs/progressbarandroid.html#animating)
|
||||
- [`color`](docs/progressbarandroid.html#color)
|
||||
- [`indeterminate`](docs/progressbarandroid.html#indeterminate)
|
||||
- [`progress`](docs/progressbarandroid.html#progress)
|
||||
- [`styleAttr`](docs/progressbarandroid.html#styleattr)
|
||||
- [`testID`](docs/progressbarandroid.html#testid)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `animating`
|
||||
|
||||
Whether to show the ProgressBar (true, the default) or hide it (false).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `color`
|
||||
|
||||
Color of the progress bar.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `indeterminate`
|
||||
|
||||
If the progress bar will show indeterminate progress. Note that this
|
||||
can only be false if styleAttr is Horizontal.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| indeterminateType | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `progress`
|
||||
|
||||
The progress value (between 0 and 1).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `styleAttr`
|
||||
|
||||
Style of the ProgressBar. One of:
|
||||
|
||||
- Horizontal
|
||||
- Normal (default)
|
||||
- Small
|
||||
- Large
|
||||
- Inverse
|
||||
- SmallInverse
|
||||
- LargeInverse
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
Used to locate this view in end-to-end tests.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
---
|
||||
id: progressviewios
|
||||
title: ProgressViewIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/progressviewios.html
|
||||
next: refreshcontrol
|
||||
previous: progressbarandroid
|
||||
---
|
||||
Use `ProgressViewIOS` to render a UIProgressView on iOS.
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`progress`](docs/progressviewios.html#progress)
|
||||
- [`progressImage`](docs/progressviewios.html#progressimage)
|
||||
- [`progressTintColor`](docs/progressviewios.html#progresstintcolor)
|
||||
- [`progressViewStyle`](docs/progressviewios.html#progressviewstyle)
|
||||
- [`trackImage`](docs/progressviewios.html#trackimage)
|
||||
- [`trackTintColor`](docs/progressviewios.html#tracktintcolor)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `progress`
|
||||
|
||||
The progress value (between 0 and 1).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `progressImage`
|
||||
|
||||
A stretchable image to display as the progress bar.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Image.propTypes.source | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `progressTintColor`
|
||||
|
||||
The tint color of the progress bar itself.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `progressViewStyle`
|
||||
|
||||
The progress bar style.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('default', 'bar') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `trackImage`
|
||||
|
||||
A stretchable image to display behind the progress bar.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Image.propTypes.source | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `trackTintColor`
|
||||
|
||||
The tint color of the progress bar track.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,534 @@
|
|||
---
|
||||
id: pushnotificationios
|
||||
title: PushNotificationIOS
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/pushnotificationios.html
|
||||
next: settings
|
||||
previous: pixelratio
|
||||
---
|
||||
|
||||
<div class="banner-crna-ejected">
|
||||
<h3>Projects with Native Code Only</h3>
|
||||
<p>
|
||||
This section only applies to projects made with <code>react-native init</code>
|
||||
or to those made with Create React Native App which have since ejected. For
|
||||
more information about ejecting, please see
|
||||
the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on
|
||||
the Create React Native App repository.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Handle push notifications for your app, including permission handling and
|
||||
icon badge number.
|
||||
|
||||
To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6)
|
||||
and your server-side system.
|
||||
|
||||
[Manually link](docs/linking-libraries-ios.html#manual-linking) the PushNotificationIOS library
|
||||
|
||||
- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj`
|
||||
- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a`
|
||||
|
||||
Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate.
|
||||
|
||||
At the top of your `AppDelegate.m`:
|
||||
|
||||
`#import <React/RCTPushNotificationManager.h>`
|
||||
|
||||
And then in your AppDelegate implementation add the following:
|
||||
|
||||
```
|
||||
// Required to register for notifications
|
||||
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
|
||||
{
|
||||
[RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
|
||||
}
|
||||
// Required for the register event.
|
||||
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
|
||||
{
|
||||
[RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
|
||||
}
|
||||
// Required for the notification event. You must call the completion handler after handling the remote notification.
|
||||
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
|
||||
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
|
||||
{
|
||||
[RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
|
||||
}
|
||||
// Required for the registrationError event.
|
||||
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
|
||||
{
|
||||
[RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
|
||||
}
|
||||
// Required for the localNotification event.
|
||||
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
|
||||
{
|
||||
[RCTPushNotificationManager didReceiveLocalNotification:notification];
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`=`](docs/pushnotificationios.html#)
|
||||
- [`scheduleLocalNotification`](docs/pushnotificationios.html#schedulelocalnotification)
|
||||
- [`cancelAllLocalNotifications`](docs/pushnotificationios.html#cancelalllocalnotifications)
|
||||
- [`removeAllDeliveredNotifications`](docs/pushnotificationios.html#removealldeliverednotifications)
|
||||
- [`getDeliveredNotifications`](docs/pushnotificationios.html#getdeliverednotifications)
|
||||
- [`removeDeliveredNotifications`](docs/pushnotificationios.html#removedeliverednotifications)
|
||||
- [`setApplicationIconBadgeNumber`](docs/pushnotificationios.html#setapplicationiconbadgenumber)
|
||||
- [`getApplicationIconBadgeNumber`](docs/pushnotificationios.html#getapplicationiconbadgenumber)
|
||||
- [`cancelLocalNotifications`](docs/pushnotificationios.html#cancellocalnotifications)
|
||||
- [`getScheduledLocalNotifications`](docs/pushnotificationios.html#getscheduledlocalnotifications)
|
||||
- [`addEventListener`](docs/pushnotificationios.html#addeventlistener)
|
||||
- [`removeEventListener`](docs/pushnotificationios.html#removeeventlistener)
|
||||
- [`requestPermissions`](docs/pushnotificationios.html#requestpermissions)
|
||||
- [`abandonPermissions`](docs/pushnotificationios.html#abandonpermissions)
|
||||
- [`checkPermissions`](docs/pushnotificationios.html#checkpermissions)
|
||||
- [`getInitialNotification`](docs/pushnotificationios.html#getinitialnotification)
|
||||
- [`constructor`](docs/pushnotificationios.html#constructor)
|
||||
- [`finish`](docs/pushnotificationios.html#finish)
|
||||
- [`getMessage`](docs/pushnotificationios.html#getmessage)
|
||||
- [`getSound`](docs/pushnotificationios.html#getsound)
|
||||
- [`getCategory`](docs/pushnotificationios.html#getcategory)
|
||||
- [`getAlert`](docs/pushnotificationios.html#getalert)
|
||||
- [`getContentAvailable`](docs/pushnotificationios.html#getcontentavailable)
|
||||
- [`getBadgeCount`](docs/pushnotificationios.html#getbadgecount)
|
||||
- [`getData`](docs/pushnotificationios.html#getdata)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `=()`
|
||||
|
||||
```javascript
|
||||
=(NewData, NoData, ResultFailed, }, static, (, :)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scheduleLocalNotification()`
|
||||
|
||||
```javascript
|
||||
static scheduleLocalNotification(details)
|
||||
```
|
||||
|
||||
|
||||
Schedules the localNotification for future presentation.
|
||||
|
||||
details is an object containing:
|
||||
|
||||
- `fireDate` : The date and time when the system should deliver the notification.
|
||||
- `alertTitle` : The text displayed as the title of the notification alert.
|
||||
- `alertBody` : The message displayed in the notification alert.
|
||||
- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view";
|
||||
- `soundName` : The sound played when the notification is fired (optional).
|
||||
- `isSilent` : If true, the notification will appear without sound (optional).
|
||||
- `category` : The category of this notification, required for actionable notifications (optional).
|
||||
- `userInfo` : An optional object containing additional notification data.
|
||||
- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge.
|
||||
- `repeatInterval` : The interval to repeat as a string. Possible values: `minute`, `hour`, `day`, `week`, `month`, `year`.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `cancelAllLocalNotifications()`
|
||||
|
||||
```javascript
|
||||
static cancelAllLocalNotifications()
|
||||
```
|
||||
|
||||
|
||||
Cancels all scheduled localNotifications
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeAllDeliveredNotifications()`
|
||||
|
||||
```javascript
|
||||
static removeAllDeliveredNotifications()
|
||||
```
|
||||
|
||||
|
||||
Remove all delivered notifications from Notification Center
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getDeliveredNotifications()`
|
||||
|
||||
```javascript
|
||||
static getDeliveredNotifications(callback)
|
||||
```
|
||||
|
||||
|
||||
Provides you with a list of the app’s notifications that are still displayed in Notification Center
|
||||
|
||||
@param callback Function which receive an array of delivered notifications
|
||||
|
||||
A delivered notification is an object containing:
|
||||
|
||||
- `identifier` : The identifier of this notification.
|
||||
- `title` : The title of this notification.
|
||||
- `body` : The body of this notification.
|
||||
- `category` : The category of this notification, if has one.
|
||||
- `userInfo` : An optional object containing additional notification data.
|
||||
- `thread-id` : The thread identifier of this notification, if has one.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeDeliveredNotifications()`
|
||||
|
||||
```javascript
|
||||
static removeDeliveredNotifications(identifiers)
|
||||
```
|
||||
|
||||
|
||||
Removes the specified notifications from Notification Center
|
||||
|
||||
@param identifiers Array of notification identifiers
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setApplicationIconBadgeNumber()`
|
||||
|
||||
```javascript
|
||||
static setApplicationIconBadgeNumber(number)
|
||||
```
|
||||
|
||||
|
||||
Sets the badge number for the app icon on the home screen
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getApplicationIconBadgeNumber()`
|
||||
|
||||
```javascript
|
||||
static getApplicationIconBadgeNumber(callback)
|
||||
```
|
||||
|
||||
|
||||
Gets the current badge number for the app icon on the home screen
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `cancelLocalNotifications()`
|
||||
|
||||
```javascript
|
||||
static cancelLocalNotifications(userInfo)
|
||||
```
|
||||
|
||||
|
||||
Cancel local notifications.
|
||||
|
||||
Optionally restricts the set of canceled notifications to those
|
||||
notifications whose `userInfo` fields match the corresponding fields
|
||||
in the `userInfo` argument.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getScheduledLocalNotifications()`
|
||||
|
||||
```javascript
|
||||
static getScheduledLocalNotifications(callback)
|
||||
```
|
||||
|
||||
|
||||
Gets the local notifications that are currently scheduled.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `addEventListener()`
|
||||
|
||||
```javascript
|
||||
static addEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Attaches a listener to remote or local notification events while the app is running
|
||||
in the foreground or the background.
|
||||
|
||||
Valid events are:
|
||||
|
||||
- `notification` : Fired when a remote notification is received. The
|
||||
handler will be invoked with an instance of `PushNotificationIOS`.
|
||||
- `localNotification` : Fired when a local notification is received. The
|
||||
handler will be invoked with an instance of `PushNotificationIOS`.
|
||||
- `register`: Fired when the user registers for remote notifications. The
|
||||
handler will be invoked with a hex string representing the deviceToken.
|
||||
- `registrationError`: Fired when the user fails to register for remote
|
||||
notifications. Typically occurs when APNS is having issues, or the device
|
||||
is a simulator. The handler will be invoked with
|
||||
{message: string, code: number, details: any}.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeEventListener()`
|
||||
|
||||
```javascript
|
||||
static removeEventListener(type, handler)
|
||||
```
|
||||
|
||||
|
||||
Removes the event listener. Do this in `componentWillUnmount` to prevent
|
||||
memory leaks
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `requestPermissions()`
|
||||
|
||||
```javascript
|
||||
static requestPermissions(permissions?)
|
||||
```
|
||||
|
||||
|
||||
Requests notification permissions from iOS, prompting the user's
|
||||
dialog box. By default, it will request all notification permissions, but
|
||||
a subset of these can be requested by passing a map of requested
|
||||
permissions.
|
||||
The following permissions are supported:
|
||||
|
||||
- `alert`
|
||||
- `badge`
|
||||
- `sound`
|
||||
|
||||
If a map is provided to the method, only the permissions with truthy values
|
||||
will be requested.
|
||||
|
||||
This method returns a promise that will resolve when the user accepts,
|
||||
rejects, or if the permissions were previously rejected. The promise
|
||||
resolves to the current state of the permission.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `abandonPermissions()`
|
||||
|
||||
```javascript
|
||||
static abandonPermissions()
|
||||
```
|
||||
|
||||
|
||||
Unregister for all remote notifications received via Apple Push Notification service.
|
||||
|
||||
You should call this method in rare circumstances only, such as when a new version of
|
||||
the app removes support for all types of remote notifications. Users can temporarily
|
||||
prevent apps from receiving remote notifications through the Notifications section of
|
||||
the Settings app. Apps unregistered through this method can always re-register.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `checkPermissions()`
|
||||
|
||||
```javascript
|
||||
static checkPermissions(callback)
|
||||
```
|
||||
|
||||
|
||||
See what push permissions are currently enabled. `callback` will be
|
||||
invoked with a `permissions` object:
|
||||
|
||||
- `alert` :boolean
|
||||
- `badge` :boolean
|
||||
- `sound` :boolean
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getInitialNotification()`
|
||||
|
||||
```javascript
|
||||
static getInitialNotification()
|
||||
```
|
||||
|
||||
|
||||
This method returns a promise that resolves to either the notification
|
||||
object if the app was launched by a push notification, or `null` otherwise.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `constructor()`
|
||||
|
||||
```javascript
|
||||
constructor(nativeNotif)
|
||||
```
|
||||
|
||||
|
||||
You will never need to instantiate `PushNotificationIOS` yourself.
|
||||
Listening to the `notification` event and invoking
|
||||
`getInitialNotification` is sufficient
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `finish()`
|
||||
|
||||
```javascript
|
||||
finish(fetchResult)
|
||||
```
|
||||
|
||||
|
||||
This method is available for remote notifications that have been received via:
|
||||
`application:didReceiveRemoteNotification:fetchCompletionHandler:`
|
||||
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIApplicationDelegate_Protocol/#//apple_ref/occ/intfm/UIApplicationDelegate/application:didReceiveRemoteNotification:fetchCompletionHandler:
|
||||
|
||||
Call this to execute when the remote notification handling is complete. When
|
||||
calling this block, pass in the fetch result value that best describes
|
||||
the results of your operation. You *must* call this handler and should do so
|
||||
as soon as possible. For a list of possible values, see `PushNotificationIOS.FetchResult`.
|
||||
|
||||
If you do not call this method your background remote notifications could
|
||||
be throttled, to read more about it see the above documentation link.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getMessage()`
|
||||
|
||||
```javascript
|
||||
getMessage()
|
||||
```
|
||||
|
||||
|
||||
An alias for `getAlert` to get the notification's main message string
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getSound()`
|
||||
|
||||
```javascript
|
||||
getSound()
|
||||
```
|
||||
|
||||
|
||||
Gets the sound string from the `aps` object
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getCategory()`
|
||||
|
||||
```javascript
|
||||
getCategory()
|
||||
```
|
||||
|
||||
|
||||
Gets the category string from the `aps` object
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getAlert()`
|
||||
|
||||
```javascript
|
||||
getAlert()
|
||||
```
|
||||
|
||||
|
||||
Gets the notification's main message from the `aps` object
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getContentAvailable()`
|
||||
|
||||
```javascript
|
||||
getContentAvailable()
|
||||
```
|
||||
|
||||
|
||||
Gets the content-available number from the `aps` object
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getBadgeCount()`
|
||||
|
||||
```javascript
|
||||
getBadgeCount()
|
||||
```
|
||||
|
||||
|
||||
Gets the badge count number from the `aps` object
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `getData()`
|
||||
|
||||
```javascript
|
||||
getData()
|
||||
```
|
||||
|
||||
|
||||
Gets the data object on the notif
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
---
|
||||
id: refreshcontrol
|
||||
title: RefreshControl
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/refreshcontrol.html
|
||||
next: scrollview
|
||||
previous: progressviewios
|
||||
---
|
||||
This component is used inside a ScrollView or ListView to add pull to refresh
|
||||
functionality. When the ScrollView is at `scrollY: 0`, swiping down
|
||||
triggers an `onRefresh` event.
|
||||
|
||||
### Usage example
|
||||
|
||||
``` js
|
||||
class RefreshableList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
refreshing: false,
|
||||
};
|
||||
}
|
||||
|
||||
_onRefresh() {
|
||||
this.setState({refreshing: true});
|
||||
fetchData().then(() => {
|
||||
this.setState({refreshing: false});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ListView
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={this.state.refreshing}
|
||||
onRefresh={this._onRefresh.bind(this)}
|
||||
/>
|
||||
}
|
||||
...
|
||||
>
|
||||
...
|
||||
</ListView>
|
||||
);
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
__Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
|
||||
in the `onRefresh` function otherwise the refresh indicator will stop immediately.
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`refreshing`](docs/refreshcontrol.html#refreshing)
|
||||
- [`onRefresh`](docs/refreshcontrol.html#onrefresh)
|
||||
- [`colors`](docs/refreshcontrol.html#colors)
|
||||
- [`enabled`](docs/refreshcontrol.html#enabled)
|
||||
- [`progressBackgroundColor`](docs/refreshcontrol.html#progressbackgroundcolor)
|
||||
- [`progressViewOffset`](docs/refreshcontrol.html#progressviewoffset)
|
||||
- [`size`](docs/refreshcontrol.html#size)
|
||||
- [`tintColor`](docs/refreshcontrol.html#tintcolor)
|
||||
- [`title`](docs/refreshcontrol.html#title)
|
||||
- [`titleColor`](docs/refreshcontrol.html#titlecolor)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `refreshing`
|
||||
|
||||
Whether the view should be indicating an active refresh.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | Yes |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onRefresh`
|
||||
|
||||
Called when the view starts refreshing.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `colors`
|
||||
|
||||
The colors (at least one) that will be used to draw the refresh indicator.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| array of [color](docs/colors.html) | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `enabled`
|
||||
|
||||
Whether the pull to refresh functionality is enabled.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `progressBackgroundColor`
|
||||
|
||||
The background color of the refresh indicator.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `progressViewOffset`
|
||||
|
||||
Progress view top offset
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `size`
|
||||
|
||||
Size of the refresh indicator, see RefreshControl.SIZE.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `tintColor`
|
||||
|
||||
The color of the refresh indicator.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `title`
|
||||
|
||||
The title displayed under the refresh indicator.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| string | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `titleColor`
|
||||
|
||||
Title color.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Running On Device
|
|||
layout: docs
|
||||
category: Guides
|
||||
permalink: docs/running-on-device.html
|
||||
banner: ejected
|
||||
next: upgrading
|
||||
previous: integration-with-existing-apps
|
||||
---
|
|
@ -4,7 +4,6 @@ title: Running On Simulator
|
|||
layout: docs
|
||||
category: Guides (iOS)
|
||||
permalink: docs/running-on-simulator-ios.html
|
||||
banner: ejected
|
||||
next: communication-ios
|
||||
previous: linking-libraries-ios
|
||||
---
|
|
@ -0,0 +1,863 @@
|
|||
---
|
||||
id: scrollview
|
||||
title: ScrollView
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/scrollview.html
|
||||
next: sectionlist
|
||||
previous: refreshcontrol
|
||||
---
|
||||
Component that wraps platform ScrollView while providing
|
||||
integration with touch locking "responder" system.
|
||||
|
||||
Keep in mind that ScrollViews must have a bounded height in order to work,
|
||||
since they contain unbounded-height children into a bounded container (via
|
||||
a scroll interaction). In order to bound the height of a ScrollView, either
|
||||
set the height of the view directly (discouraged) or make sure all parent
|
||||
views have bounded height. Forgetting to transfer `{flex: 1}` down the
|
||||
view stack can lead to errors here, which the element inspector makes
|
||||
easy to debug.
|
||||
|
||||
Doesn't yet support other contained responders from blocking this scroll
|
||||
view from becoming the responder.
|
||||
|
||||
|
||||
`<ScrollView>` vs [`<FlatList>`](/react-native/docs/flatlist.html) - which one to use?
|
||||
|
||||
`ScrollView` simply renders all its react child components at once. That
|
||||
makes it very easy to understand and use.
|
||||
|
||||
On the other hand, this has a performance downside. Imagine you have a very
|
||||
long list of items you want to display, maybe several screens worth of
|
||||
content. Creating JS components and native views for everything all at once,
|
||||
much of which may not even be shown, will contribute to slow rendering and
|
||||
increased memory usage.
|
||||
|
||||
This is where `FlatList` comes into play. `FlatList` renders items lazily,
|
||||
just when they are about to appear, and removes items that scroll way off
|
||||
screen to save memory and processing time.
|
||||
|
||||
`FlatList` is also handy if you want to render separators between your items,
|
||||
multiple columns, infinite scroll loading, or any number of other features it
|
||||
supports out of the box.
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`alwaysBounceVertical`](docs/scrollview.html#alwaysbouncevertical)
|
||||
- [`contentContainerStyle`](docs/scrollview.html#contentcontainerstyle)
|
||||
- [`keyboardDismissMode`](docs/scrollview.html#keyboarddismissmode)
|
||||
- [`keyboardShouldPersistTaps`](docs/scrollview.html#keyboardshouldpersisttaps)
|
||||
- [`onContentSizeChange`](docs/scrollview.html#oncontentsizechange)
|
||||
- [`onMomentumScrollBegin`](docs/scrollview.html#onmomentumscrollbegin)
|
||||
- [`onMomentumScrollEnd`](docs/scrollview.html#onmomentumscrollend)
|
||||
- [`onScroll`](docs/scrollview.html#onscroll)
|
||||
- [`pagingEnabled`](docs/scrollview.html#pagingenabled)
|
||||
- [`refreshControl`](docs/scrollview.html#refreshcontrol)
|
||||
- [`removeClippedSubviews`](docs/scrollview.html#removeclippedsubviews)
|
||||
- [`scrollEnabled`](docs/scrollview.html#scrollenabled)
|
||||
- [`showsHorizontalScrollIndicator`](docs/scrollview.html#showshorizontalscrollindicator)
|
||||
- [`showsVerticalScrollIndicator`](docs/scrollview.html#showsverticalscrollindicator)
|
||||
- [`stickyHeaderIndices`](docs/scrollview.html#stickyheaderindices)
|
||||
- [`endFillColor`](docs/scrollview.html#endfillcolor)
|
||||
- [`overScrollMode`](docs/scrollview.html#overscrollmode)
|
||||
- [`scrollPerfTag`](docs/scrollview.html#scrollperftag)
|
||||
- [`DEPRECATED_sendUpdatedChildFrames`](docs/scrollview.html#deprecated-sendupdatedchildframes)
|
||||
- [`alwaysBounceHorizontal`](docs/scrollview.html#alwaysbouncehorizontal)
|
||||
- [`horizontal`](docs/scrollview.html#horizontal)
|
||||
- [`automaticallyAdjustContentInsets`](docs/scrollview.html#automaticallyadjustcontentinsets)
|
||||
- [`bounces`](docs/scrollview.html#bounces)
|
||||
- [`bouncesZoom`](docs/scrollview.html#bounceszoom)
|
||||
- [`canCancelContentTouches`](docs/scrollview.html#cancancelcontenttouches)
|
||||
- [`centerContent`](docs/scrollview.html#centercontent)
|
||||
- [`contentInset`](docs/scrollview.html#contentinset)
|
||||
- [`contentInsetAdjustmentBehavior`](docs/scrollview.html#contentinsetadjustmentbehavior)
|
||||
- [`contentOffset`](docs/scrollview.html#contentoffset)
|
||||
- [`decelerationRate`](docs/scrollview.html#decelerationrate)
|
||||
- [`directionalLockEnabled`](docs/scrollview.html#directionallockenabled)
|
||||
- [`indicatorStyle`](docs/scrollview.html#indicatorstyle)
|
||||
- [`maximumZoomScale`](docs/scrollview.html#maximumzoomscale)
|
||||
- [`minimumZoomScale`](docs/scrollview.html#minimumzoomscale)
|
||||
- [`pinchGestureEnabled`](docs/scrollview.html#pinchgestureenabled)
|
||||
- [`scrollEventThrottle`](docs/scrollview.html#scrolleventthrottle)
|
||||
- [`scrollIndicatorInsets`](docs/scrollview.html#scrollindicatorinsets)
|
||||
- [`scrollsToTop`](docs/scrollview.html#scrollstotop)
|
||||
- [`snapToAlignment`](docs/scrollview.html#snaptoalignment)
|
||||
- [`snapToInterval`](docs/scrollview.html#snaptointerval)
|
||||
- [`zoomScale`](docs/scrollview.html#zoomscale)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`scrollTo`](docs/scrollview.html#scrollto)
|
||||
- [`scrollToEnd`](docs/scrollview.html#scrolltoend)
|
||||
- [`scrollWithoutAnimationTo`](docs/scrollview.html#scrollwithoutanimationto)
|
||||
- [`flashScrollIndicators`](docs/scrollview.html#flashscrollindicators)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `alwaysBounceVertical`
|
||||
|
||||
When true, the scroll view bounces vertically when it reaches the end
|
||||
even if the content is smaller than the scroll view itself. The default
|
||||
value is false when `horizontal={true}` and true otherwise.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `contentContainerStyle`
|
||||
|
||||
These styles will be applied to the scroll view content container which
|
||||
wraps all of the child views. Example:
|
||||
|
||||
```
|
||||
return (
|
||||
<ScrollView contentContainerStyle={styles.contentContainer}>
|
||||
</ScrollView>
|
||||
);
|
||||
...
|
||||
const styles = StyleSheet.create({
|
||||
contentContainer: {
|
||||
paddingVertical: 20
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| StyleSheetPropType(ViewStylePropTypes) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `keyboardDismissMode`
|
||||
|
||||
Determines whether the keyboard gets dismissed in response to a drag.
|
||||
|
||||
*Cross platform*
|
||||
|
||||
- `'none'` (the default), drags do not dismiss the keyboard.
|
||||
- `'on-drag'`, the keyboard is dismissed when a drag begins.
|
||||
|
||||
*iOS Only*
|
||||
|
||||
- `'interactive'`, the keyboard is dismissed interactively with the drag and moves in
|
||||
synchrony with the touch; dragging upwards cancels the dismissal.
|
||||
On android this is not supported and it will have the same behavior as 'none'.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('none', 'on-drag', 'interactive') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `keyboardShouldPersistTaps`
|
||||
|
||||
Determines when the keyboard should stay visible after a tap.
|
||||
|
||||
- `'never'` (the default), tapping outside of the focused text input when the keyboard
|
||||
is up dismisses the keyboard. When this happens, children won't receive the tap.
|
||||
- `'always'`, the keyboard will not dismiss automatically, and the scroll view will not
|
||||
catch taps, but children of the scroll view can catch taps.
|
||||
- `'handled'`, the keyboard will not dismiss automatically when the tap was handled by
|
||||
a children, (or captured by an ancestor).
|
||||
- `false`, deprecated, use 'never' instead
|
||||
- `true`, deprecated, use 'always' instead
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('always', 'never', 'handled', false, true) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onContentSizeChange`
|
||||
|
||||
Called when scrollable content view of the ScrollView changes.
|
||||
|
||||
Handler function is passed the content width and content height as parameters:
|
||||
`(contentWidth, contentHeight)`
|
||||
|
||||
It's implemented using onLayout handler attached to the content container
|
||||
which this ScrollView renders.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onMomentumScrollBegin`
|
||||
|
||||
Called when the momentum scroll starts (scroll which occurs as the ScrollView glides to a stop).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onMomentumScrollEnd`
|
||||
|
||||
Called when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onScroll`
|
||||
|
||||
Fires at most once per frame during scrolling. The frequency of the
|
||||
events can be controlled using the `scrollEventThrottle` prop.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `pagingEnabled`
|
||||
|
||||
When true, the scroll view stops on multiples of the scroll view's size
|
||||
when scrolling. This can be used for horizontal pagination. The default
|
||||
value is false.
|
||||
|
||||
Note: Vertical pagination is not supported on Android.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `refreshControl`
|
||||
|
||||
A RefreshControl component, used to provide pull-to-refresh
|
||||
functionality for the ScrollView. Only works for vertical ScrollViews
|
||||
(`horizontal` prop must be `false`).
|
||||
|
||||
See [RefreshControl](docs/refreshcontrol.html).
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| element | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `removeClippedSubviews`
|
||||
|
||||
Experimental: When true, offscreen child views (whose `overflow` value is
|
||||
`hidden`) are removed from their native backing superview when offscreen.
|
||||
This can improve scrolling performance on long lists. The default value is
|
||||
true.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollEnabled`
|
||||
|
||||
When false, the view cannot be scrolled via touch interaction.
|
||||
The default value is true.
|
||||
|
||||
Note that the view can always be scrolled by calling `scrollTo`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `showsHorizontalScrollIndicator`
|
||||
|
||||
When true, shows a horizontal scroll indicator.
|
||||
The default value is true.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `showsVerticalScrollIndicator`
|
||||
|
||||
When true, shows a vertical scroll indicator.
|
||||
The default value is true.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `stickyHeaderIndices`
|
||||
|
||||
An array of child indices determining which children get docked to the
|
||||
top of the screen when scrolling. For example, passing
|
||||
`stickyHeaderIndices={[0]}` will cause the first child to be fixed to the
|
||||
top of the scroll view. This property is not supported in conjunction
|
||||
with `horizontal={true}`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| array of number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `endFillColor`
|
||||
|
||||
Sometimes a scrollview takes up more space than its content fills. When this is
|
||||
the case, this prop will fill the rest of the scrollview with a color to avoid setting
|
||||
a background and creating unnecessary overdraw. This is an advanced optimization
|
||||
that is not needed in the general case.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `overScrollMode`
|
||||
|
||||
Used to override default value of overScroll mode.
|
||||
|
||||
Possible values:
|
||||
|
||||
- `'auto'` - Default value, allow a user to over-scroll
|
||||
this view only if the content is large enough to meaningfully scroll.
|
||||
- `'always'` - Always allow a user to over-scroll this view.
|
||||
- `'never'` - Never allow a user to over-scroll this view.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('auto', 'always', 'never') | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollPerfTag`
|
||||
|
||||
Tag used to log scroll performance on this scroll view. Will force
|
||||
momentum events to be turned on (see sendMomentumEvents). This doesn't do
|
||||
anything out of the box and you need to implement a custom native
|
||||
FpsListener for it to be useful.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| string | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `DEPRECATED_sendUpdatedChildFrames`
|
||||
|
||||
When true, ScrollView will emit updateChildFrames data in scroll events,
|
||||
otherwise will not compute or emit child frame data. This only exists
|
||||
to support legacy issues, `onLayout` should be used instead to retrieve
|
||||
frame data.
|
||||
The default value is false.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `alwaysBounceHorizontal`
|
||||
|
||||
When true, the scroll view bounces horizontally when it reaches the end
|
||||
even if the content is smaller than the scroll view itself. The default
|
||||
value is true when `horizontal={true}` and false otherwise.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `horizontal`
|
||||
|
||||
When true, the scroll view's children are arranged horizontally in a row
|
||||
instead of vertically in a column. The default value is false.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `automaticallyAdjustContentInsets`
|
||||
|
||||
Controls whether iOS should automatically adjust the content inset
|
||||
for scroll views that are placed behind a navigation bar or
|
||||
tab bar/ toolbar. The default value is true.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `bounces`
|
||||
|
||||
When true, the scroll view bounces when it reaches the end of the
|
||||
content if the content is larger then the scroll view along the axis of
|
||||
the scroll direction. When false, it disables all bouncing even if
|
||||
the `alwaysBounce*` props are true. The default value is true.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `bouncesZoom`
|
||||
|
||||
When true, gestures can drive zoom past min/max and the zoom will animate
|
||||
to the min/max value at gesture end, otherwise the zoom will not exceed
|
||||
the limits.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `canCancelContentTouches`
|
||||
|
||||
When false, once tracking starts, won't try to drag if the touch moves.
|
||||
The default value is true.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `centerContent`
|
||||
|
||||
When true, the scroll view automatically centers the content when the
|
||||
content is smaller than the scroll view bounds; when the content is
|
||||
larger than the scroll view, this property has no effect. The default
|
||||
value is false.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `contentInset`
|
||||
|
||||
The amount by which the scroll view content is inset from the edges
|
||||
of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| object: {top: number, left: number, bottom: number, right: number} | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `contentInsetAdjustmentBehavior`
|
||||
|
||||
This property specifies how the safe area insets are used to modify the
|
||||
content area of the scroll view. The default value of this property is
|
||||
"never". Available on iOS 11 and later.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('automatic', 'scrollableAxes', 'never', 'always') | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `contentOffset`
|
||||
|
||||
Used to manually set the starting scroll offset.
|
||||
The default value is `{x: 0, y: 0}`.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| PointPropType | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `decelerationRate`
|
||||
|
||||
A floating-point number that determines how quickly the scroll view
|
||||
decelerates after the user lifts their finger. You may also use string
|
||||
shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
|
||||
for `UIScrollViewDecelerationRateNormal` and
|
||||
`UIScrollViewDecelerationRateFast` respectively.
|
||||
|
||||
- `'normal'`: 0.998 (the default)
|
||||
- `'fast'`: 0.99
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('fast', 'normal'), ,number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `directionalLockEnabled`
|
||||
|
||||
When true, the ScrollView will try to lock to only vertical or horizontal
|
||||
scrolling while dragging. The default value is false.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `indicatorStyle`
|
||||
|
||||
The style of the scroll indicators.
|
||||
|
||||
- `'default'` (the default), same as `black`.
|
||||
- `'black'`, scroll indicator is black. This style is good against a light background.
|
||||
- `'white'`, scroll indicator is white. This style is good against a dark background.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('default', 'black', 'white') | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `maximumZoomScale`
|
||||
|
||||
The maximum allowed zoom scale. The default value is 1.0.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minimumZoomScale`
|
||||
|
||||
The minimum allowed zoom scale. The default value is 1.0.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `pinchGestureEnabled`
|
||||
|
||||
When true, ScrollView allows use of pinch gestures to zoom in and out.
|
||||
The default value is true.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollEventThrottle`
|
||||
|
||||
This controls how often the scroll event will be fired while scrolling
|
||||
(as a time interval in ms). A lower number yields better accuracy for code
|
||||
that is tracking the scroll position, but can lead to scroll performance
|
||||
problems due to the volume of information being send over the bridge.
|
||||
You will not notice a difference between values set between 1-16 as the
|
||||
JS run loop is synced to the screen refresh rate. If you do not need precise
|
||||
scroll position tracking, set this value higher to limit the information
|
||||
being sent across the bridge. The default value is zero, which results in
|
||||
the scroll event being sent only once each time the view is scrolled.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollIndicatorInsets`
|
||||
|
||||
The amount by which the scroll view indicators are inset from the edges
|
||||
of the scroll view. This should normally be set to the same value as
|
||||
the `contentInset`. Defaults to `{0, 0, 0, 0}`.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| object: {top: number, left: number, bottom: number, right: number} | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollsToTop`
|
||||
|
||||
When true, the scroll view scrolls to top when the status bar is tapped.
|
||||
The default value is true.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `snapToAlignment`
|
||||
|
||||
When `snapToInterval` is set, `snapToAlignment` will define the relationship
|
||||
of the snapping to the scroll view.
|
||||
|
||||
- `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
|
||||
- `'center'` will align the snap in the center
|
||||
- `'end'` will align the snap at the right (horizontal) or bottom (vertical)
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('start', 'center', 'end') | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `snapToInterval`
|
||||
|
||||
When set, causes the scroll view to stop at multiples of the value of
|
||||
`snapToInterval`. This can be used for paginating through children
|
||||
that have lengths smaller than the scroll view. Typically used in
|
||||
combination with `snapToAlignment` and `decelerationRate="fast"`.
|
||||
Overrides less configurable `pagingEnabled` prop.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `zoomScale`
|
||||
|
||||
The current scale of the scroll view content. The default value is 1.0.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `scrollTo()`
|
||||
|
||||
```javascript
|
||||
scrollTo([y]: number, object, [x]: number, [animated]: boolean)
|
||||
```
|
||||
|
||||
Scrolls to a given x, y offset, either immediately or with a smooth animation.
|
||||
|
||||
Example:
|
||||
|
||||
`scrollTo({x: 0, y: 0, animated: true})`
|
||||
|
||||
Note: The weird function signature is due to the fact that, for historical reasons,
|
||||
the function also accepts separate arguments as an alternative to the options object.
|
||||
This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollToEnd()`
|
||||
|
||||
```javascript
|
||||
scrollToEnd([options]: object)
|
||||
```
|
||||
|
||||
If this is a vertical ScrollView scrolls to the bottom.
|
||||
If this is a horizontal ScrollView scrolls to the right.
|
||||
|
||||
Use `scrollToEnd({animated: true})` for smooth animated scrolling,
|
||||
`scrollToEnd({animated: false})` for immediate scrolling.
|
||||
If no options are passed, `animated` defaults to true.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `scrollWithoutAnimationTo()`
|
||||
|
||||
```javascript
|
||||
scrollWithoutAnimationTo(y, x)
|
||||
```
|
||||
|
||||
Deprecated, use `scrollTo` instead.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flashScrollIndicators()`
|
||||
|
||||
```javascript
|
||||
flashScrollIndicators()
|
||||
```
|
||||
|
||||
Displays the scroll indicators momentarily.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
---
|
||||
id: sectionlist
|
||||
title: SectionList
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/sectionlist.html
|
||||
next: segmentedcontrolios
|
||||
previous: scrollview
|
||||
---
|
||||
A performant interface for rendering sectioned lists, supporting the most handy features:
|
||||
|
||||
- Fully cross-platform.
|
||||
- Configurable viewability callbacks.
|
||||
- List header support.
|
||||
- List footer support.
|
||||
- Item separator support.
|
||||
- Section header support.
|
||||
- Section separator support.
|
||||
- Heterogeneous data and item rendering support.
|
||||
- Pull to Refresh.
|
||||
- Scroll loading.
|
||||
|
||||
If you don't need section support and want a simpler interface, use
|
||||
[`<FlatList>`](/react-native/docs/flatlist.html).
|
||||
|
||||
Simple Examples:
|
||||
|
||||
<SectionList
|
||||
renderItem={({item}) => <ListItem title={item} />}
|
||||
renderSectionHeader={({section}) => <Header title={section.title} />}
|
||||
sections={[ // homogeneous rendering between sections
|
||||
{data: [...], title: ...},
|
||||
{data: [...], title: ...},
|
||||
{data: [...], title: ...},
|
||||
]}
|
||||
/>
|
||||
|
||||
<SectionList
|
||||
sections={[ // heterogeneous rendering between sections
|
||||
{data: [...], renderItem: ...},
|
||||
{data: [...], renderItem: ...},
|
||||
{data: [...], renderItem: ...},
|
||||
]}
|
||||
/>
|
||||
|
||||
This is a convenience wrapper around [`<VirtualizedList>`](docs/virtualizedlist.html),
|
||||
and thus inherits its props (as well as those of `ScrollView`) that aren't explicitly listed
|
||||
here, along with the following caveats:
|
||||
|
||||
- Internal state is not preserved when content scrolls out of the render window. Make sure all
|
||||
your data is captured in the item data or external stores like Flux, Redux, or Relay.
|
||||
- This is a `PureComponent` which means that it will not re-render if `props` remain shallow-
|
||||
equal. Make sure that everything your `renderItem` function depends on is passed as a prop
|
||||
(e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on
|
||||
changes. This includes the `data` prop and parent component state.
|
||||
- In order to constrain memory and enable smooth scrolling, content is rendered asynchronously
|
||||
offscreen. This means it's possible to scroll faster than the fill rate and momentarily see
|
||||
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
|
||||
and we are working on improving it behind the scenes.
|
||||
- By default, the list looks for a `key` prop on each item and uses that for the React key.
|
||||
Alternatively, you can provide a custom `keyExtractor` prop.
|
||||
|
||||
### Props
|
||||
|
||||
- [`stickySectionHeadersEnabled`](docs/sectionlist.html#stickysectionheadersenabled)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`scrollToLocation`](docs/sectionlist.html#scrolltolocation)
|
||||
- [`recordInteraction`](docs/sectionlist.html#recordinteraction)
|
||||
- [`flashScrollIndicators`](docs/sectionlist.html#flashscrollindicators)
|
||||
|
||||
|
||||
### Type Definitions
|
||||
|
||||
- [`SectionBase`](docs/sectionlist.html#sectionbase)
|
||||
- [`Props`](docs/sectionlist.html#props)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `stickySectionHeadersEnabled`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `scrollToLocation()`
|
||||
|
||||
```javascript
|
||||
scrollToLocation(params: object)
|
||||
```
|
||||
|
||||
Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the section)
|
||||
positioned in the viewable area such that `viewPosition` 0 places it at the top (and may be
|
||||
covered by a sticky header), 1 at the bottom, and 0.5 centered in the middle. `viewOffset` is a
|
||||
fixed number of pixels to offset the final target position, e.g. to compensate for sticky
|
||||
headers.
|
||||
|
||||
Note: cannot scroll to locations outside the render window without specifying the
|
||||
`getItemLayout` prop.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `recordInteraction()`
|
||||
|
||||
```javascript
|
||||
recordInteraction()
|
||||
```
|
||||
|
||||
Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
|
||||
if `waitForInteractions` is true and the user has not scrolled. This is typically called by
|
||||
taps on items or by navigation actions.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `flashScrollIndicators()`
|
||||
|
||||
```javascript
|
||||
flashScrollIndicators()
|
||||
```
|
||||
|
||||
Displays the scroll indicators momentarily.
|
||||
|
||||
|
||||
|
||||
## Type Definitions
|
||||
|
||||
### SectionBase
|
||||
|
||||
| Type |
|
||||
| - |
|
||||
| ObjectTypeAnnotation |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### Props
|
||||
|
||||
| Type |
|
||||
| - |
|
||||
| IntersectionTypeAnnotation |
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
---
|
||||
id: segmentedcontrolios
|
||||
title: SegmentedControlIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/segmentedcontrolios.html
|
||||
next: slider
|
||||
previous: sectionlist
|
||||
---
|
||||
Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
|
||||
|
||||
#### Programmatically changing selected index
|
||||
|
||||
The selected index can be changed on the fly by assigning the
|
||||
selectedIndex prop to a state variable, then changing that variable.
|
||||
Note that the state variable would need to be updated as the user
|
||||
selects a value and changes the index, as shown in the example below.
|
||||
|
||||
````
|
||||
<SegmentedControlIOS
|
||||
values={['One', 'Two']}
|
||||
selectedIndex={this.state.selectedIndex}
|
||||
onChange={(event) => {
|
||||
this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
|
||||
}}
|
||||
/>
|
||||
````
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`enabled`](docs/segmentedcontrolios.html#enabled)
|
||||
- [`momentary`](docs/segmentedcontrolios.html#momentary)
|
||||
- [`onChange`](docs/segmentedcontrolios.html#onchange)
|
||||
- [`onValueChange`](docs/segmentedcontrolios.html#onvaluechange)
|
||||
- [`selectedIndex`](docs/segmentedcontrolios.html#selectedindex)
|
||||
- [`tintColor`](docs/segmentedcontrolios.html#tintcolor)
|
||||
- [`values`](docs/segmentedcontrolios.html#values)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `enabled`
|
||||
|
||||
If false the user won't be able to interact with the control.
|
||||
Default value is true.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `momentary`
|
||||
|
||||
If true, then selecting a segment won't persist visually.
|
||||
The `onValueChange` callback will still work as expected.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onChange`
|
||||
|
||||
Callback that is called when the user taps a segment;
|
||||
passes the event as an argument
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onValueChange`
|
||||
|
||||
Callback that is called when the user taps a segment;
|
||||
passes the segment's value as an argument
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `selectedIndex`
|
||||
|
||||
The index in `props.values` of the segment to be (pre)selected.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `tintColor`
|
||||
|
||||
Accent color of the control.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `values`
|
||||
|
||||
The labels for the control's segment buttons, in order.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| array of string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
id: settings
|
||||
title: Settings
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/settings.html
|
||||
next: share
|
||||
previous: pushnotificationios
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`get`](docs/settings.html#get)
|
||||
- [`set`](docs/settings.html#set)
|
||||
- [`watchKeys`](docs/settings.html#watchkeys)
|
||||
- [`clearWatch`](docs/settings.html#clearwatch)
|
||||
|
||||
|
||||
### Properties
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `get()`
|
||||
|
||||
```javascript
|
||||
static get(key)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `set()`
|
||||
|
||||
```javascript
|
||||
static set(settings)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `watchKeys()`
|
||||
|
||||
```javascript
|
||||
static watchKeys(keys, callback)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `clearWatch()`
|
||||
|
||||
```javascript
|
||||
static clearWatch(watchId)
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
id: shadow-props
|
||||
title: Shadow Props
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/shadow-props.html
|
||||
next: viewproptypes
|
||||
previous: layout-props
|
||||
---
|
||||
### Props
|
||||
|
||||
- [`shadowColor`](docs/shadow-props.html#shadowcolor)
|
||||
- [`shadowOffset`](docs/shadow-props.html#shadowoffset)
|
||||
- [`shadowOpacity`](docs/shadow-props.html#shadowopacity)
|
||||
- [`shadowRadius`](docs/shadow-props.html#shadowradius)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `shadowColor`
|
||||
|
||||
Sets the drop shadow color
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `shadowOffset`
|
||||
|
||||
Sets the drop shadow offset
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| object: {width: number,height: number} | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `shadowOpacity`
|
||||
|
||||
Sets the drop shadow opacity (multiplied by the color's alpha component)
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `shadowRadius`
|
||||
|
||||
Sets the drop shadow blur radius
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
id: share
|
||||
title: Share
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/share.html
|
||||
next: statusbarios
|
||||
previous: settings
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`share`](docs/share.html#share)
|
||||
- [`sharedAction`](docs/share.html#sharedaction)
|
||||
- [`dismissedAction`](docs/share.html#dismissedaction)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `share()`
|
||||
|
||||
```javascript
|
||||
static share(content, options)
|
||||
```
|
||||
|
||||
|
||||
Open a dialog to share text content.
|
||||
|
||||
In iOS, Returns a Promise which will be invoked an object containing `action`, `activityType`.
|
||||
If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction`
|
||||
and all the other keys being undefined.
|
||||
|
||||
In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`.
|
||||
|
||||
### Content
|
||||
|
||||
- `message` - a message to share
|
||||
- `title` - title of the message
|
||||
|
||||
#### iOS
|
||||
|
||||
- `url` - an URL to share
|
||||
|
||||
At least one of URL and message is required.
|
||||
|
||||
### Options
|
||||
|
||||
#### iOS
|
||||
|
||||
- `subject` - a subject to share via email
|
||||
- `excludedActivityTypes`
|
||||
- `tintColor`
|
||||
|
||||
#### Android
|
||||
|
||||
- `dialogTitle`
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `sharedAction()`
|
||||
|
||||
```javascript
|
||||
static sharedAction()
|
||||
```
|
||||
|
||||
|
||||
The content was successfully shared.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `dismissedAction()`
|
||||
|
||||
```javascript
|
||||
static dismissedAction()
|
||||
```
|
||||
|
||||
|
||||
The dialog has been dismissed.
|
||||
@platform ios
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,7 +4,6 @@ title: Generating Signed APK
|
|||
layout: docs
|
||||
category: Guides (Android)
|
||||
permalink: docs/signed-apk-android.html
|
||||
banner: ejected
|
||||
next: android-building-from-source
|
||||
previous: headless-js-android
|
||||
---
|
|
@ -0,0 +1,327 @@
|
|||
---
|
||||
id: slider
|
||||
title: Slider
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/slider.html
|
||||
next: snapshotviewios
|
||||
previous: segmentedcontrolios
|
||||
---
|
||||
A component used to select a single value from a range of values.
|
||||
|
||||
### Usage
|
||||
|
||||
The example below shows how to use `Slider` to change
|
||||
a value used by `Text`. The value is stored using
|
||||
the state of the root component (`App`). The same component
|
||||
subscribes to the `onValueChange` of `Slider` and changes
|
||||
the value using `setState`.
|
||||
|
||||
```
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, View, Slider } from 'react-native';
|
||||
|
||||
export default class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: 50
|
||||
}
|
||||
}
|
||||
|
||||
change(value) {
|
||||
this.setState(() => {
|
||||
return {
|
||||
value: parseFloat(value)
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {value} = this.state;
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.text}>{String(value)}</Text>
|
||||
<Slider
|
||||
step={1}
|
||||
maximumValue={100}
|
||||
onValueChange={this.change.bind(this)}
|
||||
value={value} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
text: {
|
||||
fontSize: 50,
|
||||
textAlign: 'center'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`style`](docs/slider.html#style)
|
||||
- [`disabled`](docs/slider.html#disabled)
|
||||
- [`maximumValue`](docs/slider.html#maximumvalue)
|
||||
- [`minimumTrackTintColor`](docs/slider.html#minimumtracktintcolor)
|
||||
- [`minimumValue`](docs/slider.html#minimumvalue)
|
||||
- [`onSlidingComplete`](docs/slider.html#onslidingcomplete)
|
||||
- [`onValueChange`](docs/slider.html#onvaluechange)
|
||||
- [`step`](docs/slider.html#step)
|
||||
- [`maximumTrackTintColor`](docs/slider.html#maximumtracktintcolor)
|
||||
- [`testID`](docs/slider.html#testid)
|
||||
- [`value`](docs/slider.html#value)
|
||||
- [`thumbTintColor`](docs/slider.html#thumbtintcolor)
|
||||
- [`maximumTrackImage`](docs/slider.html#maximumtrackimage)
|
||||
- [`minimumTrackImage`](docs/slider.html#minimumtrackimage)
|
||||
- [`thumbImage`](docs/slider.html#thumbimage)
|
||||
- [`trackImage`](docs/slider.html#trackimage)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `style`
|
||||
|
||||
Used to style and layout the `Slider`. See `StyleSheet.js` and
|
||||
`ViewStylePropTypes.js` for more info.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| ViewPropTypes.style | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `disabled`
|
||||
|
||||
If true the user won't be able to move the slider.
|
||||
Default value is false.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `maximumValue`
|
||||
|
||||
Initial maximum value of the slider. Default value is 1.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minimumTrackTintColor`
|
||||
|
||||
The color used for the track to the left of the button.
|
||||
Overrides the default blue gradient image on iOS.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minimumValue`
|
||||
|
||||
Initial minimum value of the slider. Default value is 0.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onSlidingComplete`
|
||||
|
||||
Callback that is called when the user releases the slider,
|
||||
regardless if the value has changed. The current value is passed
|
||||
as an argument to the callback handler.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onValueChange`
|
||||
|
||||
Callback continuously called while the user is dragging the slider.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `step`
|
||||
|
||||
Step value of the slider. The value should be
|
||||
between 0 and (maximumValue - minimumValue).
|
||||
Default value is 0.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `maximumTrackTintColor`
|
||||
|
||||
The color used for the track to the right of the button.
|
||||
Overrides the default blue gradient image on iOS.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
Used to locate this view in UI automation tests.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `value`
|
||||
|
||||
Initial value of the slider. The value should be between minimumValue
|
||||
and maximumValue, which default to 0 and 1 respectively.
|
||||
Default value is 0.
|
||||
|
||||
*This is not a controlled component*, you don't need to update the
|
||||
value during dragging.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `thumbTintColor`
|
||||
|
||||
Color of the foreground switch grip.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `maximumTrackImage`
|
||||
|
||||
Assigns a maximum track image. Only static images are supported. The
|
||||
leftmost pixel of the image will be stretched to fill the track.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| Image.propTypes.source | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minimumTrackImage`
|
||||
|
||||
Assigns a minimum track image. Only static images are supported. The
|
||||
rightmost pixel of the image will be stretched to fill the track.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| Image.propTypes.source | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `thumbImage`
|
||||
|
||||
Sets an image for the thumb. Only static images are supported.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| Image.propTypes.source | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `trackImage`
|
||||
|
||||
Assigns a single image for the track. Only static images are supported.
|
||||
The center pixel of the image will be stretched to fill the track.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| Image.propTypes.source | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
id: snapshotviewios
|
||||
title: SnapshotViewIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/snapshotviewios.html
|
||||
next: statusbar
|
||||
previous: slider
|
||||
---
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`onSnapshotReady`](docs/snapshotviewios.html#onsnapshotready)
|
||||
- [`testIdentifier`](docs/snapshotviewios.html#testidentifier)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `onSnapshotReady`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testIdentifier`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
---
|
||||
id: statusbar
|
||||
title: StatusBar
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/statusbar.html
|
||||
next: switch
|
||||
previous: snapshotviewios
|
||||
---
|
||||
Component to control the app status bar.
|
||||
|
||||
### Usage with Navigator
|
||||
|
||||
It is possible to have multiple `StatusBar` components mounted at the same
|
||||
time. The props will be merged in the order the `StatusBar` components were
|
||||
mounted. One use case is to specify status bar styles per route using `Navigator`.
|
||||
|
||||
```
|
||||
<View>
|
||||
<StatusBar
|
||||
backgroundColor="blue"
|
||||
barStyle="light-content"
|
||||
/>
|
||||
<Navigator
|
||||
initialRoute={{statusBarHidden: true}}
|
||||
renderScene={(route, navigator) =>
|
||||
<View>
|
||||
<StatusBar hidden={route.statusBarHidden} />
|
||||
...
|
||||
</View>
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
```
|
||||
|
||||
### Imperative API
|
||||
|
||||
For cases where using a component is not ideal, there is also an imperative
|
||||
API exposed as static functions on the component. It is however not recommended
|
||||
to use the static API and the component for the same prop because any value
|
||||
set by the static API will get overriden by the one set by the component in
|
||||
the next render.
|
||||
|
||||
### Constants
|
||||
|
||||
`currentHeight` (Android only) The height of the status bar.
|
||||
|
||||
### Props
|
||||
|
||||
- [`animated`](docs/statusbar.html#animated)
|
||||
- [`barStyle`](docs/statusbar.html#barstyle)
|
||||
- [`hidden`](docs/statusbar.html#hidden)
|
||||
- [`backgroundColor`](docs/statusbar.html#backgroundcolor)
|
||||
- [`translucent`](docs/statusbar.html#translucent)
|
||||
- [`networkActivityIndicatorVisible`](docs/statusbar.html#networkactivityindicatorvisible)
|
||||
- [`showHideTransition`](docs/statusbar.html#showhidetransition)
|
||||
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`setHidden`](docs/statusbar.html#sethidden)
|
||||
- [`setBarStyle`](docs/statusbar.html#setbarstyle)
|
||||
- [`setNetworkActivityIndicatorVisible`](docs/statusbar.html#setnetworkactivityindicatorvisible)
|
||||
- [`setBackgroundColor`](docs/statusbar.html#setbackgroundcolor)
|
||||
- [`setTranslucent`](docs/statusbar.html#settranslucent)
|
||||
|
||||
|
||||
### Type Definitions
|
||||
|
||||
- [`StatusBarStyle`](docs/statusbar.html#statusbarstyle)
|
||||
- [`StatusBarAnimation`](docs/statusbar.html#statusbaranimation)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `animated`
|
||||
|
||||
If the transition between status bar property changes should be animated.
|
||||
Supported for backgroundColor, barStyle and hidden.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `barStyle`
|
||||
|
||||
Sets the color of the status bar text.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('default', 'light-content', 'dark-content') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `hidden`
|
||||
|
||||
If the status bar is hidden.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `backgroundColor`
|
||||
|
||||
The background color of the status bar.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `translucent`
|
||||
|
||||
If the status bar is translucent.
|
||||
When translucent is set to true, the app will draw under the status bar.
|
||||
This is useful when using a semi transparent status bar color.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `networkActivityIndicatorVisible`
|
||||
|
||||
If the network activity indicator should be visible.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `showHideTransition`
|
||||
|
||||
The transition effect when showing and hiding the status bar using the `hidden`
|
||||
prop. Defaults to 'fade'.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('fade', 'slide') | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
### `setHidden()`
|
||||
|
||||
```javascript
|
||||
static setHidden(hidden: boolean, [animation]: StatusBarAnimation)
|
||||
```
|
||||
|
||||
Show or hide the status bar
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| hidden | boolean | No | Hide the status bar. |
|
||||
| animation | [StatusBarAnimation](docs/statusbar.html#statusbaranimation) | Yes | Optional animation when changing the status bar hidden property. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setBarStyle()`
|
||||
|
||||
```javascript
|
||||
static setBarStyle(style: StatusBarStyle, [animated]: boolean)
|
||||
```
|
||||
|
||||
Set the status bar style
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| style | [StatusBarStyle](docs/statusbar.html#statusbarstyle) | No | Status bar style to set |
|
||||
| animated | boolean | Yes | Animate the style change. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setNetworkActivityIndicatorVisible()`
|
||||
|
||||
```javascript
|
||||
static setNetworkActivityIndicatorVisible(visible: boolean)
|
||||
```
|
||||
|
||||
Control the visibility of the network activity indicator
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| visible | boolean | No | Show the indicator. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setBackgroundColor()`
|
||||
|
||||
```javascript
|
||||
static setBackgroundColor(color: string, [animated]: boolean)
|
||||
```
|
||||
|
||||
Set the background color for the status bar
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| color | string | No | Background color. |
|
||||
| animated | boolean | Yes | Animate the style change. |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setTranslucent()`
|
||||
|
||||
```javascript
|
||||
static setTranslucent(translucent: boolean)
|
||||
```
|
||||
|
||||
Control the translucency of the status bar
|
||||
|
||||
**Parameters:**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| - | - | - | - |
|
||||
| translucent | boolean | No | Set as translucent. |
|
||||
|
||||
|
||||
|
||||
|
||||
## Type Definitions
|
||||
|
||||
### StatusBarStyle
|
||||
|
||||
Status bar style
|
||||
|
||||
| Type |
|
||||
| - |
|
||||
| $Enum |
|
||||
|
||||
|
||||
**Constants:**
|
||||
|
||||
| Value | Description |
|
||||
| - | - |
|
||||
| default | Default status bar style (dark for iOS, light for Android) |
|
||||
| light-content | Dark background, white texts and icons |
|
||||
| dark-content | Light background, dark texts and icons |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### StatusBarAnimation
|
||||
|
||||
Status bar animation
|
||||
|
||||
| Type |
|
||||
| - |
|
||||
| $Enum |
|
||||
|
||||
|
||||
**Constants:**
|
||||
|
||||
| Value | Description |
|
||||
| - | - |
|
||||
| none | No animation |
|
||||
| fade | Fade animation |
|
||||
| slide | Slide animation |
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
id: statusbarios
|
||||
title: StatusBarIOS
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/statusbarios.html
|
||||
next: stylesheet
|
||||
previous: share
|
||||
---
|
||||
|
||||
Use `StatusBar` for mutating the status bar.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
---
|
||||
id: stylesheet
|
||||
title: StyleSheet
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/stylesheet.html
|
||||
next: systrace
|
||||
previous: statusbarios
|
||||
---
|
||||
|
||||
A StyleSheet is an abstraction similar to CSS StyleSheets
|
||||
|
||||
Create a new StyleSheet:
|
||||
|
||||
```
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
borderRadius: 4,
|
||||
borderWidth: 0.5,
|
||||
borderColor: '#d6d7da',
|
||||
},
|
||||
title: {
|
||||
fontSize: 19,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
activeTitle: {
|
||||
color: 'red',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Use a StyleSheet:
|
||||
|
||||
```
|
||||
<View style={styles.container}>
|
||||
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
|
||||
</View>
|
||||
```
|
||||
|
||||
Code quality:
|
||||
|
||||
- By moving styles away from the render function, you're making the code
|
||||
easier to understand.
|
||||
- Naming the styles is a good way to add meaning to the low level components
|
||||
in the render function.
|
||||
|
||||
Performance:
|
||||
|
||||
- Making a stylesheet from a style object makes it possible to refer to it
|
||||
by ID instead of creating a new style object every time.
|
||||
- It also allows to send the style only once through the bridge. All
|
||||
subsequent uses are going to refer an id (not implemented yet).
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`setStyleAttributePreprocessor`](docs/stylesheet.html#setstyleattributepreprocessor)
|
||||
- [`create`](docs/stylesheet.html#create)
|
||||
|
||||
|
||||
### Properties
|
||||
|
||||
- [`hairlineWidth`](docs/stylesheet.html#hairlinewidth)
|
||||
- [`absoluteFill`](docs/stylesheet.html#absolutefill)
|
||||
- [`absoluteFillObject`](docs/stylesheet.html#absolutefillobject)
|
||||
- [`flatten`](docs/stylesheet.html#flatten)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `setStyleAttributePreprocessor()`
|
||||
|
||||
```javascript
|
||||
static setStyleAttributePreprocessor(property, process)
|
||||
```
|
||||
|
||||
|
||||
WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
|
||||
not be reliably announced. The whole thing might be deleted, who knows? Use
|
||||
at your own risk.
|
||||
|
||||
Sets a function to use to pre-process a style property value. This is used
|
||||
internally to process color and transform values. You should not use this
|
||||
unless you really know what you are doing and have exhausted other options.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `create()`
|
||||
|
||||
```javascript
|
||||
static create(obj)
|
||||
```
|
||||
|
||||
|
||||
Creates a StyleSheet style reference from the given object.
|
||||
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
---
|
||||
id: switch
|
||||
title: Switch
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/switch.html
|
||||
next: tabbarios
|
||||
previous: statusbar
|
||||
---
|
||||
Renders a boolean input.
|
||||
|
||||
This is a controlled component that requires an `onValueChange` callback that
|
||||
updates the `value` prop in order for the component to reflect user actions.
|
||||
If the `value` prop is not updated, the component will continue to render
|
||||
the supplied `value` prop instead of the expected result of any user actions.
|
||||
|
||||
@keyword checkbox
|
||||
@keyword toggle
|
||||
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`disabled`](docs/switch.html#disabled)
|
||||
- [`onTintColor`](docs/switch.html#ontintcolor)
|
||||
- [`onValueChange`](docs/switch.html#onvaluechange)
|
||||
- [`testID`](docs/switch.html#testid)
|
||||
- [`thumbTintColor`](docs/switch.html#thumbtintcolor)
|
||||
- [`tintColor`](docs/switch.html#tintcolor)
|
||||
- [`value`](docs/switch.html#value)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `disabled`
|
||||
|
||||
If true the user won't be able to toggle the switch.
|
||||
Default value is false.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onTintColor`
|
||||
|
||||
Background color when the switch is turned on.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onValueChange`
|
||||
|
||||
Invoked with the new value when the value changes.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
Used to locate this view in end-to-end tests.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `thumbTintColor`
|
||||
|
||||
Color of the foreground switch grip.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `tintColor`
|
||||
|
||||
Border color on iOS and background color on Android when the switch is turned off.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `value`
|
||||
|
||||
The value of the switch. If true the switch will be turned on.
|
||||
Default value is false.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
---
|
||||
id: systrace
|
||||
title: Systrace
|
||||
layout: docs
|
||||
category: APIs
|
||||
permalink: docs/systrace.html
|
||||
next: timepickerandroid
|
||||
previous: stylesheet
|
||||
---
|
||||
|
||||
|
||||
|
||||
### Methods
|
||||
|
||||
- [`installReactHook`](docs/systrace.html#installreacthook)
|
||||
- [`setEnabled`](docs/systrace.html#setenabled)
|
||||
- [`isEnabled`](docs/systrace.html#isenabled)
|
||||
- [`beginEvent`](docs/systrace.html#beginevent)
|
||||
- [`endEvent`](docs/systrace.html#endevent)
|
||||
- [`beginAsyncEvent`](docs/systrace.html#beginasyncevent)
|
||||
- [`endAsyncEvent`](docs/systrace.html#endasyncevent)
|
||||
- [`counterEvent`](docs/systrace.html#counterevent)
|
||||
- [`attachToRelayProfiler`](docs/systrace.html#attachtorelayprofiler)
|
||||
- [`swizzleJSON`](docs/systrace.html#swizzlejson)
|
||||
- [`measureMethods`](docs/systrace.html#measuremethods)
|
||||
- [`measure`](docs/systrace.html#measure)
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Methods
|
||||
|
||||
### `installReactHook()`
|
||||
|
||||
```javascript
|
||||
static installReactHook(useFiber)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `setEnabled()`
|
||||
|
||||
```javascript
|
||||
static setEnabled(enabled)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `isEnabled()`
|
||||
|
||||
```javascript
|
||||
static isEnabled()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `beginEvent()`
|
||||
|
||||
```javascript
|
||||
static beginEvent(profileName?, args?)
|
||||
```
|
||||
|
||||
|
||||
beginEvent/endEvent for starting and then ending a profile within the same call stack frame
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `endEvent()`
|
||||
|
||||
```javascript
|
||||
static endEvent()
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `beginAsyncEvent()`
|
||||
|
||||
```javascript
|
||||
static beginAsyncEvent(profileName?)
|
||||
```
|
||||
|
||||
|
||||
beginAsyncEvent/endAsyncEvent for starting and then ending a profile where the end can either
|
||||
occur on another thread or out of the current stack frame, eg await
|
||||
the returned cookie variable should be used as input into the endAsyncEvent call to end the profile
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `endAsyncEvent()`
|
||||
|
||||
```javascript
|
||||
static endAsyncEvent(profileName?, cookie?)
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `counterEvent()`
|
||||
|
||||
```javascript
|
||||
static counterEvent(profileName?, value?)
|
||||
```
|
||||
|
||||
|
||||
counterEvent registers the value to the profileName on the systrace timeline
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `attachToRelayProfiler()`
|
||||
|
||||
```javascript
|
||||
static attachToRelayProfiler(relayProfiler)
|
||||
```
|
||||
|
||||
|
||||
Relay profiles use await calls, so likely occur out of current stack frame
|
||||
therefore async variant of profiling is used
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `swizzleJSON()`
|
||||
|
||||
```javascript
|
||||
static swizzleJSON()
|
||||
```
|
||||
|
||||
This is not called by default due to perf overhead but it's useful
|
||||
if you want to find traces which spend too much time in JSON.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `measureMethods()`
|
||||
|
||||
```javascript
|
||||
static measureMethods(object, objectName, methodNames)
|
||||
```
|
||||
|
||||
|
||||
Measures multiple methods of a class. For example, you can do:
|
||||
Systrace.measureMethods(JSON, 'JSON', ['parse', 'stringify']);
|
||||
|
||||
@param object
|
||||
@param objectName
|
||||
@param methodNames Map from method names to method display names.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `measure()`
|
||||
|
||||
```javascript
|
||||
static measure(objName, fnName, func)
|
||||
```
|
||||
|
||||
|
||||
Returns an profiled version of the input function. For example, you can:
|
||||
JSON.parse = Systrace.measure('JSON', 'parse', JSON.parse);
|
||||
|
||||
@param objName
|
||||
@param fnName
|
||||
@param {function} func
|
||||
@return {function} replacement function
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
---
|
||||
id: tabbarios-item
|
||||
title: TabBarIOS.Item
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/tabbarios-item.html
|
||||
next: text
|
||||
previous: tabbarios
|
||||
---
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`selected`](docs/tabbarios-item.html#selected)
|
||||
- [`badge`](docs/tabbarios-item.html#badge)
|
||||
- [`icon`](docs/tabbarios-item.html#icon)
|
||||
- [`onPress`](docs/tabbarios-item.html#onpress)
|
||||
- [`renderAsOriginal`](docs/tabbarios-item.html#renderasoriginal)
|
||||
- [`badgeColor`](docs/tabbarios-item.html#badgecolor)
|
||||
- [`selectedIcon`](docs/tabbarios-item.html#selectedicon)
|
||||
- [`style`](docs/tabbarios-item.html#style)
|
||||
- [`systemIcon`](docs/tabbarios-item.html#systemicon)
|
||||
- [`title`](docs/tabbarios-item.html#title)
|
||||
- [`isTVSelectable`](docs/tabbarios-item.html#istvselectable)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `selected`
|
||||
|
||||
It specifies whether the children are visible or not. If you see a
|
||||
blank content, you probably forgot to add a selected one.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `badge`
|
||||
|
||||
Little red bubble that sits at the top right of the icon.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string, ,number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `icon`
|
||||
|
||||
A custom icon for the tab. It is ignored when a system icon is defined.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Image.propTypes.source | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onPress`
|
||||
|
||||
Callback when this tab is being selected, you should change the state of your
|
||||
component to set selected={true}.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `renderAsOriginal`
|
||||
|
||||
If set to true it renders the image as original,
|
||||
it defaults to being displayed as a template
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `badgeColor`
|
||||
|
||||
Background color for the badge. Available since iOS 10.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `selectedIcon`
|
||||
|
||||
A custom icon when the tab is selected. It is ignored when a system
|
||||
icon is defined. If left empty, the icon will be tinted in blue.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| Image.propTypes.source | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `style`
|
||||
|
||||
React style object.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| ViewPropTypes.style | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `systemIcon`
|
||||
|
||||
Items comes with a few predefined system icons. Note that if you are
|
||||
using them, the title and selectedIcon will be overridden with the
|
||||
system ones.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `title`
|
||||
|
||||
Text that appears under the icon. It is ignored when a system icon
|
||||
is defined.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `isTVSelectable`
|
||||
|
||||
(Apple TV only)* When set to true, this view will be focusable
|
||||
and navigable using the Apple TV remote.
|
||||
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
---
|
||||
id: tabbarios
|
||||
title: TabBarIOS
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/tabbarios.html
|
||||
next: tabbarios-item
|
||||
previous: switch
|
||||
---
|
||||
### Props
|
||||
|
||||
* [ViewPropTypes props...](docs/viewproptypes.html#props)
|
||||
- [`barStyle`](docs/tabbarios.html#barstyle)
|
||||
- [`barTintColor`](docs/tabbarios.html#bartintcolor)
|
||||
- [`itemPositioning`](docs/tabbarios.html#itempositioning)
|
||||
- [`style`](docs/tabbarios.html#style)
|
||||
- [`tintColor`](docs/tabbarios.html#tintcolor)
|
||||
- [`translucent`](docs/tabbarios.html#translucent)
|
||||
- [`unselectedItemTintColor`](docs/tabbarios.html#unselecteditemtintcolor)
|
||||
- [`unselectedTintColor`](docs/tabbarios.html#unselectedtintcolor)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `barStyle`
|
||||
|
||||
The style of the tab bar. Supported values are 'default', 'black'.
|
||||
Use 'black' instead of setting `barTintColor` to black. This produces
|
||||
a tab bar with the native iOS style with higher translucency.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('default', 'black') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `barTintColor`
|
||||
|
||||
Background color of the tab bar
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `itemPositioning`
|
||||
|
||||
Specifies tab bar item positioning. Available values are:
|
||||
- fill - distributes items across the entire width of the tab bar
|
||||
- center - centers item in the available tab bar space
|
||||
- auto (default) - distributes items dynamically according to the
|
||||
user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
|
||||
this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
|
||||
it defaults to center.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('fill', 'center', 'auto') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `style`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| ViewPropTypes.style | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `tintColor`
|
||||
|
||||
Color of the currently selected tab icon
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `translucent`
|
||||
|
||||
A Boolean value that indicates whether the tab bar is translucent
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `unselectedItemTintColor`
|
||||
|
||||
Color of unselected tab icons. Available since iOS 10.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `unselectedTintColor`
|
||||
|
||||
Color of text on unselected tabs
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| [color](docs/colors.html) | No |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,605 @@
|
|||
---
|
||||
id: text
|
||||
title: Text
|
||||
layout: docs
|
||||
category: components
|
||||
permalink: docs/text.html
|
||||
next: textinput
|
||||
previous: tabbarios-item
|
||||
---
|
||||
A React component for displaying text.
|
||||
|
||||
`Text` supports nesting, styling, and touch handling.
|
||||
|
||||
In the following example, the nested title and body text will inherit the
|
||||
`fontFamily` from `styles.baseText`, but the title provides its own
|
||||
additional styles. The title and body will stack on top of each other on
|
||||
account of the literal newlines:
|
||||
|
||||
```ReactNativeWebPlayer
|
||||
import React, { Component } from 'react';
|
||||
import { AppRegistry, Text, StyleSheet } from 'react-native';
|
||||
|
||||
export default class TextInANest extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
titleText: "Bird's Nest",
|
||||
bodyText: 'This is not really a bird nest.'
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Text style={styles.baseText}>
|
||||
<Text style={styles.titleText} onPress={this.onPressTitle}>
|
||||
{this.state.titleText}{'\n'}{'\n'}
|
||||
</Text>
|
||||
<Text numberOfLines={5}>
|
||||
{this.state.bodyText}
|
||||
</Text>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
baseText: {
|
||||
fontFamily: 'Cochin',
|
||||
},
|
||||
titleText: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('TextInANest', () => TextInANest);
|
||||
```
|
||||
|
||||
## Nested text
|
||||
|
||||
Both iOS and Android allow you to display formatted text by annotating
|
||||
ranges of a string with specific formatting like bold or colored text
|
||||
(`NSAttributedString` on iOS, `SpannableString` on Android). In practice,
|
||||
this is very tedious. For React Native, we decided to use web paradigm for
|
||||
this where you can nest text to achieve the same effect.
|
||||
|
||||
|
||||
```ReactNativeWebPlayer
|
||||
import React, { Component } from 'react';
|
||||
import { AppRegistry, Text } from 'react-native';
|
||||
|
||||
export default class BoldAndBeautiful extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
I am bold
|
||||
<Text style={{color: 'red'}}>
|
||||
and red
|
||||
</Text>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BoldAndBeautiful);
|
||||
```
|
||||
|
||||
Behind the scenes, React Native converts this to a flat `NSAttributedString`
|
||||
or `SpannableString` that contains the following information:
|
||||
|
||||
```javascript
|
||||
"I am bold and red"
|
||||
0-9: bold
|
||||
9-17: bold, red
|
||||
```
|
||||
|
||||
## Nested views (iOS only)
|
||||
|
||||
On iOS, you can nest views within your Text component. Here's an example:
|
||||
|
||||
```ReactNativeWebPlayer
|
||||
import React, { Component } from 'react';
|
||||
import { AppRegistry, Text, View } from 'react-native';
|
||||
|
||||
export default class BlueIsCool extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Text>
|
||||
There is a blue square
|
||||
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
|
||||
in between my text.
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
|
||||
```
|
||||
|
||||
> In order to use this feature, you must give the view a `width` and a `height`.
|
||||
|
||||
## Containers
|
||||
|
||||
The `<Text>` element is special relative to layout: everything inside is no
|
||||
longer using the flexbox layout but using text layout. This means that
|
||||
elements inside of a `<Text>` are no longer rectangles, but wrap when they
|
||||
see the end of the line.
|
||||
|
||||
```javascript
|
||||
<Text>
|
||||
<Text>First part and </Text>
|
||||
<Text>second part</Text>
|
||||
</Text>
|
||||
// Text container: all the text flows as if it was one
|
||||
// |First part |
|
||||
// |and second |
|
||||
// |part |
|
||||
|
||||
<View>
|
||||
<Text>First part and </Text>
|
||||
<Text>second part</Text>
|
||||
</View>
|
||||
// View container: each text is its own block
|
||||
// |First part |
|
||||
// |and |
|
||||
// |second part|
|
||||
```
|
||||
|
||||
## Limited Style Inheritance
|
||||
|
||||
On the web, the usual way to set a font family and size for the entire
|
||||
document is to take advantage of inherited CSS properties like so:
|
||||
|
||||
```css
|
||||
html {
|
||||
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #141823;
|
||||
}
|
||||
```
|
||||
|
||||
All elements in the document will inherit this font unless they or one of
|
||||
their parents specifies a new rule.
|
||||
|
||||
In React Native, we are more strict about it: **you must wrap all the text
|
||||
nodes inside of a `<Text>` component**. You cannot have a text node directly
|
||||
under a `<View>`.
|
||||
|
||||
|
||||
```javascript
|
||||
// BAD: will raise exception, can't have a text node as child of a <View>
|
||||
<View>
|
||||
Some text
|
||||
</View>
|
||||
|
||||
// GOOD
|
||||
<View>
|
||||
<Text>
|
||||
Some text
|
||||
</Text>
|
||||
</View>
|
||||
```
|
||||
|
||||
You also lose the ability to set up a default font for an entire subtree.
|
||||
The recommended way to use consistent fonts and sizes across your
|
||||
application is to create a component `MyAppText` that includes them and use
|
||||
this component across your app. You can also use this component to make more
|
||||
specific components like `MyAppHeaderText` for other kinds of text.
|
||||
|
||||
```javascript
|
||||
<View>
|
||||
<MyAppText>Text styled with the default font for the entire application</MyAppText>
|
||||
<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
|
||||
</View>
|
||||
```
|
||||
|
||||
Assuming that `MyAppText` is a component that simply renders out its
|
||||
children into a `Text` component with styling, then `MyAppHeaderText` can be
|
||||
defined as follows:
|
||||
|
||||
```javascript
|
||||
class MyAppHeaderText extends Component {
|
||||
render() {
|
||||
<MyAppText>
|
||||
<Text style={{fontSize: 20}}>
|
||||
{this.props.children}
|
||||
</Text>
|
||||
</MyAppText>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Composing `MyAppText` in this way ensures that we get the styles from a
|
||||
top-level component, but leaves us the ability to add / override them in
|
||||
specific use cases.
|
||||
|
||||
React Native still has the concept of style inheritance, but limited to text
|
||||
subtrees. In this case, the second part will be both bold and red.
|
||||
|
||||
```javascript
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
I am bold
|
||||
<Text style={{color: 'red'}}>
|
||||
and red
|
||||
</Text>
|
||||
</Text>
|
||||
```
|
||||
|
||||
We believe that this more constrained way to style text will yield better
|
||||
apps:
|
||||
|
||||
- (Developer) React components are designed with strong isolation in mind:
|
||||
You should be able to drop a component anywhere in your application,
|
||||
trusting that as long as the props are the same, it will look and behave the
|
||||
same way. Text properties that could inherit from outside of the props would
|
||||
break this isolation.
|
||||
|
||||
- (Implementor) The implementation of React Native is also simplified. We do
|
||||
not need to have a `fontFamily` field on every single element, and we do not
|
||||
need to potentially traverse the tree up to the root every time we display a
|
||||
text node. The style inheritance is only encoded inside of the native Text
|
||||
component and doesn't leak to other components or the system itself.
|
||||
|
||||
### Props
|
||||
|
||||
- [`selectable`](docs/text.html#selectable)
|
||||
- [`accessible`](docs/text.html#accessible)
|
||||
- [`ellipsizeMode`](docs/text.html#ellipsizemode)
|
||||
- [`nativeID`](docs/text.html#nativeid)
|
||||
- [`numberOfLines`](docs/text.html#numberoflines)
|
||||
- [`onLayout`](docs/text.html#onlayout)
|
||||
- [`onLongPress`](docs/text.html#onlongpress)
|
||||
- [`onPress`](docs/text.html#onpress)
|
||||
- [`pressRetentionOffset`](docs/text.html#pressretentionoffset)
|
||||
- [`allowFontScaling`](docs/text.html#allowfontscaling)
|
||||
- [`style`](docs/text.html#style)
|
||||
- [`testID`](docs/text.html#testid)
|
||||
- [`disabled`](docs/text.html#disabled)
|
||||
- [`selectionColor`](docs/text.html#selectioncolor)
|
||||
- [`textBreakStrategy`](docs/text.html#textbreakstrategy)
|
||||
- [`adjustsFontSizeToFit`](docs/text.html#adjustsfontsizetofit)
|
||||
- [`minimumFontScale`](docs/text.html#minimumfontscale)
|
||||
- [`suppressHighlighting`](docs/text.html#suppresshighlighting)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# Reference
|
||||
|
||||
## Props
|
||||
|
||||
### `selectable`
|
||||
|
||||
Lets the user select text, to use the native copy and paste functionality.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `accessible`
|
||||
|
||||
When set to `true`, indicates that the view is an accessibility element. The default value
|
||||
for a `Text` element is `true`.
|
||||
|
||||
See the
|
||||
[Accessibility guide](docs/accessibility.html#accessible-ios-android)
|
||||
for more information.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `ellipsizeMode`
|
||||
|
||||
When `numberOfLines` is set, this prop defines how text will be truncated.
|
||||
`numberOfLines` must be set in conjunction with this prop.
|
||||
|
||||
This can be one of the following values:
|
||||
|
||||
- `head` - The line is displayed so that the end fits in the container and the missing text
|
||||
at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
|
||||
- `middle` - The line is displayed so that the beginning and end fit in the container and the
|
||||
missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
|
||||
- `tail` - The line is displayed so that the beginning fits in the container and the
|
||||
missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
|
||||
- `clip` - Lines are not drawn past the edge of the text container.
|
||||
|
||||
The default is `tail`.
|
||||
|
||||
> `clip` is working only for iOS
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| enum('head', 'middle', 'tail', 'clip') | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `nativeID`
|
||||
|
||||
Used to locate this view from native code.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `numberOfLines`
|
||||
|
||||
Used to truncate the text with an ellipsis after computing the text
|
||||
layout, including line wrapping, such that the total number of lines
|
||||
does not exceed this number.
|
||||
|
||||
This prop is commonly used with `ellipsizeMode`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| number | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onLayout`
|
||||
|
||||
Invoked on mount and layout changes with
|
||||
|
||||
`{nativeEvent: {layout: {x, y, width, height}}}`
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onLongPress`
|
||||
|
||||
This function is called on long press.
|
||||
|
||||
e.g., `onLongPress={this.increaseSize}>`
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `onPress`
|
||||
|
||||
This function is called on press.
|
||||
|
||||
e.g., `onPress={() => console.log('1st')}`
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| function | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `pressRetentionOffset`
|
||||
|
||||
When the scroll view is disabled, this defines how far your touch may
|
||||
move off of the button, before deactivating the button. Once deactivated,
|
||||
try moving it back and you'll see that the button is once again
|
||||
reactivated! Move it back and forth several times while the scroll view
|
||||
is disabled. Ensure you pass in a constant to reduce memory allocations.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| object: {top: number, left: number, bottom: number, right: number} | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `allowFontScaling`
|
||||
|
||||
Specifies whether fonts should scale to respect Text Size accessibility settings. The
|
||||
default is `true`.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| bool | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `style`
|
||||
|
||||
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| style | No |
|
||||
|
||||
|
||||
- [View Style Props...](docs/view-style-props.html#style)
|
||||
|
||||
- **`textShadowOffset`**: object: {width: number,height: number}
|
||||
|
||||
- **`color`**: [color](docs/colors.html)
|
||||
|
||||
- **`fontSize`**: number
|
||||
|
||||
- **`fontStyle`**: enum('normal', 'italic')
|
||||
|
||||
- **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
|
||||
|
||||
Specifies font weight. The values 'normal' and 'bold' are supported for
|
||||
most fonts. Not all fonts have a variant for each of the numeric values,
|
||||
in that case the closest one is chosen.
|
||||
|
||||
- **`lineHeight`**: number
|
||||
|
||||
- **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify')
|
||||
|
||||
Specifies text alignment. The value 'justify' is only supported on iOS and
|
||||
fallbacks to `left` on Android.
|
||||
|
||||
- **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through')
|
||||
|
||||
- **`textShadowColor`**: [color](docs/colors.html)
|
||||
|
||||
- **`fontFamily`**: string
|
||||
|
||||
- **`textShadowRadius`**: number
|
||||
|
||||
- **`includeFontPadding`**: bool (_Android_)
|
||||
|
||||
Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
|
||||
With some fonts, this padding can make text look slightly misaligned when centered vertically.
|
||||
For best results also set `textAlignVertical` to `center`. Default is true.
|
||||
|
||||
|
||||
- **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_)
|
||||
|
||||
- **`fontVariant`**: array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') (_iOS_)
|
||||
|
||||
- **`letterSpacing`**: number (_iOS_)
|
||||
|
||||
- **`textDecorationColor`**: [color](docs/colors.html) (_iOS_)
|
||||
|
||||
- **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_)
|
||||
|
||||
- **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_)
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `testID`
|
||||
|
||||
Used to locate this view in end-to-end tests.
|
||||
|
||||
| Type | Required |
|
||||
| - | - |
|
||||
| string | No |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `disabled`
|
||||
|
||||
Specifies the disabled state of the text view for testing purposes
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `selectionColor`
|
||||
|
||||
The highlight color of the text.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| [color](docs/colors.html) | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `textBreakStrategy`
|
||||
|
||||
Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`
|
||||
The default value is `highQuality`.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| enum('simple', 'highQuality', 'balanced') | No | Android |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `adjustsFontSizeToFit`
|
||||
|
||||
Specifies whether font should be scaled down automatically to fit given style constraints.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `minimumFontScale`
|
||||
|
||||
Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| number | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### `suppressHighlighting`
|
||||
|
||||
When `true`, no visual change is made when text is pressed down. By
|
||||
default, a gray oval highlights the text on press down.
|
||||
|
||||
|
||||
| Type | Required | Platform |
|
||||
| - | - | - |
|
||||
| bool | No | iOS |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue