Flatten jsdocs to markdown plaintext

Differential Revision: D6261799

fbshipit-source-id: 269e151c5d136c1d508d9f2a060c0c670d0fe0f2
This commit is contained in:
Héctor Ramos 2017-11-07 16:34:50 -08:00 committed by Facebook Github Bot
parent 7df58e23a3
commit 9ec9567390
124 changed files with 19508 additions and 66 deletions

View File

@ -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`. 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. 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`). 4. Make sure your code lints (`npm run lint`).
5. If you haven't already, [sign the CLA](https://code.facebook.com/cla). 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. > **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 #### 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 [circle]: http://circleci.com/gh/facebook/react-native

View File

@ -1,7 +0,0 @@
---
id: android-ui-performance
title: Profiling Android UI Performance
layout: redirect
permalink: docs/android-ui-performance.html
destinationUrl: performance.html
---

View File

@ -4,7 +4,7 @@ title: Images
layout: docs layout: docs
category: Guides category: Guides
permalink: docs/images.html permalink: docs/images.html
next: animations next: animations
previous: navigation previous: navigation
--- ---

View File

@ -1,7 +0,0 @@
---
id: NativeMethodsMixin
title: NativeMethodsMixin
layout: redirect
permalink: docs/nativemethodsmixin.html
destinationUrl: direct-manipulation.html#other-native-methods
---

View File

@ -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
---

View File

@ -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
---

View File

156
docs/accessibilityinfo.md Normal file
View File

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

96
docs/actionsheetios.md Normal file
View File

@ -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

125
docs/activityindicator.md Normal file
View File

@ -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 |

79
docs/alert.md Normal file
View File

@ -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?)
```

220
docs/alertios.md Normal file
View File

@ -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 |

View File

@ -4,7 +4,6 @@ title: Building React Native from source
layout: docs layout: docs
category: Guides (Android) category: Guides (Android)
permalink: docs/android-building-from-source.html permalink: docs/android-building-from-source.html
banner: ejected
next: communication-android next: communication-android
previous: android-ui-performance previous: android-ui-performance
--- ---

557
docs/animated.md Normal file
View File

@ -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 springs 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
---
---
---
---
---

227
docs/appregistry.md Normal file
View File

@ -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

131
docs/appstate.md Normal file
View File

@ -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

420
docs/asyncstorage.md Normal file
View File

@ -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"}}
```

56
docs/backandroid.md Normal file
View File

@ -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)
```

83
docs/backhandler.md Normal file
View File

@ -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)
```

View File

@ -4,7 +4,6 @@ title: Building For Apple TV
layout: docs layout: docs
category: Guides (iOS) category: Guides (iOS)
permalink: docs/building-for-apple-tv.html permalink: docs/building-for-apple-tv.html
banner: ejected
next: app-extensions next: app-extensions
previous: communication-ios previous: communication-ios
--- ---

148
docs/button.md Normal file
View File

@ -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 |

163
docs/cameraroll.md Normal file
View File

@ -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>
);
}
```

106
docs/checkbox.md Normal file
View File

@ -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 |

64
docs/clipboard.md Normal file
View File

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

View File

@ -4,7 +4,6 @@ title: Communication between native and React Native
layout: docs layout: docs
category: Guides (Android) category: Guides (Android)
permalink: docs/communication-android.html permalink: docs/communication-android.html
banner: ejected
next: contributing next: contributing
previous: android-building-from-source previous: android-building-from-source
--- ---

View File

@ -4,7 +4,6 @@ title: Communication between native and React Native
layout: docs layout: docs
category: Guides (iOS) category: Guides (iOS)
permalink: docs/communication-ios.html permalink: docs/communication-ios.html
banner: ejected
next: building-for-apple-tv next: building-for-apple-tv
previous: linking-libraries-ios previous: linking-libraries-ios
--- ---

View File

@ -4,7 +4,6 @@ title: Custom WebView
layout: docs layout: docs
category: Guides (Android) category: Guides (Android)
permalink: docs/custom-webview-android.html permalink: docs/custom-webview-android.html
banner: ejected
next: headless-js-android next: headless-js-android
previous: native-components-android previous: native-components-android
--- ---

View File

@ -4,7 +4,6 @@ title: Custom WebView
layout: docs layout: docs
category: Guides (iOS) category: Guides (iOS)
permalink: docs/custom-webview-ios.html permalink: docs/custom-webview-ios.html
banner: ejected
next: linking-libraries-ios next: linking-libraries-ios
previous: native-components-ios previous: native-components-ios
--- ---

103
docs/datepickerandroid.md Normal file
View File

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

140
docs/datepickerios.md Normal file
View File

@ -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 |

102
docs/dimensions.md Normal file
View File

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

259
docs/drawerlayoutandroid.md Normal file
View File

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

361
docs/easing.md Normal file
View File

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

266
docs/flatlist.md Normal file
View File

@ -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 |

162
docs/geolocation.md Normal file
View File

@ -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()
```

View File

@ -5,6 +5,7 @@ layout: docs
category: The Basics category: The Basics
permalink: docs/getting-started.html permalink: docs/getting-started.html
next: tutorial next: tutorial
previous: undefined
--- ---
<style> <style>

View File

@ -4,7 +4,6 @@ title: Headless JS
layout: docs layout: docs
category: Guides (Android) category: Guides (Android)
permalink: docs/headless-js-android.html permalink: docs/headless-js-android.html
banner: ejected
next: signed-apk-android next: signed-apk-android
previous: custom-webview-android previous: custom-webview-android
--- ---
@ -90,7 +89,7 @@ Following lines shows part of Android manifest file for registering broadcast re
</receiver> </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 ```java
public class NetworkChangeReceiver extends BroadcastReceiver { public class NetworkChangeReceiver extends BroadcastReceiver {

540
docs/image.md Normal file
View File

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

44
docs/imageeditor.md Normal file
View File

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

66
docs/imagepickerios.md Normal file
View File

@ -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)
```

104
docs/imagestore.md Normal file
View File

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

233
docs/imagestyleproptypes.md Normal file
View File

@ -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 |

View File

@ -4,7 +4,6 @@ title: Integration with Existing Apps
layout: docs layout: docs
category: Guides category: Guides
permalink: docs/integration-with-existing-apps.html permalink: docs/integration-with-existing-apps.html
banner: ejected
next: running-on-device next: running-on-device
previous: colors previous: colors
--- ---
@ -362,7 +361,7 @@ const styles = StyleSheet.create({
}); });
// Module name // 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. > `RNHighScores` is the name of your module that will be used when you add a view to React Native from within your iOS application.

146
docs/interactionmanager.md Normal file
View File

@ -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
---

146
docs/keyboard.md Normal file
View File

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

View File

@ -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)
```

965
docs/layout-props.md Normal file
View File

@ -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 |

116
docs/layoutanimation.md Normal file
View File

@ -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
---
---
---
---
---

View File

@ -4,7 +4,6 @@ title: Linking Libraries
layout: docs layout: docs
category: Guides (iOS) category: Guides (iOS)
permalink: docs/linking-libraries-ios.html permalink: docs/linking-libraries-ios.html
banner: ejected
next: running-on-simulator-ios next: running-on-simulator-ios
previous: custom-webview-ios previous: custom-webview-ios
--- ---

254
docs/linking.md Normal file
View File

@ -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

436
docs/listview.md Normal file
View File

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

290
docs/listviewdatasource.md Normal file
View File

@ -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

72
docs/maskedviewios.md Normal file
View File

@ -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 |

201
docs/modal.md Normal file
View File

@ -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 |

View File

@ -4,7 +4,6 @@ title: Native UI Components
layout: docs layout: docs
category: Guides (Android) category: Guides (Android)
permalink: docs/native-components-android.html permalink: docs/native-components-android.html
banner: ejected
next: custom-webview-android next: custom-webview-android
previous: native-modules-android previous: native-modules-android
--- ---

View File

@ -4,7 +4,6 @@ title: Native UI Components
layout: docs layout: docs
category: Guides (iOS) category: Guides (iOS)
permalink: docs/native-components-ios.html permalink: docs/native-components-ios.html
banner: ejected
next: custom-webview-ios next: custom-webview-ios
previous: native-modules-ios previous: native-modules-ios
--- ---

View File

@ -4,7 +4,6 @@ title: Native Modules
layout: docs layout: docs
category: Guides (Android) category: Guides (Android)
permalink: docs/native-modules-android.html permalink: docs/native-modules-android.html
banner: ejected
next: native-components-android next: native-components-android
previous: app-extensions previous: app-extensions
--- ---

View File

@ -4,7 +4,6 @@ title: Native Modules
layout: docs layout: docs
category: Guides (iOS) category: Guides (iOS)
permalink: docs/native-modules-ios.html permalink: docs/native-modules-ios.html
banner: ejected
next: native-components-ios next: native-components-ios
previous: testing previous: testing
--- ---

550
docs/navigatorios.md Normal file
View File

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

226
docs/netinfo.md Normal file
View File

@ -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

161
docs/panresponder.md Normal file
View File

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

184
docs/permissionsandroid.md Normal file
View File

@ -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

156
docs/picker.md Normal file
View File

@ -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 |

66
docs/pickerios.md Normal file
View File

@ -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 |

165
docs/pixelratio.md Normal file
View File

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

139
docs/progressbarandroid.md Normal file
View File

@ -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 |

110
docs/progressviewios.md Normal file
View File

@ -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 |

534
docs/pushnotificationios.md Normal file
View File

@ -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 apps 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

216
docs/refreshcontrol.md Normal file
View File

@ -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 |

View File

@ -4,7 +4,6 @@ title: Running On Device
layout: docs layout: docs
category: Guides category: Guides
permalink: docs/running-on-device.html permalink: docs/running-on-device.html
banner: ejected
next: upgrading next: upgrading
previous: integration-with-existing-apps previous: integration-with-existing-apps
--- ---

View File

@ -4,7 +4,6 @@ title: Running On Simulator
layout: docs layout: docs
category: Guides (iOS) category: Guides (iOS)
permalink: docs/running-on-simulator-ios.html permalink: docs/running-on-simulator-ios.html
banner: ejected
next: communication-ios next: communication-ios
previous: linking-libraries-ios previous: linking-libraries-ios
--- ---

863
docs/scrollview.md Normal file
View File

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

170
docs/sectionlist.md Normal file
View File

@ -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 |

145
docs/segmentedcontrolios.md Normal file
View File

@ -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 |

74
docs/settings.md Normal file
View File

@ -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

83
docs/shadow-props.md Normal file
View File

@ -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 |

98
docs/share.md Normal file
View File

@ -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

View File

@ -4,7 +4,6 @@ title: Generating Signed APK
layout: docs layout: docs
category: Guides (Android) category: Guides (Android)
permalink: docs/signed-apk-android.html permalink: docs/signed-apk-android.html
banner: ejected
next: android-building-from-source next: android-building-from-source
previous: headless-js-android previous: headless-js-android
--- ---

327
docs/slider.md Normal file
View File

@ -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 |

52
docs/snapshotviewios.md Normal file
View File

@ -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 |

327
docs/statusbar.md Normal file
View File

@ -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 |

19
docs/statusbarios.md Normal file
View File

@ -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

124
docs/stylesheet.md Normal file
View File

@ -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
---
---
---

134
docs/switch.md Normal file
View File

@ -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 |

195
docs/systrace.md Normal file
View File

@ -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

188
docs/tabbarios-item.md Normal file
View File

@ -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 |

144
docs/tabbarios.md Normal file
View File

@ -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 |

Some files were not shown because too many files have changed in this diff Show More