Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

moast there

Browse Source
This commit is contained in:
Hector Ramos
2017-10-26 18:46:40 -07:00
parent da2a8b365c
commit 73f2007679
131 changed files with 1879 additions and 14731 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docgen/server/generate.js
+25 -13
View File
@@ -198,6 +198,9 @@ function checkOutDocs() {
return extractMarkdownFromHTMLDocs(file);
}).then((res) => {
// console.log(res);
if (res.markdown === undefined) {
return;
}
const { frontmatter, markdown } = res;
const version = extractDocVersionFromFilename(file);
@@ -211,13 +214,19 @@ function checkOutDocs() {
sidebarMetadata[version] = { "docs": { "APIs": [] } };
}
if (frontmatter.attributes.original_id !== "404" && frontmatter.attributes.original_id !== "index") {
if (frontmatter.attributes.original_id !== "404"
&& frontmatter.attributes.original_id !== "index"
&& frontmatter.attributes.original_id !== "help"
&& frontmatter.attributes.original_id !== "users"
&& frontmatter.attributes.original_id !== "showcase"
&& frontmatter.attributes.original_id !== "support"
&& frontmatter.attributes.original_id !== "versions") {
sidebarMetadata[version]["docs"]["APIs"].push(frontmatter.attributes.original_id);
return fs.outputFile(pathToOutputFile.toString(), markdown);
return fs.outputFile(pathToOutputFile.toString(), markdown).then(() => {return;}).catch((e) => {console.error(e)});
}
return;
})
});
});
return seq;
}).then(() => {
@@ -229,12 +238,14 @@ function checkOutDocs() {
filepath.create(CWD, '..', 'website', SIDEBAR_DIR);
for (var version in sidebarMetadata) {
if (sidebarMetadata.hasOwnProperty(version)) {
var sidebar = sidebarMetadata[version];
const pathToSidebarFile = filepath.create(CWD, BUILD_DIR, SIDEBAR_DIR, `version-${version}-sidebar.json`);
console.log(`Writing ${pathToSidebarFile}: ${sidebar}`);
// TODO: Problem: this series of promises is just wiritng the same version over and over. Figure out jhow to serialize this correctly.
seq = seq.then(() => {
return fs.outputFile(pathToSidebarFile.toString(), JSON.stringify(sidebar));
var sidebar = sidebarMetadata[version];
const pathToSidebarFile = filepath.create(CWD, '..', 'website', SIDEBAR_DIR, `version-${version}-sidebars.json`);
console.log(`Writing ${pathToSidebarFile}: ${sidebar}`);
return fs.outputFile(pathToSidebarFile.toString(), JSON.stringify(sidebar));
});
}
}
@@ -244,10 +255,7 @@ function checkOutDocs() {
const versions = Object.keys(sidebarMetadata);
const pathToVersionsFile = filepath.create(CWD, BUILD_DIR, `versions.json`);
return fs.outputFile(pathToVersionsFile.toString(), JSON.stringify(versions));
for (var version in sidebarMetadata) {
}
return fs.outputFile(pathToVersionsFile.toString(), JSON.stringify(versions.reverse()));
});
}
@@ -265,12 +273,16 @@ function extractComponentNameFromFilename(file) {
function extractMarkdownFromHTMLDocs(file) {
if (file.indexOf("404") !== -1) {
return { frontmatter: {attributes: { original_id: '404', id: '404', permalink: '404.html'}}, markdown: '' };
return { };
}
// console.log(`Processing ${file}`);
return JSDOM.fromFile(filepath.create(file).toString())
.then((dom) => {
const body = bodyContentFromDOM(dom);
if (!body) {
return {};
}
const componentName = extractComponentNameFromFilename(file);
const version = extractDocVersionFromFilename(file);
const markdown = generateMarkdown(componentName, body, version);
docs/Accessibility.md
-175
View File
@@ -1,175 +0,0 @@
---
id: accessibility
title: Accessibility
---
## Native App Accessibility (iOS and Android)
Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.
In addition to this documentation, you might find [this blog post](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/) about React Native accessibility to be useful.
## Making Apps Accessible
### Accessibility properties
#### accessible (iOS, Android)
When `true`, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
```javascript
<View accessible={true}>
<Text>text one</Text>
<Text>text two</Text>
</View>
```
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
#### accessibilityLabel (iOS, Android)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the `accessibilityLabel` property to a custom string on your View:
```javascript
<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
```
In the above example, the `accessibilityLabel` on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
#### accessibilityTraits (iOS)
Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.
To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:
* **none** Used when the element has no traits.
* **button** Used when the element should be treated as a button.
* **link** Used when the element should be treated as a link.
* **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
* **search** Used when the text field element should also be treated as a search field.
* **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
* **selected** Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
* **plays** Used when the element plays its own sound when activated.
* **key** Used when the element acts as a keyboard key.
* **text** Used when the element should be treated as static text that cannot change.
* **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
* **disabled** Used when the control is not enabled and does not respond to user input.
* **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
* **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
* **adjustable** Used when an element can be "adjusted" (e.g. a slider).
* **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
* **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
#### accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views `A` and `B`, setting `accessibilityViewIsModal` to `true` on view `B` causes VoiceOver to ignore the elements in the view `A`.
On the other hand, if view `B` contains a child view `C` and you set `accessibilityViewIsModal` to `true` on view `C`, VoiceOver does not ignore the elements in view `A`.
#### onAccessibilityTap (iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
#### onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an `onMagicTap` function, the system will traverse up the view hierarchy until it finds a view that does.
#### accessibilityComponentType (Android)
In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.
```javascript
<TouchableWithoutFeedback accessibilityComponentType=”button”
onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableWithoutFeedback>
```
In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.
#### accessibilityLiveRegion (Android)
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
* **none** Accessibility services should not announce changes to this view.
* **polite** Accessibility services should announce changes to this view.
* **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
```javascript
<TouchableWithoutFeedback onPress={this._addOne}>
<View style={styles.embedded}>
<Text>Click me</Text>
</View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
Clicked {this.state.count} times
</Text>
```
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
#### importantForAccessibility (Android)
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
```javascript
<View style={styles.container}>
<View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
backgroundColor: 'green'}} importantForAccessibility=”yes”>
<Text> First layout </Text>
</View>
<View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendants”>
<Text> Second layout </Text>
</View>
</View>
```
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.
### Checking if a Screen Reader is Enabled
The `AccessibilityInfo` API allows you to determine whether or not a screen reader is currently active. See the [AccessibilityInfo documentation](docs/accessibilityinfo.html) for details.
### Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.
```javascript
_onPress: function() {
this.state.radioButton = this.state.radioButton === “radiobutton_checked” ?
“radiobutton_unchecked” : “radiobutton_checked”;
if (this.state.radioButton === “radiobutton_checked”) {
RCTUIManager.sendAccessibilityEvent(
ReactNative.findNodeHandle(this),
RCTUIManager.AccessibilityEventTypes.typeViewClicked);
}
}
<CustomRadioButton
accessibleComponentType={this.state.radioButton}
onPress={this._onPress}/>
```
In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.
## Testing VoiceOver Support (iOS)
To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.
To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.
At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.
docs/Animations.md
-505
View File
@@ -1,505 +0,0 @@
---
id: animations
title: Animations
---
Animations are very important to create a great user experience.
Stationary objects must overcome inertia as they start moving.
Objects in motion have momentum and rarely come to a stop immediately.
Animations allow you to convey physically believable motion in your interface.
React Native provides two complementary animation systems:
[`Animated`](docs/animations.html#animated-api) for granular and interactive control of specific values, and
[`LayoutAnimation`](docs/animations.html#layoutanimation) for animated global layout transactions.
## `Animated` API
The [`Animated`](docs/animated.html) API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way.
`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.
`Animated` exports four animatable component types: `View`, `Text`, `Image`, and `ScrollView`, but you can also create your own using `Animated.createAnimatedComponent()`.
For example, a container view that fades in when it is mounted may look like this:
```SnackPlayer
import React from 'react';
import { Animated, Text, View } from 'react-native';
class FadeInView extends React.Component {
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
}
componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 10000, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<Animated.View // Special animatable View
style={{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{this.props.children}
</Animated.View>
);
}
}
// You can then use your `FadeInView` in place of a `View` in your components:
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeInView>
</View>
)
}
}
```
Let's break down what's happening here.
In the `FadeInView` constructor, a new `Animated.Value` called `fadeAnim` is initialized as part of `state`.
The opacity property on the `View` is mapped to this animated value.
Behind the scenes, the numeric value is extracted and used to set opacity.
When the component mounts, the opacity is set to 0.
Then, an easing animation is started on the `fadeAnim` animated value,
which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1.
This is done in an optimized way that is faster than calling `setState` and re-rendering.
Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
### Configuring animations
Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](docs/animated.html#timing).
It supports animating a value over time using one of various predefined easing functions, or you can use your own.
Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
By default, `timing` will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop.
You can specify a different easing function by passing a `easing` parameter.
Custom `duration` or even a `delay` before the animation starts is also supported.
For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
```javascript
Animated.timing(
this.state.xPosition,
{
toValue: 100,
easing: Easing.back,
duration: 2000,
}
).start();
```
Take a look at the [Configuring animations](docs/animated.html#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations.
### Composing animations
Animations can be combined and played in sequence or in parallel.
Sequential animations can play immediately after the previous animation has finished,
or they can start after a specified delay.
The `Animated` API provides several methods, such as `sequence()` and `delay()`,
each of which simply take an array of animations to execute and automatically calls `start()`/`stop()` as needed.
For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
```javascript
Animated.sequence([ // decay, then spring to start and twirl
Animated.decay(position, { // coast to a stop
velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release
deceleration: 0.997,
}),
Animated.parallel([ // after decay, in parallel:
Animated.spring(position, {
toValue: {x: 0, y: 0} // return to start
}),
Animated.timing(twirl, { // and twirl
toValue: 360,
}),
]),
]).start(); // start the sequence group
```
If one animation is stopped or interrupted, then all other animations in the group are also stopped.
`Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this.
You can find a full list of composition methods in the [Composing animations](docs/animated.html#composing-animations) section of the `Animated` API reference.
### Combining animated values
You can [combine two animated values](docs/animated.html#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value.
There are some cases where an animated value needs to invert another animated value for calculation.
An example is inverting a scale (2x --> 0.5x):
```javascript
const a = Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
toValue: 2,
}).start();
```
### Interpolation
Each property can be run through an interpolation first.
An interpolation maps input ranges to output ranges,
typically using a linear interpolation but also supports easing functions.
By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.
A simple mapping to convert a 0-1 range to a 0-100 range would be:
```javascript
value.interpolate({
inputRange: [0, 1],
outputRange: [0, 100],
});
```
For example, you may want to think about your `Animated.Value` as going from 0 to 1,
but animate the position from 150px to 0px and the opacity from 0 to 1.
This can easily be done by modifying `style` from the example above like so:
```javascript
style={{
opacity: this.state.fadeAnim, // Binds directly
transform: [{
translateY: this.state.fadeAnim.interpolate({
inputRange: [0, 1],
outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0
}),
}],
}}
```
[`interpolate()`](docs/animated.html#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks.
For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do:
```javascript
value.interpolate({
inputRange: [-300, -100, 0, 100, 101],
outputRange: [300, 0, 1, 0, 0],
});
```
Which would map like so:
```
Input | Output
------|-------
-400| 450
-300| 300
-200| 150
-100| 0
-50| 0.5
0| 1
50| 0.5
100| 0
101| 0
200| 0
```
`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do:
```javascript
value.interpolate({
inputRange: [0, 360],
outputRange: ['0deg', '360deg']
})
```
`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the
[`Easing`](docs/easing.html) module.
`interpolate()` also has configurable behavior for extrapolating the `outputRange`.
You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options.
The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`.
### Tracking dynamic values
Animated values can also track other values.
Just set the `toValue` of an animation to another animated value instead of a plain number.
For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking.
They can also be composed with interpolations:
```javascript
Animated.spring(follower, {toValue: leader}).start();
Animated.timing(opacity, {
toValue: pan.x.interpolate({
inputRange: [0, 300],
outputRange: [1, 0],
}),
}).start();
```
The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`.
`ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging.
It is a simple wrapper that basically contains two `Animated.Value` instances and some helper functions that call through to them,
making `ValueXY` a drop-in replacement for `Value` in many cases.
It allows us to track both x and y values in the example above.
### Tracking gestures
Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](docs/animated.html#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.
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
}
}
}]
)}
```
When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`.
We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler,
which is the `gestureState`.
```javascript
onPanResponderMove={Animated.event(
[null, // ignore the native event
// extract dx and dy from gestureState
// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
{dx: pan.x, dy: pan.y}
])}
```
### Responding to the current animation value
You may notice that there is no obvious way to read the current value while animating.
This is because the value may only be known in the native runtime due to optimizations.
If you need to run JavaScript in response to the current value, there are two approaches:
- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions.
- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value.
This is useful for triggering state changes,
for example snapping a bobble to a new option as the user drags it closer,
because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop.
This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system.
Check out `Animated.Value.addListener` as a way to work around some of these limitations,
but use it sparingly since it might have performance implications in the future.
### Using the native driver
The `Animated` API is designed to be serializable.
By using the [native driver](http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html),
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.
Using the native driver for normal animations is quite simple.
Just add `useNativeDriver: true` to the animation config when starting it.
```javascript
Animated.timing(this.state.animatedValue, {
toValue: 1,
duration: 500,
useNativeDriver: true, // <-- Add this
}).start();
```
Animated values are only compatible with one driver so if you use native driver when starting an animation on a value,
make sure every animation on that value also uses the native driver.
The native driver also works with `Animated.event`.
This is specially useful for animations that follow the scroll position as without the native driver,
the animation will always run a frame behind the gesture due to the async nature of React Native.
```javascript
<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
{ useNativeDriver: true } // <-- Add this
)}
>
{content}
</Animated.ScrollView>
```
You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/master/RNTester/),
then loading the Native Animated Example.
You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js) to learn how these examples were produced.
#### Caveats
Not everything you can do with `Animated` is currently supported by the native driver.
The main limitation is that you can only animate non-layout properties:
things like `transform` and `opacity` will work, but flexbox and position properties will not.
When using `Animated.event`, it will only work with direct events and not bubbling events.
This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`.
### Bear in mind
While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place.
At this time some animations may not render on Android without it. Example below.
```javascript
<Animated.View
style={{
transform: [
{ scale: this.state.scale },
{ rotateY: this.state.rotateY },
{ perspective: 1000 } // without this line this Animation will not render on Android while working fine on iOS
]
}}
/>
```
### Additional examples
The RNTester app has various examples of `Animated` in use:
- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/RNTester/js/AnimatedGratuitousApp)
- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js)
## `LayoutAnimation` API
`LayoutAnimation` allows you to globally configure `create` and `update`
animations that will be used for all views in the next render/layout cycle.
This is useful for doing flexbox layout updates without bothering to measure or
calculate specific properties in order to animate them directly, and is
especially useful when layout changes may affect ancestors, for example a "see
more" expansion that also increases the size of the parent and pushes down the
row below which would otherwise require explicit coordination between the
components in order to animate them all in sync.
Note that although `LayoutAnimation` is very powerful and can be quite useful,
it provides much less control than `Animated` and other animation libraries, so
you may need to use another approach if you can't get `LayoutAnimation` to do
what you want.
Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
```javascript
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
```
```SnackPlayer
import React from 'react';
import {
NativeModules,
LayoutAnimation,
Text,
TouchableOpacity,
StyleSheet,
View,
} from 'react-native';
const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {
state = {
w: 100,
h: 100,
};
_onPress = () => {
// Animate the update
LayoutAnimation.spring();
this.setState({w: this.state.w + 15, h: this.state.h + 15})
}
render() {
return (
<View style={styles.container}>
<View style={[styles.box, {width: this.state.w, height: this.state.h}]} />
<TouchableOpacity onPress={this._onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
box: {
width: 200,
height: 200,
backgroundColor: 'red',
},
button: {
backgroundColor: 'black',
paddingHorizontal: 20,
paddingVertical: 15,
marginTop: 15,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
},
});
```
This example uses a preset value, you can customize the animations as
you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js)
for more information.
## Additional notes
### `requestAnimationFrame`
`requestAnimationFrame` is a polyfill from the browser that you might be
familiar with. It accepts a function as its only argument and calls that
function before the next repaint. It is an essential building block for
animations that underlies all of the JavaScript-based animation APIs. In
general, you shouldn't need to call this yourself - the animation APIs will
manage frame updates for you.
### `setNativeProps`
As mentioned [in the Direct Manipulation section](docs/direct-manipulation.html),
`setNativeProps` allows us to modify properties of native-backed
components (components that are actually backed by native views, unlike
composite components) directly, without having to `setState` and
re-render the component hierarchy.
We could use this in the Rebound example to update the scale - this
might be helpful if the component that we are updating is deeply nested
and hasn't been optimized with `shouldComponentUpdate`.
If you find your animations with dropping frames (performing below 60 frames
per second), look into using `setNativeProps` or `shouldComponentUpdate` to
optimize them. Or you could run the animations on the UI thread rather than
the JavaScript thread [with the useNativeDriver
option](http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html).
You may also want to defer any computationally intensive work until after
animations are complete, using the
[InteractionManager](docs/interactionmanager.html). You can monitor the
frame rate by using the In-App Developer Menu "FPS Monitor" tool.
docs/Colors.md
-182
View File
@@ -1,182 +0,0 @@
---
id: colors
title: Color Reference
---
Components in React Native are [styled using JavaScript](docs/style.html). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
### Red-green-blue
React Native supports `rgb()` and `rgba()` in both hexadecimal and functional notation:
- `'#f0f'` (#rgb)
- `'#ff00ff'` (#rrggbb)
- `'rgb(255, 0, 255)'`
- `'rgba(255, 255, 255, 1.0)'`
- `'#f0ff'` (#rgba)
- `'#ff00ff00'` (#rrggbbaa)
### Hue-saturation-lightness
`hsl()` and `hsla()` is supported in functional notation:
- `'hsl(360, 100%, 100%)'`
- `'hsla(360, 100%, 100%, 1.0)'`
### `transparent`
This is a shortcut for `rgba(0,0,0,0)`:
- `'transparent'`
### Named colors
You can also use color names as values. React Native follows the [CSS3 specification](http://www.w3.org/TR/css3-color/#svg-color):
- <color aliceblue /> aliceblue (#f0f8ff)
- <color antiquewhite /> antiquewhite (#faebd7)
- <color aqua /> aqua (#00ffff)
- <color aquamarine /> aquamarine (#7fffd4)
- <color azure /> azure (#f0ffff)
- <color beige /> beige (#f5f5dc)
- <color bisque /> bisque (#ffe4c4)
- <color black /> black (#000000)
- <color blanchedalmond /> blanchedalmond (#ffebcd)
- <color blue /> blue (#0000ff)
- <color blueviolet /> blueviolet (#8a2be2)
- <color brown /> brown (#a52a2a)
- <color burlywood /> burlywood (#deb887)
- <color cadetblue /> cadetblue (#5f9ea0)
- <color chartreuse /> chartreuse (#7fff00)
- <color chocolate /> chocolate (#d2691e)
- <color coral /> coral (#ff7f50)
- <color cornflowerblue /> cornflowerblue (#6495ed)
- <color cornsilk /> cornsilk (#fff8dc)
- <color crimson /> crimson (#dc143c)
- <color cyan /> cyan (#00ffff)
- <color darkblue /> darkblue (#00008b)
- <color darkcyan /> darkcyan (#008b8b)
- <color darkgoldenrod /> darkgoldenrod (#b8860b)
- <color darkgray /> darkgray (#a9a9a9)
- <color darkgreen /> darkgreen (#006400)
- <color darkgrey /> darkgrey (#a9a9a9)
- <color darkkhaki /> darkkhaki (#bdb76b)
- <color darkmagenta /> darkmagenta (#8b008b)
- <color darkolivegreen /> darkolivegreen (#556b2f)
- <color darkorange /> darkorange (#ff8c00)
- <color darkorchid /> darkorchid (#9932cc)
- <color darkred /> darkred (#8b0000)
- <color darksalmon /> darksalmon (#e9967a)
- <color darkseagreen /> darkseagreen (#8fbc8f)
- <color darkslateblue /> darkslateblue (#483d8b)
- <color darkslategrey /> darkslategrey (#2f4f4f)
- <color darkturquoise /> darkturquoise (#00ced1)
- <color darkviolet /> darkviolet (#9400d3)
- <color deeppink /> deeppink (#ff1493)
- <color deepskyblue /> deepskyblue (#00bfff)
- <color dimgray /> dimgray (#696969)
- <color dimgrey /> dimgrey (#696969)
- <color dodgerblue /> dodgerblue (#1e90ff)
- <color firebrick /> firebrick (#b22222)
- <color floralwhite /> floralwhite (#fffaf0)
- <color forestgreen /> forestgreen (#228b22)
- <color fuchsia /> fuchsia (#ff00ff)
- <color gainsboro /> gainsboro (#dcdcdc)
- <color ghostwhite /> ghostwhite (#f8f8ff)
- <color gold /> gold (#ffd700)
- <color goldenrod /> goldenrod (#daa520)
- <color gray /> gray (#808080)
- <color green /> green (#008000)
- <color greenyellow /> greenyellow (#adff2f)
- <color grey /> grey (#808080)
- <color honeydew /> honeydew (#f0fff0)
- <color hotpink /> hotpink (#ff69b4)
- <color indianred /> indianred (#cd5c5c)
- <color indigo /> indigo (#4b0082)
- <color ivory /> ivory (#fffff0)
- <color khaki /> khaki (#f0e68c)
- <color lavender /> lavender (#e6e6fa)
- <color lavenderblush /> lavenderblush (#fff0f5)
- <color lawngreen /> lawngreen (#7cfc00)
- <color lemonchiffon /> lemonchiffon (#fffacd)
- <color lightblue /> lightblue (#add8e6)
- <color lightcoral /> lightcoral (#f08080)
- <color lightcyan /> lightcyan (#e0ffff)
- <color lightgoldenrodyellow /> lightgoldenrodyellow (#fafad2)
- <color lightgray /> lightgray (#d3d3d3)
- <color lightgreen /> lightgreen (#90ee90)
- <color lightgrey /> lightgrey (#d3d3d3)
- <color lightpink /> lightpink (#ffb6c1)
- <color lightsalmon /> lightsalmon (#ffa07a)
- <color lightseagreen /> lightseagreen (#20b2aa)
- <color lightskyblue /> lightskyblue (#87cefa)
- <color lightslategrey /> lightslategrey (#778899)
- <color lightsteelblue /> lightsteelblue (#b0c4de)
- <color lightyellow /> lightyellow (#ffffe0)
- <color lime /> lime (#00ff00)
- <color limegreen /> limegreen (#32cd32)
- <color linen /> linen (#faf0e6)
- <color magenta /> magenta (#ff00ff)
- <color maroon /> maroon (#800000)
- <color mediumaquamarine /> mediumaquamarine (#66cdaa)
- <color mediumblue /> mediumblue (#0000cd)
- <color mediumorchid /> mediumorchid (#ba55d3)
- <color mediumpurple /> mediumpurple (#9370db)
- <color mediumseagreen /> mediumseagreen (#3cb371)
- <color mediumslateblue /> mediumslateblue (#7b68ee)
- <color mediumspringgreen /> mediumspringgreen (#00fa9a)
- <color mediumturquoise /> mediumturquoise (#48d1cc)
- <color mediumvioletred /> mediumvioletred (#c71585)
- <color midnightblue /> midnightblue (#191970)
- <color mintcream /> mintcream (#f5fffa)
- <color mistyrose /> mistyrose (#ffe4e1)
- <color moccasin /> moccasin (#ffe4b5)
- <color navajowhite /> navajowhite (#ffdead)
- <color navy /> navy (#000080)
- <color oldlace /> oldlace (#fdf5e6)
- <color olive /> olive (#808000)
- <color olivedrab /> olivedrab (#6b8e23)
- <color orange /> orange (#ffa500)
- <color orangered /> orangered (#ff4500)
- <color orchid /> orchid (#da70d6)
- <color palegoldenrod /> palegoldenrod (#eee8aa)
- <color palegreen /> palegreen (#98fb98)
- <color paleturquoise /> paleturquoise (#afeeee)
- <color palevioletred /> palevioletred (#db7093)
- <color papayawhip /> papayawhip (#ffefd5)
- <color peachpuff /> peachpuff (#ffdab9)
- <color peru /> peru (#cd853f)
- <color pink /> pink (#ffc0cb)
- <color plum /> plum (#dda0dd)
- <color powderblue /> powderblue (#b0e0e6)
- <color purple /> purple (#800080)
- <color rebeccapurple /> rebeccapurple (#663399)
- <color red /> red (#ff0000)
- <color rosybrown /> rosybrown (#bc8f8f)
- <color royalblue /> royalblue (#4169e1)
- <color saddlebrown /> saddlebrown (#8b4513)
- <color salmon /> salmon (#fa8072)
- <color sandybrown /> sandybrown (#f4a460)
- <color seagreen /> seagreen (#2e8b57)
- <color seashell /> seashell (#fff5ee)
- <color sienna /> sienna (#a0522d)
- <color silver /> silver (#c0c0c0)
- <color skyblue /> skyblue (#87ceeb)
- <color slateblue /> slateblue (#6a5acd)
- <color slategray /> slategray (#708090)
- <color snow /> snow (#fffafa)
- <color springgreen /> springgreen (#00ff7f)
- <color steelblue /> steelblue (#4682b4)
- <color tan /> tan (#d2b48c)
- <color teal /> teal (#008080)
- <color thistle /> thistle (#d8bfd8)
- <color tomato /> tomato (#ff6347)
- <color turquoise /> turquoise (#40e0d0)
- <color violet /> violet (#ee82ee)
- <color wheat /> wheat (#f5deb3)
- <color white /> white (#ffffff)
- <color whitesmoke /> whitesmoke (#f5f5f5)
- <color yellow /> yellow (#ffff00)
- <color yellowgreen /> yellowgreen (#9acd32)
docs/Debugging.md
-233
View File
@@ -1,233 +0,0 @@
---
id: debugging
title: Debugging
---
## Enabling Keyboard Shortcuts
React Native supports a few keyboard shortcuts in the iOS Simulator. They are described below. To enable them, open the Hardware menu, select Keyboard, and make sure that "Connect Hardware Keyboard" is checked.
## Accessing the In-App Developer Menu
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator.
![](img/DeveloperMenu.png)
> The Developer Menu is disabled in release (production) builds.
## Reloading JavaScript
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press `⌘R` in the iOS Simulator, or tap `R` twice on Android emulators.
### Automatic reloading
You can speed up your development times by having your app reload automatically any time your code changes. Automatic reloading can be enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new versions of your files are injected into the JavaScript bundle automatically by enabling [Hot Reloading](https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html) from the Developer Menu. This will allow you to persist the app's state through reloads.
> There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
* You have added new resources to your native app's bundle, such as an image in `Images.xcassets` on iOS or the `res/drawable` folder on Android.
* You have modified native code (Objective-C/Swift on iOS or Java/C++ on Android).
## In-app Errors and Warnings
Errors and warnings are displayed inside your app in development builds.
### Errors
In-app errors are displayed in a full screen alert with a red background inside your app. This screen is known as a RedBox. You can use `console.error()` to manually trigger one.
### Warnings
Warnings will be displayed on screen with a yellow background. These alerts are known as YellowBoxes. Click on the alerts to show more information or to dismiss them.
As with a RedBox, you can use `console.warn()` to trigger a YellowBox.
YellowBoxes can be disabled during development by using `console.disableYellowBox = true;`. Specific warnings can be ignored programmatically by setting an array of prefixes that should be ignored: `console.ignoredYellowBox = ['Warning: ...'];`.
In CI/Xcode, YellowBoxes can also be disabled by setting the `IS_TESTING` environment variable.
> RedBoxes and YellowBoxes are automatically disabled in release (production) builds.
## Chrome Developer Tools
To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui).
Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer Tools](https://developer.chrome.com/devtools). You may also access the DevTools using keyboard shortcuts (`⌘⌥I` on macOS, `Ctrl` `Shift` `I` on Windows). You may also want to enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.
> Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](docs/debugging.html#react-developer-tools) to learn how.
### Debugging using a custom JavaScript debugger
To use a custom JavaScript debugger in place of Chrome Developer Tools, set the `REACT_DEBUGGER` environment variable to a command that will start your custom debugger. You can then select "Debug JS Remotely" from the Developer Menu to start debugging.
The debugger will receive a list of all project roots, separated by a space. For example, if you set `REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative"`, then the command `node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app` will be used to start your debugger.
> Custom debugger commands executed this way should be short-lived processes, and they shouldn't produce more than 200 kilobytes of output.
## React Developer Tools
You can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally:
```
npm install -g react-devtools
```
Now run `react-devtools` from the terminal to launch the standalone DevTools app:
```
react-devtools
```
![React DevTools](img/ReactDevTools.png)
It should connect to your simulator within a few seconds.
> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. Add the `react-devtools` package to your project using `npm install --save-dev react-devtools`, then add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.
### Integration with React Native Inspector
Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
![React Native Inspector](img/Inspector.gif)
However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
![React DevTools Inspector Integration](img/ReactDevToolsInspector.gif)
You can choose "Hide Inspector" in the same menu to exit this mode.
### Inspecting Component Instances
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
First, follow the instructions for debugging in Chrome to open the Chrome console.
Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**
Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.
![React DevTools Chrome Console Integration](img/ReactDevToolsDollarR.gif)
## Performance Monitor
You can enable a performance overlay to help you debug performance problems by selecting "Perf Monitor" in the Developer Menu.
<hr style="margin-top:25px; margin-bottom:25px;"/>
# Debugging in Ejected Apps
<div class="banner-crna-ejected" style="margin-top:25px">
<h3>Projects with Native Code Only</h3>
<p>
The remainder of this guide 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>
## Accessing console logs
You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:
```
$ react-native log-ios
$ react-native log-android
```
You may also access these through `Debug → Open System Log...` in the iOS Simulator or by running `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal while an Android app is running on a device or emulator.
> If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
## Debugging on a device with Chrome Developer Tools
> If you're using Create React Native App, this is configured for you already.
On iOS devices, open the file [`RCTWebSocketExecutor.m`](https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.
On Android 5.0+ devices connected via USB, you can use the [`adb` command line tool](http://developer.android.com/tools/help/adb.html) to setup port forwarding from the device to your computer:
`adb reverse tcp:8081 tcp:8081`
Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.
> If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.
### Debugging with [Stetho](http://facebook.github.io/stetho/) on Android
Follow this guide to enable Stetho for Debug mode:
1. In `android/app/build.gradle`, add these lines in the `dependencies` section:
```gradle
debugCompile 'com.facebook.stetho:stetho:1.5.0'
debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0'
```
> The above will configure Stetho v1.5.0. You can check at http://facebook.github.io/stetho/ if a newer version is available.
2. Create the following Java classes to wrap the Stetho call, one for release and one for debug:
```java
// android/app/src/release/java/com/{yourAppName}/StethoWrapper.java
public class StethoWrapper {
public static void initialize(Context context) {
// NO_OP
}
public static void addInterceptor() {
// NO_OP
}
}
```
```java
// android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java
public class StethoWrapper {
public static void initialize(Context context) {
Stetho.initializeWithDefaults(context);
}
public static void addInterceptor() {
OkHttpClient client = OkHttpClientProvider.getOkHttpClient()
.newBuilder()
.addNetworkInterceptor(new StethoInterceptor())
.build();
OkHttpClientProvider.replaceOkHttpClient(client);
}
}
```
3. Open `android/app/src/main/java/com/{yourAppName}/MainApplication.java` and replace the original `onCreate` function:
```java
public void onCreate() {
super.onCreate();
if (BuildConfig.DEBUG) {
StethoWrapper.initialize(this);
StethoWrapper.addInterceptor();
}
SoLoader.init(this, /* native exopackage */ false);
}
```
4. Open the project in Android Studio and resolve any dependency issues. The IDE should guide you through this steps after hovering your pointer over the red lines.
5. Run `react-native run-android`.
6. In a new Chrome tab, open: `chrome://inspect`, then click on the 'Inspect device' item next to "Powered by Stetho".
## Debugging native code
When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.
docs/Images.md
-207
View File
@@ -1,207 +0,0 @@
---
id: images
title: Images
---
## Static Image Resources
React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:
```javascript
<Image source={require('./my-icon.png')} />
```
The image name is resolved the same way JS modules are resolved. In the example above, the packager will look for `my-icon.png` in the same folder as the component that requires it. Also, if you have `my-icon.ios.png` and `my-icon.android.png`, the packager will pick the correct file for the platform.
You can also use the `@2x` and `@3x` suffixes to provide images for different screen densities. If you have the following file structure:
```
.
├── button.js
└── img
├── check@2x.png
└── check@3x.png
```
...and `button.js` code contains:
```javascript
<Image source={require('./img/check.png')} />
```
...the packager will bundle and serve the image corresponding to device's screen density. For example, `check@2x.png`, will be used on an iPhone 7, while`check@3x.png` will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.
On Windows, you might need to restart the packager if you add new images to your project.
Here are some benefits that you get:
1. Same system on iOS and Android.
2. Images live in the same folder as your JavaScript code. Components are self-contained.
3. No global namespace, i.e. you don't have to worry about name collisions.
4. Only the images that are actually used will be packaged into your app.
5. Adding and changing images doesn't require app recompilation, just refresh the simulator as you normally do.
6. The packager knows the image dimensions, no need to duplicate it in the code.
7. Images can be distributed via [npm](https://www.npmjs.com/) packages.
In order for this to work, the image name in `require` has to be known statically.
```javascript
// GOOD
<Image source={require('./my-icon.png')} />
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
```
Note that image sources required this way include size (width, height) info for the Image. If you need to scale the image dynamically (i.e. via flex), you may need to manually set `{ width: undefined, height: undefined }` on the style attribute.
## Static Non-Image Resources
The `require` syntax described above can be used to statically include audio, video or document files in your project as well. Most common file types are supported including `.mp3`, `.wav`, `.mp4`, `.mov`, `.html` and `.pdf`. See [packager defaults](https://github.com/facebook/metro-bundler/blob/master/packages/metro-bundler/src/defaults.js#L13-L18) for the full list.
You can add support for other types by creating a packager config file (see the [packager config file](https://github.com/facebook/react-native/blob/master/local-cli/util/Config.js#L34-L39) for the full list of configuration options).
A caveat is that videos must use absolute positioning instead of `flexGrow`, since size info is not currently passed for non-image assets. This limitation doesn't occur for videos that are linked directly into Xcode or the Assets folder for Android.
## Images From Hybrid App's Resources
If you are building a hybrid app (some UIs in React Native, some UIs in platform code) you can still use images that are already bundled into the app.
For images included via Xcode asset catalogs or in the Android drawable folder, use the image name without the extension:
```javascript
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
```
For images in the Android assets folder, use the `asset:/` scheme:
```javascript
<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />
```
These approaches provide no safety checks. It's up to you to guarantee that those images are available in the application. Also you have to specify image dimensions manually.
## Network Images
Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, *you will need to manually specify the dimensions of your image*. It's highly recommended that you use https as well in order to satisfy [App Transport Security](docs/running-on-device.html#app-transport-security) requirements on iOS.
```javascript
// GOOD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />
// BAD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
```
### Network Requests for Images
If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:
```javascript
<Image source={{
uri: 'https://facebook.github.io/react/img/logo_og.png',
method: 'POST',
headers: {
Pragma: 'no-cache'
},
body: 'Your Body goes here'
}}
style={{width: 400, height: 400}} />
```
## Uri Data Images
Sometimes, you might be getting encoded image data from a REST API call. You can use the `'data:'` uri scheme to use these images. Same as for network resources, *you will need to manually specify the dimensions of your image*.
> This is recommended for very small and dynamic images only, like icons in a list from a DB.
```javascript
// include at least width and height!
<Image style={{width: 51, height: 51, resizeMode: Image.resizeMode.contain}} source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}/>
```
### Cache Control (iOS Only)
In some cases you might only want to display an image if it is already in the local cache, i.e. a low resolution placeholder until a higher resolution is available. In other cases you do not care if the image is outdated and are willing to display an outdated image to save bandwidth. The `cache` source property gives you control over how the network layer interacts with the cache.
* `default`: Use the native platforms default strategy.
* `reload`: The data for the URL will be loaded from the originating source.
No existing cache data should be used to satisfy a URL load request.
* `force-cache`: The existing cached data will be used to satisfy the request,
regardless of its age or expiration date. If there is no existing data in the cache
corresponding the request, the data is loaded from the originating source.
* `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
its age or expiration date. If there is no existing data in the cache corresponding
to a URL load request, no attempt is made to load the data from the originating source,
and the load is considered to have failed.
```javascript
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png', cache: 'only-if-cached'}}
style={{width: 400, height: 400}} />
```
## Local Filesystem Images
See [CameraRoll](docs/cameraroll.html) for an example of
using local resources that are outside of `Images.xcassets`.
### Best Camera Roll Image
iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.
## Why Not Automatically Size Everything?
*In the browser* if you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.
*In React Native* this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or aspect ratio) of the remote image in advance, but we believe that it leads to a better user experience. Static images loaded from the app bundle via the `require('./my-icon.png')` syntax *can be automatically sized* because their dimensions are available immediately at the time of mounting.
For example, the result of `require('./my-icon.png')` might be:
```javascript
{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}
```
## Source as an object
In React Native, one interesting decision is that the `src` attribute is named `source` and doesn't take a string but an object with a `uri` attribute.
```javascript
<Image source={{uri: 'something.jpg'}} />
```
On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using `require('./my-icon.png')`, then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting `{uri: ...}`, we can output `{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}` and transparently support spriting on all the existing call sites.
On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.
## Background Image via Nesting
A common feature request from developers familiar with the web is `background-image`. To handle this use case, you can use the `<ImageBackground>` component, which has the same props as `<Image>`, and add whatever children to it you would like to layer on top of it.
You might not want to use `<ImageBackground>` in some cases, since the implementation is very simple. Refer to `<ImageBackground>`'s [source code](https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js) for more insight, and create your own custom component when needed.
```javascript
return (
<ImageBackground source={...}>
<Text>Inside</Text>
</ImageBackground>
);
```
## iOS Border Radius Styles
Please note that the following corner specific, border radius style properties are currently ignored by iOS's image component:
* `borderTopLeftRadius`
* `borderTopRightRadius`
* `borderBottomLeftRadius`
* `borderBottomRightRadius`
## Off-thread Decoding
Image decoding can take more than a frame-worth of time. This is one of the major sources of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.
docs/Navigation.md
-141
View File
@@ -1,141 +0,0 @@
---
id: navigation
title: Navigating Between Screens
---
Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.
This guide covers the various navigation components available in React Native.
If you are just getting started with navigation, you will probably want to use [React Navigation](docs/navigation.html#react-navigation). React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as [redux](https://reactnavigation.org/docs/guides/redux).
If you're only targeting iOS, you may want to also check out [NavigatorIOS](docs/navigation.html#navigatorios) as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native `UINavigationController` class. This component will not work on Android, however.
If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: [native-navigation](http://airbnb.io/native-navigation/), [react-native-navigation](https://github.com/wix/react-native-navigation).
## React Navigation
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code.
The first step is to install in your project:
```
npm install --save react-navigation
```
Then you can quickly create an app with a home screen and a profile screen:
```
import {
StackNavigator,
} from 'react-navigation';
const App = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
```
Each screen component can set navigation options such as the header title. It can use action creators on the `navigation` prop to link to other screens:
```
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
```
React Navigation routers make it easy to override navigation logic or integrate it into redux. Because routers can be nested inside each other, developers can override navigation logic for one area of the app without making widespread changes.
The views in React Navigation use native components and the [`Animated`](docs/animated.html) library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be easily customized.
For a complete intro to React Navigation, follow the [React Navigation Getting Started Guide](https://reactnavigation.org/docs/intro/), or browse other docs such as the [Intro to Navigators](https://reactnavigation.org/docs/navigators/).
## NavigatorIOS
`NavigatorIOS` looks and feels just like [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), because it is actually built on top of it.
![](img/NavigationStack-NavigatorIOS.gif)
```javascript
<NavigatorIOS
initialRoute={{
component: MyScene,
title: 'My Initial Scene',
passProps: { myProp: 'foo' },
}}
/>
```
Like other navigation systems, `NavigatorIOS` uses routes to represent screens, with some important differences. The actual component that will be rendered can be specified using the `component` key in the route, and any props that should be passed to this component can be specified in `passProps`. A "navigator" object is automatically passed as a prop to the component, allowing you to call `push` and `pop` as needed.
As `NavigatorIOS` leverages native UIKit navigation, it will automatically render a navigation bar with a back button and title.
```javascript
import React from 'react';
import PropTypes from 'prop-types';
import { Button, NavigatorIOS, Text, View } from 'react-native';
export default class NavigatorIOSApp extends React.Component {
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyScene,
title: 'My Initial Scene',
passProps: {index: 1},
}}
style={{flex: 1}}
/>
)
}
}
class MyScene extends React.Component {
static propTypes = {
route: PropTypes.shape({
title: PropTypes.string.isRequired
}),
navigator: PropTypes.object.isRequired,
}
constructor(props, context) {
super(props, context);
this._onForward = this._onForward.bind(this);
}
_onForward() {
let nextIndex = ++this.props.index;
this.props.navigator.push({
component: MyScene,
title: 'Scene ' + nextIndex,
passProps: {index: nextIndex}
});
}
render() {
return (
<View>
<Text>Current Scene: { this.props.title }</Text>
<Button
onPress={this._onForward}
title="Tap me to load the next scene"
/>
</View>
)
}
}
```
Check out the [`NavigatorIOS` reference docs](docs/navigatorios.html) to learn more about this component.
docs/Performance.md
-349
View File
@@ -1,349 +0,0 @@
---
id: performance
title: Performance
---
A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps.
Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization,
but there are areas where we're not quite there yet,
and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary.
We try our best to deliver buttery-smooth UI performance by default, but sometimes that just isn't possible.
This guide is intended to teach you some basics to help you to [troubleshoot performance issues](docs/performance.html#profiling),
as well as discuss [common sources of problems and their suggested solutions](docs/performance.html#common-sources-of-performance-problems).
## What you need to know about frames
Your grandparents' generation called movies ["moving pictures"](https://www.youtube.com/watch?v=F1i40rnpOsA) for a reason:
realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames.
The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be.
iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval.
If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.
Now to confuse the matter a little bit, open up the developer menu in your app and toggle `Show Perf Monitor`.
You will notice that there are two different frame rates.
![](img/PerfUtil.png)
### JS frame rate (JavaScript thread)
For most React Native applications, your business logic will run on the JavaScript thread.
This is where your React application lives, API calls are made, touch events are processed, etc...
Updates to native-backed views are batched and sent over to the native side at the end of each iteration of the event loop,
before the frame deadline (if all goes well).
If the JavaScript thread is unresponsive for a frame, it will be considered a dropped frame.
For example, if you were to call `this.setState` on the root component of a complex application and it resulted in re-rendering computationally expensive component subtrees,
it's conceivable that this might take 200ms and result in 12 frames being dropped.
Any animations controlled by JavaScript would appear to freeze during that time.
If anything takes longer than 100ms, the user will feel it.
This often happens during `Navigator` transitions:
when you push a new route, the JavaScript thread needs to render all of the components necessary for the scene in order to send over the proper commands to the native side to create the backing views.
It's common for the work being done here to take a few frames and cause [jank](http://jankfree.org/) because the transition is controlled by the JavaScript thread.
Sometimes components will do additional work on `componentDidMount`, which might result in a second stutter in the transition.
Another example is responding to touches:
if you are doing work across multiple frames on the JavaScript thread, you might notice a delay in responding to `TouchableOpacity`, for example.
This is because the JavaScript thread is busy and cannot process the raw touch events sent over from the main thread.
As a result, `TouchableOpacity` cannot react to the touch events and command the native view to adjust its opacity.
### UI frame rate (main thread)
Many people have noticed that performance of `NavigatorIOS` is better out of the box than `Navigator`.
The reason for this is that the animations for the transitions are done entirely on the main thread,
and so they are not interrupted by frame drops on the JavaScript thread.
Similarly, you can happily scroll up and down through a `ScrollView` when the JavaScript thread is locked up because the `ScrollView` lives on the main thread.
The scroll events are dispatched to the JS thread, but their receipt is not necessary for the scroll to occur.
## Common sources of performance problems
### Running in development mode (`dev=true`)
JavaScript thread performance suffers greatly when running in dev mode.
This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in [release builds](docs/running-on-device.html#building-your-app-for-production).
### Using `console.log` statements
When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread.
This includes calls from debugging libraries such as [redux-logger](https://github.com/evgenyrodionov/redux-logger),
so make sure to remove them before bundling.
You can also use this [babel plugin](https://babeljs.io/docs/plugins/transform-remove-console/) that removes all the `console.*` calls. You need to install it first with `npm i babel-plugin-transform-remove-console --save`, and then edit the `.babelrc` file under your project directory like this:
```json
{
"env": {
"production": {
"plugins": ["transform-remove-console"]
}
}
}
```
This will automatically remove all `console.*` calls in the release (production) versions of your project.
### `ListView` initial rendering is too slow or scroll performance is bad for large lists
Use the new [`FlatList`](docs/flatlist.html) or [`SectionList`](docs/sectionlist.html) component instead.
Besides simplifying the API, the new list components also have significant performance enhancements,
the main one being nearly constant memory usage for any number of rows.
If your [`FlatList`](docs/flatlist.html) is rendering slow, be sure that you've implemented
[`getItemLayout`](https://facebook.github.io/react-native/docs/flatlist.html#getitemlayout) to
optimize rendering speed by skipping measurement of the rendered items.
### JS FPS plunges when re-rendering a view that hardly changes
If you are using a ListView, you must provide a `rowHasChanged` function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.
Similarly, you can implement `shouldComponentUpdate` and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureRenderMixin to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.
### Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time
"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.
The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you [set `useNativeDriver: true`](https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html#how-do-i-use-this-in-my-app), while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.
One case where I have used this is for animating in a modal (sliding down from top and fading in a translucent overlay) while initializing and perhaps receiving responses for several network requests, rendering the contents of the modal, and updating the view where the modal was opened from. See the Animations guide for more information about how to use LayoutAnimation.
Caveats:
- LayoutAnimation only works for fire-and-forget animations ("static" animations) -- if it must be interruptible, you will need to use `Animated`.
### Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS
This is especially true when you have text with a transparent background positioned on top of an image,
or any other situation where alpha compositing would be required to re-draw the view on each frame.
You will find that enabling `shouldRasterizeIOS` or `renderToHardwareTextureAndroid` can help with this significantly.
Be careful not to overuse this or your memory usage could go through the roof.
Profile your performance and memory usage when using these props.
If you don't plan to move a view anymore, turn this property off.
### Animating the size of an image drops UI thread FPS
On iOS, each time you adjust the width or height of an Image component it is re-cropped and scaled from the original image.
This can be very expensive, especially for large images.
Instead, use the `transform: [{scale}]` style property to animate the size.
An example of when you might do this is when you tap an image and zoom it in to full screen.
### My TouchableX view isn't very responsive
Sometimes, if we do an action in the same frame that we are adjusting the opacity or highlight of a component that is responding to a touch,
we won't see that effect until after the `onPress` function has returned.
If `onPress` does a `setState` that results in a lot of work and a few frames dropped, this may occur.
A solution to this is to wrap any action inside of your `onPress` handler in `requestAnimationFrame`:
```js
handleOnPress() {
// Always use TimerMixin with requestAnimationFrame, setTimeout and
// setInterval
this.requestAnimationFrame(() => {
this.doExpensiveAction();
});
}
```
### Slow navigator transitions
As mentioned above, `Navigator` animations are controlled by the JavaScript thread.
Imagine the "push from right" scene transition:
each frame, the new scene is moved from the right to left,
starting offscreen (let's say at an x-offset of 320) and ultimately settling when the scene sits at an x-offset of 0.
Each frame during this transition, the JavaScript thread needs to send a new x-offset to the main thread.
If the JavaScript thread is locked up, it cannot do this and so no update occurs on that frame and the animation stutters.
One solution to this is to allow for JavaScript-based animations to be offloaded to the main thread.
If we were to do the same thing as in the above example with this approach,
we might calculate a list of all x-offsets for the new scene when we are starting the transition and send them to the main thread to execute in an optimized way.
Now that the JavaScript thread is freed of this responsibility,
it's not a big deal if it drops a few frames while rendering the scene -- you probably won't even notice because you will be too distracted by the pretty transition.
Solving this is one of the main goals behind the new [React Navigation](docs/navigation.html) library.
The views in React Navigation use native components and the [`Animated`](docs/animated.html) library to deliver 60 FPS animations that are run on the native thread.
## Profiling
Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side.
Access it by selecting Perf Monitor from the Debug menu.
For iOS, Instruments is an invaluable tool, and on Android you should learn to use [`systrace`](docs/performance.html#profiling-android-ui-performance-with-systrace).
You can also use [`react-addons-perf`](https://facebook.github.io/react/docs/perf.html) to get insights into where React is spending time when rendering your components.
Another way to profile JavaScript is to use the Chrome profiler while debugging.
This won't give you accurate results as the code is running in Chrome but will give you a general idea of where bottlenecks might be.
But first, [**make sure that Development Mode is OFF!**](docs/performance.html#running-in-development-mode-dev-true) You should see `__DEV__ === false, development-level warning are OFF, performance optimizations are ON` in your application logs.
### Profiling Android UI Performance with `systrace`
Android supports 10k+ different phones and is generalized to support software rendering:
the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS.
But sometimes, there are things you can improve -- and many times it's not native code's fault at all!
The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame.
For that, we'll be using a standard Android profiling tool called `systrace`.
`systrace` is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package).
Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format.
Both the Android SDK and React Native framework provide standard markers that you can visualize.
#### 1. Collecting a trace
First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile.
Run `systrace` as follows:
```
$ <path_to_android_sdk>/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>
```
A quick breakdown of this command:
- `time` is the length of time the trace will be collected in seconds
- `sched`, `gfx`, and `view` are the android SDK tags (collections of markers) we care about: `sched` gives you information about what's running on each core of your phone, `gfx` gives you graphics info such as frame boundaries, and `view` gives you information about measure, layout, and draw passes
- `-a <your_package_name>` enables app-specific markers, specifically the ones built into the React Native framework. `your_package_name` can be found in the `AndroidManifest.xml` of your app and looks like `com.example.app`
Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.
#### 2. Reading the trace
After opening the trace in your browser (preferably Chrome), you should see something like this:
![Example](img/SystraceExample.png)
> **HINT**:
> Use the WASD keys to strafe and zoom
If your trace .html file isn't opening correctly, check your browser console for the following:
![ObjectObserveError](img/ObjectObserveError.png)
Since `Object.observe` was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:
- Opening tab in chrome chrome://tracing
- Selecting load
- Selecting the html file generated from the previous command.
> **Enable VSync highlighting**
>
> Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:
>
> ![Enable VSync Highlighting](img/SystraceHighlightVSync.png)
>
> You should see zebra stripes as in the screenshot above.
> If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.
#### 3. Find your process
Scroll until you see (part of) the name of your package.
In this case, I was profiling `com.facebook.adsmanager`,
which shows up as `book.adsmanager` because of silly thread name limits in the kernel.
On the left side, you'll see a set of threads which correspond to the timeline rows on the right.
There are a few threads we care about for our purposes:
the UI thread (which has your package name or the name UI Thread), `mqt_js`, and `mqt_native_modules`.
If you're running on Android 5+, we also care about the Render Thread.
- **UI Thread.**
This is where standard android measure/layout/draw happens.
The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread.
The events that you see on this thread should look something like this and have to do with `Choreographer`, `traversals`, and `DispatchUI`:
![UI Thread Example](img/SystraceUIThreadExample.png)
- **JS Thread.**
This is where JavaScript is executed.
The thread name will be either `mqt_js` or `<...>` depending on how cooperative the kernel on your device is being.
To identify it if it doesn't have a name, look for things like `JSCall`, `Bridge.executeJSCall`, etc:
![JS Thread Example](img/SystraceJSThreadExample.png)
- **Native Modules Thread.**
This is where native module calls (e.g. the `UIManager`) are executed.
The thread name will be either `mqt_native_modules` or `<...>`.
To identify it in the latter case, look for things like `NativeCall`, `callJavaModuleMethod`, and `onBatchComplete`:
![Native Modules Thread Example](img/SystraceNativeModulesThreadExample.png)
- **Bonus: Render Thread.**
If you're using Android L (5.0) and up, you will also have a render thread in your application.
This thread generates the actual OpenGL commands used to draw your UI.
The thread name will be either `RenderThread` or `<...>`.
To identify it in the latter case, look for things like `DrawFrame` and `queueBuffer`:
![Render Thread Example](img/SystraceRenderThreadExample.png)
#### Identifying a culprit
A smooth animation should look something like the following:
![Smooth Animation](img/SystraceWellBehaved.png)
Each change in color is a frame -- remember that in order to display a frame,
all our UI work needs to be done by the end of that 16ms period.
Notice that no thread is working close to the frame boundary.
An application rendering like this is rendering at 60 FPS.
If you noticed chop, however, you might see something like this:
![Choppy Animation from JS](img/SystraceBadJS.png)
Notice that the JS thread is executing basically all the time, and across frame boundaries!
This app is not rendering at 60 FPS.
In this case, **the problem lies in JS**.
You might also see something like this:
![Choppy Animation from UI](img/SystraceBadUI.png)
In this case, the UI and render threads are the ones that have work crossing frame boundaries.
The UI that we're trying to render on each frame is requiring too much work to be done.
In this case, **the problem lies in the native views being rendered**.
At this point, you'll have some very helpful information to inform your next steps.
#### Resolving JavaScript issues
If you identified a JS problem,
look for clues in the specific JS that you're executing.
In the scenario above, we see `RCTEventEmitter` being called multiple times per frame.
Here's a zoom-in of the JS thread from the trace above:
![Too much JS](img/SystraceBadJS2.png)
This doesn't seem right.
Why is it being called so often?
Are they actually different events?
The answers to these questions will probably depend on your product code.
And many times, you'll want to look into [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate).
#### Resolving native UI Issues
If you identified a native UI problem, there are usually two scenarios:
1. the UI you're trying to draw each frame involves too much work on the GPU, or
2. You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).
##### Too much GPU work
In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:
![Overloaded GPU](img/SystraceBadUI.png)
Notice the long amount of time spent in `DrawFrame` that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.
To mitigate this, you should:
- investigate using `renderToHardwareTextureAndroid` for complex, static content that is being animated/transformed (e.g. the `Navigator` slide/alpha animations)
- make sure that you are **not** using `needsOffscreenAlphaCompositing`, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.
If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out [Tracer for OpenGL ES](http://developer.android.com/tools/help/gltracer.html).
##### Creating new views on the UI thread
In the second scenario, you'll see something more like this:
![Creating Views](img/SystraceBadCreateUI.png)
Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.
There isn't an easy way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on a infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.
docs/Props.md
-70
View File
@@ -1,70 +0,0 @@
---
id: props
title: Props
---
Most components can be customized when they are created, with different parameters. These creation parameters are called `props`.
For example, one basic React Native component is the `Image`. When you
create an image, you can use a prop named `source` to control what image it shows.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
export default class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
```
Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX.
Your own components can also use `props`. This lets you make a single component
that is used in many different places in your app, with slightly different
properties in each place. Just refer to `this.props` in your `render` function. Here's an example:
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
```
Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.
The other new thing going on here is the [`View`](docs/view.html) component. A [`View`](docs/view.html) is useful
as a container for other components, to help control style and layout.
With `props` and the basic [`Text`](docs/text.html), [`Image`](docs/image.html), and [`View`](docs/view.html) components, you can
build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](docs/state.html).
docs/State.md
-59
View File
@@ -1,59 +0,0 @@
---
id: state
title: State
---
There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
```
In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly.
When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html).
At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to [learn about Style](docs/style.html).
docs/Style.md
-49
View File
@@ -1,49 +0,0 @@
---
id: style
title: Style
---
With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and [values](docs/colors.html) usually match how CSS works on the web, except names are written using camel casing, e.g `backgroundColor` rather than `background-color`.
The `style` prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.
As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
```
One common pattern is to make your component accept a `style` prop which in
turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS.
There are a lot more ways to customize text style. Check out the [Text component reference](docs/text.html) for a complete list.
Now you can make your text beautiful. The next step in becoming a style master is to [learn how to control component size](docs/height-and-width.html).
docs/Testing.md
-134
View File
@@ -1,134 +0,0 @@
---
id: testing
title: Testing your Changes
---
This document is about testing your changes to React Native as a [contributor](docs/contributing.html). If you're interested in testing a React Native app, check out the [React Native Tutorial](http://facebook.github.io/jest/docs/tutorial-react-native.html) on the Jest website.
The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run with the [Travis](https://travis-ci.org/facebook/react-native/builds) and [Circle](https://circleci.com/gh/facebook/react-native) continuous integration systems, which will automatically annotate pull requests with the test results.
Whenever you are fixing a bug or adding new functionality to React Native, you should add a test that covers it. Depending on the change you're making, there are different types of tests that may be appropriate.
- [JavaScript](docs/testing.html#javascript)
- [Android](docs/testing.html#android)
- [iOS](docs/testing.html#ios)
- [Apple TV](docs/testing.html#apple-tv)
- [End-to-end tests](docs/testing.html#end-to-end-tests)
- [Website](docs/testing.html#website)
## JavaScript
### Jest
Jest tests are JavaScript-only tests run on the command line with node. You can run the existing React Native jest tests with:
$ cd react-native
$ npm test
It's a good idea to add a Jest test when you are working on a change that only modifies JavaScript code.
The tests themselves live in the `__tests__` directories of the files they test. See [`TouchableHighlight-test.js`](https://github.com/facebook/react-native/blob/master/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js) for a basic example.
### Flow
You should also make sure your code passes [Flow](https://flowtype.org/) tests. These can be run using:
$ cd react-native
$ npm run flow
## Android
### Unit Tests
The Android unit tests do not run in an emulator. They just use a normal Java installation. The default macOS Java install is insufficient, you may need to install [Java 8 (JDK8)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). You can type `javac -version` in a terminal to see what version you have:
```
$ javac -version
javac 1.8.0_111
```
The version string `1.8.x_xxx` corresponds to JDK 8.
You also need to install the [Buck build tool](https://buckbuild.com/setup/install.html).
To run the Android unit tests:
$ cd react-native
$ ./scripts/run-android-local-unit-tests.sh
It's a good idea to add an Android unit test whenever you are working on code that can be tested by Java code alone. The Android unit tests live under [`ReactAndroid/src/tests`](https://github.com/facebook/react-native/tree/master/ReactAndroid/src/test/java/com/facebook/react), so you can browse through that directory for good examples of tests.
### Integration Tests
To run the integration tests, you need to install the Android NDK. See [Prerequisites](docs/android-building-from-source.html#prerequisites).
You also need to install the [Buck build tool](https://buckbuild.com/setup/install.html).
We recommend running the Android integration tests in an emulator, although you can also use a real Android device. It's a good idea to keep the emulator running with a visible window. That way if your tests stall, you can look at the emulator to debug.
Some devices and some emulator configurations may not work with the tests. We do maintain an emulator configuration that works, as the standard for testing. To run this emulator config:
$ cd react-native
$ ./scripts/run-android-emulator.sh
Once you have an emulator running, to run the integration tests:
$ cd react-native
$ ./scripts/run-android-local-integration-tests.sh
The integration tests should only take a few minutes to run on a modern developer machine.
It's a good idea to add an Android integration test whenever you are working on code that needs both JavaScript and Java to be tested in conjunction. The Android integration tests live under [`ReactAndroid/src/androidTest`](https://github.com/facebook/react-native/tree/master/ReactAndroid/src/androidTest/java/com/facebook/react/tests), so you can browse through that directory for good examples of tests.
## iOS
### Integration Tests
React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are `RCTTestRunner` and `RCTTestModule`. `RCTTestRunner` sets up the ReactNative environment and provides facilities to run the tests as `XCTestCase`s in Xcode (`runTest:module` is the simplest method). `RCTTestModule` is exported to JS as `NativeModules.TestModule`.
The tests themselves are written in JS, and must call `TestModule.markTestCompleted()` when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing a JS exception. It is also possible to test error conditions with `runTest:module:initialProps:expectErrorRegex:` or `runTest:module:initialProps:expectErrorBlock:` which will expect an error to be thrown and verify the error matches the provided criteria.
See the following for example usage and integration points:
- [`IntegrationTestHarnessTest.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestHarnessTest.js)
- [`RNTesterIntegrationTests.m`](https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterIntegrationTests.m)
- [`IntegrationTestsApp.js`](https://github.com/facebook/react-native/blob/master/IntegrationTests/IntegrationTestsApp.js)
You can run integration tests locally with cmd+U in the IntegrationTest and RNTester apps in Xcode, or by running the following in the command line on macOS:
$ cd react-native
$ ./scripts/objc-test-ios.sh
> Your Xcode install will come with a variety of Simulators running the latest OS. You may need to manually create a new Simulator to match what the `XCODE_DESTINATION` param in the test script.
### Screenshot/Snapshot Tests
A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using `TestModule.verifySnapshot()`, using the [`FBSnapshotTestCase`](https://github.com/facebook/ios-snapshot-test-case) library behind the scenes. Reference images are recorded by setting `recordMode = YES` on the `RCTTestRunner`, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See [`SimpleSnapshotTest`](https://github.com/facebook/react-native/blob/master/IntegrationTests/SimpleSnapshotTest.js) for a basic example.
If you make a change that affects a snapshot test in a PR, such as adding a new example case to one of the examples that is snapshotted, you'll need to re-record the snapshot reference image. To do this, simply change to `_runner.recordMode = YES;` in [RNTester/RNTesterSnapshotTests.m](https://github.com/facebook/react-native/blob/master/RNTester/RNTesterIntegrationTests/RNTesterSnapshotTests.m#L42), re-run the failing tests, then flip record back to `NO` and submit/update your PR and wait to see if the Travis build passes.
## Apple TV
The same tests discussed above for iOS will also run on tvOS. In the RNTester Xcode project, select the RNTester-tvOS target, and you can follow the same steps above to run the tests in Xcode.
You can run Apple TV unit and integration tests locally by running the following in the command line on macOS:
$ cd react-native
$ ./scripts/objc-test-tvos.sh (make sure the line `TEST="test"` is uncommented)
## End-to-end tests
Finally, make sure end-to-end tests run successfully by executing the following script:
$ cd react-native
$ ./scripts/test-manual-e2e.sh
## Website
The React Native website is hosted on GitHub pages and is automatically generated from Markdown sources as well as comments in the JavaScript source files. It's always a good idea to check that the website is generated properly whenever you edit the docs.
$ cd website
$ npm install
$ npm start
Then open http://localhost:8079/react-native/index.html in your browser.
docs/Timers.md
-75
View File
@@ -1,75 +0,0 @@
---
id: timers
title: Timers
---
Timers are an important part of an application and React Native implements the [browser timers](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers).
## Timers
- setTimeout, clearTimeout
- setInterval, clearInterval
- setImmediate, clearImmediate
- requestAnimationFrame, cancelAnimationFrame
`requestAnimationFrame(fn)` is not the same as `setTimeout(fn, 0)` - the former will fire after all the frame has flushed, whereas the latter will fire as quickly as possible (over 1000x per second on a iPhone 5S).
`setImmediate` is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call `setImmediate` within a `setImmediate` callback, it will be executed right away, it won't yield back to native in between.
The `Promise` implementation uses `setImmediate` as its asynchronicity primitive.
## InteractionManager
One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use `InteractionManager` to make sure long-running work is scheduled to start after any interactions/animations have completed.
Applications can schedule tasks to run after interactions with the following:
```javascript
InteractionManager.runAfterInteractions(() => {
// ...long-running synchronous task...
});
```
Compare this to other scheduling alternatives:
- requestAnimationFrame(): for code that animates a view over time.
- setImmediate/setTimeout/setInterval(): 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:
```javascript
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
```
## TimerMixin
We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced `TimerMixin`. If you include `TimerMixin`, then you can replace your calls to `setTimeout(fn, 500)` with `this.setTimeout(fn, 500)` (just prepend `this.`) and everything will be properly cleaned up for you when the component unmounts.
This library does not ship with React Native - in order to use it on your project, you will need to install it with `npm i react-timer-mixin --save` from your project directory.
```javascript
import TimerMixin from 'react-timer-mixin';
var Component = createReactClass({
mixins: [TimerMixin],
componentDidMount: function() {
this.setTimeout(
() => { console.log('I do not leak!'); },
500
);
}
});
```
This will eliminate a lot of hard work tracking down bugs, such as crashes caused by timeouts firing after a component has been unmounted.
Keep in mind that if you use ES6 classes for your React components [there is no built-in API for mixins](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins). To use `TimerMixin` with ES6 classes, we recommend [react-mixin](https://github.com/brigand/react-mixin).
docs/Tutorial.md
-45
View File
@@ -1,45 +0,0 @@
---
id: tutorial
title: Learn the Basics
---
React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This
tutorial is aimed at all audiences, whether you have React experience or not.
Let's do this thing.
## Hello World
In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello world". Here it is:
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
```
If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js` file to create a real app on your local machine.
## What's going on here?
Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.
First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `from`, `class`, `extends`, and the `() =>` syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.
The other unusual thing in this code example is `<Text>Hello world!</Text>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>`
is a built-in component that just displays some text.
## Components
So this code is defining `HelloWorldApp`, a new `Component`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a `render` function which returns some JSX to render.
## This app doesn't do very much
Good point. To make components do more interesting things, you need to [learn about Props](docs/props.html).
docs/Upgrading.md
-131
View File
@@ -1,131 +0,0 @@
---
id: upgrading
title: Upgrading to new React Native versions
---
Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you. The instructions are a bit different depending on whether you used `create-react-native-app` or `react-native init` to create your project.
## Create React Native App projects
Upgrading your Create React Native App project to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions in your `package.json` file. Please refer to [this document](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) to find out what versions are supported. You will also need to set the correct `sdkVersion` in your `app.json` file.
See the [CRNA user guide](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#updating-to-new-releases) for up-to-date information about upgrading your project.
## Projects built with native code
<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>
Because React Native projects built with native code are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. Here's what you need to do to upgrade from an older version of React Native.
### Upgrade based on Git
The module `react-native-git-upgrade` provides a one-step operation to upgrade the source files with a minimum of conflicts. Under the hood, it consists in 2 phases:
* First, it computes a Git patch between both old and new template files,
* Then, the patch is applied on the user's sources.
> **IMPORTANT:** You don't have to install the new version of the `react-native` package, it will be installed automatically.
#### 1. Install Git
While your project does not have to be handled by the Git versioning system -- you can use Mercurial, SVN, or nothing -- you will still need to [install Git](https://git-scm.com/downloads) on your system in order to use `react-native-git-upgrade`. Git will also need to be available in the `PATH`.
#### 2. Install the `react-native-git-upgrade` module
The `react-native-git-upgrade` module provides a CLI and must be installed globally:
```sh
$ npm install -g react-native-git-upgrade
```
#### 3. Run the command
Run the following command to start the process of upgrading to the latest version:
```sh
$ react-native-git-upgrade
```
> You may specify a React Native version by passing an argument: `react-native-git-upgrade X.Y`
The templates are upgraded in a optimized way. You still may encounter conflicts but only where the Git 3-way merge have failed, depending on the version and how you modified your sources.
#### 4. Resolve the conflicts
Conflicted files include delimiters which make very clear where the changes come from. For example:
```
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
CODE_SIGN_IDENTITY = "iPhone Developer";
FRAMEWORK_SEARCH_PATHS = (
"$(inherited)",
"$(PROJECT_DIR)/HockeySDK.embeddedframework",
"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
);
=======
CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
);
```
You can think of "ours" as "your team" and "theirs" as "the React Native dev team".
### Alternative
Use this only in case the above didn't work.
#### 1. Upgrade the `react-native` dependency
Note the latest version of the `react-native` npm package [from here](https://www.npmjs.com/package/react-native) (or use `npm info react-native` to check).
Now install that version of `react-native` in your project with `npm install --save`:
```sh
$ npm install --save react-native@X.Y
# where X.Y is the semantic version you are upgrading to
npm WARN peerDependencies The peer dependency react@~R included from react-native...
```
If you saw a warning about the peerDependency, also upgrade `react` by running:
```sh
$ npm install --save react@R
# where R is the new version of react from the peerDependency warning you saw
```
#### 2. Upgrade your project templates
The new npm package may contain updates to the files that are normally generated when you
run `react-native init`, like the iOS and the Android sub-projects.
You may consult [rn-diff](https://github.com/ncuillery/rn-diff) to see if there were changes in the project template files.
In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.
If there were major changes, run this in a terminal to get these:
```sh
$ react-native upgrade
```
This will check your files against the latest template and perform the following:
* If there is a new file in the template, it is simply created.
* If a file in the template is identical to your file, it is skipped.
* If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.
## Manual Upgrades
Some upgrades require manual steps, e.g. 0.13 to 0.14, or 0.28 to 0.29. Be sure to check the [release notes](https://github.com/facebook/react-native/releases) when upgrading so that you can identify any manual changes your particular project may require.
docs/android-building-from-source.md
-158
View File
@@ -1,158 +0,0 @@
---
id: android-building-from-source
title: Building React Native from source
---
You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
## Prerequisites
Assuming you have the Android SDK installed, run `android` to open the Android SDK Manager.
Make sure you have the following installed:
1. Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
2. SDK build tools version 23.0.1 (buildToolsVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
3. Android Support Repository >= 17 (for Android Support Library)
4. Android NDK (download links and installation instructions below)
### Point Gradle to your Android SDK:
**Step 1:** Set environment variables through your local shell.
Note: Files may vary based on shell flavor. See below for examples from common shells.
- bash: `.bash_profile` or `.bashrc`
- zsh: `.zprofile` or `.zshrc`
- ksh: `.profile` or `$ENV`
Example:
```
export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx
export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r10e
```
**Step 2:** Create a `local.properties` file in the `android` directory of your react-native app with the following contents:
Example:
```
sdk.dir=/Users/your_unix_name/android-sdk-macosx
ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e
```
### Download links for Android NDK
1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip
You can find further instructions on the [official page](https://developer.android.com/ndk/index.html).
## Building the source
#### 1. Installing the fork
First, you need to install `react-native` from your fork. For example, to install the master branch from the official repo, run the following:
```sh
npm install --save github:facebook/react-native#master
```
Alternatively, you can clone the repo to your `node_modules` directory and run `npm install` inside the cloned repo.
#### 2. Adding gradle dependencies
Add `gradle-download-task` as dependency in `android/build.gradle`:
```gradle
...
dependencies {
classpath 'com.android.tools.build:gradle:1.3.1'
classpath 'de.undercouch:gradle-download-task:3.1.2'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
...
```
#### 3. Adding the `:ReactAndroid` project
Add the `:ReactAndroid` project in `android/settings.gradle`:
```gradle
...
include ':ReactAndroid'
project(':ReactAndroid').projectDir = new File(
rootProject.projectDir, '../node_modules/react-native/ReactAndroid')
...
```
Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `compile 'com.facebook.react:react-native:+'` with `compile project(':ReactAndroid')`:
```gradle
...
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile project(':ReactAndroid')
...
}
...
```
#### 4. Making 3rd-party modules use your fork
If you use 3rd-party React Native modules, you need to override their dependencies so that they don't bundle the pre-compiled library. Otherwise you'll get an error while compiling - `Error: more than one library with package name 'com.facebook.react'`.
Modify your `android/app/build.gradle`, and add:
```gradle
configurations.all {
exclude group: 'com.facebook.react', module: 'react-native'
}
```
## Building from Android Studio
From the Welcome screen of Android Studio choose "Import project" and select the `android` folder of your app.
You should be able to use the _Run_ button to run your app on a device. Android Studio won't start the packager automatically, you'll need to start it by running `npm start` on the command line.
## Additional notes
Building from source can take a long time, especially for the first build, as it needs to download ~200 MB of artifacts and compile the native code. Every time you update the `react-native` version from your repo, the build directory may get deleted, and all the files are re-downloaded. To avoid this, you might want to change your build directory path by editing the `~/.gradle/init.gradle ` file:
```gradle
gradle.projectsLoaded {
rootProject.allprojects {
buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}"
}
}
```
## Building for Maven/Nexus deployment
If you find that you need to push up a locally compiled React Native .aar and related files to a remote Nexus repository, you can.
Start by following the `Point Gradle to your Android SDK` section of this page. Once you do this, assuming you have Gradle configured properly, you can then run the following command from the root of your React Native checkout to build and package all required files:
```
./gradlew ReactAndroid:installArchives
```
This will package everything that would typically be included in the `android` directory of your `node_modules/react-native/` installation in the root directory of your React Native checkout.
## Testing
If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Running Tests](docs/testing.html).
## Troubleshooting
Gradle build fails in `ndk-build`. See the section about `local.properties` file above.
docs/app-extensions.md
-26
View File
@@ -1,26 +0,0 @@
---
id: app-extensions
title: App Extensions
---
App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the [App Extension Programming Guide](https://developer.apple.com/library/content/documentation/General/Conceptual/ExtensibilityPG/index.html#//apple_ref/doc/uid/TP40014214-CH20-SW1). In this guide, we'll briefly cover how you may take advantage of app extensions on iOS.
## Memory use in extensions
As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works just fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices.
We highly recommend that you watch Conrad Kramer's talk on [Memory Use in Extensions](https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/) to learn more about this topic.
### Today widget
The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load':
![](img/TodayWidgetUnableToLoad.jpg)
Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use [Xcode's Instruments](https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html) to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API.
To experiment with the limits of React Native Today widget implementations, try extending the example project in [react-native-today-widget](https://github.com/matejkriz/react-native-today-widget/).
### Other app extensions
Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is [react-native-ios-share-extension](https://github.com/andrewsardone/react-native-ios-share-extension).
docs/autogen_AccessibilityInfo.md
-54
View File
@@ -1,54 +0,0 @@
---
id: accessibilityinfo
title: AccessibilityInfo
category: APIs
permalink: docs/accessibilityinfo.html
---
<div><div><p>Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The
<code>AccessibilityInfo</code> 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.</p><p>Here's a small example illustrating how to use <code>AccessibilityInfo</code>:</p><div class="prism language-javascript"><span class="token keyword">class</span> <span class="token class-name">ScreenReaderStatusExample</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
screenReaderEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
<span class="token string">'change'</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
<span class="token punctuation">)</span><span class="token punctuation">;</span>
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">(</span>isEnabled<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
screenReaderEnabled<span class="token punctuation">:</span> isEnabled
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
AccessibilityInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
<span class="token string">'change'</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_handleScreenReaderToggled
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
_handleScreenReaderToggled <span class="token operator">=</span> <span class="token punctuation">(</span>isEnabled<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
screenReaderEnabled<span class="token punctuation">:</span> isEnabled<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>
The screen reader is <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>screenReaderEnabled <span class="token operator">?</span> <span class="token string">'enabled'</span> <span class="token punctuation">:</span> <span class="token string">'disabled'</span><span class="token punctuation">}</span><span class="token punctuation">.</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/accessibilityinfo.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="fetch"></a><span class="methodType">static </span>fetch<span class="methodType">()</span> <a class="hash-link" href="docs/accessibilityinfo.html#fetch">#</a></h4><div><p>Query whether a screen reader is currently enabled. Returns a promise which
resolves to a boolean. The result is <code>true</code> when a screen reader is enabled
and <code>false</code> otherwise.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a><span class="methodType">static </span>addEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/accessibilityinfo.html#addeventlistener">#</a></h4><div><p>Add an event handler. Supported events:</p><ul><li><code>change</code>: Fires when the state of the screen reader changes. The argument
to the event handler is a boolean. The boolean is <code>true</code> when a screen
reader is enabled and <code>false</code> otherwise.</li><li><code>announcementFinished</code>: 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:<ul><li><code>announcement</code>: The string announced by the screen reader.</li><li><code>success</code>: A boolean indicating whether the announcement was successfully made.</li></ul></li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setaccessibilityfocus"></a><span class="methodType">static </span>setAccessibilityFocus<span class="methodType">(reactTag)</span> <a class="hash-link" href="docs/accessibilityinfo.html#setaccessibilityfocus">#</a></h4><div><p>iOS-Only. Set accessibility focus to a react component.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="announceforaccessibility"></a><span class="methodType">static </span>announceForAccessibility<span class="methodType">(announcement)</span> <a class="hash-link" href="docs/accessibilityinfo.html#announceforaccessibility">#</a></h4><div><p>iOS-Only. Post a string to be announced by the screen reader.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a><span class="methodType">static </span>removeEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/accessibilityinfo.html#removeeventlistener">#</a></h4><div><p>Remove an event handler.</p></div></div></div></span></div>
docs/autogen_ActionSheetIOS.md
-12
View File
@@ -1,12 +0,0 @@
---
id: actionsheetios
title: ActionSheetIOS
category: APIs
permalink: docs/actionsheetios.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/actionsheetios.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="showactionsheetwithoptions"></a><span class="methodType">static </span>showActionSheetWithOptions<span class="methodType">(options, callback)</span> <a class="hash-link" href="docs/actionsheetios.html#showactionsheetwithoptions">#</a></h4><div><p>Display an iOS action sheet. The <code>options</code> object must contain one or more
of:</p><ul><li><code>options</code> (array of strings) - a list of button titles (required)</li><li><code>cancelButtonIndex</code> (int) - index of cancel button in <code>options</code></li><li><code>destructiveButtonIndex</code> (int) - index of destructive button in <code>options</code></li><li><code>title</code> (string) - a title to show above the action sheet</li><li><code>message</code> (string) - a message to show below the title</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="showshareactionsheetwithoptions"></a><span class="methodType">static </span>showShareActionSheetWithOptions<span class="methodType">(options, failureCallback, successCallback)</span> <a class="hash-link" href="docs/actionsheetios.html#showshareactionsheetwithoptions">#</a></h4><div><p>Display the iOS share sheet. The <code>options</code> object should contain
one or both of <code>message</code> and <code>url</code> and can additionally have
a <code>subject</code> or <code>excludedActivityTypes</code>:</p><ul><li><code>url</code> (string) - a URL to share</li><li><code>message</code> (string) - a message to share</li><li><code>subject</code> (string) - a subject for the message</li><li><code>excludedActivityTypes</code> (array) - the activities to exclude from the ActionSheet</li></ul><p>NOTE: if <code>url</code> 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.</p></div></div></div></span></div>
docs/autogen_ActivityIndicator.md
-8
View File
@@ -1,8 +0,0 @@
---
id: activityindicator
title: ActivityIndicator
category: Components
permalink: docs/activityindicator.html
---
<div><div><p>Displays a circular loading indicator.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/activityindicator.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/activityindicator.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animating"></a>animating?: <span class="propType">bool</span> <a class="hash-link" href="docs/activityindicator.html#animating">#</a></h4><div><p>Whether to show the indicator (true, the default) or hide it (false).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/activityindicator.html#color">#</a></h4><div><p>The foreground color of the spinner (default is gray).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="size"></a>size?: <span class="propType"><span><span>enum('small', 'large'), </span>number</span></span> <a class="hash-link" href="docs/activityindicator.html#size">#</a></h4><div><p>Size of the indicator (default is 'small').
Passing a number to the size prop is only supported on Android.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hideswhenstopped"></a><span class="platform">ios</span>hidesWhenStopped?: <span class="propType">bool</span> <a class="hash-link" href="docs/activityindicator.html#hideswhenstopped">#</a></h4><div><p>Whether the indicator should hide when not animating (true by default).</p></div></div></div></div>
docs/autogen_Alert.md
-27
View File
@@ -1,27 +0,0 @@
---
id: alert
title: Alert
category: APIs
permalink: docs/alert.html
---
<div><div><p>Launches an alert dialog with the specified title and message.</p><p>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.</p><p>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 <code>AlertIOS</code>; entering text in an alert is common on iOS only.</p><h2><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/alert.html#ios">#</a></h2><p>On iOS you can specify any number of buttons. Each button can optionally
specify a style, which is one of 'default', 'cancel' or 'destructive'.</p><h2><a class="anchor" name="android"></a>Android <a class="hash-link" href="docs/alert.html#android">#</a></h2><p>On Android at most three buttons can be specified. Android has a concept
of a neutral, negative and a positive button:</p><ul><li>If you specify one button, it will be the 'positive' one (such as 'OK')</li><li>Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')</li><li>Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')</li></ul><p>By default alerts on Android can be dismissed by tapping outside of the alert
box. This event can be handled by providing an optional <code>options</code> parameter,
with an <code>onDismiss</code> callback property <code>{ onDismiss: () =&gt; {} }</code>.</p><p>Alternatively, the dismissing behavior can be disabled altogether by providing
an optional <code>options</code> parameter with the <code>cancelable</code> property set to <code>false</code>
i.e. <code>{ cancelable: false }</code></p><p>Example usage:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// Works on both iOS and Android
</span>Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>
<span class="token string">'Alert Title'</span><span class="token punctuation">,</span>
<span class="token string">'My Alert Msg'</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Ask me later'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Ask me later pressed'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token string">'cancel'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'OK'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'OK Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> cancelable<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
<span class="token punctuation">)</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/alert.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="alert"></a><span class="methodType">static </span>alert<span class="methodType">(title, message?, buttons?, options?, type?)</span> <a class="hash-link" href="docs/alert.html#alert">#</a></h4></div></div></span></div>
docs/autogen_AlertIOS.md
-52
View File
@@ -1,52 +0,0 @@
---
id: alertios
title: AlertIOS
category: APIs
permalink: docs/alertios.html
---
<div><div><p><code>AlertIOS</code> provides functionality to create an iOS alert dialog with a
message or create a prompt for user input.</p><p>Creating an iOS alert:</p><div class="prism language-javascript">AlertIOS<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>
<span class="token string">'Sync Complete'</span><span class="token punctuation">,</span>
<span class="token string">'All your data are belong to us.'</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Creating an iOS prompt:</p><div class="prism language-javascript">AlertIOS<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span>
<span class="token string">'Enter a value'</span><span class="token punctuation">,</span>
<span class="token keyword">null</span><span class="token punctuation">,</span>
text <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"You entered "</span><span class="token operator">+</span>text<span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>We recommend using the <a href="docs/alert.html" target="_blank"><code>Alert.alert</code></a> method for
cross-platform support if you don't need to create iOS-only prompts.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/alertios.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="alert"></a><span class="methodType">static </span>alert<span class="methodType">(title: string, message?: string, callbackOrButtons?: ?(() =&gt; void), ButtonsArray, type?: AlertType)</span> <a class="hash-link" href="docs/alertios.html#alert">#</a></h4><div><p>Create and display a popup alert.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>title<br><br><div><span>string</span></div></td><td class="description"><div><p>The dialog's title.</p></div></td></tr><tr><td>[message]<br><br><div><span>string</span></div></td><td class="description"><div><p>An optional message that appears below
the dialog's title.</p></div></td></tr><tr><td>[callbackOrButtons]<br><br><div><span>?(() =&gt; void) | </span><span><a href="docs/alertios.html#buttonsarray">ButtonsArray</a></span></div></td><td class="description"><div><p>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'.</p><p> If passed an array of button configurations, each button should include
a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys. <code>style</code>
should be one of 'default', 'cancel' or 'destructive'.</p></div></td></tr><tr><td>[type]<br><br><div><span><a href="docs/alertios.html#alerttype">AlertType</a></span></div></td><td class="description"><div><p>Deprecated, do not use.</p></div></td></tr></tbody></table></div><div><br>Example with custom buttons:<div class="prism language-javascript">AlertIOS<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>
<span class="token string">'Update available'</span><span class="token punctuation">,</span>
<span class="token string">'Keep your app up to date to enjoy the latest features'</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token string">'cancel'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Install'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Install Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="prompt"></a><span class="methodType">static </span>prompt<span class="methodType">(title: string, message?: string, callbackOrButtons?: ?((text: string) =&gt; void), ButtonsArray, type?: AlertType, defaultValue?: string, keyboardType?: string)</span> <a class="hash-link" href="docs/alertios.html#prompt">#</a></h4><div><p>Create and display a prompt to enter some text.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>title<br><br><div><span>string</span></div></td><td class="description"><div><p>The dialog's title.</p></div></td></tr><tr><td>[message]<br><br><div><span>string</span></div></td><td class="description"><div><p>An optional message that appears above the text
input.</p></div></td></tr><tr><td>[callbackOrButtons]<br><br><div><span>?((text: string) =&gt; void) | </span><span><a href="docs/alertios.html#buttonsarray">ButtonsArray</a></span></div></td><td class="description"><div><p>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'.</p><p> If passed an array of button configurations, each button should include
a <code>text</code> key, as well as optional <code>onPress</code> and <code>style</code> keys (see
example). <code>style</code> should be one of 'default', 'cancel' or 'destructive'.</p></div></td></tr><tr><td>[type]<br><br><div><span><a href="docs/alertios.html#alerttype">AlertType</a></span></div></td><td class="description"><div><p>This configures the text input. One of 'plain-text',
'secure-text' or 'login-password'.</p></div></td></tr><tr><td>[defaultValue]<br><br><div><span>string</span></div></td><td class="description"><div><p>The default text in text input.</p></div></td></tr><tr><td>[keyboardType]<br><br><div><span>string</span></div></td><td class="description"><div><p>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'.</p></div></td></tr></tbody></table></div><div><br>Example with custom buttons:<div class="prism language-javascript">AlertIOS<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span>
<span class="token string">'Enter password'</span><span class="token punctuation">,</span>
<span class="token string">'Enter your password to claim your $1.5B in lottery winnings'</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Cancel Pressed'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token string">'cancel'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>text<span class="token punctuation">:</span> <span class="token string">'OK'</span><span class="token punctuation">,</span> onPress<span class="token punctuation">:</span> password <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'OK Pressed, password: '</span> <span class="token operator">+</span> password<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token string">'secure-text'</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><div><br>Example with the default button and a custom callback:<div class="prism language-javascript">AlertIOS<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span>
<span class="token string">'Update username'</span><span class="token punctuation">,</span>
<span class="token keyword">null</span><span class="token punctuation">,</span>
text <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Your username is "</span><span class="token operator">+</span>text<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token string">'default'</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/alertios.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="alerttype"></a>AlertType <a class="hash-link" href="docs/alertios.html#alerttype">#</a></h4><div><p>An Alert button type</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td class="description"><div><p>Default alert with no inputs</p></div></td></tr><tr><td>plain-text</td><td class="description"><div><p>Plain text input alert</p></div></td></tr><tr><td>secure-text</td><td class="description"><div><p>Secure text input alert</p></div></td></tr><tr><td>login-password</td><td class="description"><div><p>Login and password alert</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alertbuttonstyle"></a>AlertButtonStyle <a class="hash-link" href="docs/alertios.html#alertbuttonstyle">#</a></h4><div><p>An Alert button style</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td class="description"><div><p>Default button style</p></div></td></tr><tr><td>cancel</td><td class="description"><div><p>Cancel button style</p></div></td></tr><tr><td>destructive</td><td class="description"><div><p>Destructive button style</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="buttonsarray"></a>ButtonsArray <a class="hash-link" href="docs/alertios.html#buttonsarray">#</a></h4><div><p>Array or buttons</p></div><strong>Type:</strong><br>Array<div><br><strong>Properties:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>[text]<br><br><div><span>string</span></div></td><td class="description"><div><p>Button label</p></div></td></tr><tr><td>[onPress]<br><br><div><span>function</span></div></td><td class="description"><div><p>Callback function when button pressed</p></div></td></tr><tr><td>[style]<br><br><div><span><a href="docs/alertios.html#alertbuttonstyle">AlertButtonStyle</a></span></div></td><td class="description"><div><p>Button style</p></div></td></tr></tbody></table></div><div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>text</td><td class="description"><div><p>Button label</p></div></td></tr><tr><td>onPress</td><td class="description"><div><p>Callback function when button pressed</p></div></td></tr><tr><td>style</td><td class="description"><div><p>Button style</p></div></td></tr></tbody></table></div></div></div></span></div>
docs/autogen_Animated.md
-154
View File
@@ -1,154 +0,0 @@
---
id: animated
title: Animated
category: APIs
permalink: docs/animated.html
---
<div><div><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and
easy to build and maintain. <code>Animated</code> focuses on declarative relationships
between inputs and outputs, with configurable transforms in between, and
simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p><p>The simplest workflow for creating an animation is to to create an
<code>Animated.Value</code>, hook it up to one or more style attributes of an animated
component, and then drive updates via animations using <code>Animated.timing()</code>:</p><div class="prism language-javascript">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span> <span class="token comment" spellcheck="true"> // Animate value over time
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // The value to drive
</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Animate to final value of 1
</span> <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true"> // Start the animation</span></div><p>Refer to the <a href="docs/animations.html#animated-api" target="_blank">Animations</a> guide to see
additional examples of <code>Animated</code> in action.</p><h2><a class="anchor" name="overview"></a>Overview <a class="hash-link" href="docs/animated.html#overview">#</a></h2><p>There are two value types you can use with <code>Animated</code>:</p><ul><li><a href="docs/animated.html#value" target="_blank"><code>Animated.Value()</code></a> for single values</li><li><a href="docs/animated.html#valuexy" target="_blank"><code>Animated.ValueXY()</code></a> for vectors</li></ul><p><code>Animated.Value</code> can bind to style properties or other props, and can be
interpolated as well. A single <code>Animated.Value</code> can drive any number of
properties.</p><h3><a class="anchor" name="configuring-animations"></a>Configuring animations <a class="hash-link" href="docs/animated.html#configuring-animations">#</a></h3><p><code>Animated</code> 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:</p><ul><li><a href="docs/animated.html#decay" target="_blank"><code>Animated.decay()</code></a> starts with an initial
velocity and gradually slows to a stop.</li><li><a href="docs/animated.html#spring" target="_blank"><code>Animated.spring()</code></a> provides a simple
spring physics model.</li><li><a href="docs/animated.html#timing" target="_blank"><code>Animated.timing()</code></a> animates a value over time
using <a href="docs/easing.html" target="_blank">easing functions</a>.</li></ul><p>In most cases, you will be using <code>timing()</code>. 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.</p><h3><a class="anchor" name="working-with-animations"></a>Working with animations <a class="hash-link" href="docs/animated.html#working-with-animations">#</a></h3><p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code>
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 <code>{finished: true}</code>. If the animation is done because <code>stop()</code>
was called on it before it could finish (e.g. because it was interrupted by a
gesture or another animation), then it will receive <code>{finished: false}</code>.</p><h3><a class="anchor" name="using-the-native-driver"></a>Using the native driver <a class="hash-link" href="docs/animated.html#using-the-native-driver">#</a></h3><p>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.</p><p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your
animation configuration. See the
<a href="docs/animations.html#using-the-native-driver" target="_blank">Animations</a> guide to learn
more.</p><h3><a class="anchor" name="animatable-components"></a>Animatable components <a class="hash-link" href="docs/animated.html#animatable-components">#</a></h3><p>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.</p><ul><li><a href="docs/animated.html#createanimatedcomponent" target="_blank"><code>createAnimatedComponent()</code></a>
can be used to make a component animatable.</li></ul><p><code>Animated</code> exports the following animatable components using the above
wrapper:</p><ul><li><code>Animated.Image</code></li><li><code>Animated.ScrollView</code></li><li><code>Animated.Text</code></li><li><code>Animated.View</code></li></ul><h3><a class="anchor" name="composing-animations"></a>Composing animations <a class="hash-link" href="docs/animated.html#composing-animations">#</a></h3><p>Animations can also be combined in complex ways using composition functions:</p><ul><li><a href="docs/animated.html#delay" target="_blank"><code>Animated.delay()</code></a> starts an animation after
a given delay.</li><li><a href="docs/animated.html#parallel" target="_blank"><code>Animated.parallel()</code></a> starts a number of
animations at the same time.</li><li><a href="docs/animated.html#sequence" target="_blank"><code>Animated.sequence()</code></a> starts the animations
in order, waiting for each to complete before starting the next.</li><li><a href="docs/animated.html#stagger" target="_blank"><code>Animated.stagger()</code></a> starts animations in
order and in parallel, but with successive delays.</li></ul><p>Animations can also be chained together simply by setting the <code>toValue</code> of
one animation to be another <code>Animated.Value</code>. See
<a href="docs/animations.html#tracking-dynamic-values" target="_blank">Tracking dynamic values</a> in
the Animations guide.</p><p>By default, if one animation is stopped or interrupted, then all other
animations in the group are also stopped.</p><h3><a class="anchor" name="combining-animated-values"></a>Combining animated values <a class="hash-link" href="docs/animated.html#combining-animated-values">#</a></h3><p>You can combine two animated values via addition, multiplication, division,
or modulo to make a new animated value:</p><ul><li><a href="docs/animated.html#add" target="_blank"><code>Animated.add()</code></a></li><li><a href="docs/animated.html#divide" target="_blank"><code>Animated.divide()</code></a></li><li><a href="docs/animated.html#modulo" target="_blank"><code>Animated.modulo()</code></a></li><li><a href="docs/animated.html#multiply" target="_blank"><code>Animated.multiply()</code></a></li></ul><h3><a class="anchor" name="interpolation"></a>Interpolation <a class="hash-link" href="docs/animated.html#interpolation">#</a></h3><p>The <code>interpolate()</code> 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.</p><ul><li><a href="docs/animated.html#interpolate" target="_blank"><code>interpolate()</code></a></li></ul><p>Read more about interpolation in the
<a href="docs/animations.html#interpolation" target="_blank">Animation</a> guide.</p><h3><a class="anchor" name="handling-gestures-and-other-events"></a>Handling gestures and other events <a class="hash-link" href="docs/animated.html#handling-gestures-and-other-events">#</a></h3><p>Gestures, like panning or scrolling, and other events can map directly to
animated values using <code>Animated.event()</code>. 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.</p><ul><li><a href="docs/animated.html#event" target="_blank"><code>Animated.event()</code></a></li></ul><p>For example, when working with horizontal scrolling gestures, you would do
the following in order to map <code>event.nativeEvent.contentOffset.x</code> to
<code>scrollX</code> (an <code>Animated.Value</code>):</p><div class="prism language-javascript"> onScroll<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
<span class="token comment" spellcheck="true"> // scrollX = e.nativeEvent.contentOffset.x
</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>
contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>
x<span class="token punctuation">:</span> scrollX
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="decay"></a><span class="methodType">static </span>decay<span class="methodType">(value, config)</span> <a class="hash-link" href="docs/animated.html#decay">#</a></h4><div><p>Animates a value from an initial velocity to zero based on a decay
coefficient.</p><p>Config is an object that may have the following options:</p><ul><li><code>velocity</code>: Initial velocity. Required.</li><li><code>deceleration</code>: Rate of decay. Default 0.997.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="timing"></a><span class="methodType">static </span>timing<span class="methodType">(value, config)</span> <a class="hash-link" href="docs/animated.html#timing">#</a></h4><div><p>Animates a value along a timed easing curve. The
<a href="docs/easing.html" target="_blank"><code>Easing</code></a> module has tons of predefined curves, or you
can use your own function.</p><p>Config is an object that may have the following options:</p><ul><li><code>duration</code>: Length of animation (milliseconds). Default 500.</li><li><code>easing</code>: Easing function to define curve.
Default is <code>Easing.inOut(Easing.ease)</code>.</li><li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="spring"></a><span class="methodType">static </span>spring<span class="methodType">(value, config)</span> <a class="hash-link" href="docs/animated.html#spring">#</a></h4><div><p>Spring animation based on Rebound and
<a href="https://facebook.github.io/origami/" target="_blank">Origami</a>. Tracks velocity state to
create fluid motions as the <code>toValue</code> updates, and can be chained together.</p><p>Config is an object that may have the following options. Note that you can
only define bounciness/speed or tension/friction but not both:</p><ul><li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li><li><code>tension</code>: Controls speed. Default 40.</li><li><code>speed</code>: Controls speed of the animation. Default 12.</li><li><code>bounciness</code>: Controls bounciness. Default 8.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="add"></a><span class="methodType">static </span>add<span class="methodType">(a, b)</span> <a class="hash-link" href="docs/animated.html#add">#</a></h4><div><p>Creates a new Animated value composed from two Animated values added
together.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="divide"></a><span class="methodType">static </span>divide<span class="methodType">(a, b)</span> <a class="hash-link" href="docs/animated.html#divide">#</a></h4><div><p>Creates a new Animated value composed by dividing the first Animated value
by the second Animated value.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiply"></a><span class="methodType">static </span>multiply<span class="methodType">(a, b)</span> <a class="hash-link" href="docs/animated.html#multiply">#</a></h4><div><p>Creates a new Animated value composed from two Animated values multiplied
together.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="modulo"></a><span class="methodType">static </span>modulo<span class="methodType">(a, modulus)</span> <a class="hash-link" href="docs/animated.html#modulo">#</a></h4><div><p>Creates a new Animated value that is the (non-negative) modulo of the
provided Animated value</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="diffclamp"></a><span class="methodType">static </span>diffClamp<span class="methodType">(a, min, max)</span> <a class="hash-link" href="docs/animated.html#diffclamp">#</a></h4><div><p>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.
(<code>value = clamp(value + diff, min, max)</code>).</p><p>This is useful with scroll events, for example, to show the navbar when
scrolling up and to hide it when scrolling down.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="delay"></a><span class="methodType">static </span>delay<span class="methodType">(time)</span> <a class="hash-link" href="docs/animated.html#delay">#</a></h4><div><p>Starts an animation after the given delay.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sequence"></a><span class="methodType">static </span>sequence<span class="methodType">(animations)</span> <a class="hash-link" href="docs/animated.html#sequence">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="parallel"></a><span class="methodType">static </span>parallel<span class="methodType">(animations, config?)</span> <a class="hash-link" href="docs/animated.html#parallel">#</a></h4><div><p>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 <code>stopTogether</code> flag.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stagger"></a><span class="methodType">static </span>stagger<span class="methodType">(time, animations)</span> <a class="hash-link" href="docs/animated.html#stagger">#</a></h4><div><p>Array of animations may run in parallel (overlap), but are started in
sequence with successive delays. Nice for doing trailing effects.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="loop"></a><span class="methodType">static </span>loop<span class="methodType">(animation)</span> <a class="hash-link" href="docs/animated.html#loop">#</a></h4><div><p>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'.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="event"></a><span class="methodType">static </span>event<span class="methodType">(argMapping, config?)</span> <a class="hash-link" href="docs/animated.html#event">#</a></h4><div><p>Takes an array of mappings and extracts values from each arg accordingly,
then calls <code>setValue</code> on the mapped outputs. e.g.</p><div class="prism language-javascript"> onScroll<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
<span class="token punctuation">[</span><span class="token punctuation">{</span>nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>x<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollX<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>listener<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Optional async listener
</span> <span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">...</span>
onPanResponderMove<span class="token punctuation">:</span> Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // raw event arg ignored
</span> <span class="token punctuation">{</span>dx<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_panX<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // gestureState arg
</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></div><p>Config is an object that may have the following options:</p><ul><li><code>listener</code>: Optional async listener.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="createanimatedcomponent"></a><span class="methodType">static </span>createAnimatedComponent<span class="methodType">(Component)</span> <a class="hash-link" href="docs/animated.html#createanimatedcomponent">#</a></h4><div><p>Make any React component Animatable. Used to create <code>Animated.View</code>, etc.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="attachnativeevent"></a><span class="methodType">static </span>attachNativeEvent<span class="methodType">(viewRef, eventName, argMapping)</span> <a class="hash-link" href="docs/animated.html#attachnativeevent">#</a></h4><div><p>Imperative API to attach an animated value to an event on a view. Prefer using
<code>Animated.event</code> with <code>useNativeDrive: true</code> if possible.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="forkevent"></a><span class="methodType">static </span>forkEvent<span class="methodType">(event, listener)</span> <a class="hash-link" href="docs/animated.html#forkevent">#</a></h4><div><p>Advanced imperative API for snooping on animated events that are passed in through props. Use
values directly where possible.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="unforkevent"></a><span class="methodType">static </span>unforkEvent<span class="methodType">(event, listener)</span> <a class="hash-link" href="docs/animated.html#unforkevent">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/animated.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>Value<span class="propType">: AnimatedValue</span> <a class="hash-link" href="docs/animated.html#value">#</a></h4><div><p>Standard value class for driving animations. Typically initialized with
<code>new Animated.Value(0);</code></p><p>See also <a href="docs/animated.html#animatedvalue" target="_blank"><code>AnimatedValue</code></a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="valuexy"></a>ValueXY<span class="propType">: AnimatedValueXY</span> <a class="hash-link" href="docs/animated.html#valuexy">#</a></h4><div><p>2D value class for driving 2D animations, such as pan gestures.</p><p>See also <a href="docs/animated.html#animatedvaluexy" target="_blank"><code>AnimatedValueXY</code></a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="interpolation"></a>Interpolation<span class="propType">: AnimatedInterpolation</span> <a class="hash-link" href="docs/animated.html#interpolation">#</a></h4><div><p>exported to use the Interpolation type in flow</p><p>See also <a href="docs/animated.html#animatedinterpolation" target="_blank"><code>AnimatedInterpolation</code></a>.</p></div></div></div></span><span><div><span><h2><a class="anchor" name="animatedvalue"></a>class AnimatedValue <a class="hash-link" href="docs/animated.html#animatedvalue">#</a></h2><div><div><p>Standard value for driving animations. One <code>Animated.Value</code> can drive
multiple properties in a synchronized fashion, but can only be driven by one
mechanism at a time. Using a new mechanism (e.g. starting a new animation,
or calling <code>setValue</code>) will stop any previous ones.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(value)</span> <a class="hash-link" href="docs/animated.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setvalue"></a>setValue<span class="methodType">(value)</span> <a class="hash-link" href="docs/animated.html#setvalue">#</a></h4><div><p>Directly set the value. This will stop any animations running on the value
and update all the bound properties.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setoffset"></a>setOffset<span class="methodType">(offset)</span> <a class="hash-link" href="docs/animated.html#setoffset">#</a></h4><div><p>Sets an offset that is applied on top of whatever value is set, whether via
<code>setValue</code>, an animation, or <code>Animated.event</code>. Useful for compensating
things like the start of a pan gesture.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flattenoffset"></a>flattenOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#flattenoffset">#</a></h4><div><p>Merges the offset value into the base value and resets the offset to zero.
The final output of the value is unchanged.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="extractoffset"></a>extractOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#extractoffset">#</a></h4><div><p>Sets the offset value to the base value, and resets the base value to zero.
The final output of the value is unchanged.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addlistener"></a>addListener<span class="methodType">(callback)</span> <a class="hash-link" href="docs/animated.html#addlistener">#</a></h4><div><p>Adds an asynchronous listener to the value so you can observe updates from
animations. This is useful because there is no way to
synchronously read the value because it might be driven natively.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removelistener"></a>removeListener<span class="methodType">(id)</span> <a class="hash-link" href="docs/animated.html#removelistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removealllisteners"></a>removeAllListeners<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#removealllisteners">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stopanimation"></a>stopAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#stopanimation">#</a></h4><div><p>Stops any running animation or tracking. <code>callback</code> is invoked with the
final value after stopping the animation, which is useful for updating
state to match the animation position with layout.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetanimation"></a>resetAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#resetanimation">#</a></h4><div><p>Stops any animation and resets the value to its original</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="interpolate"></a>interpolate<span class="methodType">(config)</span> <a class="hash-link" href="docs/animated.html#interpolate">#</a></h4><div><p>Interpolates the value before updating the property, e.g. mapping 0-1 to
0-10.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="animate"></a>animate<span class="methodType">(animation, callback)</span> <a class="hash-link" href="docs/animated.html#animate">#</a></h4><div><p>Typically only used internally, but could be used by a custom Animation
class.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stoptracking"></a>stopTracking<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#stoptracking">#</a></h4><div><p>Typically only used internally.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="track"></a>track<span class="methodType">(tracking)</span> <a class="hash-link" href="docs/animated.html#track">#</a></h4><div><p>Typically only used internally.</p></div></div></div></span></div></span><span><h2><a class="anchor" name="animatedvaluexy"></a>class AnimatedValueXY <a class="hash-link" href="docs/animated.html#animatedvaluexy">#</a></h2><div><div><p>2D Value for driving 2D animations, such as pan gestures. Almost identical
API to normal <code>Animated.Value</code>, but multiplexed. Contains two regular
<code>Animated.Value</code>s under the hood.</p><h4><a class="anchor" name="example"></a>Example <a class="hash-link" href="docs/animated.html#example">#</a></h4><div class="prism language-javascript"> <span class="token keyword">class</span> <span class="token class-name">DraggableView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
pan<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>ValueXY</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // inits to zero
</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>panResponder <span class="token operator">=</span> PanResponder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
onStartShouldSetPanResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
onPanResponderMove<span class="token punctuation">:</span> Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
dx<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // x,y are Animated.Value
</span> dy<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>y<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
onPanResponderRelease<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Auto-multiplexed
</span> <span class="token punctuation">{</span>toValue<span class="token punctuation">:</span> <span class="token punctuation">{</span>x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true"> // Back to zero
</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>Animated<span class="token punctuation">.</span>View
<span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>panResponder<span class="token punctuation">.</span>panHandlers<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span><span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Animated<span class="token punctuation">.</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(valueIn?)</span> <a class="hash-link" href="docs/animated.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setvalue"></a>setValue<span class="methodType">(value)</span> <a class="hash-link" href="docs/animated.html#setvalue">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setoffset"></a>setOffset<span class="methodType">(offset)</span> <a class="hash-link" href="docs/animated.html#setoffset">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flattenoffset"></a>flattenOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#flattenoffset">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="extractoffset"></a>extractOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#extractoffset">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetanimation"></a>resetAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#resetanimation">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stopanimation"></a>stopAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#stopanimation">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addlistener"></a>addListener<span class="methodType">(callback)</span> <a class="hash-link" href="docs/animated.html#addlistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removelistener"></a>removeListener<span class="methodType">(id)</span> <a class="hash-link" href="docs/animated.html#removelistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removealllisteners"></a>removeAllListeners<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#removealllisteners">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getlayout"></a>getLayout<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#getlayout">#</a></h4><div><p>Converts <code>{x, y}</code> into <code>{left, top}</code> for use in style, e.g.</p><div class="prism language-javascript"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="gettranslatetransform"></a>getTranslateTransform<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#gettranslatetransform">#</a></h4><div><p>Converts <code>{x, y}</code> into a useable translation transform, e.g.</p><div class="prism language-javascript"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
transform<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getTranslateTransform</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span></div></div></div></div></span></div></span><span><h2><a class="anchor" name="animatedinterpolation"></a>class AnimatedInterpolation <a class="hash-link" href="docs/animated.html#animatedinterpolation">#</a></h2><div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(parent, config)</span> <a class="hash-link" href="docs/animated.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="interpolate"></a>interpolate<span class="methodType">(config)</span> <a class="hash-link" href="docs/animated.html#interpolate">#</a></h4></div></div></span></div></span></div></span></div>
docs/autogen_AppRegistry.md
-32
View File
@@ -1,32 +0,0 @@
---
id: appregistry
title: AppRegistry
category: APIs
permalink: docs/appregistry.html
---
<div><div><span><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>
</span><p><code>AppRegistry</code> is the JS entry point to running all React Native apps. App
root components should register themselves with
<code>AppRegistry.registerComponent</code>, then the native system can load the bundle
for the app and then actually run the app when it's ready by invoking
<code>AppRegistry.runApplication</code>.</p><p>To "stop" an application when a view should be destroyed, call
<code>AppRegistry.unmountApplicationComponentAtRootTag</code> with the tag that was
passed into <code>runApplication</code>. These should always be used as a pair.</p><p><code>AppRegistry</code> should be <code>require</code>d early in the <code>require</code> sequence to make
sure the JS execution environment is setup before other modules are
<code>require</code>d.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/appregistry.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setwrappercomponentprovider"></a><span class="methodType">static </span>setWrapperComponentProvider<span class="methodType">(provider)</span> <a class="hash-link" href="docs/appregistry.html#setwrappercomponentprovider">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registerconfig"></a><span class="methodType">static </span>registerConfig<span class="methodType">(config)</span> <a class="hash-link" href="docs/appregistry.html#registerconfig">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registercomponent"></a><span class="methodType">static </span>registerComponent<span class="methodType">(appKey, componentProvider, section?)</span> <a class="hash-link" href="docs/appregistry.html#registercomponent">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registerrunnable"></a><span class="methodType">static </span>registerRunnable<span class="methodType">(appKey, run)</span> <a class="hash-link" href="docs/appregistry.html#registerrunnable">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registersection"></a><span class="methodType">static </span>registerSection<span class="methodType">(appKey, component)</span> <a class="hash-link" href="docs/appregistry.html#registersection">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getappkeys"></a><span class="methodType">static </span>getAppKeys<span class="methodType">()</span> <a class="hash-link" href="docs/appregistry.html#getappkeys">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionkeys"></a><span class="methodType">static </span>getSectionKeys<span class="methodType">()</span> <a class="hash-link" href="docs/appregistry.html#getsectionkeys">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsections"></a><span class="methodType">static </span>getSections<span class="methodType">()</span> <a class="hash-link" href="docs/appregistry.html#getsections">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrunnable"></a><span class="methodType">static </span>getRunnable<span class="methodType">(appKey)</span> <a class="hash-link" href="docs/appregistry.html#getrunnable">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getregistry"></a><span class="methodType">static </span>getRegistry<span class="methodType">()</span> <a class="hash-link" href="docs/appregistry.html#getregistry">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setcomponentproviderinstrumentationhook"></a><span class="methodType">static </span>setComponentProviderInstrumentationHook<span class="methodType">(hook)</span> <a class="hash-link" href="docs/appregistry.html#setcomponentproviderinstrumentationhook">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="runapplication"></a><span class="methodType">static </span>runApplication<span class="methodType">(appKey, appParameters)</span> <a class="hash-link" href="docs/appregistry.html#runapplication">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="unmountapplicationcomponentatroottag"></a><span class="methodType">static </span>unmountApplicationComponentAtRootTag<span class="methodType">(rootTag)</span> <a class="hash-link" href="docs/appregistry.html#unmountapplicationcomponentatroottag">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="registerheadlesstask"></a><span class="methodType">static </span>registerHeadlessTask<span class="methodType">(taskKey, task)</span> <a class="hash-link" href="docs/appregistry.html#registerheadlesstask">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="startheadlesstask"></a><span class="methodType">static </span>startHeadlessTask<span class="methodType">(taskId, taskKey, data)</span> <a class="hash-link" href="docs/appregistry.html#startheadlesstask">#</a></h4><div><p>Only called from native code. Starts a headless task.</p><p>@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</p></div></div></div></span></div>
docs/autogen_AppState.md
-52
View File
@@ -1,52 +0,0 @@
---
id: appstate
title: AppState
category: APIs
permalink: docs/appstate.html
---
<div><div><p><code>AppState</code> can tell you if the app is in the foreground or background,
and notify you when the state changes.</p><p>AppState is frequently used to determine the intent and proper behavior when
handling push notifications.</p><h3><a class="anchor" name="app-states"></a>App States <a class="hash-link" href="docs/appstate.html#app-states">#</a></h3><ul><li><code>active</code> - The app is running in the foreground</li><li><code>background</code> - The app is running in the background. The user is either
in another app or on the home screen</li><li><code>inactive</code> - This is a state that occurs when transitioning between
foreground &amp; background, and during periods of inactivity such as
entering the Multitasking view or in the event of an incoming call</li></ul><p>For more information, see
<a href="https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html" target="_blank">Apple's documentation</a></p><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="docs/appstate.html#basic-usage">#</a></h3><p>To see the current state, you can check <code>AppState.currentState</code>, which
will be kept up-to-date. However, <code>currentState</code> will be null at launch
while <code>AppState</code> retrieves it over the bridge.</p><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>AppState<span class="token punctuation">,</span> Text<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span>
<span class="token keyword">class</span> <span class="token class-name">AppStateExample</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
appState<span class="token punctuation">:</span> AppState<span class="token punctuation">.</span>currentState
<span class="token punctuation">}</span>
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
AppState<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
AppState<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleAppStateChange<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
_handleAppStateChange <span class="token operator">=</span> <span class="token punctuation">(</span>nextAppState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>appState<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/inactive|background/</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> nextAppState <span class="token operator">===</span> <span class="token string">'active'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'App has come to the foreground!'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>appState<span class="token punctuation">:</span> nextAppState<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Current state is<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>appState<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>This example will only ever appear to say "Current state is: active" because
the app is only visible to the user when in the <code>active</code> state, and the null
state will happen only momentarily.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/appstate.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name=""></a>=<span class="methodType">(;, ()</span> <a class="hash-link" href="docs/appstate.html#">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a>addEventListener<span class="methodType">(type, handler)</span> <a class="hash-link" href="docs/appstate.html#addeventlistener">#</a></h4><div><p>Add a handler to AppState changes by listening to the <code>change</code> event type
and providing the handler</p><p>TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate
<code>addEventListener</code> and <code>removeEventListener</code> and just use <code>addListener</code> and
<code>listener.remove()</code> 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).</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a>removeEventListener<span class="methodType">(type, handler)</span> <a class="hash-link" href="docs/appstate.html#removeeventlistener">#</a></h4><div><p>Remove a handler by passing the <code>change</code> event type and the handler</p></div></div></div></span></div>
docs/autogen_AsyncStorage.md
-124
View File
@@ -1,124 +0,0 @@
---
id: asyncstorage
title: AsyncStorage
category: APIs
permalink: docs/asyncstorage.html
---
<div><div><p><code>AsyncStorage</code> is a simple, unencrypted, asynchronous, persistent, key-value storage
system that is global to the app. It should be used instead of LocalStorage.</p><p>It is recommended that you use an abstraction on top of <code>AsyncStorage</code>
instead of <code>AsyncStorage</code> directly for anything more than light usage since
it operates globally.</p><p>On iOS, <code>AsyncStorage</code> is backed by native code that stores small values in a
serialized dictionary and larger values in separate files. On Android,
<code>AsyncStorage</code> will use either <a href="http://rocksdb.org/" target="_blank">RocksDB</a> or SQLite
based on what is available.</p><p>The <code>AsyncStorage</code> JavaScript code is a simple facade that provides a clear
JavaScript API, real <code>Error</code> objects, and simple non-multi functions. Each
method in the API returns a <code>Promise</code> object.</p><p>Persisting data:</p><div class="prism language-javascript"><span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">,</span> <span class="token string">'I like to save it.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Error saving data
</span><span class="token punctuation">}</span></div><p>Fetching data:</p><div class="prism language-javascript"><span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">await</span> AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'@MySuperStore:key'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // We have data!!
</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Error retrieving data
</span><span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/asyncstorage.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getitem"></a><span class="methodType">static </span>getItem<span class="methodType">(key: string, callback?: ?(error: ?Error, result: ?string) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#getitem">#</a></h4><div><p>Fetches an item for a <code>key</code> and invokes a callback upon completion.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to fetch.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error, result: ?string) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with a result if found or
any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setitem"></a><span class="methodType">static </span>setItem<span class="methodType">(key: string, value: string, callback?: ?(error: ?Error) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#setitem">#</a></h4><div><p>Sets the value for a <code>key</code> and invokes a callback upon completion.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to set.</p></div></td></tr><tr><td>value<br><br><div><span>string</span></div></td><td class="description"><div><p>Value to set for the <code>key</code>.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeitem"></a><span class="methodType">static </span>removeItem<span class="methodType">(key: string, callback?: ?(error: ?Error) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#removeitem">#</a></h4><div><p>Removes an item for a <code>key</code> and invokes a callback upon completion.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to remove.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="mergeitem"></a><span class="methodType">static </span>mergeItem<span class="methodType">(key: string, value: string, callback?: ?(error: ?Error) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#mergeitem">#</a></h4><div><p>Merges an existing <code>key</code> value with an input value, assuming both values
are stringified JSON. Returns a <code>Promise</code> object.</p><p><strong>NOTE:</strong> This is not supported by all native implementations.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>key<br><br><div><span>string</span></div></td><td class="description"><div><p>Key of the item to modify.</p></div></td></tr><tr><td>value<br><br><div><span>string</span></div></td><td class="description"><div><p>New value to merge for the <code>key</code>.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript">
<span class="token keyword">let</span> UID123_object <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
// You only need to define what will be added or updated
</span><span class="token keyword">let</span> UID123_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>UID123_object<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">mergeItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>UID123_delta<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'UID123'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> result<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// Console log result:
</span><span class="token comment" spellcheck="true">// =&gt; {'name':'Chris','age':31,'traits':
</span><span class="token comment" spellcheck="true">// {'shoe_size':10,'hair':'brown','eyes':'blue'}}</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clear"></a><span class="methodType">static </span>clear<span class="methodType">(callback?: ?(error: ?Error) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#clear">#</a></h4><div><p>Erases <em>all</em> <code>AsyncStorage</code> for all clients, libraries, etc. You probably
don't want to call this; use <code>removeItem</code> or <code>multiRemove</code> to clear only
your app's keys. Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>[callback]<br><br><div><span>?(error: ?Error) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getallkeys"></a><span class="methodType">static </span>getAllKeys<span class="methodType">(callback?: ?(error: ?Error, keys: ?Array&lt;string&gt;) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#getallkeys">#</a></h4><div><p>Gets <em>all</em> keys known to your app; for all callers, libraries, etc.
Returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>[callback]<br><br><div><span>?(error: ?Error, keys: ?Array&lt;string&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called the keys found and any error.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flushgetrequests"></a><span class="methodType">static </span>flushGetRequests<span class="methodType">()</span> <a class="hash-link" href="docs/asyncstorage.html#flushgetrequests">#</a></h4><div><p>Flushes any pending requests using a single batch call to get the data.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiget"></a><span class="methodType">static </span>multiGet<span class="methodType">(keys: Array&lt;string&gt;, callback?: ?(errors: ?Array&lt;Error&gt;, result: ?Array&lt;Array&lt;string&gt;&gt;) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#multiget">#</a></h4><div><p>This allows you to batch the fetching of items given an array of <code>key</code>
inputs. Your callback will be invoked with an array of corresponding
key-value pairs found:</p><div class="prism language-javascript"><span class="token function">multiGet</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'k2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> cb<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token function">cb</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'val1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'k2'</span><span class="token punctuation">,</span> <span class="token string">'val2'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span></div><p>The method returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keys<br><br><div><span>Array&lt;string&gt;</span></div></td><td class="description"><div><p>Array of key for the items to get.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;, result: ?Array&lt;Array&lt;string&gt;&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with a key-value array of
the results, plus an array of any key-specific errors found.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript">AsyncStorage<span class="token punctuation">.</span><span class="token function">getAllKeys</span><span class="token punctuation">(</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> keys<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">multiGet</span><span class="token punctuation">(</span>keys<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> stores<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
stores<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>result<span class="token punctuation">,</span> i<span class="token punctuation">,</span> store<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // get at each store's key/value so you can work with it
</span> <span class="token keyword">let</span> key <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> value <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiset"></a><span class="methodType">static </span>multiSet<span class="methodType">(keyValuePairs: Array&lt;Array&lt;string&gt;&gt;, callback?: ?(errors: ?Array&lt;Error&gt;) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#multiset">#</a></h4><div><p>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:</p><div class="prism language-javascript"><span class="token function">multiSet</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'val1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'k2'</span><span class="token punctuation">,</span> <span class="token string">'val2'</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> cb<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>The method returns a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keyValuePairs<br><br><div><span>Array&lt;Array&lt;string&gt;&gt;</span></div></td><td class="description"><div><p>Array of key-value array for the items to set.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with an array of any
key-specific errors found.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiremove"></a><span class="methodType">static </span>multiRemove<span class="methodType">(keys: Array&lt;string&gt;, callback?: ?(errors: ?Array&lt;Error&gt;) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#multiremove">#</a></h4><div><p>Call this to batch the deletion of all keys in the <code>keys</code> array. Returns
a <code>Promise</code> object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keys<br><br><div><span>Array&lt;string&gt;</span></div></td><td class="description"><div><p>Array of key for the items to delete.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called an array of any key-specific
errors found.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript">
<span class="token keyword">let</span> keys <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'k1'</span><span class="token punctuation">,</span> <span class="token string">'k2'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">multiRemove</span><span class="token punctuation">(</span>keys<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // keys k1 &amp; k2 removed, if they existed
</span> <span class="token comment" spellcheck="true"> // do most stuff after removal (if you want)
</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multimerge"></a><span class="methodType">static </span>multiMerge<span class="methodType">(keyValuePairs: Array&lt;Array&lt;string&gt;&gt;, callback?: ?(errors: ?Array&lt;Error&gt;) =&gt; void)</span> <a class="hash-link" href="docs/asyncstorage.html#multimerge">#</a></h4><div><p>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
<code>Promise</code> object.</p><p><strong>NOTE</strong>: This is not supported by all native implementations.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>keyValuePairs<br><br><div><span>Array&lt;Array&lt;string&gt;&gt;</span></div></td><td class="description"><div><p>Array of key-value array for the items to merge.</p></div></td></tr><tr><td>[callback]<br><br><div><span>?(errors: ?Array&lt;Error&gt;) =&gt; void</span></div></td><td class="description"><div><p>Function that will be called with an array of any
key-specific errors found.</p></div></td></tr></tbody></table></div><div><br>Example:<div class="prism language-javascript"><span class="token comment" spellcheck="true">
// first user, initial values
</span><span class="token keyword">let</span> UID234_object <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Chris'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>hair<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'brown'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// first user, delta values
</span><span class="token keyword">let</span> UID234_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
age<span class="token punctuation">:</span> <span class="token number">31</span><span class="token punctuation">,</span>
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// second user, initial values
</span><span class="token keyword">let</span> UID345_object <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token punctuation">:</span> <span class="token string">'Marge'</span><span class="token punctuation">,</span>
age<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>hair<span class="token punctuation">:</span> <span class="token string">'blonde'</span><span class="token punctuation">,</span> eyes<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// second user, delta values
</span><span class="token keyword">let</span> UID345_delta <span class="token operator">=</span> <span class="token punctuation">{</span>
age<span class="token punctuation">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
traits<span class="token punctuation">:</span> <span class="token punctuation">{</span>eyes<span class="token punctuation">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span> shoe_size<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> multi_set_pairs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'UID234'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>UID234_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'UID345'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>UID345_object<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> multi_merge_pairs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'UID234'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>UID234_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'UID345'</span><span class="token punctuation">,</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>UID345_delta<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">multiSet</span><span class="token punctuation">(</span>multi_set_pairs<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">multiMerge</span><span class="token punctuation">(</span>multi_merge_pairs<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
AsyncStorage<span class="token punctuation">.</span><span class="token function">multiGet</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'UID234'</span><span class="token punctuation">,</span><span class="token string">'UID345'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> stores<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
stores<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token punctuation">(</span>result<span class="token punctuation">,</span> i<span class="token punctuation">,</span> store<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> key <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> val <span class="token operator">=</span> store<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// Console log results:
</span><span class="token comment" spellcheck="true">// =&gt; UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}}
</span><span class="token comment" spellcheck="true">// =&gt; UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}}</span></div></div></div></div></span></div>
docs/autogen_BackAndroid.md
-7
View File
@@ -1,7 +0,0 @@
---
id: backandroid
title: BackAndroid
category: APIs
permalink: docs/backandroid.html
---
<div><div><p>Deprecated. Use BackHandler instead.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/backandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="exitapp"></a><span class="methodType">static </span>exitApp<span class="methodType">()</span> <a class="hash-link" href="docs/backandroid.html#exitapp">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a><span class="methodType">static </span>addEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backandroid.html#addeventlistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a><span class="methodType">static </span>removeEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backandroid.html#removeeventlistener">#</a></h4></div></div></span></div>
docs/autogen_BackHandler.md
-20
View File
@@ -1,20 +0,0 @@
---
id: backhandler
title: BackHandler
category: APIs
permalink: docs/backhandler.html
---
<div><div><p>Detect hardware button presses for back navigation.</p><p>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.</p><p>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.)</p><p>iOS: Not applicable.</p><p>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.</p><p>Example:</p><div class="prism language-javascript">BackHandler<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'hardwareBackPress'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // this.onMainScreen and this.goBack are just examples, you need to use your own implementation here
</span><span class="token comment" spellcheck="true"> // Typically you would use the navigator here to go to the last state.
</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onMainScreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/backhandler.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="exitapp"></a><span class="methodType">static </span>exitApp<span class="methodType">()</span> <a class="hash-link" href="docs/backhandler.html#exitapp">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a><span class="methodType">static </span>addEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backhandler.html#addeventlistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a><span class="methodType">static </span>removeEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/backhandler.html#removeeventlistener">#</a></h4></div></div></span></div>
docs/autogen_Button.md
-19
View File
@@ -1,19 +0,0 @@
---
id: button
title: Button
category: Components
permalink: docs/button.html
---
<div><div><p>A basic button component that should render nicely on any platform. Supports
a minimal level of customization.</p><span><center><img src="/react-native/img/buttonExample.png"></center>
</span><p>If this button doesn't look right for your app, you can build your own
button using <a href="docs/touchableopacity.html" target="_blank">TouchableOpacity</a>
or <a href="docs/touchablenativefeedback.html" target="_blank">TouchableNativeFeedback</a>.
For inspiration, look at the <a href="https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js" target="_blank">source code for this button component</a>.
Or, take a look at the <a href="https://js.coach/react-native?search=button" target="_blank">wide variety of button components built by the community</a>.</p><p>Example usage:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>Button
onPress<span class="token operator">=</span><span class="token punctuation">{</span>onPressLearnMore<span class="token punctuation">}</span>
title<span class="token operator">=</span><span class="token string">"Learn More"</span>
color<span class="token operator">=</span><span class="token string">"#841584"</span>
accessibilityLabel<span class="token operator">=</span><span class="token string">"Learn more about this purple button"</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/button.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel?: <span class="propType"><span>?string</span></span> <a class="hash-link" href="docs/button.html#accessibilitylabel">#</a></h4><div><p>Text to display for blindness accessibility features</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color?: <span class="propType"><span>?string</span></span> <a class="hash-link" href="docs/button.html#color">#</a></h4><div><p>Color of the text (iOS), or background color of the button (Android)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/button.html#disabled">#</a></h4><div><p>If true, disable all interactions for this component.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress: <span class="propType">() =&gt; any</span> <a class="hash-link" href="docs/button.html#onpress">#</a></h4><div><p>Handler to be called when the user taps the button</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType"><span>?string</span></span> <a class="hash-link" href="docs/button.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title: <span class="propType">string</span> <a class="hash-link" href="docs/button.html#title">#</a></h4><div><p>Text to display inside the button</p></div></div></div></div>
docs/autogen_CameraRoll.md
-15
View File
@@ -1,15 +0,0 @@
---
id: cameraroll
title: CameraRoll
category: APIs
permalink: docs/cameraroll.html
---
<div><div><p><code>CameraRoll</code> provides access to the local camera roll / gallery.
Before using this you must link the <code>RCTCameraRoll</code> library.
You can refer to <a href="docs/linking-libraries-ios.html" target="_blank">Linking</a> for help.</p><h3><a class="anchor" name="permissions"></a>Permissions <a class="hash-link" href="docs/cameraroll.html#permissions">#</a></h3><p>The user's permission is required in order to access the Camera Roll on devices running iOS 10 or later.
Add the <code>NSPhotoLibraryUsageDescription</code> key in your <code>Info.plist</code> with a string that describes how your
app will use this data. This key will appear as <code>Privacy - Photo Library Usage Description</code> in Xcode.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/cameraroll.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name=""></a>=<span class="methodType">(;, AssetTypeOptions, static, (, :)</span> <a class="hash-link" href="docs/cameraroll.html#">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="savetocameraroll"></a><span class="methodType">static </span>saveToCameraRoll<span class="methodType">(tag, type?)</span> <a class="hash-link" href="docs/cameraroll.html#savetocameraroll">#</a></h4><div><p>Saves the photo or video to the camera roll / gallery.</p><p>On Android, the tag must be a local image or video URI, such as <code>"file:///sdcard/img.png"</code>.</p><p>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).</p><p>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
<code>type</code> parameter that must be one of 'photo' or 'video'.</p><p>Returns a Promise which will resolve with the new URI.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getphotos"></a><span class="methodType">static </span>getPhotos<span class="methodType">(params)</span> <a class="hash-link" href="docs/cameraroll.html#getphotos">#</a></h4><div><p>Returns a Promise with photo identifier objects from the local camera
roll of the device matching shape defined by <code>getPhotosReturnChecker</code>.</p><p>Expects a params object of the following shape:</p><ul><li><code>first</code> : {number} : The number of photos wanted in reverse order of the photo application (i.e. most recent first for SavedPhotos).</li><li><code>after</code> : {string} : A cursor that matches <code>page_info { end_cursor }</code> returned from a previous call to <code>getPhotos</code>.</li><li><code>groupTypes</code> : {string} : Specifies which group types to filter the results to. Valid values are:<ul><li><code>Album</code></li><li><code>All</code></li><li><code>Event</code></li><li><code>Faces</code></li><li><code>Library</code></li><li><code>PhotoStream</code></li><li><code>SavedPhotos</code> // default</li></ul></li><li><code>groupName</code> : {string} : Specifies filter on group names, like 'Recent Photos' or custom album titles.</li><li><code>assetType</code> : {string} : Specifies filter on asset type. Valid values are:<ul><li><code>All</code></li><li><code>Videos</code></li><li><code>Photos</code> // default</li></ul></li><li><code>mimeTypes</code> : {string} : Filter by mimetype (e.g. image/jpeg).</li></ul><p>Returns a Promise which when resolved will be of the following shape:</p><ul><li><code>edges</code> : {Array&lt;node&gt;} An array of node objects<ul><li><code>node</code>: {object} An object with the following shape:<ul><li><code>type</code>: {string}</li><li><code>group_name</code>: {string}</li><li><code>image</code>: {object} : An object with the following shape:<ul><li><code>uri</code>: {string}</li><li><code>height</code>: {number}</li><li><code>width</code>: {number}</li><li><code>isStored</code>: {boolean}</li></ul></li><li><code>timestamp</code>: {number}</li><li><code>location</code>: {object} : An object with the following shape:<ul><li><code>latitude</code>: {number}</li><li><code>longitude</code>: {number}</li><li><code>altitude</code>: {number}</li><li><code>heading</code>: {number}</li><li><code>speed</code>: {number}</li></ul></li></ul></li></ul></li><li><code>page_info</code> : {object} : An object with the following shape:<ul><li><code>has_next_page</code>: {boolean}</li><li><code>start_cursor</code>: {boolean}</li><li><code>end_cursor</code>: {boolean}</li></ul></li></ul></div></div></div></span></div>
docs/autogen_Clipboard.md
-11
View File
@@ -1,11 +0,0 @@
---
id: clipboard
title: Clipboard
category: APIs
permalink: docs/clipboard.html
---
<div><div><p><code>Clipboard</code> gives you an interface for setting and getting content from Clipboard on both iOS and Android</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/clipboard.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getstring"></a><span class="methodType">static </span>getString<span class="methodType">()</span> <a class="hash-link" href="docs/clipboard.html#getstring">#</a></h4><div><p>Get content of string type, this method returns a <code>Promise</code>, so you can use following code to get clipboard content</p><div class="prism language-javascript"><span class="token keyword">async</span> <span class="token function">_getContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> content <span class="token operator">=</span> <span class="token keyword">await</span> Clipboard<span class="token punctuation">.</span><span class="token function">getString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setstring"></a><span class="methodType">static </span>setString<span class="methodType">(content)</span> <a class="hash-link" href="docs/clipboard.html#setstring">#</a></h4><div><p>Set content of string type. You can use following code to set clipboard content</p><div class="prism language-javascript"><span class="token function">_setContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
Clipboard<span class="token punctuation">.</span><span class="token function">setString</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>@param the content to be stored in the clipboard.</p></div></div></div></span></div>
docs/autogen_DatePickerAndroid.md
-22
View File
@@ -1,22 +0,0 @@
---
id: datepickerandroid
title: DatePickerAndroid
category: APIs
permalink: docs/datepickerandroid.html
---
<div><div><p>Opens the standard Android date picker dialog.</p><h3><a class="anchor" name="example"></a>Example <a class="hash-link" href="docs/datepickerandroid.html#example">#</a></h3><div class="prism language-javascript"><span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span>action<span class="token punctuation">,</span> year<span class="token punctuation">,</span> month<span class="token punctuation">,</span> day<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> DatePickerAndroid<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Use `new Date()` for current date.
</span> <span class="token comment" spellcheck="true"> // May 25 2020. Month 0 is January.
</span> date<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2020</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>action <span class="token operator">!==</span> DatePickerAndroid<span class="token punctuation">.</span>dismissedAction<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Selected year, month (0-11), day
</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>code<span class="token punctuation">,</span> message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span><span class="token string">'Cannot open date picker'</span><span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/datepickerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="open"></a><span class="methodType">static </span>open<span class="methodType">(options)</span> <a class="hash-link" href="docs/datepickerandroid.html#open">#</a></h4><div><p>Opens the standard Android date picker dialog.</p><p>The available keys for the <code>options</code> object are:</p><ul><li><code>date</code> (<code>Date</code> object or timestamp in milliseconds) - date to show by default</li><li><code>minDate</code> (<code>Date</code> or timestamp in milliseconds) - minimum date that can be selected</li><li><code>maxDate</code> (<code>Date</code> object or timestamp in milliseconds) - maximum date that can be selected</li><li><code>mode</code> (<code>enum('calendar', 'spinner', 'default')</code>) - To set the date-picker mode to calendar/spinner/default<ul><li>'calendar': Show a date picker in calendar mode.</li><li>'spinner': Show a date picker in spinner mode.</li><li>'default': Show a default native date picker(spinner/calendar) based on android versions.</li></ul></li></ul><p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>year</code>, <code>month</code> (0-11),
<code>day</code> if the user picked a date. If the user dismissed the dialog, the Promise will
still be resolved with action being <code>DatePickerAndroid.dismissedAction</code> and all the other keys
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p><p>Note the native date picker dialog has some UI glitches on Android 4 and lower
when using the <code>minDate</code> and <code>maxDate</code> options.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="datesetaction"></a><span class="methodType">static </span>dateSetAction<span class="methodType">()</span> <a class="hash-link" href="docs/datepickerandroid.html#datesetaction">#</a></h4><div><p>A date has been selected.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="dismissedaction"></a><span class="methodType">static </span>dismissedAction<span class="methodType">()</span> <a class="hash-link" href="docs/datepickerandroid.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.</p></div></div></div></span></div>
docs/autogen_DatePickerIOS.md
-15
View File
@@ -1,15 +0,0 @@
---
id: datepickerios
title: DatePickerIOS
category: Components
permalink: docs/datepickerios.html
---
<div><div><p>Use <code>DatePickerIOS</code> to render a date/time picker (selector) on iOS. This is
a controlled component, so you must hook in to the <code>onDateChange</code> callback
and update the <code>date</code> prop in order for the component to update, otherwise
the user's change will be reverted immediately to reflect <code>props.date</code> as the
source of truth.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/datepickerios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/datepickerios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="date"></a>date: <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#date">#</a></h4><div><p>The currently selected date.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumdate"></a>maximumDate?: <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#maximumdate">#</a></h4><div><p>Maximum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumdate"></a>minimumDate?: <span class="propType">Date</span> <a class="hash-link" href="docs/datepickerios.html#minimumdate">#</a></h4><div><p>Minimum date.</p><p>Restricts the range of possible date/time values.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minuteinterval"></a>minuteInterval?: <span class="propType">enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</span> <a class="hash-link" href="docs/datepickerios.html#minuteinterval">#</a></h4><div><p>The interval at which minutes can be selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a>mode?: <span class="propType">enum('date', 'time', 'datetime')</span> <a class="hash-link" href="docs/datepickerios.html#mode">#</a></h4><div><p>The date picker mode.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondatechange"></a>onDateChange: <span class="propType">function</span> <a class="hash-link" href="docs/datepickerios.html#ondatechange">#</a></h4><div><p>Date change handler.</p><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="timezoneoffsetinminutes"></a>timeZoneOffsetInMinutes?: <span class="propType">number</span> <a class="hash-link" href="docs/datepickerios.html#timezoneoffsetinminutes">#</a></h4><div><p>Timezone offset in minutes.</p><p>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.</p></div></div></div></div>
docs/autogen_Dimensions.md
-17
View File
@@ -1,17 +0,0 @@
---
id: dimensions
title: Dimensions
category: APIs
permalink: docs/dimensions.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/dimensions.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="set"></a><span class="methodType">static </span>set<span class="methodType">(dims)</span> <a class="hash-link" href="docs/dimensions.html#set">#</a></h4><div><p>This should only be called from native code by sending the
didUpdateDimensions event.</p><p>@param {object} dims Simple string-keyed object of dimensions to set</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="get"></a><span class="methodType">static </span>get<span class="methodType">(dim)</span> <a class="hash-link" href="docs/dimensions.html#get">#</a></h4><div><p>Initial dimensions are set before <code>runApplication</code> is called so they should
be available before any other require's are run, but may be updated later.</p><p>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 <code>StyleSheet</code>).</p><p>Example: <code>var {height, width} = Dimensions.get('window');</code></p><p>@param {string} dim Name of dimension as defined when calling <code>set</code>.
@returns {Object?} Value for the dimension.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a><span class="methodType">static </span>addEventListener<span class="methodType">(type, handler)</span> <a class="hash-link" href="docs/dimensions.html#addeventlistener">#</a></h4><div><p>Add an event handler. Supported events:</p><ul><li><code>change</code>: Fires when a property within the <code>Dimensions</code> object changes. The argument
to the event handler is an object with <code>window</code> and <code>screen</code> properties whose values
are the same as the return values of <code>Dimensions.get('window')</code> and
<code>Dimensions.get('screen')</code>, respectively.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a><span class="methodType">static </span>removeEventListener<span class="methodType">(type, handler)</span> <a class="hash-link" href="docs/dimensions.html#removeeventlistener">#</a></h4><div><p>Remove an event handler.</p></div></div></div></span></div>
docs/autogen_DrawerLayoutAndroid.md
-46
View File
@@ -1,46 +0,0 @@
---
id: drawerlayoutandroid
title: DrawerLayoutAndroid
category: Components
permalink: docs/drawerlayoutandroid.html
---
<div><div><p>React component that wraps the platform <code>DrawerLayout</code> (Android only). The
Drawer (typically used for navigation) is rendered with <code>renderNavigationView</code>
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 <code>drawerPosition</code> prop and its width can
be set by the <code>drawerWidth</code> prop.</p><p>Example:</p><div class="prism language-javascript">render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> navigationView <span class="token operator">=</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'#fff'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">'left'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>I'm <span class="token keyword">in</span> the Drawer<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>DrawerLayoutAndroid
drawerWidth<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">300</span><span class="token punctuation">}</span>
drawerPosition<span class="token operator">=</span><span class="token punctuation">{</span>DrawerLayoutAndroid<span class="token punctuation">.</span>positions<span class="token punctuation">.</span>Left<span class="token punctuation">}</span>
renderNavigationView<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> navigationView<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>Hello<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span> fontSize<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span> textAlign<span class="token punctuation">:</span> <span class="token string">'right'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>World<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>DrawerLayoutAndroid<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/drawerlayoutandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/drawerlayoutandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerbackgroundcolor"></a>drawerBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerbackgroundcolor">#</a></h4><div><p>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:</p><div class="prism language-javascript"><span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>DrawerLayoutAndroid drawerBackgroundColor<span class="token operator">=</span><span class="token string">"rgba(0,0,0,0.5)"</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>DrawerLayoutAndroid<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerlockmode"></a>drawerLockMode?: <span class="propType">enum('unlocked', 'locked-closed', 'locked-open')</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerlockmode">#</a></h4><div><p>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 (<code>openDrawer</code>/<code>closeDrawer</code>).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerposition"></a>drawerPosition?: <span class="propType">enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerposition">#</a></h4><div><p>Specifies the side of the screen from which the drawer will slide in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="drawerwidth"></a>drawerWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#drawerwidth">#</a></h4><div><p>Specifies the width of the drawer, more precisely the width of the view that be pulled in
from the edge of the window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode?: <span class="propType">enum('none', 'on-drag')</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#keyboarddismissmode">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerclose"></a>onDrawerClose?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerclose">#</a></h4><div><p>Function called whenever the navigation view has been closed.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondraweropen"></a>onDrawerOpen?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondraweropen">#</a></h4><div><p>Function called whenever the navigation view has been opened.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerslide"></a>onDrawerSlide?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerslide">#</a></h4><div><p>Function called whenever there is an interaction with the navigation view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ondrawerstatechanged"></a>onDrawerStateChanged?: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#ondrawerstatechanged">#</a></h4><div><p>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</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendernavigationview"></a>renderNavigationView: <span class="propType">function</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#rendernavigationview">#</a></h4><div><p>The navigation view that will be rendered to the side of the screen and can be pulled in.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarbackgroundcolor"></a>statusBarBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/drawerlayoutandroid.html#statusbarbackgroundcolor">#</a></h4><div><p>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+.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/drawerlayoutandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="opendrawer"></a>openDrawer<span class="methodType">()</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#opendrawer">#</a></h4><div><p>Opens the drawer.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="closedrawer"></a>closeDrawer<span class="methodType">()</span> <a class="hash-link" href="docs/drawerlayoutandroid.html#closedrawer">#</a></h4><div><p>Closes the drawer.</p></div></div></div></span></div>
docs/autogen_Easing.md
-26
View File
@@ -1,26 +0,0 @@
---
id: easing
title: Easing
category: APIs
permalink: docs/easing.html
---
<div><div><p>The <code>Easing</code> module implements common easing functions. This module is used
by <a href="docs/animate.html#timing" target="_blank">Animate.timing()</a> to convey physically
believable motion in animations.</p><p>You can find a visualization of some common easing functions at
<a href="http://easings.net/">http://easings.net/</a></p><h3><a class="anchor" name="predefined-animations"></a>Predefined animations <a class="hash-link" href="docs/easing.html#predefined-animations">#</a></h3><p>The <code>Easing</code> module provides several predefined animations through the
following methods:</p><ul><li><a href="docs/easing.html#back" target="_blank"><code>back</code></a> provides a simple animation where the
object goes slightly back before moving forward</li><li><a href="docs/easing.html#bounce" target="_blank"><code>bounce</code></a> provides a bouncing animation</li><li><a href="docs/easing.html#ease" target="_blank"><code>ease</code></a> provides a simple inertial animation</li><li><a href="docs/easing.html#elastic" target="_blank"><code>elastic</code></a> provides a simple spring interaction</li></ul><h3><a class="anchor" name="standard-functions"></a>Standard functions <a class="hash-link" href="docs/easing.html#standard-functions">#</a></h3><p>Three standard easing functions are provided:</p><ul><li><a href="docs/easing.html#linear" target="_blank"><code>linear</code></a></li><li><a href="docs/easing.html#quad" target="_blank"><code>quad</code></a></li><li><a href="docs/easing.html#cubic" target="_blank"><code>cubic</code></a></li></ul><p>The <a href="docs/easing.html#poly" target="_blank"><code>poly</code></a> function can be used to implement
quartic, quintic, and other higher power functions.</p><h3><a class="anchor" name="additional-functions"></a>Additional functions <a class="hash-link" href="docs/easing.html#additional-functions">#</a></h3><p>Additional mathematical functions are provided by the following methods:</p><ul><li><a href="docs/easing.html#bezier" target="_blank"><code>bezier</code></a> provides a cubic bezier curve</li><li><a href="docs/easing.html#circle" target="_blank"><code>circle</code></a> provides a circular function</li><li><a href="docs/easing.html#sin" target="_blank"><code>sin</code></a> provides a sinusoidal function</li><li><a href="docs/easing.html#exp" target="_blank"><code>exp</code></a> provides an exponential function</li></ul><p>The following helpers are used to modify other easing functions.</p><ul><li><a href="docs/easing.html#in" target="_blank"><code>in</code></a> runs an easing function forwards</li><li><a href="docs/easing.html#inout" target="_blank"><code>inOut</code></a> makes any easing function symmetrical</li><li><a href="docs/easing.html#out" target="_blank"><code>out</code></a> runs an easing function backwards</li></ul></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/easing.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="step0"></a><span class="methodType">static </span>step0<span class="methodType">(n)</span> <a class="hash-link" href="docs/easing.html#step0">#</a></h4><div><p>A stepping function, returns 1 for any positive value of <code>n</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="step1"></a><span class="methodType">static </span>step1<span class="methodType">(n)</span> <a class="hash-link" href="docs/easing.html#step1">#</a></h4><div><p>A stepping function, returns 1 if <code>n</code> is greater than or equal to 1.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="linear"></a><span class="methodType">static </span>linear<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#linear">#</a></h4><div><p>A linear function, <code>f(t) = t</code>. Position correlates to elapsed time one to
one.</p><p><a href="http://cubic-bezier.com/#0,0,1,1">http://cubic-bezier.com/#0,0,1,1</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="ease"></a><span class="methodType">static </span>ease<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#ease">#</a></h4><div><p>A simple inertial interaction, similar to an object slowly accelerating to
speed.</p><p><a href="http://cubic-bezier.com/#.42,0,1,1">http://cubic-bezier.com/#.42,0,1,1</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="quad"></a><span class="methodType">static </span>quad<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#quad">#</a></h4><div><p>A quadratic function, <code>f(t) = t * t</code>. Position equals the square of elapsed
time.</p><p><a href="http://easings.net/#easeInQuad">http://easings.net/#easeInQuad</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="cubic"></a><span class="methodType">static </span>cubic<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#cubic">#</a></h4><div><p>A cubic function, <code>f(t) = t * t * t</code>. Position equals the cube of elapsed
time.</p><p><a href="http://easings.net/#easeInCubic">http://easings.net/#easeInCubic</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poly"></a><span class="methodType">static </span>poly<span class="methodType">(n)</span> <a class="hash-link" href="docs/easing.html#poly">#</a></h4><div><p>A power function. Position is equal to the Nth power of elapsed time.</p><p>n = 4: <a href="http://easings.net/#easeInQuart">http://easings.net/#easeInQuart</a>
n = 5: <a href="http://easings.net/#easeInQuint">http://easings.net/#easeInQuint</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sin"></a><span class="methodType">static </span>sin<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#sin">#</a></h4><div><p>A sinusoidal function.</p><p><a href="http://easings.net/#easeInSine">http://easings.net/#easeInSine</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="circle"></a><span class="methodType">static </span>circle<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#circle">#</a></h4><div><p>A circular function.</p><p><a href="http://easings.net/#easeInCirc">http://easings.net/#easeInCirc</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="exp"></a><span class="methodType">static </span>exp<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#exp">#</a></h4><div><p>An exponential function.</p><p><a href="http://easings.net/#easeInExpo">http://easings.net/#easeInExpo</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="elastic"></a><span class="methodType">static </span>elastic<span class="methodType">(bounciness)</span> <a class="hash-link" href="docs/easing.html#elastic">#</a></h4><div><p>A simple elastic interaction, similar to a spring oscillating back and
forth.</p><p>Default bounciness is 1, which overshoots a little bit once. 0 bounciness
doesn't overshoot at all, and bounciness of N &gt; 1 will overshoot about N
times.</p><p><a href="http://easings.net/#easeInElastic">http://easings.net/#easeInElastic</a></p><p>Wolfram Plots:</p><ul><li><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (bounciness = 1, default)</li><li><a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="back"></a><span class="methodType">static </span>back<span class="methodType">(s)</span> <a class="hash-link" href="docs/easing.html#back">#</a></h4><div><p>Use with <code>Animated.parallel()</code> to create a simple effect where the object
animates back slightly as the animation starts.</p><p>Wolfram Plot:</p><ul><li><a href="http://tiny.cc/back_default">http://tiny.cc/back_default</a> (s = 1.70158, default)</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="bounce"></a><span class="methodType">static </span>bounce<span class="methodType">(t)</span> <a class="hash-link" href="docs/easing.html#bounce">#</a></h4><div><p>Provides a simple bouncing effect.</p><p><a href="http://easings.net/#easeInBounce">http://easings.net/#easeInBounce</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="bezier"></a><span class="methodType">static </span>bezier<span class="methodType">(x1, y1, x2, y2)</span> <a class="hash-link" href="docs/easing.html#bezier">#</a></h4><div><p>Provides a cubic bezier curve, equivalent to CSS Transitions'
<code>transition-timing-function</code>.</p><p>A useful tool to visualize cubic bezier curves can be found at
<a href="http://cubic-bezier.com/">http://cubic-bezier.com/</a></p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="in"></a><span class="methodType">static </span>in<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#in">#</a></h4><div><p>Runs an easing function forwards.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="out"></a><span class="methodType">static </span>out<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#out">#</a></h4><div><p>Runs an easing function backwards.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="inout"></a><span class="methodType">static </span>inOut<span class="methodType">(easing)</span> <a class="hash-link" href="docs/easing.html#inout">#</a></h4><div><p>Makes any easing function symmetrical. The easing function will run
forwards for half of the duration, then backwards for the rest of the
duration.</p></div></div></div></span></div>
docs/autogen_FlatList.md
-140
View File
@@ -1,140 +0,0 @@
---
id: flatlist
title: FlatList
category: Components
permalink: docs/flatlist.html
---
<div><div><p>A performant interface for rendering simple, flat lists, supporting the most handy features:</p><ul><li>Fully cross-platform.</li><li>Optional horizontal mode.</li><li>Configurable viewability callbacks.</li><li>Header support.</li><li>Footer support.</li><li>Separator support.</li><li>Pull to Refresh.</li><li>Scroll loading.</li><li>ScrollToIndex support.</li></ul><p>If you need section support, use <a href="docs/sectionlist.html" target="_blank"><code>&lt;SectionList&gt;</code></a>.</p><p>Minimal Example:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>FlatList
data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'a'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>key<span class="token punctuation">:</span> <span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>More complex example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p><ul><li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will
prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even
if the inner <code>SomeOtherWidget</code> has no such optimizations.</li><li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render
when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it
needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will
not show any changes.</li><li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys.</li></ul><div class="prism language-javascript"><span class="token keyword">class</span> <span class="token class-name">MyListItem</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
_onPress <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPressItem</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>SomeOtherWidget
<span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">MyList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>PureComponent</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>selected<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> Map<span class="token operator">&lt;</span>string<span class="token punctuation">,</span> boolean<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
_keyExtractor <span class="token operator">=</span> <span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
_onPressItem <span class="token operator">=</span> <span class="token punctuation">(</span>id<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // updater functions are preferred for transactional updates
</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // copy the map rather than modifying state.
</span> <span class="token keyword">const</span> selected <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
selected<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span> <span class="token operator">!</span>selected<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true"> // toggle
</span> <span class="token keyword">return</span> <span class="token punctuation">{</span>selected<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
_renderItem <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>MyListItem
id<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>id<span class="token punctuation">}</span>
onPressItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressItem<span class="token punctuation">}</span>
selected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selected<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span>
title<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>FlatList
data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>data<span class="token punctuation">}</span>
extraData<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">}</span>
keyExtractor<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_keyExtractor<span class="token punctuation">}</span>
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>This is a convenience wrapper around <a href="docs/virtualizedlist.html" target="_blank"><code>&lt;VirtualizedList&gt;</code></a>,
and thus inherits its props (as well as those of <code>ScrollView</code>) that aren't explicitly listed
here, along with the following caveats:</p><ul><li>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.</li><li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-
equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop
(e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on
changes. This includes the <code>data</code> prop and parent component state.</li><li>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.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code> and
<code>leadingItem</code> props are provided. <code>renderItem</code> provides <code>separators.highlight</code>/<code>unhighlight</code>
which will update the <code>highlighted</code> prop, but you can also add custom props with
<code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listemptycomponent"></a>ListEmptyComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/flatlist.html#listemptycomponent">#</a></h4><div><p>Rendered when the list is empty. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/flatlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/flatlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="columnwrapperstyle"></a>columnWrapperStyle?: <span class="propType">StyleObj</span> <a class="hash-link" href="docs/flatlist.html#columnwrapperstyle">#</a></h4><div><p>Optional custom style for multi-item rows generated when numColumns &gt; 1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data: <span class="propType"><span>?$ReadOnlyArray&lt;ItemT&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#data">#</a></h4><div><p>For simplicity, data is just a plain array. If you want to use something else, like an
immutable list, use the underlying <code>VirtualizedList</code> directly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/flatlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
<code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemlayout"></a>getItemLayout?: <span class="propType">(
data: ?Array&lt;ItemT&gt;,
index: number,
) =&gt; {length: number, offset: number, index: number}</span> <a class="hash-link" href="docs/flatlist.html#getitemlayout">#</a></h4><div><p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if
you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to
use if you have fixed height items, for example:</p><div class="prism language-javascript">getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token punctuation">{</span>length<span class="token punctuation">:</span> ITEM_HEIGHT<span class="token punctuation">,</span> offset<span class="token punctuation">:</span> ITEM_HEIGHT <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span></div><p>Remember to include separator length (height or width) in your offset calculation if you
specify <code>ItemSeparatorComponent</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#horizontal">#</a></h4><div><p>If true, renders items next to each other horizontally instead of stacked vertically.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender: <span class="propType">number</span> <a class="hash-link" href="docs/flatlist.html#initialnumtorender">#</a></h4><div><p>How many items to render in the initial batch. This should be enough to fill the screen but not
much more. Note these items will never be unmounted as part of the windowed rendering in order
to improve perceived performance of scroll-to-top actions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialscrollindex"></a>initialScrollIndex?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/flatlist.html#initialscrollindex">#</a></h4><div><p>Instead of starting at the top with the first item, start at <code>initialScrollIndex</code>. This
disables the "scroll to top" optimization that keeps the first <code>initialNumToRender</code> items
always rendered and immediately renders the items starting at this initial index. Requires
<code>getItemLayout</code> to be implemented.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inverted"></a>inverted?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#inverted">#</a></h4><div><p>Reverses the direction of scroll. Uses scale transforms of -1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: ItemT, index: number) =&gt; string</span> <a class="hash-link" href="docs/flatlist.html#keyextractor">#</a></h4><div><p>Used to extract a unique key for a given item at the specified index. Key is used for caching
and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then
falls back to using the index, like React does.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="legacyimplementation"></a>legacyImplementation?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#legacyimplementation">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numcolumns"></a>numColumns: <span class="propType">number</span> <a class="hash-link" href="docs/flatlist.html#numcolumns">#</a></h4><div><p>Multiple columns can only be rendered with <code>horizontal={false}</code> and will zig-zag like a
<code>flexWrap</code> layout. Items should all be the same height - masonry layouts are not supported.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType"><span>?(info: {distanceFromEnd: number}) =&gt; void</span></span> <a class="hash-link" href="docs/flatlist.html#onendreached">#</a></h4><div><p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered
content.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/flatlist.html#onendreachedthreshold">#</a></h4><div><p>How far from the end (in units of visible length of the list) the bottom edge of the
list must be from the end of the content to trigger the <code>onEndReached</code> callback.
Thus a value of 0.5 will trigger <code>onEndReached</code> when the end of the content is
within half the visible length of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType"><span>?() =&gt; void</span></span> <a class="hash-link" href="docs/flatlist.html#onrefresh">#</a></h4><div><p>If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onviewableitemschanged"></a>onViewableItemsChanged?: <span class="propType"><span>?(info: {
viewableItems: Array&lt;ViewToken&gt;,
changed: Array&lt;ViewToken&gt;,
}) =&gt; void</span></span> <a class="hash-link" href="docs/flatlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the <code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/flatlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {
item: ItemT,
index: number,
separators: {
highlight: () =&gt; void,
unhighlight: () =&gt; void,
updateProps: (select: 'leading' | 'trailing', newProps: Object) =&gt; void,
},
}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/flatlist.html#renderitem">#</a></h4><div><p>Takes an item from <code>data</code> and renders it into the list. Example usage:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>FlatList
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span>Platform<span class="token punctuation">.</span>OS <span class="token operator">!==</span> <span class="token string">'android'</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>style<span class="token punctuation">.</span>separator<span class="token punctuation">,</span> highlighted <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span>
data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Title Text'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'item1'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">,</span> separators<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TouchableHighlight
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_onPress</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">}</span>
onShowUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>highlight<span class="token punctuation">}</span>
onHideUnderlay<span class="token operator">=</span><span class="token punctuation">{</span>separators<span class="token punctuation">.</span>unhighlight<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'white'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Provides additional metadata like <code>index</code> if you need it, as well as a more generic
<code>separators.updateProps</code> function which let's you set whatever props you want to change the
rendering of either the leading separator or trailing separator in case the more common
<code>highlight</code> and <code>unhighlight</code> (which set the <code>highlighted: boolean</code> prop) are insufficient for
your use-case.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/flatlist.html#viewabilityconfig">#</a></h4><div><p>See <code>ViewabilityHelper</code> for flow type and further documentation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewoffset"></a><span class="platform">android</span>progressViewOffset?: <span class="propType">number</span> <a class="hash-link" href="docs/flatlist.html#progressviewoffset">#</a></h4><div><p>Set this when offset is needed for the loading indicator to show correctly.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at a the specified index such that it is positioned in the viewable area
such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the
middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p><p>Note: cannot scroll to locations outside the render window without specifying the
<code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoitem">#</a></h4><div><p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p><p>Note: cannot scroll to locations outside the render window without specifying the
<code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltooffset"></a>scrollToOffset<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltooffset">#</a></h4><div><p>Scroll to a specific content pixel offset in the list.</p><p>Check out <a href="docs/virtualizedlist.html#scrolltooffset" target="_blank">scrollToOffset</a> of VirtualizedList</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/flatlist.html#recordinteraction">#</a></h4><div><p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by
taps on items or by navigation actions.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/flatlist.html#flashscrollindicators">#</a></h4><div><p>Displays the scroll indicators momentarily.</p></div></div></div></span></div>
docs/autogen_Geolocation.md
-33
View File
@@ -1,33 +0,0 @@
---
id: geolocation
title: Geolocation
category: APIs
permalink: docs/geolocation.html
---
<div><div><p>The Geolocation API extends the web spec:
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">https://developer.mozilla.org/en-US/docs/Web/API/Geolocation</a></p><p>As a browser polyfill, this API is available through the <code>navigator.geolocation</code>
global - you do not need to <code>import</code> it.</p><h3><a class="anchor" name="configuration-and-permissions"></a>Configuration and Permissions <a class="hash-link" href="docs/geolocation.html#configuration-and-permissions">#</a></h3><span><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>
</span><h4><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/geolocation.html#ios">#</a></h4><p>You need to include the <code>NSLocationWhenInUseUsageDescription</code> key
in Info.plist to enable geolocation when using the app. Geolocation is
enabled by default when you create a project with <code>react-native init</code>.</p><p>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.</p><h4><a class="anchor" name="android"></a>Android <a class="hash-link" href="docs/geolocation.html#android">#</a></h4><p>To request access to location, you need to add the following line to your
app's <code>AndroidManifest.xml</code>:</p><p><code>&lt;uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /&gt;</code></p><p>Android API &gt;= 18 Positions will also contain a <code>mocked</code> boolean to indicate if position
was created from a mock provider.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/geolocation.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="requestauthorization"></a><span class="methodType">static </span>requestAuthorization<span class="methodType">()</span> <a class="hash-link" href="docs/geolocation.html#requestauthorization">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getcurrentposition"></a><span class="methodType">static </span>getCurrentPosition<span class="methodType">(geo_success, geo_error?, geo_options?)</span> <a class="hash-link" href="docs/geolocation.html#getcurrentposition">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="watchposition"></a><span class="methodType">static </span>watchPosition<span class="methodType">(success, error?, options?)</span> <a class="hash-link" href="docs/geolocation.html#watchposition">#</a></h4><div><p>Invokes the success callback whenever the location changes. Supported
options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m)</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clearwatch"></a><span class="methodType">static </span>clearWatch<span class="methodType">(watchID)</span> <a class="hash-link" href="docs/geolocation.html#clearwatch">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stopobserving"></a><span class="methodType">static </span>stopObserving<span class="methodType">()</span> <a class="hash-link" href="docs/geolocation.html#stopobserving">#</a></h4></div></div></span></div>
docs/autogen_Image.md
-126
View File
@@ -1,126 +0,0 @@
---
id: image
title: Image
category: Components
permalink: docs/image.html
---
<div><div><p>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.</p><p>This example shows fetching and displaying an image from local storage
as well as one from network and even from data provided in the <code>'data:'</code> uri scheme.</p><blockquote><p>Note that for network and data images, you will need to manually specify the dimensions of your image!</p></blockquote><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Image <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">DisplayAnImage</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Image
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Image
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://facebook.github.io/react/img/logo_og.png'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Image
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">66</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">58</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">
// skip this line if using Create React Native App
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'DisplayAnImage'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> DisplayAnImage<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20DisplayAnImage%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%7D%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'https%3A%2F%2Ffacebook.github.io%2Freact%2Fimg%2Flogo_og.png'%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%2066%2C%20height%3A%2058%7D%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB%2B2%2Fab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw%2BP%2FeMrC5UTVAAAAABJRU5ErkJggg%3D%3D'%7D%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('DisplayAnImage'%2C%20()%20%3D%3E%20DisplayAnImage)%3B" frameborder="0"></iframe></div><p>You can also add <code>style</code> to an image:</p><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> View<span class="token punctuation">,</span> Image<span class="token punctuation">,</span> StyleSheet <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
stretch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">200</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">DisplayAnImageWithStyle</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Image
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>stretch<span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./img/favicon.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">
// skip these lines if using Create React Native App
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>
<span class="token string">'DisplayAnImageWithStyle'</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> DisplayAnImageWithStyle
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20Image%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20stretch%3A%20%7B%0A%20%20%20%20width%3A%2050%2C%0A%20%20%20%20height%3A%20200%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20class%20DisplayAnImageWithStyle%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20%20%20style%3D%7Bstyles.stretch%7D%0A%20%20%20%20%20%20%20%20%20%20source%3D%7Brequire('.%2Fimg%2Ffavicon.png')%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20%20'DisplayAnImageWithStyle'%2C%0A%20%20()%20%3D%3E%20DisplayAnImageWithStyle%0A)%3B" frameborder="0"></iframe></div><h3><a class="anchor" name="gif-and-webp-support-on-android"></a>GIF and WebP support on Android <a class="hash-link" href="docs/image.html#gif-and-webp-support-on-android">#</a></h3><p>When building your own native code, GIF and WebP are not supported by default on Android.</p><p>You will need to add some optional modules in <code>android/app/build.gradle</code>, depending on the needs of your app.</p><div class="prism language-javascript">dependencies <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // If your app supports Android versions before Ice Cream Sandwich (API level 14)
</span> compile <span class="token string">'com.facebook.fresco:animated-base-support:1.3.0'</span>
<span class="token comment" spellcheck="true"> // For animated GIF support
</span> compile <span class="token string">'com.facebook.fresco:animated-gif:1.3.0'</span>
<span class="token comment" spellcheck="true"> // For WebP support, including animated WebP
</span> compile <span class="token string">'com.facebook.fresco:animated-webp:1.3.0'</span>
compile <span class="token string">'com.facebook.fresco:webpsupport:1.3.0'</span>
<span class="token comment" spellcheck="true"> // For WebP support, without animations
</span> compile <span class="token string">'com.facebook.fresco:webpsupport:1.3.0'</span>
<span class="token punctuation">}</span></div><p>Also, if you use GIF with ProGuard, you will need to add this rule in <code>proguard-rules.pro</code> :</p><div class="prism language-javascript"><span class="token operator">-</span>keep <span class="token keyword">class</span> <span class="token class-name">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>animated<span class="token punctuation">.</span>factory<span class="token punctuation">.</span>AnimatedFactoryImpl</span> <span class="token punctuation">{</span>
<span class="token keyword">public</span> <span class="token function">AnimatedFactoryImpl</span><span class="token punctuation">(</span>com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>bitmaps<span class="token punctuation">.</span>PlatformBitmapFactory<span class="token punctuation">,</span> com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>imagepipeline<span class="token punctuation">.</span>core<span class="token punctuation">.</span>ExecutorSupplier<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/image.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="blurradius"></a>blurRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/image.html#blurradius">#</a></h4><div><p>blurRadius: the blur radius of the blur filter added to the image</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onerror">#</a></h4><div><p>Invoked on load error with <code>{nativeEvent: {error}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with
<code>{nativeEvent: {layout: {x, y, width, height}}}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onload">#</a></h4><div><p>Invoked when load completes successfully.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onloadstart">#</a></h4><div><p>Invoked on load start.</p><p>e.g., <code>onLoadStart={(e) =&gt; this.setState({loading: true})}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode?: <span class="propType">enum('cover', 'contain', 'stretch', 'repeat', 'center')</span> <a class="hash-link" href="docs/image.html#resizemode">#</a></h4><div><p>Determines how to resize the image when the frame doesn't match the raw
image dimensions.</p><ul><li><p><code>cover</code>: 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).</p></li><li><p><code>contain</code>: 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).</p></li><li><p><code>stretch</code>: Scale width and height independently, This may change the
aspect ratio of the src.</p></li><li><p><code>repeat</code>: Repeat the image to cover the frame of the view. The
image will keep it's size and aspect ratio. (iOS only)</p></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source?: <span class="propType">ImageSourcePropType</span> <a class="hash-link" href="docs/image.html#source">#</a></h4><div><p>The image source (either a remote URL or a local file resource).</p><p>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 <code>uri</code> to display based on the
measured size of the image container. A <code>cache</code> property can be added to
control how networked request interacts with the local cache.</p><p>The currently supported formats are <code>png</code>, <code>jpg</code>, <code>jpeg</code>, <code>bmp</code>, <code>gif</code>,
<code>webp</code> (Android only), <code>psd</code> (iOS only).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/image.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">overflow <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">resizeMode <span class="propType">Object.keys(ImageResizeMode)</span> </h6></div><div class="prop"><h6 class="propTitle">tintColor <span class="propType"><a href="docs/colors.html">color</a></span> <div><p>Changes the color of all the non-transparent pixels to the tintColor.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>overlayColor <span class="propType">string</span> <div><p>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</p><p>A typical way to use this prop is with images displayed on a solid
background and setting the <code>overlayColor</code> to the same color
as the background.</p><p>For details of how this works under the hood, see
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></h6></div></div><div><blockquote><p><code>ImageResizeMode</code> is an <code>Enum</code> for different image resizing modes, set via the
<code>resizeMode</code> style property on <code>Image</code> components. The values are <code>contain</code>, <code>cover</code>,
<code>stretch</code>, <code>center</code>, <code>repeat</code>.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/image.html#testid">#</a></h4><div><p>A unique identifier for this element to be used in UI Automation
testing scripts.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemethod"></a><span class="platform">android</span>resizeMethod?: <span class="propType">enum('auto', 'resize', 'scale')</span> <a class="hash-link" href="docs/image.html#resizemethod">#</a></h4><div><p>The mechanism that should be used to resize the image when the image's dimensions
differ from the image view's dimensions. Defaults to <code>auto</code>.</p><ul><li><p><code>auto</code>: Use heuristics to pick between <code>resize</code> and <code>scale</code>.</p></li><li><p><code>resize</code>: A software operation which changes the encoded image in memory before it
gets decoded. This should be used instead of <code>scale</code> when the image is much larger
than the view.</p></li><li><p><code>scale</code>: The image gets drawn downscaled or upscaled. Compared to <code>resize</code>, <code>scale</code> 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.</p></li></ul><p>More details about <code>resize</code> and <code>scale</code> can be found at <a href="http://frescolib.org/docs/resizing-rotating.html">http://frescolib.org/docs/resizing-rotating.html</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a><span class="platform">ios</span>accessibilityLabel?: <span class="propType">node</span> <a class="hash-link" href="docs/image.html#accessibilitylabel">#</a></h4><div><p>The text that's read by the screen reader when the user interacts with
the image.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a><span class="platform">ios</span>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/image.html#accessible">#</a></h4><div><p>When true, indicates the image is an accessibility element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="capinsets"></a><span class="platform">ios</span>capInsets?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/image.html#capinsets">#</a></h4><div><p>When the image is resized, the corners of the size specified
by <code>capInsets</code> 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
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets" target="_blank">official Apple documentation</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultsource"></a><span class="platform">ios</span>defaultSource?: <span class="propType"><span><span><span>{<span><span><span>uri: string</span>, </span><span><span>width: number</span>, </span><span><span>height: number</span>, </span><span>scale: number</span></span>}</span>, </span>number</span></span> <a class="hash-link" href="docs/image.html#defaultsource">#</a></h4><div><p>A static image to display while loading the image source.</p><ul><li><code>uri</code> - 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 <code>require('./path/to/image.png')</code> function).</li><li><code>width</code>, <code>height</code> - can be specified if known at build time, in which case
these will be used to set the default <code>&lt;Image/&gt;</code> component dimensions.</li><li><code>scale</code> - 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.</li><li><code>number</code> - Opaque type returned by something like <code>require('./image.jpg')</code>.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpartialload"></a><span class="platform">ios</span>onPartialLoad?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onpartialload">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onprogress"></a><span class="platform">ios</span>onProgress?: <span class="propType">function</span> <a class="hash-link" href="docs/image.html#onprogress">#</a></h4><div><p>Invoked on download progress with <code>{nativeEvent: {loaded, total}}</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/image.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsize"></a><span class="methodType">static </span>getSize<span class="methodType">(uri: string, success: function, failure?: function): </span> <a class="hash-link" href="docs/image.html#getsize">#</a></h4><div><p>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.</p><p>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.</p><p>Does not work for static image resources.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>uri<br><br><div><span>string</span></div></td><td class="description"><div><p>The location of the image.</p></div></td></tr><tr><td>success<br><br><div><span>function</span></div></td><td class="description"><div><p>The function that will be called if the image was successfully found and width
and height retrieved.</p></div></td></tr><tr><td>[failure]<br><br><div><span>function</span></div></td><td class="description"><div><p>The function that will be called if there was an error, such as failing to
to retrieve the image.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="prefetch"></a><span class="methodType">static </span>prefetch<span class="methodType">(url: string): </span> <a class="hash-link" href="docs/image.html#prefetch">#</a></h4><div><p>Prefetches a remote image for later use by downloading it to the disk
cache</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>url<br><br><div><span>string</span></div></td><td class="description"><div><p>The remote location of the image.</p></div></td></tr></tbody></table></div></div></div></span></div>
docs/autogen_ImageEditor.md
-12
View File
@@ -1,12 +0,0 @@
---
id: imageeditor
title: ImageEditor
category: APIs
permalink: docs/imageeditor.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/imageeditor.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="cropimage"></a><span class="methodType">static </span>cropImage<span class="methodType">(uri, cropData, success, failure)</span> <a class="hash-link" href="docs/imageeditor.html#cropimage">#</a></h4><div><p>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.</p><p>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.</p></div></div></div></span></div>
docs/autogen_ImagePickerIOS.md
-7
View File
@@ -1,7 +0,0 @@
---
id: imagepickerios
title: ImagePickerIOS
category: APIs
permalink: docs/imagepickerios.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/imagepickerios.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="canrecordvideos"></a><span class="methodType">static </span>canRecordVideos<span class="methodType">(callback)</span> <a class="hash-link" href="docs/imagepickerios.html#canrecordvideos">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="canusecamera"></a><span class="methodType">static </span>canUseCamera<span class="methodType">(callback)</span> <a class="hash-link" href="docs/imagepickerios.html#canusecamera">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="opencameradialog"></a><span class="methodType">static </span>openCameraDialog<span class="methodType">(config, successCallback, cancelCallback)</span> <a class="hash-link" href="docs/imagepickerios.html#opencameradialog">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="openselectdialog"></a><span class="methodType">static </span>openSelectDialog<span class="methodType">(config, successCallback, cancelCallback)</span> <a class="hash-link" href="docs/imagepickerios.html#openselectdialog">#</a></h4></div></div></span></div>
docs/autogen_ImageStore.md
-25
View File
@@ -1,25 +0,0 @@
---
id: imagestore
title: ImageStore
category: APIs
permalink: docs/imagestore.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/imagestore.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="hasimagefortag"></a><span class="methodType">static </span>hasImageForTag<span class="methodType">(uri, callback)</span> <a class="hash-link" href="docs/imagestore.html#hasimagefortag">#</a></h4><div><p>Check if the ImageStore contains image data for the specified URI.
@platform ios</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeimagefortag"></a><span class="methodType">static </span>removeImageForTag<span class="methodType">(uri)</span> <a class="hash-link" href="docs/imagestore.html#removeimagefortag">#</a></h4><div><p>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 <code>removeImageForTag()</code> without first calling <code>hasImageForTag()</code>, it
will simply fail silently.
@platform ios</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addimagefrombase64"></a><span class="methodType">static </span>addImageFromBase64<span class="methodType">(base64ImageData, success, failure)</span> <a class="hash-link" href="docs/imagestore.html#addimagefrombase64">#</a></h4><div><p>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 <code>removeImageForTag()</code>.</p><p>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</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getbase64fortag"></a><span class="methodType">static </span>getBase64ForTag<span class="methodType">(uri, success, failure)</span> <a class="hash-link" href="docs/imagestore.html#getbase64fortag">#</a></h4><div><p>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.</p><p>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 <code>&lt;Image/&gt;</code> component; there is no need to retrieve the
base64 data.</p></div></div></div></span></div>
docs/autogen_ImageStylePropTypes.md
-15
View File
@@ -1,15 +0,0 @@
---
id: imagestyleproptypes
title: ImageStylePropTypes
category: APIs
permalink: docs/imagestyleproptypes.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/imagestyleproptypes.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="backfacevisibility"></a>backfaceVisibility?: <span class="propType">enum('visible', 'hidden')</span> <a class="hash-link" href="docs/imagestyleproptypes.html#backfacevisibility">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a>backgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/imagestyleproptypes.html#backgroundcolor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderbottomleftradius"></a>borderBottomLeftRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/imagestyleproptypes.html#borderbottomleftradius">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderbottomrightradius"></a>borderBottomRightRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/imagestyleproptypes.html#borderbottomrightradius">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bordercolor"></a>borderColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/imagestyleproptypes.html#bordercolor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderradius"></a>borderRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/imagestyleproptypes.html#borderradius">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bordertopleftradius"></a>borderTopLeftRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/imagestyleproptypes.html#bordertopleftradius">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bordertoprightradius"></a>borderTopRightRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/imagestyleproptypes.html#bordertoprightradius">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderwidth"></a>borderWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/imagestyleproptypes.html#borderwidth">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="opacity"></a>opacity?: <span class="propType">number</span> <a class="hash-link" href="docs/imagestyleproptypes.html#opacity">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflow"></a>overflow?: <span class="propType">enum('visible', 'hidden')</span> <a class="hash-link" href="docs/imagestyleproptypes.html#overflow">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="resizemode"></a>resizeMode?: <span class="propType">Object.keys(ImageResizeMode)</span> <a class="hash-link" href="docs/imagestyleproptypes.html#resizemode">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/imagestyleproptypes.html#tintcolor">#</a></h4><div><p>Changes the color of all the non-transparent pixels to the tintColor.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overlaycolor"></a><span class="platform">android</span>overlayColor?: <span class="propType">string</span> <a class="hash-link" href="docs/imagestyleproptypes.html#overlaycolor">#</a></h4><div><p>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</p><p>A typical way to use this prop is with images displayed on a solid
background and setting the <code>overlayColor</code> to the same color
as the background.</p><p>For details of how this works under the hood, see
<a href="http://frescolib.org/docs/rounded-corners-and-circles.html">http://frescolib.org/docs/rounded-corners-and-circles.html</a></p></div></div></div></div>
docs/autogen_InteractionManager.md
-32
View File
@@ -1,32 +0,0 @@
---
id: interactionmanager
title: InteractionManager
category: APIs
permalink: docs/interactionmanager.html
---
<div><div><p>InteractionManager allows long-running work to be scheduled after any
interactions/animations have completed. In particular, this allows JavaScript
animations to run smoothly.</p><p>Applications can schedule tasks to run after interactions with the following:</p><div class="prism language-javascript">InteractionManager<span class="token punctuation">.</span><span class="token function">runAfterInteractions</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // ...long-running synchronous task...
</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Compare this to other scheduling alternatives:</p><ul><li>requestAnimationFrame(): for code that animates a view over time.</li><li>setImmediate/setTimeout(): run code later, note this may delay animations.</li><li>runAfterInteractions(): run code later, without delaying active animations.</li></ul><p>The touch handling system considers one or more active touches to be an
'interaction' and will delay <code>runAfterInteractions()</code> callbacks until all
touches have ended or been cancelled.</p><p>InteractionManager also allows applications to register animations by
creating an interaction 'handle' on animation start, and clearing it upon
completion:</p><div class="prism language-javascript"><span class="token keyword">var</span> handle <span class="token operator">=</span> InteractionManager<span class="token punctuation">.</span><span class="token function">createInteractionHandle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
// run animation... (`runAfterInteractions` tasks are queued)
</span><span class="token comment" spellcheck="true">// later, on animation completion:
</span>InteractionManager<span class="token punctuation">.</span><span class="token function">clearInteractionHandle</span><span class="token punctuation">(</span>handle<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
// queued tasks run if all handles were cleared</span></div><p><code>runAfterInteractions</code> takes either a plain callback function, or a
<code>PromiseTask</code> object with a <code>gen</code> method that returns a <code>Promise</code>. If a
<code>PromiseTask</code> is supplied, then it is fully resolved (including asynchronous
dependencies that also schedule more tasks via <code>runAfterInteractions</code>) before
starting on the next task that might have been queued up synchronously
earlier.</p><p>By default, queued tasks are executed together in a loop in one
<code>setImmediate</code> batch. If <code>setDeadline</code> 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.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/interactionmanager.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="runafterinteractions"></a><span class="methodType">static </span>runAfterInteractions<span class="methodType">(task)</span> <a class="hash-link" href="docs/interactionmanager.html#runafterinteractions">#</a></h4><div><p>Schedule a function to run after all interactions have completed. Returns a cancellable
"promise".</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="createinteractionhandle"></a><span class="methodType">static </span>createInteractionHandle<span class="methodType">()</span> <a class="hash-link" href="docs/interactionmanager.html#createinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has started.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clearinteractionhandle"></a><span class="methodType">static </span>clearInteractionHandle<span class="methodType">(handle)</span> <a class="hash-link" href="docs/interactionmanager.html#clearinteractionhandle">#</a></h4><div><p>Notify manager that an interaction has completed.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setdeadline"></a><span class="methodType">static </span>setDeadline<span class="methodType">(deadline)</span> <a class="hash-link" href="docs/interactionmanager.html#setdeadline">#</a></h4><div><p>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).</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/interactionmanager.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="events"></a>Events<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/interactionmanager.html#events">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="addlistener"></a>addListener<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/interactionmanager.html#addlistener">#</a></h4></div></div></span></div>
docs/autogen_Keyboard.md
-43
View File
@@ -1,43 +0,0 @@
---
id: keyboard
title: Keyboard
category: APIs
permalink: docs/keyboard.html
---
<div><div><p><code>Keyboard</code> module to control keyboard events.</p><h3><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="docs/keyboard.html#usage">#</a></h3><p>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.</p><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Keyboard<span class="token punctuation">,</span> TextInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
componentWillMount <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidShowListener <span class="token operator">=</span> Keyboard<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token string">'keyboardDidShow'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_keyboardDidShow<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidHideListener <span class="token operator">=</span> Keyboard<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token string">'keyboardDidHide'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_keyboardDidHide<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
componentWillUnmount <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidShowListener<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>keyboardDidHideListener<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
_keyboardDidShow <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Keyboard Shown'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
_keyboardDidHide <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Keyboard Hidden'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TextInput
onSubmitEditing<span class="token operator">=</span><span class="token punctuation">{</span>Keyboard<span class="token punctuation">.</span>dismiss<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/keyboard.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addlistener"></a><span class="methodType">static </span>addListener<span class="methodType">(eventName, callback)</span> <a class="hash-link" href="docs/keyboard.html#addlistener">#</a></h4><div><p>The <code>addListener</code> function connects a JavaScript function to an identified native
keyboard notification event.</p><p>This function then returns the reference to the listener.</p><p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for. This
can be any of the following:</p><ul><li><code>keyboardWillShow</code></li><li><code>keyboardDidShow</code></li><li><code>keyboardWillHide</code></li><li><code>keyboardDidHide</code></li><li><code>keyboardWillChangeFrame</code></li><li><code>keyboardDidChangeFrame</code></li></ul><p>Note that if you set <code>android:windowSoftInputMode</code> to <code>adjustResize</code> or <code>adjustNothing</code>,
only <code>keyboardDidShow</code> and <code>keyboardDidHide</code> events will be available on Android.
<code>keyboardWillShow</code> as well as <code>keyboardWillHide</code> are generally not available on Android
since there is no native corresponding event.</p><p>@param {function} callback function to be called when the event fires.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removelistener"></a><span class="methodType">static </span>removeListener<span class="methodType">(eventName, callback)</span> <a class="hash-link" href="docs/keyboard.html#removelistener">#</a></h4><div><p>Removes a specific listener.</p><p>@param {string} eventName The <code>nativeEvent</code> is the string that identifies the event you're listening for.
@param {function} callback function to be called when the event fires.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removealllisteners"></a><span class="methodType">static </span>removeAllListeners<span class="methodType">(eventName)</span> <a class="hash-link" href="docs/keyboard.html#removealllisteners">#</a></h4><div><p>Removes all listeners for a specific event type.</p><p>@param {string} eventType The native event string listeners are watching which will be removed.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="dismiss"></a><span class="methodType">static </span>dismiss<span class="methodType">()</span> <a class="hash-link" href="docs/keyboard.html#dismiss">#</a></h4><div><p>Dismisses the active keyboard and removes focus.</p></div></div></div></span></div>
docs/autogen_KeyboardAvoidingView.md
-9
View File
@@ -1,9 +0,0 @@
---
id: keyboardavoidingview
title: KeyboardAvoidingView
category: Components
permalink: docs/keyboardavoidingview.html
---
<div><div><p>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.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/keyboardavoidingview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/keyboardavoidingview.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="behavior"></a>behavior?: <span class="propType">enum('height', 'position', 'padding')</span> <a class="hash-link" href="docs/keyboardavoidingview.html#behavior">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/keyboardavoidingview.html#contentcontainerstyle">#</a></h4><div><p>The style of the content container(View) when behavior is 'position'.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardverticaloffset"></a>keyboardVerticalOffset: <span class="propType">number</span> <a class="hash-link" href="docs/keyboardavoidingview.html#keyboardverticaloffset">#</a></h4><div><p>This is the distance between the top of the user screen and the react native view,
may be non-zero in some use cases.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/keyboardavoidingview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="relativekeyboardheight"></a>relativeKeyboardHeight<span class="methodType">(keyboardFrame: object): </span> <a class="hash-link" href="docs/keyboardavoidingview.html#relativekeyboardheight">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="onkeyboardchange"></a>onKeyboardChange<span class="methodType">(event: object)</span> <a class="hash-link" href="docs/keyboardavoidingview.html#onkeyboardchange">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="onlayout"></a>onLayout<span class="methodType">(event: ViewLayoutEvent)</span> <a class="hash-link" href="docs/keyboardavoidingview.html#onlayout">#</a></h4></div></div></span></div>
docs/autogen_Layout Props.md
-134
View File
@@ -1,134 +0,0 @@
---
id: layout-props
title: Layout Props
category: APIs
permalink: docs/layout-props.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/layout-props.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="aligncontent"></a>alignContent?: <span class="propType">enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')</span> <a class="hash-link" href="docs/layout-props.html#aligncontent">#</a></h4><div><p><code>alignContent</code> controls how rows align in the cross direction,
overriding the <code>alignContent</code> of the parent.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">https://developer.mozilla.org/en-US/docs/Web/CSS/align-content</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alignitems"></a>alignItems?: <span class="propType">enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')</span> <a class="hash-link" href="docs/layout-props.html#alignitems">#</a></h4><div><p><code>alignItems</code> aligns children in the cross direction.
For example, if children are flowing vertically, <code>alignItems</code>
controls how they align horizontally.
It works like <code>align-items</code> in CSS (default: stretch).
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">https://developer.mozilla.org/en-US/docs/Web/CSS/align-items</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alignself"></a>alignSelf?: <span class="propType">enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')</span> <a class="hash-link" href="docs/layout-props.html#alignself">#</a></h4><div><p><code>alignSelf</code> controls how a child aligns in the cross direction,
overriding the <code>alignItems</code> of the parent. It works like <code>align-self</code>
in CSS (default: auto).
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">https://developer.mozilla.org/en-US/docs/Web/CSS/align-self</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="aspectratio"></a>aspectRatio?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#aspectratio">#</a></h4><div><p>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.</p><ul><li>On a node with a set width/height aspect ratio control the size of the unset dimension</li><li>On a node with a set flex basis aspect ratio controls the size of the node in the cross axis
if unset</li><li>On a node with a measure function aspect ratio works as though the measure function measures
the flex basis</li><li>On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis
if unset</li><li>Aspect ratio takes min/max dimensions into account</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderbottomwidth"></a>borderBottomWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#borderbottomwidth">#</a></h4><div><p><code>borderBottomWidth</code> works like <code>border-bottom-width</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderleftwidth"></a>borderLeftWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#borderleftwidth">#</a></h4><div><p><code>borderLeftWidth</code> works like <code>border-left-width</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderrightwidth"></a>borderRightWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#borderrightwidth">#</a></h4><div><p><code>borderRightWidth</code> works like <code>border-right-width</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bordertopwidth"></a>borderTopWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#bordertopwidth">#</a></h4><div><p><code>borderTopWidth</code> works like <code>border-top-width</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="borderwidth"></a>borderWidth?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#borderwidth">#</a></h4><div><p><code>borderWidth</code> works like <code>border-width</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width">https://developer.mozilla.org/en-US/docs/Web/CSS/border-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bottom"></a>bottom?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#bottom">#</a></h4><div><p><code>bottom</code> is the number of logical pixels to offset the bottom edge of
this component.</p><p> It works similarly to <code>bottom</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">https://developer.mozilla.org/en-US/docs/Web/CSS/bottom</a>
for more details of how <code>bottom</code> affects layout.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="display"></a>display?: <span class="propType">enum('none', 'flex')</span> <a class="hash-link" href="docs/layout-props.html#display">#</a></h4><div><p><code>display</code> sets the display type of this component.</p><p> It works similarly to <code>display</code> in CSS, but only support 'flex' and 'none'.
'flex' is the default.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flex"></a>flex?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#flex">#</a></h4><div><p>In React Native <code>flex</code> does not work the same way that it does in CSS.
<code>flex</code> is a number rather than a string, and it works
according to the <code>Yoga</code> library
at <a href="https://github.com/facebook/yoga">https://github.com/facebook/yoga</a></p><p> When <code>flex</code> is a positive number, it makes the component flexible
and it will be sized proportional to its flex value. So a
component with <code>flex</code> set to 2 will take twice the space as a
component with <code>flex</code> set to 1.</p><p> When <code>flex</code> is 0, the component is sized according to <code>width</code>
and <code>height</code> and it is inflexible.</p><p> When <code>flex</code> is -1, the component is normally sized according
<code>width</code> and <code>height</code>. However, if there's not enough space,
the component will shrink to its <code>minWidth</code> and <code>minHeight</code>.</p><p>flexGrow, flexShrink, and flexBasis work the same as in CSS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexbasis"></a>flexBasis?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#flexbasis">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexdirection"></a>flexDirection?: <span class="propType">enum('row', 'row-reverse', 'column', 'column-reverse')</span> <a class="hash-link" href="docs/layout-props.html#flexdirection">#</a></h4><div><p><code>flexDirection</code> controls which directions children of a container go.
<code>row</code> goes left to right, <code>column</code> goes top to bottom, and you may
be able to guess what the other two do. It works like <code>flex-direction</code>
in CSS, except the default is <code>column</code>.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexgrow"></a>flexGrow?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#flexgrow">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexshrink"></a>flexShrink?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#flexshrink">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flexwrap"></a>flexWrap?: <span class="propType">enum('wrap', 'nowrap')</span> <a class="hash-link" href="docs/layout-props.html#flexwrap">#</a></h4><div><p><code>flexWrap</code> controls whether children can wrap around after they
hit the end of a flex container.
It works like <code>flex-wrap</code> in CSS (default: nowrap).
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="height"></a>height?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#height">#</a></h4><div><p><code>height</code> sets the height of this component.</p><p> It works similarly to <code>height</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">https://developer.mozilla.org/en-US/docs/Web/CSS/height</a> for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="justifycontent"></a>justifyContent?: <span class="propType">enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')</span> <a class="hash-link" href="docs/layout-props.html#justifycontent">#</a></h4><div><p><code>justifyContent</code> aligns children in the main direction.
For example, if children are flowing vertically, <code>justifyContent</code>
controls how they align vertically.
It works like <code>justify-content</code> in CSS (default: flex-start).
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="left"></a>left?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#left">#</a></h4><div><p><code>left</code> is the number of logical pixels to offset the left edge of
this component.</p><p> It works similarly to <code>left</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">https://developer.mozilla.org/en-US/docs/Web/CSS/left</a>
for more details of how <code>left</code> affects layout.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="margin"></a>margin?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#margin">#</a></h4><div><p>Setting <code>margin</code> has the same effect as setting each of
<code>marginTop</code>, <code>marginLeft</code>, <code>marginBottom</code>, and <code>marginRight</code>.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">https://developer.mozilla.org/en-US/docs/Web/CSS/margin</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginbottom"></a>marginBottom?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#marginbottom">#</a></h4><div><p><code>marginBottom</code> works like <code>margin-bottom</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginhorizontal"></a>marginHorizontal?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#marginhorizontal">#</a></h4><div><p>Setting <code>marginHorizontal</code> has the same effect as setting
both <code>marginLeft</code> and <code>marginRight</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginleft"></a>marginLeft?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#marginleft">#</a></h4><div><p><code>marginLeft</code> works like <code>margin-left</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginright"></a>marginRight?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#marginright">#</a></h4><div><p><code>marginRight</code> works like <code>margin-right</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="margintop"></a>marginTop?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#margintop">#</a></h4><div><p><code>marginTop</code> works like <code>margin-top</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="marginvertical"></a>marginVertical?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#marginvertical">#</a></h4><div><p>Setting <code>marginVertical</code> has the same effect as setting both
<code>marginTop</code> and <code>marginBottom</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxheight"></a>maxHeight?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#maxheight">#</a></h4><div><p><code>maxHeight</code> is the maximum height for this component, in logical pixels.</p><p> It works similarly to <code>max-height</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">https://developer.mozilla.org/en-US/docs/Web/CSS/max-height</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxwidth"></a>maxWidth?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#maxwidth">#</a></h4><div><p><code>maxWidth</code> is the maximum width for this component, in logical pixels.</p><p> It works similarly to <code>max-width</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">https://developer.mozilla.org/en-US/docs/Web/CSS/max-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minheight"></a>minHeight?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#minheight">#</a></h4><div><p><code>minHeight</code> is the minimum height for this component, in logical pixels.</p><p> It works similarly to <code>min-height</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">https://developer.mozilla.org/en-US/docs/Web/CSS/min-height</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minwidth"></a>minWidth?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#minwidth">#</a></h4><div><p><code>minWidth</code> is the minimum width for this component, in logical pixels.</p><p> It works similarly to <code>min-width</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">https://developer.mozilla.org/en-US/docs/Web/CSS/min-width</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflow"></a>overflow?: <span class="propType">enum('visible', 'hidden', 'scroll')</span> <a class="hash-link" href="docs/layout-props.html#overflow">#</a></h4><div><p><code>overflow</code> controls how a children are measured and displayed.
<code>overflow: hidden</code> causes views to be clipped while <code>overflow: scroll</code>
causes views to be measured independently of their parents main axis.
It works like <code>overflow</code> in CSS (default: visible).
See <a href="https://developer.mozilla.org/en/docs/Web/CSS/overflow">https://developer.mozilla.org/en/docs/Web/CSS/overflow</a>
for more details.
<code>overflow: visible</code> only works on iOS. On Android, all views will clip
their children.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="padding"></a>padding?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#padding">#</a></h4><div><p>Setting <code>padding</code> has the same effect as setting each of
<code>paddingTop</code>, <code>paddingBottom</code>, <code>paddingLeft</code>, and <code>paddingRight</code>.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">https://developer.mozilla.org/en-US/docs/Web/CSS/padding</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingbottom"></a>paddingBottom?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#paddingbottom">#</a></h4><div><p><code>paddingBottom</code> works like <code>padding-bottom</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddinghorizontal"></a>paddingHorizontal?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#paddinghorizontal">#</a></h4><div><p>Setting <code>paddingHorizontal</code> is like setting both of
<code>paddingLeft</code> and <code>paddingRight</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingleft"></a>paddingLeft?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#paddingleft">#</a></h4><div><p><code>paddingLeft</code> works like <code>padding-left</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingright"></a>paddingRight?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#paddingright">#</a></h4><div><p><code>paddingRight</code> works like <code>padding-right</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingtop"></a>paddingTop?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#paddingtop">#</a></h4><div><p><code>paddingTop</code> works like <code>padding-top</code> in CSS.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top">https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top</a>
for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="paddingvertical"></a>paddingVertical?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#paddingvertical">#</a></h4><div><p>Setting <code>paddingVertical</code> is like setting both of
<code>paddingTop</code> and <code>paddingBottom</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="position"></a>position?: <span class="propType">enum('absolute', 'relative')</span> <a class="hash-link" href="docs/layout-props.html#position">#</a></h4><div><p><code>position</code> in React Native is similar to regular CSS, but
everything is set to <code>relative</code> by default, so <code>absolute</code>
positioning is always just relative to the parent.</p><p> If you want to position a child using specific numbers of logical
pixels relative to its parent, set the child to have <code>absolute</code>
position.</p><p> 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.</p><p> See <a href="https://github.com/facebook/yoga">https://github.com/facebook/yoga</a>
for more details on how <code>position</code> differs between React Native
and CSS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="right"></a>right?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#right">#</a></h4><div><p><code>right</code> is the number of logical pixels to offset the right edge of
this component.</p><p> It works similarly to <code>right</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right">https://developer.mozilla.org/en-US/docs/Web/CSS/right</a>
for more details of how <code>right</code> affects layout.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="top"></a>top?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#top">#</a></h4><div><p><code>top</code> is the number of logical pixels to offset the top edge of
this component.</p><p> It works similarly to <code>top</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.</p><p> See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">https://developer.mozilla.org/en-US/docs/Web/CSS/top</a>
for more details of how <code>top</code> affects layout.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="width"></a>width?: <span class="propType"><span><span>number, </span>string</span></span> <a class="hash-link" href="docs/layout-props.html#width">#</a></h4><div><p><code>width</code> sets the width of this component.</p><p> It works similarly to <code>width</code> in CSS, but in React Native you
must use points or percentages. Ems and other units are not supported.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">https://developer.mozilla.org/en-US/docs/Web/CSS/width</a> for more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zindex"></a>zIndex?: <span class="propType">number</span> <a class="hash-link" href="docs/layout-props.html#zindex">#</a></h4><div><p><code>zIndex</code> controls which components display on top of others.
Normally, you don't use <code>zIndex</code>. Components render according to
their order in the document tree, so later components draw over
earlier ones. <code>zIndex</code> may be useful if you have animations or custom
modal interfaces where you don't want this behavior.</p><p> It works like the CSS <code>z-index</code> property - components with a larger
<code>zIndex</code> will render on top. Think of the z-direction like it's
pointing from the phone into your eyeball.
See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">https://developer.mozilla.org/en-US/docs/Web/CSS/z-index</a> for
more details.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="direction"></a><span class="platform">ios</span>direction?: <span class="propType">enum('inherit', 'ltr', 'rtl')</span> <a class="hash-link" href="docs/layout-props.html#direction">#</a></h4><div><p><code>direction</code> specifies the directional flow of the user interface.
The default is <code>inherit</code>, except for root node which will have
value based on the current locale.
See <a href="https://facebook.github.io/yoga/docs/rtl/">https://facebook.github.io/yoga/docs/rtl/</a>
for more details.</p></div></div></div></div>
docs/autogen_LayoutAnimation.md
-11
View File
@@ -1,11 +0,0 @@
---
id: layoutanimation
title: LayoutAnimation
category: APIs
permalink: docs/layoutanimation.html
---
<div><div><p>Automatically animates views to their new positions when the
next layout happens.</p><p>A common way to use this API is to call it before calling <code>setState</code>.</p><p>Note that in order to get this to work on <strong>Android</strong> you need to set the following flags via <code>UIManager</code>:</p><div class="prism language-javascript">UIManager<span class="token punctuation">.</span>setLayoutAnimationEnabledExperimental <span class="token operator">&amp;&amp;</span> UIManager<span class="token punctuation">.</span><span class="token function">setLayoutAnimationEnabledExperimental</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/layoutanimation.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="configurenext"></a><span class="methodType">static </span>configureNext<span class="methodType">(config, onAnimationDidEnd?)</span> <a class="hash-link" href="docs/layoutanimation.html#configurenext">#</a></h4><div><p>Schedules an animation to happen on the next layout.</p><p>@param config Specifies animation properties:</p><ul><li><code>duration</code> in milliseconds</li><li><code>create</code>, config for animating in new views (see <code>Anim</code> type)</li><li><code>update</code>, config for animating views that have been updated
(see <code>Anim</code> type)</li></ul><p>@param onAnimationDidEnd Called when the animation finished.
Only supported on iOS.
@param onError Called on error. Only supported on iOS.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="create"></a><span class="methodType">static </span>create<span class="methodType">(duration, type, creationProp)</span> <a class="hash-link" href="docs/layoutanimation.html#create">#</a></h4><div><p>Helper for creating a config for <code>configureNext</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="checkconfig"></a><span class="methodType">static </span>checkConfig<span class="methodType">(config, location, name)</span> <a class="hash-link" href="docs/layoutanimation.html#checkconfig">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="types"></a>Types<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#types">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="properties"></a>Properties<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#properties">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presets"></a>Presets<span class="propType">: ObjectExpression</span> <a class="hash-link" href="docs/layoutanimation.html#presets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="easeineaseout"></a>easeInEaseOut<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#easeineaseout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="linear"></a>linear<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#linear">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spring"></a>spring<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/layoutanimation.html#spring">#</a></h4></div></div></span></div>
docs/autogen_Linking.md
-81
View File
@@ -1,81 +0,0 @@
---
id: linking
title: Linking
category: APIs
permalink: docs/linking.html
---
<div><div><span><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>
</span><p><code>Linking</code> gives you a general interface to interact with both incoming
and outgoing app links.</p><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="docs/linking.html#basic-usage">#</a></h3><h4><a class="anchor" name="handling-deep-links"></a>Handling deep links <a class="hash-link" href="docs/linking.html#handling-deep-links">#</a></h4><p>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</p><div class="prism language-javascript"><span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
Linking<span class="token punctuation">.</span><span class="token function">getInitialURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Initial url is: '</span> <span class="token operator">+</span> url<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'An error occurred'</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>NOTE: For instructions on how to add support for deep linking on Android,
refer to <a href="http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters" target="_blank">Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links</a>.</p><p>If you wish to receive the intent in an existing instance of MainActivity,
you may set the <code>launchMode</code> of MainActivity to <code>singleTask</code> in
<code>AndroidManifest.xml</code>. See <a href="http://developer.android.com/guide/topics/manifest/activity-element.html" target="_blank"><code>&lt;activity&gt;</code></a>
documentation for more information.</p><div class="prism language-javascript"><span class="token operator">&lt;</span>activity
android<span class="token punctuation">:</span>name<span class="token operator">=</span><span class="token string">".MainActivity"</span>
android<span class="token punctuation">:</span>launchMode<span class="token operator">=</span><span class="token string">"singleTask"</span><span class="token operator">&gt;</span></div><p>NOTE: On iOS, you'll need to link <code>RCTLinking</code> to your project by following
the steps described <a href="docs/linking-libraries-ios.html#manual-linking" target="_blank">here</a>.
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 <code>*AppDelegate.m</code>:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// iOS 9.x or newer
</span>#<span class="token keyword">import</span> <span class="token operator">&lt;</span>React<span class="token operator">/</span>RCTLinkingManager<span class="token punctuation">.</span>h<span class="token operator">&gt;</span>
<span class="token operator">-</span> <span class="token punctuation">(</span>BOOL<span class="token punctuation">)</span>application<span class="token punctuation">:</span><span class="token punctuation">(</span>UIApplication <span class="token operator">*</span><span class="token punctuation">)</span>application
openURL<span class="token punctuation">:</span><span class="token punctuation">(</span>NSURL <span class="token operator">*</span><span class="token punctuation">)</span>url
options<span class="token punctuation">:</span><span class="token punctuation">(</span>NSDictionary<span class="token operator">&lt;</span>UIApplicationOpenURLOptionsKey<span class="token punctuation">,</span>id<span class="token operator">&gt;</span> <span class="token operator">*</span><span class="token punctuation">)</span>options
<span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>RCTLinkingManager application<span class="token punctuation">:</span>app openURL<span class="token punctuation">:</span>url options<span class="token punctuation">:</span>options<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>If you're targeting iOS 8.x or older, you can use the following code instead:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// iOS 8.x or older
</span>#<span class="token keyword">import</span> <span class="token operator">&lt;</span>React<span class="token operator">/</span>RCTLinkingManager<span class="token punctuation">.</span>h<span class="token operator">&gt;</span>
<span class="token operator">-</span> <span class="token punctuation">(</span>BOOL<span class="token punctuation">)</span>application<span class="token punctuation">:</span><span class="token punctuation">(</span>UIApplication <span class="token operator">*</span><span class="token punctuation">)</span>application openURL<span class="token punctuation">:</span><span class="token punctuation">(</span>NSURL <span class="token operator">*</span><span class="token punctuation">)</span>url
sourceApplication<span class="token punctuation">:</span><span class="token punctuation">(</span>NSString <span class="token operator">*</span><span class="token punctuation">)</span>sourceApplication annotation<span class="token punctuation">:</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span>annotation
<span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>RCTLinkingManager application<span class="token punctuation">:</span>application openURL<span class="token punctuation">:</span>url
sourceApplication<span class="token punctuation">:</span>sourceApplication annotation<span class="token punctuation">:</span>annotation<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>// If your app is using <a href="https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html" target="_blank">Universal Links</a>,
you'll need to add the following code as well:</p><div class="prism language-javascript"><span class="token operator">-</span> <span class="token punctuation">(</span>BOOL<span class="token punctuation">)</span>application<span class="token punctuation">:</span><span class="token punctuation">(</span>UIApplication <span class="token operator">*</span><span class="token punctuation">)</span>application continueUserActivity<span class="token punctuation">:</span><span class="token punctuation">(</span>NSUserActivity <span class="token operator">*</span><span class="token punctuation">)</span>userActivity
restorationHandler<span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token keyword">void</span> <span class="token punctuation">(</span><span class="token operator">^</span><span class="token punctuation">)</span><span class="token punctuation">(</span>NSArray <span class="token operator">*</span> _Nullable<span class="token punctuation">)</span><span class="token punctuation">)</span>restorationHandler
<span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>RCTLinkingManager application<span class="token punctuation">:</span>application
continueUserActivity<span class="token punctuation">:</span>userActivity
restorationHandler<span class="token punctuation">:</span>restorationHandler<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>And then on your React component you'll be able to listen to the events on
<code>Linking</code> as follows</p><div class="prism language-javascript"><span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
Linking<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleOpenURL<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
Linking<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_handleOpenURL<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">_handleOpenURL</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><h4><a class="anchor" name="opening-external-links"></a>Opening external links <a class="hash-link" href="docs/linking.html#opening-external-links">#</a></h4><p>To start the corresponding activity for a link (web URL, email, contact etc.), call</p><div class="prism language-javascript">Linking<span class="token punctuation">.</span><span class="token function">openURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'An error occurred'</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>If you want to check if any installed app can handle a given URL beforehand you can call</p><div class="prism language-javascript">Linking<span class="token punctuation">.</span><span class="token function">canOpenURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>supported <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>supported<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Can\'t handle url: '</span> <span class="token operator">+</span> url<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> Linking<span class="token punctuation">.</span><span class="token function">openURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'An error occurred'</span><span class="token punctuation">,</span> err<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/linking.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">()</span> <a class="hash-link" href="docs/linking.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a>addEventListener<span class="methodType">(type, handler)</span> <a class="hash-link" href="docs/linking.html#addeventlistener">#</a></h4><div><p>Add a handler to Linking changes by listening to the <code>url</code> event type
and providing the handler</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a>removeEventListener<span class="methodType">(type, handler)</span> <a class="hash-link" href="docs/linking.html#removeeventlistener">#</a></h4><div><p>Remove a handler by passing the <code>url</code> event type and the handler</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="openurl"></a>openURL<span class="methodType">(url)</span> <a class="hash-link" href="docs/linking.html#openurl">#</a></h4><div><p>Try to open the given <code>url</code> with any of the installed apps.</p><p>You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android
or "<a href="http://maps.apple.com/?ll=37.484847,-122.148386">http://maps.apple.com/?ll=37.484847,-122.148386</a>" on iOS), a contact,
or any other URL that can be opened with the installed apps.</p><p>The method returns a <code>Promise</code> 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.</p><p>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.</p><p>NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="canopenurl"></a>canOpenURL<span class="methodType">(url)</span> <a class="hash-link" href="docs/linking.html#canopenurl">#</a></h4><div><p>Determine whether or not an installed app can handle a given URL.</p><p>NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!</p><p>NOTE: As of iOS 9, your app needs to provide the <code>LSApplicationQueriesSchemes</code> key
inside <code>Info.plist</code> or canOpenURL will always return false.</p><p>@param URL the URL to open</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getinitialurl"></a>getInitialURL<span class="methodType">()</span> <a class="hash-link" href="docs/linking.html#getinitialurl">#</a></h4><div><p>If the app launch was triggered by an app link,
it will give the link url, otherwise it will give <code>null</code></p><p>NOTE: To support deep linking on Android, refer <a href="http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents">http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents</a></p></div></div></div></span></div>
docs/autogen_ListView.md
-87
View File
@@ -1,87 +0,0 @@
---
id: listview
title: ListView
category: Components
permalink: docs/listview.html
---
<div><div><p>DEPRECATED - use one of the new list components, such as <a href="docs/flatlist.html" target="_blank"><code>FlatList</code></a>
or <a href="docs/sectionlist.html" target="_blank"><code>SectionList</code></a> for bounded memory use, fewer bugs,
better performance, an easier to use API, and more features. Check out this
<a href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html" target="_blank">blog post</a>
for more details.</p><p>ListView - A core component designed for efficient display of vertically
scrolling lists of changing data. The minimal API is to create a
<a href="docs/listviewdatasource.html" target="_blank"><code>ListView.DataSource</code></a>, populate it with a simple
array of data blobs, and instantiate a <code>ListView</code> component with that data
source and a <code>renderRow</code> callback which takes a blob from the data array and
returns a renderable component.</p><p>Minimal example:</p><div class="prism language-javascript"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> ds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ListView<span class="token punctuation">.</span>DataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>rowHasChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>r1<span class="token punctuation">,</span> r2<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> r1 <span class="token operator">!==</span> r2<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
dataSource<span class="token punctuation">:</span> ds<span class="token punctuation">.</span><span class="token function">cloneWithRows</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'row 1'</span><span class="token punctuation">,</span> <span class="token string">'row 2'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>ListView
dataSource<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>dataSource<span class="token punctuation">}</span>
renderRow<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>rowData<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>rowData<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>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 (<code>onEndReached</code>) and on the set of rows that are visible
in the device viewport change (<code>onChangeVisibleRows</code>), and several
performance optimizations.</p><p>There are a few performance operations designed to make ListView scroll
smoothly while dynamically loading potentially very large (or conceptually
infinite) data sets:</p><ul><li><p>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.</p></li><li><p>Rate-limited row rendering - By default, only one row is rendered per
event-loop (customizable with the <code>pageSize</code> prop). This breaks up the
work into smaller chunks to reduce the chance of dropping frames while
rendering rows.</p></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/listview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollview"></a><a href="docs/scrollview.html#props">ScrollView props...</a> <a class="hash-link" href="docs/listview.html#scrollview">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datasource"></a>dataSource: <span class="propType">ListViewDataSource</span> <a class="hash-link" href="docs/listview.html#datasource">#</a></h4><div><p>An instance of <a href="docs/listviewdatasource.html" target="_blank">ListView.DataSource</a> to use</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enableemptysections"></a>enableEmptySections?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#enableemptysections">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initiallistsize"></a>initialListSize: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#initiallistsize">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangevisiblerows"></a>onChangeVisibleRows?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#onchangevisiblerows">#</a></h4><div><p>(visibleRows, changedRows) =&gt; void</p><p>Called when the set of visible rows changes. <code>visibleRows</code> maps
{ sectionID: { rowID: true }} for all the visible rows, and
<code>changedRows</code> 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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#onendreached">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#onendreachedthreshold">#</a></h4><div><p>Threshold in pixels (virtual, not physical) for calling onEndReached.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagesize"></a>pageSize: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#pagesize">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#removeclippedsubviews">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderfooter"></a>renderFooter?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderfooter">#</a></h4><div><p>() =&gt; renderable</p><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderheader"></a>renderHeader?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderheader">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderrow"></a>renderRow: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderrow">#</a></h4><div><p>(rowData, sectionID, rowID, highlightRow) =&gt; renderable</p><p>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 <code>highlightRow(sectionID, rowID)</code>. 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).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderscrollcomponent">#</a></h4><div><p>(props) =&gt; renderable</p><p>A function that returns the scrollable component in which the list rows
are rendered. Defaults to returning a ScrollView with the given props.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#rendersectionheader">#</a></h4><div><p>(sectionData, sectionID) =&gt; renderable</p><p>If provided, a header is rendered for this section.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderseparator"></a>renderSeparator?: <span class="propType">function</span> <a class="hash-link" href="docs/listview.html#renderseparator">#</a></h4><div><p>(sectionID, rowID, adjacentRowHighlighted) =&gt; renderable</p><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollrenderaheaddistance"></a>scrollRenderAheadDistance: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#scrollrenderaheaddistance">#</a></h4><div><p>How early to start rendering rows before they come on screen, in
pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/listview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
top of the screen when scrolling. For example, passing
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
top of the scroll view. This property is not supported in conjunction
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#stickysectionheadersenabled">#</a></h4><div><p>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 <code>horizontal={true}</code>. Only enabled by
default on iOS because of typical platform standards.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/listview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getmetrics"></a>getMetrics<span class="methodType">()</span> <a class="hash-link" href="docs/listview.html#getmetrics">#</a></h4><div><p>Exports some data, e.g. for perf investigations or analytics.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(...args: Array)</span> <a class="hash-link" href="docs/listview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>See <code>ScrollView#scrollTo</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(options?: object)</span> <a class="hash-link" href="docs/listview.html#scrolltoend">#</a></h4><div><p>If this is a vertical ListView scrolls to the bottom.
If this is a horizontal ListView scrolls to the right.</p><p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling,
<code>scrollToEnd({animated: false})</code> for immediate scrolling.
If no options are passed, <code>animated</code> defaults to true.</p><p>See <code>ScrollView#scrollToEnd</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/listview.html#flashscrollindicators">#</a></h4><div><p>Displays the scroll indicators momentarily.</p></div></div></div></span></div>
docs/autogen_ListViewDataSource.md
-47
View File
@@ -1,47 +0,0 @@
---
id: listviewdatasource
title: ListViewDataSource
category: APIs
permalink: docs/listviewdatasource.html
---
<div><div><p>Provides efficient data processing and access to the
<code>ListView</code> component. A <code>ListViewDataSource</code> 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.</p><p>To update the data in the datasource, use <code>cloneWithRows</code> (or
<code>cloneWithRowsAndSections</code> 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.</p><p>In this example, a component receives data in chunks, handled by
<code>_onDataArrived</code>, which concats the new data onto the old data and updates the
data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>,
e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code>
understands the shape of the row data and knows how to efficiently compare
it.</p><div class="prism language-javascript">getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> ds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ListViewDataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>rowHasChanged<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_rowHasChanged<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>ds<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">_onDataArrived</span><span class="token punctuation">(</span>newData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_data<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>newData<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
ds<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>ds<span class="token punctuation">.</span><span class="token function">cloneWithRows</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>_data<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/listviewdatasource.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(params)</span> <a class="hash-link" href="docs/listviewdatasource.html#constructor">#</a></h4><div><p>You can provide custom extraction and <code>hasChanged</code> functions for section
headers and rows. If absent, data will be extracted with the
<code>defaultGetRowData</code> and <code>defaultGetSectionHeaderData</code> functions.</p><p>The default extractor expects data of one of the following forms:</p><div class="prism language-javascript"> <span class="token punctuation">{</span> sectionID_1<span class="token punctuation">:</span> <span class="token punctuation">{</span> rowID_1<span class="token punctuation">:</span> <span class="token operator">&lt;</span>rowData1<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">}</span></div><p> or</p><div class="prism language-javascript"> <span class="token punctuation">{</span> sectionID_1<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token operator">&lt;</span>rowData1<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">&lt;</span>rowData2<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">}</span></div><p> or</p><div class="prism language-javascript"> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token operator">&lt;</span>rowData1<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">&lt;</span>rowData2<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span> <span class="token punctuation">]</span></div><p>The constructor takes in a params argument that can contain any of the
following:</p><ul><li>getRowData(dataBlob, sectionID, rowID);</li><li>getSectionHeaderData(dataBlob, sectionID);</li><li>rowHasChanged(prevRowData, nextRowData);</li><li>sectionHeaderHasChanged(prevSectionData, nextSectionData);</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clonewithrows"></a>cloneWithRows<span class="methodType">(dataBlob, rowIdentities)</span> <a class="hash-link" href="docs/listviewdatasource.html#clonewithrows">#</a></h4><div><p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and
<code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At
construction an extractor to get the interesting information was defined
(or the default was used).</p><p>The <code>rowIdentities</code> 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.</p><p>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 <code>dataBlob</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clonewithrowsandsections"></a>cloneWithRowsAndSections<span class="methodType">(dataBlob, sectionIdentities, rowIdentities)</span> <a class="hash-link" href="docs/listviewdatasource.html#clonewithrowsandsections">#</a></h4><div><p>This performs the same function as the <code>cloneWithRows</code> function but here
you also specify what your <code>sectionIdentities</code> are. If you don't care
about sections you should safely be able to use <code>cloneWithRows</code>.</p><p><code>sectionIdentities</code> is an array of identifiers for sections.
ie. ['s1', 's2', ...]. If not provided, it's assumed that the
keys of dataBlob are the section identities.</p><p>Note: this returns a new object!</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowcount"></a>getRowCount<span class="methodType">()</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowcount">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowandsectioncount"></a>getRowAndSectionCount<span class="methodType">()</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowandsectioncount">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="rowshouldupdate"></a>rowShouldUpdate<span class="methodType">(sectionIndex, rowIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#rowshouldupdate">#</a></h4><div><p>Returns if the row is dirtied and needs to be rerendered</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowdata"></a>getRowData<span class="methodType">(sectionIndex, rowIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowdata">#</a></h4><div><p>Gets the data required to render the row.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowidforflatindex"></a>getRowIDForFlatIndex<span class="methodType">(index)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowidforflatindex">#</a></h4><div><p>Gets the rowID at index provided if the dataSource arrays were flattened,
or null of out of range indexes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionidforflatindex"></a>getSectionIDForFlatIndex<span class="methodType">(index)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionidforflatindex">#</a></h4><div><p>Gets the sectionID at index provided if the dataSource arrays were flattened,
or null for out of range indexes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionlengths"></a>getSectionLengths<span class="methodType">()</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionlengths">#</a></h4><div><p>Returns an array containing the number of rows in each section</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sectionheadershouldupdate"></a>sectionHeaderShouldUpdate<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#sectionheadershouldupdate">#</a></h4><div><p>Returns if the section header is dirtied and needs to be rerendered</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionheaderdata"></a>getSectionHeaderData<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionheaderdata">#</a></h4><div><p>Gets the data required to render the section header</p></div></div></div></span></div>
docs/autogen_MaskedViewIOS.md
-32
View File
@@ -1,32 +0,0 @@
---
id: maskedviewios
title: MaskedViewIOS
category: Components
permalink: docs/maskedviewios.html
---
<div><div><p>Renders the child view with a mask specified in the <code>maskElement</code> prop.</p><div class="prism language-javascript"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> MaskedView<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">MyMaskedView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>MaskedView
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
maskElement<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>maskContainerStyle<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>maskTextStyle<span class="token punctuation">}</span><span class="token operator">&gt;</span>
Basic Mask
<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>MaskedView<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>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".</p><p>The alpha channel of the view rendered by the <code>maskElement</code> 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.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/maskedviewios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/maskedviewios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="children"></a>children: <span class="propType">any</span> <a class="hash-link" href="docs/maskedviewios.html#children">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maskelement"></a>maskElement: <span class="propType">React.Element&lt;*&gt;</span> <a class="hash-link" href="docs/maskedviewios.html#maskelement">#</a></h4><div><p>Should be a React element to be rendered and applied as the
mask for the child element.</p></div></div></div></div>
docs/autogen_Modal.md
-57
View File
@@ -1,57 +0,0 @@
---
id: modal
title: Modal
category: Components
permalink: docs/modal.html
---
<div><div><p>The Modal component is a simple way to present content above an enclosing view.</p><p><em>Note: If you need more control over how to present modals over the rest of your app,
then consider using a top-level Navigator.</em></p><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Modal<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> TouchableHighlight<span class="token punctuation">,</span> View <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">ModalExample</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
modalVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token function">setModalVisible</span><span class="token punctuation">(</span>visible<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>modalVisible<span class="token punctuation">:</span> visible<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Modal
animationType<span class="token operator">=</span><span class="token punctuation">{</span><span class="token string">"slide"</span><span class="token punctuation">}</span>
transparent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
visible<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modalVisible<span class="token punctuation">}</span>
onRequestClose<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Modal has been closed."</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Hello World<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setModalVisible</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>modalVisible<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Hide Modal<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Modal<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setModalVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Show Modal<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/modal.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#animated">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="/react-native/img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>animationType</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="animationtype"></a>animationType?: <span class="propType">enum('none', 'slide', 'fade')</span> <a class="hash-link" href="docs/modal.html#animationtype">#</a></h4><div><p>The <code>animationType</code> prop controls how the modal animates.</p><ul><li><code>slide</code> slides in from the bottom</li><li><code>fade</code> fades into view</li><li><code>none</code> appears without an animation</li></ul><p>Default is set to <code>none</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshow"></a>onShow?: <span class="propType">function</span> <a class="hash-link" href="docs/modal.html#onshow">#</a></h4><div><p>The <code>onShow</code> prop allows passing a function that will be called once the modal has been shown.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transparent"></a>transparent?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#transparent">#</a></h4><div><p>The <code>transparent</code> prop determines whether your modal will fill the entire view. Setting this to <code>true</code> will render the modal over a transparent background.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="visible"></a>visible?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#visible">#</a></h4><div><p>The <code>visible</code> prop determines whether your modal is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hardwareaccelerated"></a><span class="platform">android</span>hardwareAccelerated?: <span class="propType">bool</span> <a class="hash-link" href="docs/modal.html#hardwareaccelerated">#</a></h4><div><p>The <code>hardwareAccelerated</code> prop controls whether to force hardware acceleration for the underlying window.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrequestclose"></a><span class="platform">android</span>onRequestClose?: <span class="propType">Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func</span> <a class="hash-link" href="docs/modal.html#onrequestclose">#</a></h4><div><p>The <code>onRequestClose</code> callback is called when the user taps the hardware back button.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onorientationchange"></a><span class="platform">ios</span>onOrientationChange?: <span class="propType">function</span> <a class="hash-link" href="docs/modal.html#onorientationchange">#</a></h4><div><p>The <code>onOrientationChange</code> 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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="presentationstyle"></a><span class="platform">ios</span>presentationStyle?: <span class="propType">enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')</span> <a class="hash-link" href="docs/modal.html#presentationstyle">#</a></h4><div><p>The <code>presentationStyle</code> prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones).
See <a href="https://developer.apple.com/reference/uikit/uimodalpresentationstyle">https://developer.apple.com/reference/uikit/uimodalpresentationstyle</a> for details.</p><ul><li><code>fullScreen</code> covers the screen completely</li><li><code>pageSheet</code> covers portrait-width view centered (only on larger devices)</li><li><code>formSheet</code> covers narrow-width view centered (only on larger devices)</li><li><code>overFullScreen</code> covers the screen completely, but allows transparency</li></ul><p>Default is set to <code>overFullScreen</code> or <code>fullScreen</code> depending on <code>transparent</code> property.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="supportedorientations"></a><span class="platform">ios</span>supportedOrientations?: <span class="propType"><span>[enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')]</span></span> <a class="hash-link" href="docs/modal.html#supportedorientations">#</a></h4><div><p>The <code>supportedOrientations</code> 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 <code>presentationStyle</code> of <code>pageSheet</code> or <code>formSheet</code>, this property will be ignored by iOS.</p></div></div></div></div>
docs/autogen_NavigatorIOS.md
-153
View File
@@ -1,153 +0,0 @@
---
id: navigatorios
title: NavigatorIOS
category: Components
permalink: docs/navigatorios.html
---
<div><div><p><code>NavigatorIOS</code> is a wrapper around
<a href="https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/" target="_blank"><code>UINavigationController</code></a>,
enabling you to implement a navigation stack. It works exactly the same as it
would on a native app using <code>UINavigationController</code>, providing the same
animations and behavior from UIKIt.</p><p>As the name implies, it is only available on iOS. Take a look at
<a href="https://reactnavigation.org/" target="_blank"><code>React Navigation</code></a> for a cross-platform
solution in JavaScript, or check out either of these components for native
solutions: <a href="http://airbnb.io/native-navigation/" target="_blank">native-navigation</a>,
<a href="https://github.com/wix/react-native-navigation" target="_blank">react-native-navigation</a>.</p><p>To set up the navigator, provide the <code>initialRoute</code> prop with a route
object. A route object is used to describe each scene that your app
navigates to. <code>initialRoute</code> represents the first route in your navigator.</p><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> PropTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> NavigatorIOS<span class="token punctuation">,</span> Text <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">NavigatorIOSApp</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>NavigatorIOS
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
component<span class="token punctuation">:</span> MyScene<span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'My Initial Scene'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">MyScene</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token keyword">static</span> propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
title<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
navigator<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
<span class="token punctuation">}</span>
_onForward <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">'Scene '</span> <span class="token operator">+</span> nextIndex<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Current Scene<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>title <span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onForward<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Tap me to load the next scene<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>In this code, the navigator renders the component specified in initialRoute,
which in this case is <code>MyScene</code>. This component will receive a <code>route</code> prop
and a <code>navigator</code> prop representing the navigator. The navigator's navigation
bar will render the title for the current scene, "My Initial Scene".</p><p>You can optionally pass in a <code>passProps</code> property to your <code>initialRoute</code>.
<code>NavigatorIOS</code> passes this in as props to the rendered component:</p><div class="prism language-javascript">initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
component<span class="token punctuation">:</span> MyScene<span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'My Initial Scene'</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> myProp<span class="token punctuation">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span></div><p>You can then access the props passed in via <code>{this.props.myProp}</code>.</p><h4><a class="anchor" name="handling-navigation"></a>Handling Navigation <a class="hash-link" href="docs/navigatorios.html#handling-navigation">#</a></h4><p>To trigger navigation functionality such as pushing or popping a view, you
have access to a <code>navigator</code> object. The object is passed in as a prop to any
component that is rendered by <code>NavigatorIOS</code>. You can then call the
relevant methods to perform the navigation action you need:</p><div class="prism language-javascript"><span class="token keyword">class</span> <span class="token class-name">MyView</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">_handleBackPress</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">_handleNextPress</span><span class="token punctuation">(</span>nextRoute<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>nextRoute<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> nextRoute <span class="token operator">=</span> <span class="token punctuation">{</span>
component<span class="token punctuation">:</span> MyView<span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'Bar That'</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> myProp<span class="token punctuation">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span><span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_handleNextPress</span><span class="token punctuation">(</span>nextRoute<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> alignSelf<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
See you on the other nav <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>myProp<span class="token punctuation">}</span><span class="token operator">!</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>You can also trigger navigator functionality from the <code>NavigatorIOS</code>
component:</p><div class="prism language-javascript"><span class="token keyword">class</span> <span class="token class-name">NavvyIOS</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">_handleNavigationRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">.</span>nav<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
component<span class="token punctuation">:</span> MyView<span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'Genius'</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> myProp<span class="token punctuation">:</span> <span class="token string">'genius'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>NavigatorIOS
ref<span class="token operator">=</span><span class="token string">'nav'</span>
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
component<span class="token punctuation">:</span> MyView<span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token string">'Foo This'</span><span class="token punctuation">,</span>
passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> myProp<span class="token punctuation">:</span> <span class="token string">'foo'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
rightButtonTitle<span class="token punctuation">:</span> <span class="token string">'Add'</span><span class="token punctuation">,</span>
onRightButtonPress<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_handleNavigationRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>The code above adds a <code>_handleNavigationRequest</code> private method that is
invoked from the <code>NavigatorIOS</code> component when the right navigation bar item
is pressed. To get access to the navigator functionality, a reference to it
is saved in the <code>ref</code> prop and later referenced to push a new scene into the
navigation stack.</p><h4><a class="anchor" name="navigation-bar-configuration"></a>Navigation Bar Configuration <a class="hash-link" href="docs/navigatorios.html#navigation-bar-configuration">#</a></h4><p>Props passed to <code>NavigatorIOS</code> 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 <code>NavigatorIOS</code> component.</p><div class="prism language-javascript"><span class="token function">_handleNavigationRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">.</span>nav<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> //...
</span> passProps<span class="token punctuation">:</span> <span class="token punctuation">{</span> myProp<span class="token punctuation">:</span> <span class="token string">'genius'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
barTintColor<span class="token punctuation">:</span> <span class="token string">'#996699'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>NavigatorIOS
<span class="token comment" spellcheck="true"> //...
</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
barTintColor<span class="token operator">=</span><span class="token string">'#ffffcc'</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p>In the example above the navigation bar color is changed when the new route
is pushed.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/navigatorios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="bartintcolor"></a>barTintColor?: <span class="propType">string</span> <a class="hash-link" href="docs/navigatorios.html#bartintcolor">#</a></h4><div><p>The default background color of the navigation bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialroute"></a>initialRoute: <span class="propType"><span>{<span><span><span>component: function</span>, </span><span><span>title: string</span>, </span><span><span>titleImage: Image.propTypes.source</span>, </span><span><span>passProps: object</span>, </span><span><span>backButtonIcon: Image.propTypes.source</span>, </span><span><span>backButtonTitle: string</span>, </span><span><span>leftButtonIcon: Image.propTypes.source</span>, </span><span><span>leftButtonTitle: string</span>, </span><span><span>leftButtonSystemIcon: Object.keys(SystemIcons)</span>, </span><span><span>onLeftButtonPress: function</span>, </span><span><span>rightButtonIcon: Image.propTypes.source</span>, </span><span><span>rightButtonTitle: string</span>, </span><span><span>rightButtonSystemIcon: Object.keys(SystemIcons)</span>, </span><span><span>onRightButtonPress: function</span>, </span><span><span>wrapperStyle: ViewPropTypes.style</span>, </span><span><span>navigationBarHidden: bool</span>, </span><span><span>shadowHidden: bool</span>, </span><span><span>tintColor: string</span>, </span><span><span>barTintColor: string</span>, </span><span><span>titleTextColor: string</span>, </span><span>translucent: bool</span></span>}</span></span> <a class="hash-link" href="docs/navigatorios.html#initialroute">#</a></h4><div><p>NavigatorIOS uses <code>route</code> objects to identify child views, their props,
and navigation bar configuration. Navigation operations such as push
operations expect routes to look like this the <code>initialRoute</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="interactivepopgestureenabled"></a>interactivePopGestureEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#interactivepopgestureenabled">#</a></h4><div><p>Boolean value that indicates whether the interactive pop gesture is
enabled. This is useful for enabling/disabling the back swipe navigation
gesture.</p><p>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
<code>interactivePopGestureEnabled</code> prop, you can never restore the default
behavior.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemwrapperstyle"></a>itemWrapperStyle?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/navigatorios.html#itemwrapperstyle">#</a></h4><div><p>The default wrapper style for components in the navigator.
A common use case is to set the <code>backgroundColor</code> for every scene.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navigationbarhidden"></a>navigationBarHidden?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#navigationbarhidden">#</a></h4><div><p>Boolean value that indicates whether the navigation bar is hidden
by default.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowhidden"></a>shadowHidden?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#shadowhidden">#</a></h4><div><p>Boolean value that indicates whether to hide the 1px hairline shadow
by default.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType">string</span> <a class="hash-link" href="docs/navigatorios.html#tintcolor">#</a></h4><div><p>The default color used for the buttons in the navigation bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titletextcolor"></a>titleTextColor?: <span class="propType">string</span> <a class="hash-link" href="docs/navigatorios.html#titletextcolor">#</a></h4><div><p>The default text color of the navigation bar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a>translucent?: <span class="propType">bool</span> <a class="hash-link" href="docs/navigatorios.html#translucent">#</a></h4><div><p>Boolean value that indicates whether the navigation bar is
translucent by default</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/navigatorios.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="push"></a>push<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#push">#</a></h4><div><p>Navigate forward to a new route.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="popn"></a>popN<span class="methodType">(n: number)</span> <a class="hash-link" href="docs/navigatorios.html#popn">#</a></h4><div><p>Go back N scenes at once. When N=1, behavior matches <code>pop()</code>.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>n<br><br><div><span>number</span></div></td><td class="description"><div><p>The number of scenes to pop.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="pop"></a>pop<span class="methodType">()</span> <a class="hash-link" href="docs/navigatorios.html#pop">#</a></h4><div><p>Pop back to the previous scene.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replaceatindex"></a>replaceAtIndex<span class="methodType">(route: object, index: number)</span> <a class="hash-link" href="docs/navigatorios.html#replaceatindex">#</a></h4><div><p>Replace a route in the navigation stack.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route that will replace the specified one.</p></div></td></tr><tr><td>index<br><br><div><span>number</span></div></td><td class="description"><div><p>The route into the stack that should be replaced.
If it is negative, it counts from the back of the stack.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replace"></a>replace<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#replace">#</a></h4><div><p>Replace the route for the current scene and immediately
load the view for the new route.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replaceprevious"></a>replacePrevious<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#replaceprevious">#</a></h4><div><p>Replace the route/view for the previous scene.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to will replace the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poptotop"></a>popToTop<span class="methodType">()</span> <a class="hash-link" href="docs/navigatorios.html#poptotop">#</a></h4><div><p>Go back to the topmost item in the navigation stack.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="poptoroute"></a>popToRoute<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#poptoroute">#</a></h4><div><p>Go back to the item for a particular route object.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route to navigate to.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="replacepreviousandpop"></a>replacePreviousAndPop<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#replacepreviousandpop">#</a></h4><div><p>Replaces the previous route/view and transitions back to it.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route that replaces the previous scene.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetto"></a>resetTo<span class="methodType">(route: object)</span> <a class="hash-link" href="docs/navigatorios.html#resetto">#</a></h4><div><p>Replaces the top item and pop to it.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>route<br><br><div><span>object</span></div></td><td class="description"><div><p>The new route that will replace the topmost item.</p></div></td></tr></tbody></table></div></div></div></span></div>
docs/autogen_NetInfo.md
-49
View File
@@ -1,49 +0,0 @@
---
id: netinfo
title: NetInfo
category: APIs
permalink: docs/netinfo.html
---
<div><div><p>NetInfo exposes info about online/offline status</p><div class="prism language-javascript">NetInfo<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>reach<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Initial: '</span> <span class="token operator">+</span> reach<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span>reach<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'First change: '</span> <span class="token operator">+</span> reach<span class="token punctuation">)</span><span class="token punctuation">;</span>
NetInfo<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
<span class="token string">'change'</span><span class="token punctuation">,</span>
handleFirstConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
NetInfo<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
<span class="token string">'change'</span><span class="token punctuation">,</span>
handleFirstConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><h3><a class="anchor" name="ios"></a>IOS <a class="hash-link" href="docs/netinfo.html#ios">#</a></h3><p>Asynchronously determine if the device is online and on a cellular network.</p><ul><li><code>none</code> - device is offline</li><li><code>wifi</code> - device is online and connected via wifi, or is the iOS simulator</li><li><code>cell</code> - device is connected via Edge, 3G, WiMax, or LTE</li><li><code>unknown</code> - error case and the network status is unknown</li></ul><h3><a class="anchor" name="android"></a>Android <a class="hash-link" href="docs/netinfo.html#android">#</a></h3><p>To request network info, you need to add the following line to your
app's <code>AndroidManifest.xml</code>:</p><p><code>&lt;uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /&gt;</code>
Asynchronously determine if the device is connected and details about that connection.</p><p>Android Connectivity Types.</p><ul><li><code>NONE</code> - device is offline</li><li><code>BLUETOOTH</code> - The Bluetooth data connection.</li><li><code>DUMMY</code> - Dummy data connection.</li><li><code>ETHERNET</code> - The Ethernet data connection.</li><li><code>MOBILE</code> - The Mobile data connection.</li><li><code>MOBILE_DUN</code> - A DUN-specific Mobile data connection.</li><li><code>MOBILE_HIPRI</code> - A High Priority Mobile data connection.</li><li><code>MOBILE_MMS</code> - An MMS-specific Mobile data connection.</li><li><code>MOBILE_SUPL</code> - A SUPL-specific Mobile data connection.</li><li><code>VPN</code> - A virtual network using one or more native bearers. Requires API Level 21</li><li><code>WIFI</code> - The WIFI data connection.</li><li><code>WIMAX</code> - The WiMAX data connection.</li><li><code>UNKNOWN</code> - Unknown data connection.</li></ul><p>The rest ConnectivityStates are hidden by the Android API, but can be used if necessary.</p><h3><a class="anchor" name="isconnectionexpensive"></a>isConnectionExpensive <a class="hash-link" href="docs/netinfo.html#isconnectionexpensive">#</a></h3><p>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.</p><div class="prism language-javascript">NetInfo<span class="token punctuation">.</span><span class="token function">isConnectionExpensive</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>isConnectionExpensive <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Connection is '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnectionExpensive <span class="token operator">?</span> <span class="token string">'Expensive'</span> <span class="token punctuation">:</span> <span class="token string">'Not Expensive'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>error <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h3><a class="anchor" name="isconnected"></a>isConnected <a class="hash-link" href="docs/netinfo.html#isconnected">#</a></h3><p>Available on all platforms. Asynchronously fetch a boolean to determine
internet connectivity.</p><div class="prism language-javascript">NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>isConnected <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'First, is '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnected <span class="token operator">?</span> <span class="token string">'online'</span> <span class="token punctuation">:</span> <span class="token string">'offline'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleFirstConnectivityChange</span><span class="token punctuation">(</span>isConnected<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Then, is '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>isConnected <span class="token operator">?</span> <span class="token string">'online'</span> <span class="token punctuation">:</span> <span class="token string">'offline'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>
<span class="token string">'change'</span><span class="token punctuation">,</span>
handleFirstConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
NetInfo<span class="token punctuation">.</span>isConnected<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>
<span class="token string">'change'</span><span class="token punctuation">,</span>
handleFirstConnectivityChange
<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/netinfo.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addeventlistener"></a><span class="methodType">static </span>addEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/netinfo.html#addeventlistener">#</a></h4><div><p>Invokes the listener whenever network status changes.
The listener receives one of the connectivity types listed above.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removeeventlistener"></a><span class="methodType">static </span>removeEventListener<span class="methodType">(eventName, handler)</span> <a class="hash-link" href="docs/netinfo.html#removeeventlistener">#</a></h4><div><p>Removes the listener for network status changes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="fetch"></a><span class="methodType">static </span>fetch<span class="methodType">()</span> <a class="hash-link" href="docs/netinfo.html#fetch">#</a></h4><div><p>Returns a promise that resolves with one of the connectivity types listed
above.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="isconnectionexpensive"></a><span class="methodType">static </span>isConnectionExpensive<span class="methodType">()</span> <a class="hash-link" href="docs/netinfo.html#isconnectionexpensive">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/netinfo.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="isconnected"></a>isConnected<span class="propType">: ObjectExpression</span> <a class="hash-link" href="docs/netinfo.html#isconnected">#</a></h4><div><p>An object with the same methods as above but the listener receives a
boolean which represents the internet connectivity.
Use this if you are only interested with whether the device has internet
connectivity.</p></div></div></div></span></div>
docs/autogen_PanResponder.md
-67
View File
@@ -1,67 +0,0 @@
---
id: panresponder
title: PanResponder
category: APIs
permalink: docs/panresponder.html
---
<div><div><p><code>PanResponder</code> 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.</p><p>By default, <code>PanResponder</code> holds an <code>InteractionManager</code> handle to block
long-running JS events from interrupting active gestures.</p><p>It provides a predictable wrapper of the responder handlers provided by the
<a href="docs/gesture-responder-system.html" target="_blank">gesture responder system</a>.
For each handler, it provides a new <code>gestureState</code> object alongside the
native event object:</p><div class="prism language-javascript">onPanResponderMove<span class="token punctuation">:</span> <span class="token punctuation">(</span>event<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></div><p>A native event is a synthetic touch event with the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event</li><li><code>identifier</code> - The ID of the touch</li><li><code>locationX</code> - The X position of the touch, relative to the element</li><li><code>locationY</code> - The Y position of the touch, relative to the element</li><li><code>pageX</code> - The X position of the touch, relative to the root element</li><li><code>pageY</code> - The Y position of the touch, relative to the root element</li><li><code>target</code> - The node id of the element receiving the touch event</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation</li><li><code>touches</code> - Array of all current touches on the screen</li></ul></li></ul><p>A <code>gestureState</code> object has the following:</p><ul><li><code>stateID</code> - ID of the gestureState- persisted as long as there at least
one touch on screen</li><li><code>moveX</code> - the latest screen coordinates of the recently-moved touch</li><li><code>moveY</code> - the latest screen coordinates of the recently-moved touch</li><li><code>x0</code> - the screen coordinates of the responder grant</li><li><code>y0</code> - the screen coordinates of the responder grant</li><li><code>dx</code> - accumulated distance of the gesture since the touch started</li><li><code>dy</code> - accumulated distance of the gesture since the touch started</li><li><code>vx</code> - current velocity of the gesture</li><li><code>vy</code> - current velocity of the gesture</li><li><code>numberActiveTouches</code> - Number of touches currently on screen</li></ul><h3><a class="anchor" name="basic-usage"></a>Basic Usage <a class="hash-link" href="docs/panresponder.html#basic-usage">#</a></h3><div class="prism language-javascript"> componentWillMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_panResponder <span class="token operator">=</span> PanResponder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Ask to be the responder:
</span> onStartShouldSetPanResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
onStartShouldSetPanResponderCapture<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
onMoveShouldSetPanResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
onMoveShouldSetPanResponderCapture<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
onPanResponderGrant<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // The gesture has started. Show visual feedback so the user knows
</span> <span class="token comment" spellcheck="true"> // what is happening!
</span>
<span class="token comment" spellcheck="true"> // gestureState.d{x,y} will be set to zero now
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
onPanResponderMove<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // The most recent move distance is gestureState.move{X,Y}
</span>
<span class="token comment" spellcheck="true"> // The accumulated gesture distance since becoming responder is
</span> <span class="token comment" spellcheck="true"> // gestureState.d{x,y}
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
onPanResponderTerminationRequest<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
onPanResponderRelease<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // The user has released all touches while this view is the
</span> <span class="token comment" spellcheck="true"> // responder. This typically means a gesture has succeeded
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
onPanResponderTerminate<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Another component has become the responder, so this gesture
</span> <span class="token comment" spellcheck="true"> // should be cancelled
</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
onShouldBlockNativeResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Returns whether this component should block native components from becoming the JS
</span> <span class="token comment" spellcheck="true"> // responder. Returns true by default. Is currently only supported on android.
</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View <span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>_panResponder<span class="token punctuation">.</span>panHandlers<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><h3><a class="anchor" name="working-example"></a>Working Example <a class="hash-link" href="docs/panresponder.html#working-example">#</a></h3><p>To see it in action, try the
<a href="https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js" target="_blank">PanResponder example in RNTester</a></p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/panresponder.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="create"></a><span class="methodType">static </span>create<span class="methodType">(config)</span> <a class="hash-link" href="docs/panresponder.html#create">#</a></h4><div><p>@param {object} config Enhanced versions of all of the responder callbacks
that provide not only the typical <code>ResponderSyntheticEvent</code>, but also the
<code>PanResponder</code> gesture state. Simply replace the word <code>Responder</code> with
<code>PanResponder</code> in each of the typical <code>onResponder*</code> callbacks. For
example, the <code>config</code> object would look like:</p><ul><li><code>onMoveShouldSetPanResponder: (e, gestureState) =&gt; {...}</code></li><li><code>onMoveShouldSetPanResponderCapture: (e, gestureState) =&gt; {...}</code></li><li><code>onStartShouldSetPanResponder: (e, gestureState) =&gt; {...}</code></li><li><code>onStartShouldSetPanResponderCapture: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderReject: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderGrant: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderStart: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderEnd: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderRelease: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderMove: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderTerminate: (e, gestureState) =&gt; {...}</code></li><li><code>onPanResponderTerminationRequest: (e, gestureState) =&gt; {...}</code></li><li><p><code>onShouldBlockNativeResponder: (e, gestureState) =&gt; {...}</code></p><p>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.</p><p>Be careful with onStartShould* callbacks. They only reflect updated
<code>gestureState</code> 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 <code>gestureState</code> being updated
accordingly. (numberActiveTouches) may not be totally accurate unless you
are the responder.</p></li></ul></div></div></div></span></div>
docs/autogen_PermissionsAndroid.md
-59
View File
@@ -1,59 +0,0 @@
---
id: permissionsandroid
title: PermissionsAndroid
category: APIs
permalink: docs/permissionsandroid.html
---
<div><div><span><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>
</span><p><code>PermissionsAndroid</code> 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 <code>AndroidManifest.xml</code>. However, "dangerous"
permissions require a dialog prompt. You should use this module for those
permissions.</p><p>On devices before SDK version 23, the permissions are automatically granted
if they appear in the manifest, so <code>check</code> and <code>request</code>
should always be true.</p><p>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 <code>rationale</code> argument will show a dialog prompt only if
necessary - otherwise the normal permission prompt will appear.</p><h3><a class="anchor" name="example"></a>Example <a class="hash-link" href="docs/permissionsandroid.html#example">#</a></h3><div class="prism language-javascript"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">requestCameraPermission</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> granted <span class="token operator">=</span> <span class="token keyword">await</span> PermissionsAndroid<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span>
PermissionsAndroid<span class="token punctuation">.</span>PERMISSIONS<span class="token punctuation">.</span>CAMERA<span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string">'title'</span><span class="token punctuation">:</span> <span class="token string">'Cool Photo App Camera Permission'</span><span class="token punctuation">,</span>
<span class="token string">'message'</span><span class="token punctuation">:</span> <span class="token string">'Cool Photo App needs access to your camera '</span> <span class="token operator">+</span>
<span class="token string">'so you can take awesome pictures.'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>granted <span class="token operator">===</span> PermissionsAndroid<span class="token punctuation">.</span>RESULTS<span class="token punctuation">.</span>GRANTED<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"You can use the camera"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Camera permission denied"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/permissionsandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">()</span> <a class="hash-link" href="docs/permissionsandroid.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="checkpermission"></a>checkPermission<span class="methodType">(permission)</span> <a class="hash-link" href="docs/permissionsandroid.html#checkpermission">#</a></h4><div><p>DEPRECATED - use check</p><p>Returns a promise resolving to a boolean value as to whether the specified
permissions has been granted</p><p>@deprecated</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="check"></a>check<span class="methodType">(permission)</span> <a class="hash-link" href="docs/permissionsandroid.html#check">#</a></h4><div><p>Returns a promise resolving to a boolean value as to whether the specified
permissions has been granted</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="requestpermission"></a>requestPermission<span class="methodType">(permission, rationale?)</span> <a class="hash-link" href="docs/permissionsandroid.html#requestpermission">#</a></h4><div><p>DEPRECATED - use request</p><p>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</p><p>If the optional rationale argument is included (which is an object with a
<code>title</code> and <code>message</code>), this function checks with the OS whether it is
necessary to show a dialog explaining why the permission is needed
(<a href="https://developer.android.com/training/permissions/requesting.html#explain">https://developer.android.com/training/permissions/requesting.html#explain</a>)
and then shows the system permission dialog</p><p>@deprecated</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="request"></a>request<span class="methodType">(permission, rationale?)</span> <a class="hash-link" href="docs/permissionsandroid.html#request">#</a></h4><div><p>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</p><p>If the optional rationale argument is included (which is an object with a
<code>title</code> and <code>message</code>), this function checks with the OS whether it is
necessary to show a dialog explaining why the permission is needed
(<a href="https://developer.android.com/training/permissions/requesting.html#explain">https://developer.android.com/training/permissions/requesting.html#explain</a>)
and then shows the system permission dialog</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="requestmultiple"></a>requestMultiple<span class="methodType">(permissions)</span> <a class="hash-link" href="docs/permissionsandroid.html#requestmultiple">#</a></h4><div><p>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</p></div></div></div></span></div>
docs/autogen_Picker.md
-15
View File
@@ -1,15 +0,0 @@
---
id: picker
title: Picker
category: Components
permalink: docs/picker.html
---
<div><div><p>Renders the native picker component on iOS and Android. Example:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>Picker
selectedValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>language<span class="token punctuation">}</span>
onValueChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>itemValue<span class="token punctuation">,</span> itemIndex<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>language<span class="token punctuation">:</span> itemValue<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">"Java"</span> value<span class="token operator">=</span><span class="token string">"java"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Picker<span class="token punctuation">.</span>Item label<span class="token operator">=</span><span class="token string">"JavaScript"</span> value<span class="token operator">=</span><span class="token string">"js"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Picker<span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/picker.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/picker.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">Function</span> <a class="hash-link" href="docs/picker.html#onvaluechange">#</a></h4><div><p>Callback for when an item is selected. This is called with the following parameters:
- <code>itemValue</code>: the <code>value</code> prop of the item that was selected
- <code>itemPosition</code>: the index of the selected item in this picker</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedvalue"></a>selectedValue?: <span class="propType">any</span> <a class="hash-link" href="docs/picker.html#selectedvalue">#</a></h4><div><p>Value matching value of one of the items. Can be a string or an integer.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/picker.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/picker.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/picker.html#enabled">#</a></h4><div><p>If set to false, the picker will be disabled, i.e. the user will not be able to make a
selection.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mode"></a><span class="platform">android</span>mode?: <span class="propType"><span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/picker.html#mode">#</a></h4><div><p>On Android, specifies how to display the selection items when the user taps on the picker:</p><ul><li>'dialog': Show a modal dialog. This is the default.</li><li>'dropdown': Shows a dropdown anchored to the picker view</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="prompt"></a><span class="platform">android</span>prompt?: <span class="propType">string</span> <a class="hash-link" href="docs/picker.html#prompt">#</a></h4><div><p>Prompt string for this picker, used on Android in dialog mode as the title of the dialog.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a><span class="platform">ios</span>itemStyle?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/picker.html#itemstyle">#</a></h4><div><p>Style to apply to each of the item labels.</p></div></div></div></div>
docs/autogen_PickerIOS.md
-7
View File
@@ -1,7 +0,0 @@
---
id: pickerios
title: PickerIOS
category: Components
permalink: docs/pickerios.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/pickerios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/pickerios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemstyle"></a>itemStyle?: <span class="propType">itemStylePropType</span> <a class="hash-link" href="docs/pickerios.html#itemstyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">function</span> <a class="hash-link" href="docs/pickerios.html#onvaluechange">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedvalue"></a>selectedValue?: <span class="propType">any</span> <a class="hash-link" href="docs/pickerios.html#selectedvalue">#</a></h4></div></div></div>
docs/autogen_PixelRatio.md
-20
View File
@@ -1,20 +0,0 @@
---
id: pixelratio
title: PixelRatio
category: APIs
permalink: docs/pixelratio.html
---
<div><div><p>PixelRatio class gives access to the device pixel density.</p><h3><a class="anchor" name="fetching-a-correctly-sized-image"></a>Fetching a correctly sized image <a class="hash-link" href="docs/pixelratio.html#fetching-a-correctly-sized-image">#</a></h3><p>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.</p><div class="prism language-javascript"><span class="token keyword">var</span> image <span class="token operator">=</span> <span class="token function">getImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
width<span class="token punctuation">:</span> PixelRatio<span class="token punctuation">.</span><span class="token function">getPixelSizeForLayoutSize</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> PixelRatio<span class="token punctuation">.</span><span class="token function">getPixelSizeForLayoutSize</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/pixelratio.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="get"></a><span class="methodType">static </span>get<span class="methodType">()</span> <a class="hash-link" href="docs/pixelratio.html#get">#</a></h4><div><p>Returns the device pixel density. Some examples:</p><ul><li>PixelRatio.get() === 1<ul><li>mdpi Android devices (160 dpi)</li></ul></li><li>PixelRatio.get() === 1.5<ul><li>hdpi Android devices (240 dpi)</li></ul></li><li>PixelRatio.get() === 2<ul><li>iPhone 4, 4S</li><li>iPhone 5, 5c, 5s</li><li>iPhone 6</li><li>xhdpi Android devices (320 dpi)</li></ul></li><li>PixelRatio.get() === 3<ul><li>iPhone 6 plus</li><li>xxhdpi Android devices (480 dpi)</li></ul></li><li>PixelRatio.get() === 3.5<ul><li>Nexus 6</li></ul></li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getfontscale"></a><span class="methodType">static </span>getFontScale<span class="methodType">()</span> <a class="hash-link" href="docs/pixelratio.html#getfontscale">#</a></h4><div><p>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.</p><p>If a font scale is not set, this returns the device pixel ratio.</p><p>Currently this is only implemented on Android and reflects the user preference set in
Settings &gt; Display &gt; Font size, on iOS it will always return the default pixel ratio.
@platform android</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getpixelsizeforlayoutsize"></a><span class="methodType">static </span>getPixelSizeForLayoutSize<span class="methodType">(layoutSize)</span> <a class="hash-link" href="docs/pixelratio.html#getpixelsizeforlayoutsize">#</a></h4><div><p>Converts a layout size (dp) to pixel size (px).</p><p>Guaranteed to return an integer number.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="roundtonearestpixel"></a><span class="methodType">static </span>roundToNearestPixel<span class="methodType">(layoutSize)</span> <a class="hash-link" href="docs/pixelratio.html#roundtonearestpixel">#</a></h4><div><p>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, <code>PixelRatio.roundToNearestPixel(8.4) = 8.33</code>, which corresponds to
exactly (8.33 * 3) = 25 pixels.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="startdetecting"></a><span class="methodType">static </span>startDetecting<span class="methodType">()</span> <a class="hash-link" href="docs/pixelratio.html#startdetecting">#</a></h4><div><p>// No-op for iOS, but used on the web. Should not be documented.</p></div></div></div></span></div>
docs/autogen_ProgressBarAndroid.md
-22
View File
@@ -1,22 +0,0 @@
---
id: progressbarandroid
title: ProgressBarAndroid
category: Components
permalink: docs/progressbarandroid.html
---
<div><div><p>React component that wraps the Android-only <code>ProgressBar</code>. This component is used to indicate
that the app is loading or there is some activity in the app.</p><p>Example:</p><div class="prism language-javascript">render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> progressBar <span class="token operator">=</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Inverse"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>MyLoadingComponent
componentView<span class="token operator">=</span><span class="token punctuation">{</span>componentView<span class="token punctuation">}</span>
loadingView<span class="token operator">=</span><span class="token punctuation">{</span>progressBar<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>loadingComponent<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/progressbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/progressbarandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/progressbarandroid.html#color">#</a></h4><div><p>Color of the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indeterminate"></a>indeterminate?: <span class="propType">indeterminateType</span> <a class="hash-link" href="docs/progressbarandroid.html#indeterminate">#</a></h4><div><p>If the progress bar will show indeterminate progress. Note that this
can only be false if styleAttr is Horizontal.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress?: <span class="propType">number</span> <a class="hash-link" href="docs/progressbarandroid.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="styleattr"></a>styleAttr?: <span class="propType">enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse')</span> <a class="hash-link" href="docs/progressbarandroid.html#styleattr">#</a></h4><div><p>Style of the ProgressBar. One of:</p><ul><li>Horizontal</li><li>Normal (default)</li><li>Small</li><li>Large</li><li>Inverse</li><li>SmallInverse</li><li>LargeInverse</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/progressbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div></div></div>
docs/autogen_ProgressViewIOS.md
-7
View File
@@ -1,7 +0,0 @@
---
id: progressviewios
title: ProgressViewIOS
category: Components
permalink: docs/progressviewios.html
---
<div><div><p>Use <code>ProgressViewIOS</code> to render a UIProgressView on iOS.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/progressviewios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/progressviewios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progress"></a>progress?: <span class="propType">number</span> <a class="hash-link" href="docs/progressviewios.html#progress">#</a></h4><div><p>The progress value (between 0 and 1).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressimage"></a>progressImage?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/progressviewios.html#progressimage">#</a></h4><div><p>A stretchable image to display as the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progresstintcolor"></a>progressTintColor?: <span class="propType">string</span> <a class="hash-link" href="docs/progressviewios.html#progresstintcolor">#</a></h4><div><p>The tint color of the progress bar itself.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewstyle"></a>progressViewStyle?: <span class="propType">enum('default', 'bar')</span> <a class="hash-link" href="docs/progressviewios.html#progressviewstyle">#</a></h4><div><p>The progress bar style.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="trackimage"></a>trackImage?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/progressviewios.html#trackimage">#</a></h4><div><p>A stretchable image to display behind the progress bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tracktintcolor"></a>trackTintColor?: <span class="propType">string</span> <a class="hash-link" href="docs/progressviewios.html#tracktintcolor">#</a></h4><div><p>The tint color of the progress bar track.</p></div></div></div></div>
docs/autogen_PushNotificationIOS.md
-75
View File
File diff suppressed because one or more lines are too long
docs/autogen_RefreshControl.md
-41
View File
@@ -1,41 +0,0 @@
---
id: refreshcontrol
title: RefreshControl
category: Components
permalink: docs/refreshcontrol.html
---
<div><div><p>This component is used inside a ScrollView or ListView to add pull to refresh
functionality. When the ScrollView is at <code>scrollY: 0</code>, swiping down
triggers an <code>onRefresh</code> event.</p><h3><a class="anchor" name="usage-example"></a>Usage example <a class="hash-link" href="docs/refreshcontrol.html#usage-example">#</a></h3><div class="prism language-js"><span class="token keyword">class</span> <span class="token class-name">RefreshableList</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
refreshing<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">_onRefresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>refreshing<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>refreshing<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>ListView
refreshControl<span class="token operator">=</span><span class="token punctuation">{</span>
<span class="token operator">&lt;</span>RefreshControl
refreshing<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>refreshing<span class="token punctuation">}</span>
onRefresh<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onRefresh<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
<span class="token operator">&gt;</span>
<span class="token operator">...</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>ListView<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span></div><p><strong>Note:</strong> <code>refreshing</code> is a controlled prop, this is why it needs to be set to true
in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediately.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/refreshcontrol.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/refreshcontrol.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType">function</span> <a class="hash-link" href="docs/refreshcontrol.html#onrefresh">#</a></h4><div><p>Called when the view starts refreshing.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing: <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#refreshing">#</a></h4><div><p>Whether the view should be indicating an active refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="colors"></a><span class="platform">android</span>colors?: <span class="propType"><span>[<a href="docs/colors.html">color</a>]</span></span> <a class="hash-link" href="docs/refreshcontrol.html#colors">#</a></h4><div><p>The colors (at least one) that will be used to draw the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a><span class="platform">android</span>enabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/refreshcontrol.html#enabled">#</a></h4><div><p>Whether the pull to refresh functionality is enabled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressbackgroundcolor"></a><span class="platform">android</span>progressBackgroundColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#progressbackgroundcolor">#</a></h4><div><p>The background color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewoffset"></a><span class="platform">android</span>progressViewOffset?: <span class="propType">number</span> <a class="hash-link" href="docs/refreshcontrol.html#progressviewoffset">#</a></h4><div><p>Progress view top offset</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="size"></a><span class="platform">android</span>size?: <span class="propType">enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)</span> <a class="hash-link" href="docs/refreshcontrol.html#size">#</a></h4><div><p>Size of the refresh indicator, see RefreshControl.SIZE.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a><span class="platform">ios</span>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#tintcolor">#</a></h4><div><p>The color of the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a><span class="platform">ios</span>title?: <span class="propType">string</span> <a class="hash-link" href="docs/refreshcontrol.html#title">#</a></h4><div><p>The title displayed under the refresh indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a><span class="platform">ios</span>titleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/refreshcontrol.html#titlecolor">#</a></h4><div><p>Title color.</p></div></div></div></div>
docs/autogen_ScrollView.md
-114
View File
@@ -1,114 +0,0 @@
---
id: scrollview
title: ScrollView
category: Components
permalink: docs/scrollview.html
---
<div><div><p>Component that wraps platform ScrollView while providing
integration with touch locking "responder" system.</p><p>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 <code>{flex: 1}</code> down the
view stack can lead to errors here, which the element inspector makes
easy to debug.</p><p>Doesn't yet support other contained responders from blocking this scroll
view from becoming the responder.</p><p><code>&lt;ScrollView&gt;</code> vs <a href="/react-native/docs/flatlist.html" target=""><code>&lt;FlatList&gt;</code></a> - which one to use?</p><p><code>ScrollView</code> simply renders all its react child components at once. That
makes it very easy to understand and use.</p><p>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.</p><p>This is where <code>FlatList</code> comes into play. <code>FlatList</code> renders items lazily,
just when they are about to appear, and removes items that scroll way off
screen to save memory and processing time.</p><p><code>FlatList</code> 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.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/scrollview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/scrollview.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentcontainerstyle"></a>contentContainerStyle?: <span class="propType">StyleSheetPropType(ViewStylePropTypes)</span> <a class="hash-link" href="docs/scrollview.html#contentcontainerstyle">#</a></h4><div><p>These styles will be applied to the scroll view content container which
wraps all of the child views. Example:</p><div class="prism language-javascript"><span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>ScrollView contentContainerStyle<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>contentContainer<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>ScrollView<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
<span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
contentContainer<span class="token punctuation">:</span> <span class="token punctuation">{</span>
paddingVertical<span class="token punctuation">:</span> <span class="token number">20</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#horizontal">#</a></h4><div><p>When true, the scroll view's children are arranged horizontally in a row
instead of vertically in a column. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode?: <span class="propType">enum('none', 'interactive', 'on-drag')</span> <a class="hash-link" href="docs/scrollview.html#keyboarddismissmode">#</a></h4><div><p>Determines whether the keyboard gets dismissed in response to a drag.</p><ul><li><code>'none'</code> (the default), drags do not dismiss the keyboard.</li><li><code>'on-drag'</code>, the keyboard is dismissed when a drag begins.</li><li><code>'interactive'</code>, 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'.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardshouldpersisttaps"></a>keyboardShouldPersistTaps?: <span class="propType">enum('always', 'never', 'handled', false, true)</span> <a class="hash-link" href="docs/scrollview.html#keyboardshouldpersisttaps">#</a></h4><div><p>Determines when the keyboard should stay visible after a tap.</p><ul><li><code>'never'</code> (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.</li><li><code>'always'</code>, the keyboard will not dismiss automatically, and the scroll view will not
catch taps, but children of the scroll view can catch taps.</li><li><code>'handled'</code>, the keyboard will not dismiss automatically when the tap was handled by
a children, (or captured by an ancestor).</li><li><code>false</code>, deprecated, use 'never' instead</li><li><code>true</code>, deprecated, use 'always' instead</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oncontentsizechange"></a>onContentSizeChange?: <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#oncontentsizechange">#</a></h4><div><p>Called when scrollable content view of the ScrollView changes.</p><p>Handler function is passed the content width and content height as parameters:
<code>(contentWidth, contentHeight)</code></p><p>It's implemented using onLayout handler attached to the content container
which this ScrollView renders.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll?: <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#onscroll">#</a></h4><div><p>Fires at most once per frame during scrolling. The frequency of the
events can be controlled using the <code>scrollEventThrottle</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagingenabled"></a>pagingEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#pagingenabled">#</a></h4><div><p>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.</p><p>Note: Vertical pagination is not supported on Android.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshcontrol"></a>refreshControl?: <span class="propType">element</span> <a class="hash-link" href="docs/scrollview.html#refreshcontrol">#</a></h4><div><p>A RefreshControl component, used to provide pull-to-refresh
functionality for the ScrollView. Only works for vertical ScrollViews
(<code>horizontal</code> prop must be <code>false</code>).</p><p>See <a href="docs/refreshcontrol.html" target="_blank">RefreshControl</a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#removeclippedsubviews">#</a></h4><div><p>Experimental: When true, offscreen child views (whose <code>overflow</code> value is
<code>hidden</code>) are removed from their native backing superview when offscreen.
This can improve scrolling performance on long lists. The default value is
true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#scrollenabled">#</a></h4><div><p>When false, the view cannot be scrolled via touch interaction.
The default value is true.</p><p>Note that the view can be always be scrolled by calling <code>scrollTo</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices?: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/scrollview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
top of the screen when scrolling. For example, passing
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
top of the scroll view. This property is not supported in conjunction
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/scrollview.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum('visible', 'hidden')</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum('solid', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android's underlying
<a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
This adds a drop shadow to the item and affects z-order for overlapping views.
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="endfillcolor"></a><span class="platform">android</span>endFillColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/scrollview.html#endfillcolor">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overscrollmode"></a><span class="platform">android</span>overScrollMode?: <span class="propType">enum('auto', 'always', 'never')</span> <a class="hash-link" href="docs/scrollview.html#overscrollmode">#</a></h4><div><p>Used to override default value of overScroll mode.</p><p>Possible values:</p><ul><li><code>'auto'</code> - Default value, allow a user to over-scroll
this view only if the content is large enough to meaningfully scroll.</li><li><code>'always'</code> - Always allow a user to over-scroll this view.</li><li><code>'never'</code> - Never allow a user to over-scroll this view.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollperftag"></a><span class="platform">android</span>scrollPerfTag?: <span class="propType">string</span> <a class="hash-link" href="docs/scrollview.html#scrollperftag">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="deprecated-sendupdatedchildframes"></a><span class="platform">ios</span>DEPRECATED_sendUpdatedChildFrames?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#deprecated-sendupdatedchildframes">#</a></h4><div><p>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, <code>onLayout</code> should be used instead to retrieve
frame data.
The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncehorizontal"></a><span class="platform">ios</span>alwaysBounceHorizontal?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#alwaysbouncehorizontal">#</a></h4><div><p>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 <code>horizontal={true}</code> and false otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="alwaysbouncevertical"></a><span class="platform">ios</span>alwaysBounceVertical?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#alwaysbouncevertical">#</a></h4><div><p>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 <code>horizontal={true}</code> and true otherwise.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a><span class="platform">ios</span>automaticallyAdjustContentInsets?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#automaticallyadjustcontentinsets">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#bounces">#</a></h4><div><p>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 <code>alwaysBounce*</code> props are true. The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounceszoom"></a><span class="platform">ios</span>bouncesZoom?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#bounceszoom">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cancancelcontenttouches"></a><span class="platform">ios</span>canCancelContentTouches?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#cancancelcontenttouches">#</a></h4><div><p>When false, once tracking starts, won't try to drag if the touch moves.
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="centercontent"></a><span class="platform">ios</span>centerContent?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#centercontent">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a><span class="platform">ios</span>contentInset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/scrollview.html#contentinset">#</a></h4><div><p>The amount by which the scroll view content is inset from the edges
of the scroll view. Defaults to <code>{top: 0, left: 0, bottom: 0, right: 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentoffset"></a><span class="platform">ios</span>contentOffset?: <span class="propType">PointPropType</span> <a class="hash-link" href="docs/scrollview.html#contentoffset">#</a></h4><div><p>Used to manually set the starting scroll offset.
The default value is <code>{x: 0, y: 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate?: <span class="propType"><span><span>enum('fast', 'normal'), </span>number</span></span> <a class="hash-link" href="docs/scrollview.html#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
decelerates after the user lifts their finger. You may also use string
shortcuts <code>"normal"</code> and <code>"fast"</code> which match the underlying iOS settings
for <code>UIScrollViewDecelerationRateNormal</code> and
<code>UIScrollViewDecelerationRateFast</code> respectively.</p><ul><li><code>'normal'</code>: 0.998 (the default)</li><li><code>'fast'</code>: 0.99</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="directionallockenabled"></a><span class="platform">ios</span>directionalLockEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#directionallockenabled">#</a></h4><div><p>When true, the ScrollView will try to lock to only vertical or horizontal
scrolling while dragging. The default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="indicatorstyle"></a><span class="platform">ios</span>indicatorStyle?: <span class="propType">enum('default', 'black', 'white')</span> <a class="hash-link" href="docs/scrollview.html#indicatorstyle">#</a></h4><div><p>The style of the scroll indicators.</p><ul><li><code>'default'</code> (the default), same as <code>black</code>.</li><li><code>'black'</code>, scroll indicator is black. This style is good against a light background.</li><li><code>'white'</code>, scroll indicator is white. This style is good against a dark background.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumzoomscale"></a><span class="platform">ios</span>maximumZoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#maximumzoomscale">#</a></h4><div><p>The maximum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumzoomscale"></a><span class="platform">ios</span>minimumZoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#minimumzoomscale">#</a></h4><div><p>The minimum allowed zoom scale. The default value is 1.0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscrollanimationend"></a><span class="platform">ios</span>onScrollAnimationEnd?: <span class="propType">function</span> <a class="hash-link" href="docs/scrollview.html#onscrollanimationend">#</a></h4><div><p>Called when a scrolling animation ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a><span class="platform">ios</span>scrollEventThrottle?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#scrolleventthrottle">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollindicatorinsets"></a><span class="platform">ios</span>scrollIndicatorInsets?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/scrollview.html#scrollindicatorinsets">#</a></h4><div><p>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 <code>contentInset</code>. Defaults to <code>{0, 0, 0, 0}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollstotop"></a><span class="platform">ios</span>scrollsToTop?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#scrollstotop">#</a></h4><div><p>When true, the scroll view scrolls to top when the status bar is tapped.
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptoalignment"></a><span class="platform">ios</span>snapToAlignment?: <span class="propType">enum('start', 'center', 'end')</span> <a class="hash-link" href="docs/scrollview.html#snaptoalignment">#</a></h4><div><p>When <code>snapToInterval</code> is set, <code>snapToAlignment</code> will define the relationship
of the snapping to the scroll view.</p><ul><li><code>'start'</code> (the default) will align the snap at the left (horizontal) or top (vertical)</li><li><code>'center'</code> will align the snap in the center</li><li><code>'end'</code> will align the snap at the right (horizontal) or bottom (vertical)</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptointerval"></a><span class="platform">ios</span>snapToInterval?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#snaptointerval">#</a></h4><div><p>When set, causes the scroll view to stop at multiples of the value of
<code>snapToInterval</code>. This can be used for paginating through children
that have lengths smaller than the scroll view. Typically used in
combination with <code>snapToAlignment</code> and <code>decelerationRate="fast"</code>.
Overrides less configurable <code>pagingEnabled</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(y?: number, object, x?: number, animated?: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Example:</p><p><code>scrollTo({x: 0, y: 0, animated: true})</code></p><p>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.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(options?: object)</span> <a class="hash-link" href="docs/scrollview.html#scrolltoend">#</a></h4><div><p>If this is a vertical ScrollView scrolls to the bottom.
If this is a horizontal ScrollView scrolls to the right.</p><p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling,
<code>scrollToEnd({animated: false})</code> for immediate scrolling.
If no options are passed, <code>animated</code> defaults to true.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollwithoutanimationto"></a>scrollWithoutAnimationTo<span class="methodType">(y, x)</span> <a class="hash-link" href="docs/scrollview.html#scrollwithoutanimationto">#</a></h4><div><p>Deprecated, use <code>scrollTo</code> instead.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/scrollview.html#flashscrollindicators">#</a></h4><div><p>Displays the scroll indicators momentarily.</p></div></div></div></span></div>
docs/autogen_SectionList.md
-82
View File
@@ -1,82 +0,0 @@
---
id: sectionlist
title: SectionList
category: Components
permalink: docs/sectionlist.html
---
<div><div><p>A performant interface for rendering sectioned lists, supporting the most handy features:</p><ul><li>Fully cross-platform.</li><li>Configurable viewability callbacks.</li><li>List header support.</li><li>List footer support.</li><li>Item separator support.</li><li>Section header support.</li><li>Section separator support.</li><li>Heterogeneous data and item rendering support.</li><li>Pull to Refresh.</li><li>Scroll loading.</li></ul><p>If you don't need section support and want a simpler interface, use
<a href="/react-native/docs/flatlist.html" target=""><code>&lt;FlatList&gt;</code></a>.</p><p>Simple Examples:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>SectionList
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>ListItem title<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">}</span>
renderSectionHeader<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>section<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">&lt;</span>H1 title<span class="token operator">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>title<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">}</span>
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token comment" spellcheck="true"> // homogenous rendering between sections
</span> <span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>SectionList
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token comment" spellcheck="true"> // heterogeneous rendering between sections
</span> <span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">,</span> renderItem<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div><p>This is a convenience wrapper around <a href="docs/virtualizedlist.html" target="_blank"><code>&lt;VirtualizedList&gt;</code></a>,
and thus inherits its props (as well as those of <code>ScrollView</code>) that aren't explicitly listed
here, along with the following caveats:</p><ul><li>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.</li><li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-
equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop
(e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on
changes. This includes the <code>data</code> prop and parent component state.</li><li>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.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/sectionlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom. By default, <code>highlighted</code>,
<code>section</code>, and <code>[leading/trailing][Item/Separator]</code> props are provided. <code>renderItem</code> provides
<code>separators.highlight</code>/<code>unhighlight</code> which will update the <code>highlighted</code> prop, but you can also
add custom props with <code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listemptycomponent"></a>ListEmptyComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/sectionlist.html#listemptycomponent">#</a></h4><div><p>Rendered when the list is empty. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/sectionlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the very end of the list. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/sectionlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the very beginning of the list. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sectionseparatorcomponent"></a>SectionSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#sectionseparatorcomponent">#</a></h4><div><p>Rendered at the top and bottom of each section (note this is different from
<code>ItemSeparatorComponent</code> which is only rendered between items). These are intended to separate
sections from the headers above and below and typically have the same highlight response as
<code>ItemSeparatorComponent</code>. Also receives <code>highlighted</code>, <code>[leading/trailing][Item/Separator]</code>,
and any custom props from <code>separators.updateProps</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/sectionlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
<code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender: <span class="propType">number</span> <a class="hash-link" href="docs/sectionlist.html#initialnumtorender">#</a></h4><div><p>How many items to render in the initial batch. This should be enough to fill the screen but not
much more. Note these items will never be unmounted as part of the windowed rendering in order
to improve perceived performance of scroll-to-top actions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inverted"></a>inverted?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#inverted">#</a></h4><div><p>Reverses the direction of scroll. Uses scale transforms of -1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: Item, index: number) =&gt; string</span> <a class="hash-link" href="docs/sectionlist.html#keyextractor">#</a></h4><div><p>Used to extract a unique key for a given item at the specified index. Key is used for caching
and as the react key to track item re-ordering. The default extractor checks item.key, then
falls back to using the index, like react does. Note that this sets keys for each item, but
each overall section still needs its own key.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="legacyimplementation"></a>legacyImplementation?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#legacyimplementation">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType"><span>?(info: {distanceFromEnd: number}) =&gt; void</span></span> <a class="hash-link" href="docs/sectionlist.html#onendreached">#</a></h4><div><p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered
content.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/sectionlist.html#onendreachedthreshold">#</a></h4><div><p>How far from the end (in units of visible length of the list) the bottom edge of the
list must be from the end of the content to trigger the <code>onEndReached</code> callback.
Thus a value of 0.5 will trigger <code>onEndReached</code> when the end of the content is
within half the visible length of the list.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType"><span>?() =&gt; void</span></span> <a class="hash-link" href="docs/sectionlist.html#onrefresh">#</a></h4><div><p>If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onviewableitemschanged"></a>onViewableItemsChanged?: <span class="propType"><span>?(info: {
viewableItems: Array&lt;ViewToken&gt;,
changed: Array&lt;ViewToken&gt;,
}) =&gt; void</span></span> <a class="hash-link" href="docs/sectionlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/sectionlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/sectionlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {
item: Item,
index: number,
section: SectionT,
separators: {
highlight: () =&gt; void,
unhighlight: () =&gt; void,
updateProps: (select: 'leading' | 'trailing', newProps: Object) =&gt; void,
},
}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/sectionlist.html#renderitem">#</a></h4><div><p>Default renderer for every item in every section. Can be over-ridden on a per-section basis.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionfooter"></a>renderSectionFooter?: <span class="propType"><span>?(info: {section: SectionT}) =&gt; ?React.Element&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#rendersectionfooter">#</a></h4><div><p>Rendered at the bottom of each section.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendersectionheader"></a>renderSectionHeader?: <span class="propType"><span>?(info: {section: SectionT}) =&gt; ?React.Element&lt;any&gt;</span></span> <a class="hash-link" href="docs/sectionlist.html#rendersectionheader">#</a></h4><div><p>Rendered at the top of each section. These stick to the top of the <code>ScrollView</code> by default on
iOS. See <code>stickySectionHeadersEnabled</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="sections"></a>sections: <span class="propType">$ReadOnlyArray&lt;SectionT&gt;</span> <a class="hash-link" href="docs/sectionlist.html#sections">#</a></h4><div><p>The actual data to render, akin to the <code>data</code> prop in <a href="/react-native/docs/flatlist.html" target=""><code>&lt;FlatList&gt;</code></a>.</p><p>General shape:</p><div class="prism language-javascript">sections<span class="token punctuation">:</span> $ReadOnlyArray<span class="token operator">&lt;</span><span class="token punctuation">{</span>
data<span class="token punctuation">:</span> $ReadOnlyArray<span class="token operator">&lt;</span>SectionItem<span class="token operator">&gt;</span><span class="token punctuation">,</span>
renderItem<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">:</span> SectionItem<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token operator">?</span>React<span class="token punctuation">.</span>Element<span class="token operator">&lt;</span><span class="token operator">*</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
ItemSeparatorComponent<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token operator">?</span>ReactClass<span class="token operator">&lt;</span><span class="token punctuation">{</span>highlighted<span class="token punctuation">:</span> boolean<span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token operator">&gt;</span></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/sectionlist.html#stickysectionheadersenabled">#</a></h4><div><p>Makes section headers stick to the top of the screen until the next one pushes it off. Only
enabled by default on iOS because that is the platform standard there.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/sectionlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltolocation"></a>scrollToLocation<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/sectionlist.html#scrolltolocation">#</a></h4><div><p>Scrolls to the item at the specified <code>sectionIndex</code> and <code>itemIndex</code> (within the section)
positioned in the viewable area such that <code>viewPosition</code> 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. <code>viewOffset</code> is a
fixed number of pixels to offset the final target position, e.g. to compensate for sticky
headers.</p><p>Note: cannot scroll to locations outside the render window without specifying the
<code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/sectionlist.html#recordinteraction">#</a></h4><div><p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by
taps on items or by navigation actions.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/sectionlist.html#flashscrollindicators">#</a></h4><div><p>Displays the scroll indicators momentarily.</p></div></div></div></span></div>
docs/autogen_SegmentedControlIOS.md
-20
View File
@@ -1,20 +0,0 @@
---
id: segmentedcontrolios
title: SegmentedControlIOS
category: Components
permalink: docs/segmentedcontrolios.html
---
<div><div><p>Use <code>SegmentedControlIOS</code> to render a UISegmentedControl iOS.</p><h4><a class="anchor" name="programmatically-changing-selected-index"></a>Programmatically changing selected index <a class="hash-link" href="docs/segmentedcontrolios.html#programmatically-changing-selected-index">#</a></h4><p>The selected index can be changed on the fly by assigning the
selectIndex 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.</p><div class="prism language-javascript"><span class="token operator">&lt;</span>SegmentedControlIOS
values<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'One'</span><span class="token punctuation">,</span> <span class="token string">'Two'</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
selectedIndex<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>selectedIndex<span class="token punctuation">}</span>
onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>selectedIndex<span class="token punctuation">:</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>selectedSegmentIndex<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/segmentedcontrolios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/segmentedcontrolios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enabled"></a>enabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#enabled">#</a></h4><div><p>If false the user won't be able to interact with the control.
Default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="momentary"></a>momentary?: <span class="propType">bool</span> <a class="hash-link" href="docs/segmentedcontrolios.html#momentary">#</a></h4><div><p>If true, then selecting a segment won't persist visually.
The <code>onValueChange</code> callback will still work as expected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange?: <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onchange">#</a></h4><div><p>Callback that is called when the user taps a segment;
passes the event as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">function</span> <a class="hash-link" href="docs/segmentedcontrolios.html#onvaluechange">#</a></h4><div><p>Callback that is called when the user taps a segment;
passes the segment's value as an argument</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedindex"></a>selectedIndex?: <span class="propType">number</span> <a class="hash-link" href="docs/segmentedcontrolios.html#selectedindex">#</a></h4><div><p>The index in <code>props.values</code> of the segment to be (pre)selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType">string</span> <a class="hash-link" href="docs/segmentedcontrolios.html#tintcolor">#</a></h4><div><p>Accent color of the control.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="values"></a>values?: <span class="propType"><span>[string]</span></span> <a class="hash-link" href="docs/segmentedcontrolios.html#values">#</a></h4><div><p>The labels for the control's segment buttons, in order.</p></div></div></div></div>
docs/autogen_Settings.md
-7
View File
@@ -1,7 +0,0 @@
---
id: settings
title: Settings
category: APIs
permalink: docs/settings.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/settings.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="get"></a><span class="methodType">static </span>get<span class="methodType">(key)</span> <a class="hash-link" href="docs/settings.html#get">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="set"></a><span class="methodType">static </span>set<span class="methodType">(settings)</span> <a class="hash-link" href="docs/settings.html#set">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="watchkeys"></a><span class="methodType">static </span>watchKeys<span class="methodType">(keys, callback)</span> <a class="hash-link" href="docs/settings.html#watchkeys">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clearwatch"></a><span class="methodType">static </span>clearWatch<span class="methodType">(watchId)</span> <a class="hash-link" href="docs/settings.html#clearwatch">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/settings.html#properties">#</a></h3><div class="props"></div></span></div>
docs/autogen_Shadow Props.md
-7
View File
@@ -1,7 +0,0 @@
---
id: shadow-props
title: Shadow Props
category: APIs
permalink: docs/shadow-props.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/shadow-props.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowcolor"></a><span class="platform">ios</span>shadowColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/shadow-props.html#shadowcolor">#</a></h4><div><p>Sets the drop shadow color</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowoffset"></a><span class="platform">ios</span>shadowOffset?: <span class="propType"><span>{<span><span><span>width: number</span>, </span><span>height: number</span></span>}</span></span> <a class="hash-link" href="docs/shadow-props.html#shadowoffset">#</a></h4><div><p>Sets the drop shadow offset</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowopacity"></a><span class="platform">ios</span>shadowOpacity?: <span class="propType">number</span> <a class="hash-link" href="docs/shadow-props.html#shadowopacity">#</a></h4><div><p>Sets the drop shadow opacity (multiplied by the color's alpha component)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shadowradius"></a><span class="platform">ios</span>shadowRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/shadow-props.html#shadowradius">#</a></h4><div><p>Sets the drop shadow blur radius</p></div></div></div></div>
docs/autogen_Share.md
-10
View File
@@ -1,10 +0,0 @@
---
id: share
title: Share
category: APIs
permalink: docs/share.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/share.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="share"></a><span class="methodType">static </span>share<span class="methodType">(content, options)</span> <a class="hash-link" href="docs/share.html#share">#</a></h4><div><p>Open a dialog to share text content.</p><p>In iOS, Returns a Promise which will be invoked an object containing <code>action</code>, <code>activityType</code>.
If the user dismissed the dialog, the Promise will still be resolved with action being <code>Share.dismissedAction</code>
and all the other keys being undefined.</p><p>In Android, Returns a Promise which always be resolved with action being <code>Share.sharedAction</code>.</p><h3><a class="anchor" name="content"></a>Content <a class="hash-link" href="docs/share.html#content">#</a></h3><ul><li><code>message</code> - a message to share</li><li><code>title</code> - title of the message</li></ul><h4><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/share.html#ios">#</a></h4><ul><li><code>url</code> - an URL to share</li></ul><p>At least one of URL and message is required.</p><h3><a class="anchor" name="options"></a>Options <a class="hash-link" href="docs/share.html#options">#</a></h3><h4><a class="anchor" name="ios"></a>iOS <a class="hash-link" href="docs/share.html#ios">#</a></h4><ul><li><code>excludedActivityTypes</code></li><li><code>tintColor</code></li></ul><h4><a class="anchor" name="android"></a>Android <a class="hash-link" href="docs/share.html#android">#</a></h4><ul><li><code>dialogTitle</code></li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sharedaction"></a><span class="methodType">static </span>sharedAction<span class="methodType">()</span> <a class="hash-link" href="docs/share.html#sharedaction">#</a></h4><div><p>The content was successfully shared.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="dismissedaction"></a><span class="methodType">static </span>dismissedAction<span class="methodType">()</span> <a class="hash-link" href="docs/share.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.
@platform ios</p></div></div></div></span></div>
docs/autogen_Slider.md
-21
View File
@@ -1,21 +0,0 @@
---
id: slider
title: Slider
category: Components
permalink: docs/slider.html
---
<div><div><p>A component used to select a single value from a range of values.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/slider.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/slider.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/slider.html#disabled">#</a></h4><div><p>If true the user won't be able to move the slider.
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumtracktintcolor"></a>maximumTrackTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/slider.html#maximumtracktintcolor">#</a></h4><div><p>The color used for the track to the right of the button.
Overrides the default blue gradient image on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumvalue"></a>maximumValue?: <span class="propType">number</span> <a class="hash-link" href="docs/slider.html#maximumvalue">#</a></h4><div><p>Initial maximum value of the slider. Default value is 1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumtracktintcolor"></a>minimumTrackTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/slider.html#minimumtracktintcolor">#</a></h4><div><p>The color used for the track to the left of the button.
Overrides the default blue gradient image on iOS.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumvalue"></a>minimumValue?: <span class="propType">number</span> <a class="hash-link" href="docs/slider.html#minimumvalue">#</a></h4><div><p>Initial minimum value of the slider. Default value is 0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onslidingcomplete"></a>onSlidingComplete?: <span class="propType">function</span> <a class="hash-link" href="docs/slider.html#onslidingcomplete">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">function</span> <a class="hash-link" href="docs/slider.html#onvaluechange">#</a></h4><div><p>Callback continuously called while the user is dragging the slider.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="step"></a>step?: <span class="propType">number</span> <a class="hash-link" href="docs/slider.html#step">#</a></h4><div><p>Step value of the slider. The value should be
between 0 and (maximumValue - minimumValue).
Default value is 0.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/slider.html#style">#</a></h4><div><p>Used to style and layout the <code>Slider</code>. See <code>StyleSheet.js</code> and
<code>ViewStylePropTypes.js</code> for more info.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/slider.html#testid">#</a></h4><div><p>Used to locate this view in UI automation tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value?: <span class="propType">number</span> <a class="hash-link" href="docs/slider.html#value">#</a></h4><div><p>Initial value of the slider. The value should be between minimumValue
and maximumValue, which default to 0 and 1 respectively.
Default value is 0.</p><p><em>This is not a controlled component</em>, you don't need to update the
value during dragging.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbtintcolor"></a><span class="platform">android</span>thumbTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/slider.html#thumbtintcolor">#</a></h4><div><p>Color of the foreground switch grip.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maximumtrackimage"></a><span class="platform">ios</span>maximumTrackImage?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/slider.html#maximumtrackimage">#</a></h4><div><p>Assigns a maximum track image. Only static images are supported. The
leftmost pixel of the image will be stretched to fill the track.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumtrackimage"></a><span class="platform">ios</span>minimumTrackImage?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/slider.html#minimumtrackimage">#</a></h4><div><p>Assigns a minimum track image. Only static images are supported. The
rightmost pixel of the image will be stretched to fill the track.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbimage"></a><span class="platform">ios</span>thumbImage?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/slider.html#thumbimage">#</a></h4><div><p>Sets an image for the thumb. Only static images are supported.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="trackimage"></a><span class="platform">ios</span>trackImage?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/slider.html#trackimage">#</a></h4><div><p>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.</p></div></div></div></div>
docs/autogen_SnapshotViewIOS.md
-7
View File
@@ -1,7 +0,0 @@
---
id: snapshotviewios
title: SnapshotViewIOS
category: Components
permalink: docs/snapshotviewios.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/snapshotviewios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/snapshotviewios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsnapshotready"></a>onSnapshotReady?: <span class="propType">Function</span> <a class="hash-link" href="docs/snapshotviewios.html#onsnapshotready">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testidentifier"></a>testIdentifier?: <span class="propType">string</span> <a class="hash-link" href="docs/snapshotviewios.html#testidentifier">#</a></h4></div></div></div>
docs/autogen_StatusBar.md
-32
View File
@@ -1,32 +0,0 @@
---
id: statusbar
title: StatusBar
category: Components
permalink: docs/statusbar.html
---
<div><div><p>Component to control the app status bar.</p><h3><a class="anchor" name="usage-with-navigator"></a>Usage with Navigator <a class="hash-link" href="docs/statusbar.html#usage-with-navigator">#</a></h3><p>It is possible to have multiple <code>StatusBar</code> components mounted at the same
time. The props will be merged in the order the <code>StatusBar</code> components were
mounted. One use case is to specify status bar styles per route using <code>Navigator</code>.</p><div class="prism language-javascript"> <span class="token operator">&lt;</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>StatusBar
backgroundColor<span class="token operator">=</span><span class="token string">"blue"</span>
barStyle<span class="token operator">=</span><span class="token string">"light-content"</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Navigator
initialRoute<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>statusBarHidden<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
renderScene<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>route<span class="token punctuation">,</span> navigator<span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
<span class="token operator">&lt;</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>StatusBar hidden<span class="token operator">=</span><span class="token punctuation">{</span>route<span class="token punctuation">.</span>statusBarHidden<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">...</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span></div><h3><a class="anchor" name="imperative-api"></a>Imperative API <a class="hash-link" href="docs/statusbar.html#imperative-api">#</a></h3><p>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.</p><h3><a class="anchor" name="constants"></a>Constants <a class="hash-link" href="docs/statusbar.html#constants">#</a></h3><p><code>currentHeight</code> (Android only) The height of the status bar.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/statusbar.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#animated">#</a></h4><div><p>If the transition between status bar property changes should be animated.
Supported for backgroundColor, barStyle and hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="barstyle"></a>barStyle?: <span class="propType"><span><span>literal | </span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/statusbar.html#barstyle">#</a></h4><div><p>Sets the color of the status bar text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hidden"></a>hidden?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#hidden">#</a></h4><div><p>If the status bar is hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a><span class="platform">android</span>backgroundColor?: <span class="propType">string</span> <a class="hash-link" href="docs/statusbar.html#backgroundcolor">#</a></h4><div><p>The background color of the status bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a><span class="platform">android</span>translucent?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#translucent">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="networkactivityindicatorvisible"></a><span class="platform">ios</span>networkActivityIndicatorVisible?: <span class="propType">boolean</span> <a class="hash-link" href="docs/statusbar.html#networkactivityindicatorvisible">#</a></h4><div><p>If the network activity indicator should be visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showhidetransition"></a><span class="platform">ios</span>showHideTransition?: <span class="propType"><span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/statusbar.html#showhidetransition">#</a></h4><div><p>The transition effect when showing and hiding the status bar using the <code>hidden</code>
prop. Defaults to 'fade'.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/statusbar.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sethidden"></a><span class="methodType">static </span>setHidden<span class="methodType">(hidden: boolean, animation?: StatusBarAnimation)</span> <a class="hash-link" href="docs/statusbar.html#sethidden">#</a></h4><div><p>Show or hide the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>hidden<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Hide the status bar.</p></div></td></tr><tr><td>[animation]<br><br><div><span><a href="docs/statusbar.html#statusbaranimation">StatusBarAnimation</a></span></div></td><td class="description"><div><p>Optional animation when
changing the status bar hidden property.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setbarstyle"></a><span class="methodType">static </span>setBarStyle<span class="methodType">(style: StatusBarStyle, animated?: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbarstyle">#</a></h4><div><p>Set the status bar style</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>style<br><br><div><span><a href="docs/statusbar.html#statusbarstyle">StatusBarStyle</a></span></div></td><td class="description"><div><p>Status bar style to set</p></div></td></tr><tr><td>[animated]<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Animate the style change.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setnetworkactivityindicatorvisible"></a><span class="methodType">static </span>setNetworkActivityIndicatorVisible<span class="methodType">(visible: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setnetworkactivityindicatorvisible">#</a></h4><div><p>Control the visibility of the network activity indicator</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>visible<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Show the indicator.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setbackgroundcolor"></a><span class="methodType">static </span>setBackgroundColor<span class="methodType">(color: string, animated?: boolean)</span> <a class="hash-link" href="docs/statusbar.html#setbackgroundcolor">#</a></h4><div><p>Set the background color for the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>color<br><br><div><span>string</span></div></td><td class="description"><div><p>Background color.</p></div></td></tr><tr><td>[animated]<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Animate the style change.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="settranslucent"></a><span class="methodType">static </span>setTranslucent<span class="methodType">(translucent: boolean)</span> <a class="hash-link" href="docs/statusbar.html#settranslucent">#</a></h4><div><p>Control the translucency of the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>translucent<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Set as translucent.</p></div></td></tr></tbody></table></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/statusbar.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarstyle"></a>StatusBarStyle <a class="hash-link" href="docs/statusbar.html#statusbarstyle">#</a></h4><div><p>Status bar style</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td class="description"><div><p>Default status bar style (dark for iOS, light for Android)</p></div></td></tr><tr><td>light-content</td><td class="description"><div><p>Dark background, white texts and icons</p></div></td></tr><tr><td>dark-content</td><td class="description"><div><p>Light background, dark texts and icons</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbaranimation"></a>StatusBarAnimation <a class="hash-link" href="docs/statusbar.html#statusbaranimation">#</a></h4><div><p>Status bar animation</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>none</td><td class="description"><div><p>No animation</p></div></td></tr><tr><td>fade</td><td class="description"><div><p>Fade animation</p></div></td></tr><tr><td>slide</td><td class="description"><div><p>Slide animation</p></div></td></tr></tbody></table></div></div></div></span></div>
docs/autogen_StatusBarIOS.md
-7
View File
@@ -1,7 +0,0 @@
---
id: statusbarios
title: StatusBarIOS
category: APIs
permalink: docs/statusbarios.html
---
<div><div><p>Use <code>StatusBar</code> for mutating the status bar.</p></div></div>
docs/autogen_StyleSheet.md
-70
View File
@@ -1,70 +0,0 @@
---
id: stylesheet
title: StyleSheet
category: APIs
permalink: docs/stylesheet.html
---
<div><div><p>A StyleSheet is an abstraction similar to CSS StyleSheets</p><p>Create a new StyleSheet:</p><div class="prism language-javascript"><span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
borderRadius<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
borderWidth<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
borderColor<span class="token punctuation">:</span> <span class="token string">'#d6d7da'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
title<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontSize<span class="token punctuation">:</span> <span class="token number">19</span><span class="token punctuation">,</span>
fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
activeTitle<span class="token punctuation">:</span> <span class="token punctuation">{</span>
color<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Use a StyleSheet:</p><div class="prism language-javascript"><span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>isActive <span class="token operator">&amp;&amp;</span> styles<span class="token punctuation">.</span>activeTitle<span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span></div><p>Code quality:</p><ul><li>By moving styles away from the render function, you're making the code
easier to understand.</li><li>Naming the styles is a good way to add meaning to the low level components
in the render function.</li></ul><p>Performance:</p><ul><li>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.</li><li>It also allows to send the style only once through the bridge. All
subsequent uses are going to refer an id (not implemented yet).</li></ul></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/stylesheet.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setstyleattributepreprocessor"></a><span class="methodType">static </span>setStyleAttributePreprocessor<span class="methodType">(property, process)</span> <a class="hash-link" href="docs/stylesheet.html#setstyleattributepreprocessor">#</a></h4><div><p>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.</p><p>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.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="create"></a><span class="methodType">static </span>create<span class="methodType">(obj)</span> <a class="hash-link" href="docs/stylesheet.html#create">#</a></h4><div><p>Creates a StyleSheet style reference from the given object.</p></div></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/stylesheet.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="hairlinewidth"></a>hairlineWidth<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/stylesheet.html#hairlinewidth">#</a></h4><div><p>This is defined as the width of a thin line on the platform. It can be
used as the thickness of a border or division between two elements.
Example:</p><div class="prism language-javascript"> <span class="token punctuation">{</span>
borderBottomColor<span class="token punctuation">:</span> <span class="token string">'#bbb'</span><span class="token punctuation">,</span>
borderBottomWidth<span class="token punctuation">:</span> StyleSheet<span class="token punctuation">.</span>hairlineWidth
<span class="token punctuation">}</span></div><p>This constant will always be a round number of pixels (so a line defined
by it look crisp) and will try to match the standard width of a thin line
on the underlying platform. However, you should not rely on it being a
constant size, because on different platforms and screen densities its
value may be calculated differently.</p><p>A line with hairline width may not be visible if your simulator is downscaled.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="absolutefill"></a>absoluteFill<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/stylesheet.html#absolutefill">#</a></h4><div><p>A very common pattern is to create overlays with position absolute and zero positioning,
so <code>absoluteFill</code> can be used for convenience and to reduce duplication of these repeated
styles.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="absolutefillobject"></a>absoluteFillObject<span class="propType">: ObjectExpression</span> <a class="hash-link" href="docs/stylesheet.html#absolutefillobject">#</a></h4><div><p>Sometimes you may want <code>absoluteFill</code> but with a couple tweaks - <code>absoluteFillObject</code> can be
used to create a customized entry in a <code>StyleSheet</code>, e.g.:</p><p> const styles = StyleSheet.create({
wrapper: {
...StyleSheet.absoluteFillObject,
top: 10,
backgroundColor: 'transparent',
},
});</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="flatten"></a>flatten<span class="propType">: CallExpression</span> <a class="hash-link" href="docs/stylesheet.html#flatten">#</a></h4><div><p>Flattens an array of style objects, into one aggregated style object.
Alternatively, this method can be used to lookup IDs, returned by
StyleSheet.register.</p><blockquote><p><strong>NOTE</strong>: Exercise caution as abusing this can tax you in terms of
optimizations.</p><p>IDs enable optimizations through the bridge and memory in general. Refering
to style objects directly will deprive you of these optimizations.</p></blockquote><p>Example:</p><div class="prism language-javascript"><span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
listItem<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
fontSize<span class="token punctuation">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
color<span class="token punctuation">:</span> <span class="token string">'white'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
selectedListItem<span class="token punctuation">:</span> <span class="token punctuation">{</span>
color<span class="token punctuation">:</span> <span class="token string">'green'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
StyleSheet<span class="token punctuation">.</span><span class="token function">flatten</span><span class="token punctuation">(</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>listItem<span class="token punctuation">,</span> styles<span class="token punctuation">.</span>selectedListItem<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token comment" spellcheck="true">
// returns { flex: 1, fontSize: 16, color: 'green' }</span></div><p>Alternative use:</p><div class="prism language-javascript">StyleSheet<span class="token punctuation">.</span><span class="token function">flatten</span><span class="token punctuation">(</span>styles<span class="token punctuation">.</span>listItem<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
// return { flex: 1, fontSize: 16, color: 'white' }
</span><span class="token comment" spellcheck="true">// Simply styles.listItem would return its ID (number)</span></div><p>This method internally uses <code>StyleSheetRegistry.getStyleByID(style)</code>
to resolve style objects represented by IDs. Thus, an array of style
objects (instances of StyleSheet.create), are individually resolved to,
their respective objects, merged as one and then returned. This also explains
the alternative use.</p></div></div></div></span></div>
docs/autogen_Switch.md
-13
View File
@@ -1,13 +0,0 @@
---
id: switch
title: Switch
category: Components
permalink: docs/switch.html
---
<div><div><p>Renders a boolean input.</p><p>This is a controlled component that requires an <code>onValueChange</code> callback that
updates the <code>value</code> prop in order for the component to reflect user actions.
If the <code>value</code> prop is not updated, the component will continue to render
the supplied <code>value</code> prop instead of the expected result of any user actions.</p><p>@keyword checkbox
@keyword toggle</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/switch.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/switch.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/switch.html#disabled">#</a></h4><div><p>If true the user won't be able to toggle the switch.
Default value is false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ontintcolor"></a>onTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#ontintcolor">#</a></h4><div><p>Background color when the switch is turned on.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onvaluechange"></a>onValueChange?: <span class="propType">function</span> <a class="hash-link" href="docs/switch.html#onvaluechange">#</a></h4><div><p>Invoked with the new value when the value changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/switch.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thumbtintcolor"></a>thumbTintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#thumbtintcolor">#</a></h4><div><p>Color of the foreground switch grip.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/switch.html#tintcolor">#</a></h4><div><p>Border color on iOS and background color on Android when the switch is turned off.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value?: <span class="propType">bool</span> <a class="hash-link" href="docs/switch.html#value">#</a></h4><div><p>The value of the switch. If true the switch will be turned on.
Default value is false.</p></div></div></div></div>
docs/autogen_Systrace.md
-18
View File
@@ -1,18 +0,0 @@
---
id: systrace
title: Systrace
category: APIs
permalink: docs/systrace.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/systrace.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getusertimingpolyfill"></a><span class="methodType">static </span>getUserTimingPolyfill<span class="methodType">()</span> <a class="hash-link" href="docs/systrace.html#getusertimingpolyfill">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setenabled"></a><span class="methodType">static </span>setEnabled<span class="methodType">(enabled)</span> <a class="hash-link" href="docs/systrace.html#setenabled">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="isenabled"></a><span class="methodType">static </span>isEnabled<span class="methodType">()</span> <a class="hash-link" href="docs/systrace.html#isenabled">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="beginevent"></a><span class="methodType">static </span>beginEvent<span class="methodType">(profileName?, args?)</span> <a class="hash-link" href="docs/systrace.html#beginevent">#</a></h4><div><p>beginEvent/endEvent for starting and then ending a profile within the same call stack frame</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="endevent"></a><span class="methodType">static </span>endEvent<span class="methodType">()</span> <a class="hash-link" href="docs/systrace.html#endevent">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="beginasyncevent"></a><span class="methodType">static </span>beginAsyncEvent<span class="methodType">(profileName?)</span> <a class="hash-link" href="docs/systrace.html#beginasyncevent">#</a></h4><div><p>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</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="endasyncevent"></a><span class="methodType">static </span>endAsyncEvent<span class="methodType">(profileName?, cookie?)</span> <a class="hash-link" href="docs/systrace.html#endasyncevent">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="counterevent"></a><span class="methodType">static </span>counterEvent<span class="methodType">(profileName?, value?)</span> <a class="hash-link" href="docs/systrace.html#counterevent">#</a></h4><div><p>counterEvent registers the value to the profileName on the systrace timeline</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="attachtorelayprofiler"></a><span class="methodType">static </span>attachToRelayProfiler<span class="methodType">(relayProfiler)</span> <a class="hash-link" href="docs/systrace.html#attachtorelayprofiler">#</a></h4><div><p>Relay profiles use await calls, so likely occur out of current stack frame
therefore async variant of profiling is used</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="swizzlejson"></a><span class="methodType">static </span>swizzleJSON<span class="methodType">()</span> <a class="hash-link" href="docs/systrace.html#swizzlejson">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="measuremethods"></a><span class="methodType">static </span>measureMethods<span class="methodType">(object, objectName, methodNames)</span> <a class="hash-link" href="docs/systrace.html#measuremethods">#</a></h4><div><p>Measures multiple methods of a class. For example, you can do:
Systrace.measureMethods(JSON, 'JSON', ['parse', 'stringify']);</p><p>@param object
@param objectName
@param methodNames Map from method names to method display names.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="measure"></a><span class="methodType">static </span>measure<span class="methodType">(objName, fnName, func)</span> <a class="hash-link" href="docs/systrace.html#measure">#</a></h4><div><p>Returns an profiled version of the input function. For example, you can:
JSON.parse = Systrace.measure('JSON', 'parse', JSON.parse);</p><p>@param objName
@param fnName
@param {function} func
@return {function} replacement function</p></div></div></div></span></div>
docs/autogen_TabBarIOS.Item.md
-15
View File
@@ -1,15 +0,0 @@
---
id: tabbarios-item
title: TabBarIOS.Item
category: Components
permalink: docs/tabbarios-item.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/tabbarios-item.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/tabbarios-item.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="badge"></a>badge?: <span class="propType"><span><span>string, </span>number</span></span> <a class="hash-link" href="docs/tabbarios-item.html#badge">#</a></h4><div><p>Little red bubble that sits at the top right of the icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="badgecolor"></a>badgeColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/tabbarios-item.html#badgecolor">#</a></h4><div><p>Background color for the badge. Available since iOS 10.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="icon"></a>icon?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/tabbarios-item.html#icon">#</a></h4><div><p>A custom icon for the tab. It is ignored when a system icon is defined.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress?: <span class="propType">function</span> <a class="hash-link" href="docs/tabbarios-item.html#onpress">#</a></h4><div><p>Callback when this tab is being selected, you should change the state of your
component to set selected={true}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderasoriginal"></a>renderAsOriginal?: <span class="propType">bool</span> <a class="hash-link" href="docs/tabbarios-item.html#renderasoriginal">#</a></h4><div><p>If set to true it renders the image as original,
it defaults to being displayed as a template</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selected"></a>selected?: <span class="propType">bool</span> <a class="hash-link" href="docs/tabbarios-item.html#selected">#</a></h4><div><p>It specifies whether the children are visible or not. If you see a
blank content, you probably forgot to add a selected one.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectedicon"></a>selectedIcon?: <span class="propType">Image.propTypes.source</span> <a class="hash-link" href="docs/tabbarios-item.html#selectedicon">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/tabbarios-item.html#style">#</a></h4><div><p>React style object.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="systemicon"></a>systemIcon?: <span class="propType">enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated')</span> <a class="hash-link" href="docs/tabbarios-item.html#systemicon">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title?: <span class="propType">string</span> <a class="hash-link" href="docs/tabbarios-item.html#title">#</a></h4><div><p>Text that appears under the icon. It is ignored when a system icon
is defined.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="istvselectable"></a><span class="platform">ios</span>isTVSelectable?: <span class="propType">bool</span> <a class="hash-link" href="docs/tabbarios-item.html#istvselectable">#</a></h4><div><p>(Apple TV only)* When set to true, this view will be focusable
and navigable using the Apple TV remote.</p></div></div></div></div>
docs/autogen_TabBarIOS.md
-13
View File
@@ -1,13 +0,0 @@
---
id: tabbarios
title: TabBarIOS
category: Components
permalink: docs/tabbarios.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/tabbarios.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/tabbarios.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bartintcolor"></a>barTintColor?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/tabbarios.html#bartintcolor">#</a></h4><div><p>Background color of the tab bar</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="itempositioning"></a>itemPositioning?: <span class="propType"><span><span>literal | </span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/tabbarios.html#itempositioning">#</a></h4><div><p>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 <code>fill</code>, in a horizontally regular one (e.g. iPad)
it defaults to center.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/tabbarios.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tintcolor"></a>tintColor?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/tabbarios.html#tintcolor">#</a></h4><div><p>Color of the currently selected tab icon</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a>translucent?: <span class="propType">boolean</span> <a class="hash-link" href="docs/tabbarios.html#translucent">#</a></h4><div><p>A Boolean value that indicates whether the tab bar is translucent</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="unselecteditemtintcolor"></a>unselectedItemTintColor?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/tabbarios.html#unselecteditemtintcolor">#</a></h4><div><p>Color of unselected tab icons. Available since iOS 10.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="unselectedtintcolor"></a>unselectedTintColor?: <span class="propType">$FlowFixMe</span> <a class="hash-link" href="docs/tabbarios.html#unselectedtintcolor">#</a></h4><div><p>Color of text on unselected tabs</p></div></div></div></div>
docs/autogen_Text.md
-67
View File
@@ -1,67 +0,0 @@
---
id: text
title: Text
category: Components
permalink: docs/text.html
---
<div><div><p>A React component for displaying text.</p><p><code>Text</code> supports nesting, styling, and touch handling.</p><p>In the following example, the nested title and body text will inherit the <code>fontFamily</code> from
<code>styles.baseText</code>, but the title provides its own additional styles. The title and body will
stack on top of each other on account of the literal newlines:</p><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> Text<span class="token punctuation">,</span> StyleSheet <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">TextInANest</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
titleText<span class="token punctuation">:</span> <span class="token string">"Bird's Nest"</span><span class="token punctuation">,</span>
bodyText<span class="token punctuation">:</span> <span class="token string">'This is not really a bird nest.'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>baseText<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>titleText<span class="token punctuation">}</span> onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onPressTitle<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>titleText<span class="token punctuation">}</span><span class="token punctuation">{</span><span class="token string">'\n'</span><span class="token punctuation">}</span><span class="token punctuation">{</span><span class="token string">'\n'</span><span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text numberOfLines<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bodyText<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
baseText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontFamily<span class="token punctuation">:</span> <span class="token string">'Cochin'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
titleText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">
// skip this line if using Create React Native App
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'TextInANest'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> TextInANest<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20StyleSheet%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20TextInANest%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20titleText%3A%20%22Bird's%20Nest%22%2C%0A%20%20%20%20%20%20bodyText%3A%20'This%20is%20not%20really%20a%20bird%20nest.'%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.baseText%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.titleText%7D%20onPress%3D%7Bthis.onPressTitle%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.titleText%7D%7B'%5Cn'%7D%7B'%5Cn'%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20numberOfLines%3D%7B5%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.bodyText%7D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20baseText%3A%20%7B%0A%20%20%20%20fontFamily%3A%20'Cochin'%2C%0A%20%20%7D%2C%0A%20%20titleText%3A%20%7B%0A%20%20%20%20fontSize%3A%2020%2C%0A%20%20%20%20fontWeight%3A%20'bold'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('TextInANest'%2C%20()%20%3D%3E%20TextInANest)%3B" frameborder="0"></iframe></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/text.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#accessible">#</a></h4><div><p>When set to <code>true</code>, indicates that the view is an accessibility element. The default value
for a <code>Text</code> element is <code>true</code>.</p><p>See the
<a href="docs/accessibility.html#accessible-ios-android" target="_blank">Accessibility guide</a>
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowfontscaling"></a>allowFontScaling?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#allowfontscaling">#</a></h4><div><p>Specifies whether fonts should scale to respect Text Size accessibility settings. The
default is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="ellipsizemode"></a>ellipsizeMode?: <span class="propType">enum('head', 'middle', 'tail', 'clip')</span> <a class="hash-link" href="docs/text.html#ellipsizemode">#</a></h4><div><p>When <code>numberOfLines</code> is set, this prop defines how text will be truncated.
<code>numberOfLines</code> must be set in conjunction with this prop.</p><p>This can be one of the following values:</p><ul><li><code>head</code> - The line is displayed so that the end fits in the container and the missing text
at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"</li><li><code>middle</code> - The line is displayed so that the beginning and end fit in the container and the
missing text in the middle is indicated by an ellipsis glyph. "ab...yz"</li><li><code>tail</code> - The line is displayed so that the beginning fits in the container and the
missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."</li><li><code>clip</code> - Lines are not drawn past the edge of the text container.</li></ul><p>The default is <code>tail</code>.</p><blockquote><p><code>clip</code> is working only for iOS</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">string</span> <a class="hash-link" href="docs/text.html#nativeid">#</a></h4><div><p>Used to locate this view from native code.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a>numberOfLines?: <span class="propType">number</span> <a class="hash-link" href="docs/text.html#numberoflines">#</a></h4><div><p>Used to truncate the text with an ellipsis after computing the text
layout, including line wrapping, such that the total number of lines
does not exceed this number.</p><p>This prop is commonly used with <code>ellipsizeMode</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress?: <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onlongpress">#</a></h4><div><p>This function is called on long press.</p><p>e.g., <code>onLongPress={this.increaseSize}&gt;</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress?: <span class="propType">function</span> <a class="hash-link" href="docs/text.html#onpress">#</a></h4><div><p>This function is called on press.</p><p>e.g., <code>onPress={() =&gt; console.log('1st')}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pressretentionoffset"></a>pressRetentionOffset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/text.html#pressretentionoffset">#</a></h4><div><p>When the scroll view is disabled, this defines how far your touch may
move off of the button, before deactivating the button. Once deactivated,
try moving it back and you'll see that the button is once again
reactivated! Move it back and forth several times while the scroll view
is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectable"></a>selectable?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#selectable">#</a></h4><div><p>Lets the user select text, to use the native copy and paste functionality.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/text.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/view.html#style">View#style...</a></h6></div><div class="prop"><h6 class="propTitle">color <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">fontFamily <span class="propType">string</span> </h6></div><div class="prop"><h6 class="propTitle">fontSize <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">fontStyle <span class="propType">enum('normal', 'italic')</span> </h6></div><div class="prop"><h6 class="propTitle">fontWeight <span class="propType">enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')</span> <div><p>Specifies font weight. The values 'normal' and 'bold' are supported for
most fonts. Not all fonts have a variant for each of the numeric values,
in that case the closest one is chosen.</p></div></h6></div><div class="prop"><h6 class="propTitle">lineHeight <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">textAlign <span class="propType">enum('auto', 'left', 'right', 'center', 'justify')</span> <div><p>Specifies text alignment. The value 'justify' is only supported on iOS and
fallbacks to <code>left</code> on Android.</p></div></h6></div><div class="prop"><h6 class="propTitle">textDecorationLine <span class="propType">enum('none', 'underline', 'line-through', 'underline line-through')</span> </h6></div><div class="prop"><h6 class="propTitle">textShadowColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowOffset <span class="propType"><span>{<span><span><span>width: number</span>, </span><span>height: number</span></span>}</span></span> </h6></div><div class="prop"><h6 class="propTitle">textShadowRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>includeFontPadding <span class="propType">bool</span> <div><p>Set to <code>false</code> to remove extra font padding intended to make space for certain ascenders / descenders.
With some fonts, this padding can make text look slightly misaligned when centered vertically.
For best results also set <code>textAlignVertical</code> to <code>center</code>. Default is true.</p></div></h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>textAlignVertical <span class="propType">enum('auto', 'top', 'bottom', 'center')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>fontVariant <span class="propType"><span>[enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]</span></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>letterSpacing <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>textDecorationStyle <span class="propType">enum('solid', 'double', 'dotted', 'dashed')</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">ios</span>writingDirection <span class="propType">enum('auto', 'ltr', 'rtl')</span> </h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/text.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a><span class="platform">android</span>disabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#disabled">#</a></h4><div><p>Specifies the disabled state of the text view for testing purposes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a><span class="platform">android</span>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/text.html#selectioncolor">#</a></h4><div><p>The highlight color of the text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">enum('simple', 'highQuality', 'balanced')</span> <a class="hash-link" href="docs/text.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
The default value is <code>highQuality</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="adjustsfontsizetofit"></a><span class="platform">ios</span>adjustsFontSizeToFit?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#adjustsfontsizetofit">#</a></h4><div><p>Specifies whether font should be scaled down automatically to fit given style constraints.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="minimumfontscale"></a><span class="platform">ios</span>minimumFontScale?: <span class="propType">number</span> <a class="hash-link" href="docs/text.html#minimumfontscale">#</a></h4><div><p>Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="suppresshighlighting"></a><span class="platform">ios</span>suppressHighlighting?: <span class="propType">bool</span> <a class="hash-link" href="docs/text.html#suppresshighlighting">#</a></h4><div><p>When <code>true</code>, no visual change is made when text is pressed down. By
default, a gray oval highlights the text on press down.</p></div></div></div></div>
docs/autogen_TextInput.md
-139
View File
@@ -1,139 +0,0 @@
---
id: textinput
title: TextInput
category: Components
permalink: docs/textinput.html
---
<div><div><p>A foundational component for inputting text into the app via a
keyboard. Props provide configurability for several features, such as
auto-correction, auto-capitalization, placeholder text, and different keyboard
types, such as a numeric keypad.</p><p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the
<code>onChangeText</code> events to read the user input. There are also other events,
such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple
example:</p><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> TextInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">UselessTextInput</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> text<span class="token punctuation">:</span> <span class="token string">'Useless Placeholder'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TextInput
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>height<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">,</span> borderColor<span class="token punctuation">:</span> <span class="token string">'gray'</span><span class="token punctuation">,</span> borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>text<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">
// skip this line if using Create React Native App
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span><span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> UselessTextInput<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20UselessTextInput%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%20text%3A%20'Useless%20Placeholder'%20%7D%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bheight%3A%2040%2C%20borderColor%3A%20'gray'%2C%20borderWidth%3A%201%7D%7D%0A%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20value%3D%7Bthis.state.text%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20this%20line%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent('AwesomeProject'%2C%20()%20%3D%3E%20UselessTextInput)%3B" frameborder="0"></iframe></div><p>Note that some props are only available with <code>multiline={true/false}</code>.
Additionally, border styles that apply to only one side of the element
(e.g., <code>borderBottomColor</code>, <code>borderLeftWidth</code>, etc.) will not be applied if
<code>multiline=false</code>. To achieve the same effect, you can wrap your <code>TextInput</code>
in a <code>View</code>:</p><div class="web-player"><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRegistry<span class="token punctuation">,</span> View<span class="token punctuation">,</span> TextInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">UselessTextInput</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TextInput
<span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">}</span><span class="token comment" spellcheck="true"> // Inherit any props passed to it; e.g., multiline, numberOfLines below
</span> editable <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
maxLength <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">40</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">class</span> <span class="token class-name">UselessTextInputMultiline</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
text<span class="token punctuation">:</span> <span class="token string">'Useless Multiline Placeholder'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true"> // If you type something in the text box that is a color, the background will change to that
</span> <span class="token comment" spellcheck="true"> // color.
</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>text<span class="token punctuation">,</span>
borderBottomColor<span class="token punctuation">:</span> <span class="token string">'#000000'</span><span class="token punctuation">,</span>
borderBottomWidth<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>UselessTextInput
multiline <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
numberOfLines <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span>
onChangeText<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>text<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">
// skip these lines if using Create React Native App
</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent</span><span class="token punctuation">(</span>
<span class="token string">'AwesomeProject'</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> UselessTextInputMultiline
<span class="token punctuation">)</span><span class="token punctuation">;</span></div><iframe style="margin-top:4px;" width="880" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.2.6/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20View%2C%20TextInput%20%7D%20from%20'react-native'%3B%0A%0Aclass%20UselessTextInput%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20%7B...this.props%7D%20%2F%2F%20Inherit%20any%20props%20passed%20to%20it%3B%20e.g.%2C%20multiline%2C%20numberOfLines%20below%0A%20%20%20%20%20%20%20%20editable%20%3D%20%7Btrue%7D%0A%20%20%20%20%20%20%20%20maxLength%20%3D%20%7B40%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20class%20UselessTextInputMultiline%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20text%3A%20'Useless%20Multiline%20Placeholder'%2C%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%0A%20%20%2F%2F%20If%20you%20type%20something%20in%20the%20text%20box%20that%20is%20a%20color%2C%20the%20background%20will%20change%20to%20that%0A%20%20%2F%2F%20color.%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%3CView%20style%3D%7B%7B%0A%20%20%20%20%20%20%20backgroundColor%3A%20this.state.text%2C%0A%20%20%20%20%20%20%20borderBottomColor%3A%20'%23000000'%2C%0A%20%20%20%20%20%20%20borderBottomWidth%3A%201%20%7D%7D%0A%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%3CUselessTextInput%0A%20%20%20%20%20%20%20%20%20multiline%20%3D%20%7Btrue%7D%0A%20%20%20%20%20%20%20%20%20numberOfLines%20%3D%20%7B4%7D%0A%20%20%20%20%20%20%20%20%20onChangeText%3D%7B(text)%20%3D%3E%20this.setState(%7Btext%7D)%7D%0A%20%20%20%20%20%20%20%20%20value%3D%7Bthis.state.text%7D%0A%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0A%2F%2F%20skip%20these%20lines%20if%20using%20Create%20React%20Native%20App%0AAppRegistry.registerComponent(%0A%20'AwesomeProject'%2C%0A%20()%20%3D%3E%20UselessTextInputMultiline%0A)%3B" frameborder="0"></iframe></div><p><code>TextInput</code> has by default a border at the bottom of its view. This border
has its padding set by the background image provided by the system, and it
cannot be changed. Solutions to avoid this is to either not set height
explicitly, case in which the system will take care of displaying the border
in the correct position, or to not display the border by setting
<code>underlineColorAndroid</code> to transparent.</p><p>Note that on Android performing text selection in input can change
app's activity <code>windowSoftInputMode</code> param to <code>adjustResize</code>.
This may cause issues with components that have position: 'absolute'
while keyboard is active. To avoid this behavior either specify <code>windowSoftInputMode</code>
in AndroidManifest.xml ( <a href="https://developer.android.com/guide/topics/manifest/activity-element.html">https://developer.android.com/guide/topics/manifest/activity-element.html</a> )
or control this param programmatically with native code.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/textinput.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/textinput.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocapitalize"></a>autoCapitalize?: <span class="propType">enum('none', 'sentences', 'words', 'characters')</span> <a class="hash-link" href="docs/textinput.html#autocapitalize">#</a></h4><div><p>Can tell <code>TextInput</code> to automatically capitalize certain characters.</p><ul><li><code>characters</code>: all characters.</li><li><code>words</code>: first letter of each word.</li><li><code>sentences</code>: first letter of each sentence (<em>default</em>).</li><li><code>none</code>: don't auto capitalize anything.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autocorrect"></a>autoCorrect?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#autocorrect">#</a></h4><div><p>If <code>false</code>, disables auto-correct. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="autofocus"></a>autoFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#autofocus">#</a></h4><div><p>If <code>true</code>, focuses the input on <code>componentDidMount</code>.
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bluronsubmit"></a>blurOnSubmit?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#bluronsubmit">#</a></h4><div><p>If <code>true</code>, the text field will blur when submitted.
The default value is true for single-line fields and false for
multiline fields. Note that for multiline fields, setting <code>blurOnSubmit</code>
to <code>true</code> means that pressing return will blur the field and trigger the
<code>onSubmitEditing</code> event instead of inserting a newline into the field.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="carethidden"></a>caretHidden?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#carethidden">#</a></h4><div><p>If <code>true</code>, caret is hidden. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="defaultvalue"></a>defaultValue?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#defaultvalue">#</a></h4><div><p>Provides an initial value that will change when the user starts typing.
Useful for simple use-cases where you do not want to deal with listening
to events and updating the value prop to keep the controlled state in sync.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="editable"></a>editable?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#editable">#</a></h4><div><p>If <code>false</code>, text is not editable. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardtype"></a>keyboardType?: <span class="propType">enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')</span> <a class="hash-link" href="docs/textinput.html#keyboardtype">#</a></h4><div><p>Determines which keyboard to open, e.g.<code>numeric</code>.</p><p>The following values work across platforms:</p><ul><li><code>default</code></li><li><code>numeric</code></li><li><code>email-address</code></li><li><code>phone-pad</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxlength"></a>maxLength?: <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#maxlength">#</a></h4><div><p>Limits the maximum number of characters that can be entered. Use this
instead of implementing the logic in JS to avoid flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="multiline"></a>multiline?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#multiline">#</a></h4><div><p>If <code>true</code>, the text input can be multiple lines.
The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onblur"></a>onBlur?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onblur">#</a></h4><div><p>Callback that is called when the text input is blurred.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchange"></a>onChange?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onchange">#</a></h4><div><p>Callback that is called when the text input's text changes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onchangetext"></a>onChangeText?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onchangetext">#</a></h4><div><p>Callback that is called when the text input's text changes.
Changed text is passed as an argument to the callback handler.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oncontentsizechange"></a>onContentSizeChange?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#oncontentsizechange">#</a></h4><div><p>Callback that is called when the text input's content size changes.
This will be called with
<code>{ nativeEvent: { contentSize: { width, height } } }</code>.</p><p>Only called for multiline text inputs.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendediting"></a>onEndEditing?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onendediting">#</a></h4><div><p>Callback that is called when text input ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onfocus"></a>onFocus?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onfocus">#</a></h4><div><p>Callback that is called when the text input is focused.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with <code>{x, y, width, height}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onscroll"></a>onScroll?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onscroll">#</a></h4><div><p>Invoked on content scroll with <code>{ nativeEvent: { contentOffset: { x, y } } }</code>.
May also contain other properties from ScrollEvent but on Android contentSize
is not provided for performance reasons.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onselectionchange"></a>onSelectionChange?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onselectionchange">#</a></h4><div><p>Callback that is called when the text input selection is changed.
This will be called with
<code>{ nativeEvent: { selection: { start, end } } }</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onsubmitediting"></a>onSubmitEditing?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onsubmitediting">#</a></h4><div><p>Callback that is called when the text input's submit button is pressed.
Invalid if <code>multiline={true}</code> is specified.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholder"></a>placeholder?: <span class="propType">node</span> <a class="hash-link" href="docs/textinput.html#placeholder">#</a></h4><div><p>The string that will be rendered before text input has been entered.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="placeholdertextcolor"></a>placeholderTextColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#placeholdertextcolor">#</a></h4><div><p>The text color of the placeholder string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeytype"></a>returnKeyType?: <span class="propType">enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')</span> <a class="hash-link" href="docs/textinput.html#returnkeytype">#</a></h4><div><p>Determines how the return key should look. On Android you can also use
<code>returnKeyLabel</code>.</p><p><em>Cross platform</em></p><p>The following values work across platforms:</p><ul><li><code>done</code></li><li><code>go</code></li><li><code>next</code></li><li><code>search</code></li><li><code>send</code></li></ul><p><em>Android Only</em></p><p>The following values work on Android only:</p><ul><li><code>none</code></li><li><code>previous</code></li></ul><p><em>iOS Only</em></p><p>The following values work on iOS only:</p><ul><li><code>default</code></li><li><code>emergency-call</code></li><li><code>google</code></li><li><code>join</code></li><li><code>route</code></li><li><code>yahoo</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="securetextentry"></a>secureTextEntry?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#securetextentry">#</a></h4><div><p>If <code>true</code>, the text input obscures the text entered so that sensitive text
like passwords stay secure. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selecttextonfocus"></a>selectTextOnFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#selecttextonfocus">#</a></h4><div><p>If <code>true</code>, all text will automatically be selected on focus.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selection"></a>selection?: <span class="propType"><span>{<span><span><span>start: number</span>, </span><span>end: number</span></span>}</span></span> <a class="hash-link" href="docs/textinput.html#selection">#</a></h4><div><p>The start and end of the text input's selection. Set start and end to
the same value to position the cursor.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectioncolor"></a>selectionColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#selectioncolor">#</a></h4><div><p>The highlight and cursor color of the text input.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType"><a href="docs/text.html#style">Text#style</a></span> <a class="hash-link" href="docs/textinput.html#style">#</a></h4><div><p>Note that not all Text styles are supported,
see <a href="https://github.com/facebook/react-native/issues/7070" target="_blank">Issue#7070</a>
for more detail.</p><p><a href="docs/style.html" target="_blank">Styles</a></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>value?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#value">#</a></h4><div><p>The value to show for the text input. <code>TextInput</code> is a controlled
component, which means the native value will be forced to match this
value prop if provided. For most uses, this works great, but in some
cases this may cause flickering - one common cause is preventing edits
by keeping value the same. In addition to simply setting the same value,
either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent
unwanted edits without flicker.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablefullscreenui"></a><span class="platform">android</span>disableFullscreenUI?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#disablefullscreenui">#</a></h4><div><p>When <code>false</code>, if there is a small amount of space available around a text input
(e.g. landscape orientation on a phone), the OS may choose to have the user edit
the text inside of a full screen text input mode. When <code>true</code>, this feature is
disabled and users will always edit the text directly inside of the text input.
Defaults to <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimageleft"></a><span class="platform">android</span>inlineImageLeft?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#inlineimageleft">#</a></h4><div><p>If defined, the provided image resource will be rendered on the left.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inlineimagepadding"></a><span class="platform">android</span>inlineImagePadding?: <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#inlineimagepadding">#</a></h4><div><p>Padding between the inline image, if any, and the text input itself.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numberoflines"></a><span class="platform">android</span>numberOfLines?: <span class="propType">number</span> <a class="hash-link" href="docs/textinput.html#numberoflines">#</a></h4><div><p>Sets the number of lines for a <code>TextInput</code>. Use it with multiline set to
<code>true</code> to be able to fill the lines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="returnkeylabel"></a><span class="platform">android</span>returnKeyLabel?: <span class="propType">string</span> <a class="hash-link" href="docs/textinput.html#returnkeylabel">#</a></h4><div><p>Sets the return key to the label. Use it instead of <code>returnKeyType</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textbreakstrategy"></a><span class="platform">android</span>textBreakStrategy?: <span class="propType">enum('simple', 'highQuality', 'balanced')</span> <a class="hash-link" href="docs/textinput.html#textbreakstrategy">#</a></h4><div><p>Set text break strategy on Android API Level 23+, possible values are <code>simple</code>, <code>highQuality</code>, <code>balanced</code>
The default value is <code>simple</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlinecolorandroid"></a><span class="platform">android</span>underlineColorAndroid?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textinput.html#underlinecolorandroid">#</a></h4><div><p>The color of the <code>TextInput</code> underline.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="clearbuttonmode"></a><span class="platform">ios</span>clearButtonMode?: <span class="propType">enum('never', 'while-editing', 'unless-editing', 'always')</span> <a class="hash-link" href="docs/textinput.html#clearbuttonmode">#</a></h4><div><p>When the clear button should appear on the right side of the text view.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="cleartextonfocus"></a><span class="platform">ios</span>clearTextOnFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#cleartextonfocus">#</a></h4><div><p>If <code>true</code>, clears the text field automatically when editing begins.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType"><span><span>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), </span><span>[enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')]</span></span></span> <a class="hash-link" href="docs/textinput.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the text input.
Only valid if <code>multiline={true}</code> and <code>editable={false}</code>.
By default no data types are detected.</p><p>You can provide one type or an array of many types.</p><p>Possible values for <code>dataDetectorTypes</code> are:</p><ul><li><code>'phoneNumber'</code></li><li><code>'link'</code></li><li><code>'address'</code></li><li><code>'calendarEvent'</code></li><li><code>'none'</code></li><li><code>'all'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="enablesreturnkeyautomatically"></a><span class="platform">ios</span>enablesReturnKeyAutomatically?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#enablesreturnkeyautomatically">#</a></h4><div><p>If <code>true</code>, the keyboard disables the return key when there is no text and
automatically enables it when there is text. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboardappearance"></a><span class="platform">ios</span>keyboardAppearance?: <span class="propType">enum('default', 'light', 'dark')</span> <a class="hash-link" href="docs/textinput.html#keyboardappearance">#</a></h4><div><p>Determines the color of the keyboard.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onkeypress"></a><span class="platform">ios</span>onKeyPress?: <span class="propType">function</span> <a class="hash-link" href="docs/textinput.html#onkeypress">#</a></h4><div><p>Callback that is called when a key is pressed.
This will be called with <code>{ nativeEvent: { key: keyValue } }</code>
where <code>keyValue</code> is <code>'Enter'</code> or <code>'Backspace'</code> for respective keys and
the typed-in character otherwise including <code>' '</code> for space.
Fires before <code>onChange</code> callbacks.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="selectionstate"></a><span class="platform">ios</span>selectionState?: <span class="propType">DocumentSelectionState</span> <a class="hash-link" href="docs/textinput.html#selectionstate">#</a></h4><div><p>An instance of <code>DocumentSelectionState</code>, this is some state that is responsible for
maintaining selection information for a document.</p><p>Some functionality that can be performed with this instance is:</p><ul><li><code>blur()</code></li><li><code>focus()</code></li><li><code>update()</code></li></ul><blockquote><p>You can reference <code>DocumentSelectionState</code> in
<a href="https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js" target="_blank"><code>vendor/document/selection/DocumentSelectionState.js</code></a></p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="spellcheck"></a><span class="platform">ios</span>spellCheck?: <span class="propType">bool</span> <a class="hash-link" href="docs/textinput.html#spellcheck">#</a></h4><div><p>If <code>false</code>, disables spell-check style (i.e. red underlines).
The default value is inherited from <code>autoCorrect</code>.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/textinput.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="isfocused"></a>isFocused<span class="methodType">(): </span> <a class="hash-link" href="docs/textinput.html#isfocused">#</a></h4><div><p>Returns <code>true</code> if the input is currently focused; <code>false</code> otherwise.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clear"></a>clear<span class="methodType">()</span> <a class="hash-link" href="docs/textinput.html#clear">#</a></h4><div><p>Removes all text from the <code>TextInput</code>.</p></div></div></div></span></div>
docs/autogen_TextStylePropTypes.md
-12
View File
@@ -1,12 +0,0 @@
---
id: textstyleproptypes
title: TextStylePropTypes
category: APIs
permalink: docs/textstyleproptypes.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/textstyleproptypes.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="color"></a>color?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textstyleproptypes.html#color">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="fontfamily"></a>fontFamily?: <span class="propType">string</span> <a class="hash-link" href="docs/textstyleproptypes.html#fontfamily">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="fontsize"></a>fontSize?: <span class="propType">number</span> <a class="hash-link" href="docs/textstyleproptypes.html#fontsize">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="fontstyle"></a>fontStyle?: <span class="propType">enum('normal', 'italic')</span> <a class="hash-link" href="docs/textstyleproptypes.html#fontstyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="fontweight"></a>fontWeight?: <span class="propType">enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')</span> <a class="hash-link" href="docs/textstyleproptypes.html#fontweight">#</a></h4><div><p>Specifies font weight. The values 'normal' and 'bold' are supported for
most fonts. Not all fonts have a variant for each of the numeric values,
in that case the closest one is chosen.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="lineheight"></a>lineHeight?: <span class="propType">number</span> <a class="hash-link" href="docs/textstyleproptypes.html#lineheight">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textalign"></a>textAlign?: <span class="propType">enum('auto', 'left', 'right', 'center', 'justify')</span> <a class="hash-link" href="docs/textstyleproptypes.html#textalign">#</a></h4><div><p>Specifies text alignment. The value 'justify' is only supported on iOS and
fallbacks to <code>left</code> on Android.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textdecorationline"></a>textDecorationLine?: <span class="propType">enum('none', 'underline', 'line-through', 'underline line-through')</span> <a class="hash-link" href="docs/textstyleproptypes.html#textdecorationline">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textshadowcolor"></a>textShadowColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textstyleproptypes.html#textshadowcolor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textshadowoffset"></a>textShadowOffset?: <span class="propType"><span>{<span><span><span>width: number</span>, </span><span>height: number</span></span>}</span></span> <a class="hash-link" href="docs/textstyleproptypes.html#textshadowoffset">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textshadowradius"></a>textShadowRadius?: <span class="propType">number</span> <a class="hash-link" href="docs/textstyleproptypes.html#textshadowradius">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="includefontpadding"></a><span class="platform">android</span>includeFontPadding?: <span class="propType">bool</span> <a class="hash-link" href="docs/textstyleproptypes.html#includefontpadding">#</a></h4><div><p>Set to <code>false</code> to remove extra font padding intended to make space for certain ascenders / descenders.
With some fonts, this padding can make text look slightly misaligned when centered vertically.
For best results also set <code>textAlignVertical</code> to <code>center</code>. Default is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textalignvertical"></a><span class="platform">android</span>textAlignVertical?: <span class="propType">enum('auto', 'top', 'bottom', 'center')</span> <a class="hash-link" href="docs/textstyleproptypes.html#textalignvertical">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="fontvariant"></a><span class="platform">ios</span>fontVariant?: <span class="propType"><span>[enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]</span></span> <a class="hash-link" href="docs/textstyleproptypes.html#fontvariant">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="letterspacing"></a><span class="platform">ios</span>letterSpacing?: <span class="propType">number</span> <a class="hash-link" href="docs/textstyleproptypes.html#letterspacing">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textdecorationcolor"></a><span class="platform">ios</span>textDecorationColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/textstyleproptypes.html#textdecorationcolor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="textdecorationstyle"></a><span class="platform">ios</span>textDecorationStyle?: <span class="propType">enum('solid', 'double', 'dotted', 'dashed')</span> <a class="hash-link" href="docs/textstyleproptypes.html#textdecorationstyle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="writingdirection"></a><span class="platform">ios</span>writingDirection?: <span class="propType">enum('auto', 'ltr', 'rtl')</span> <a class="hash-link" href="docs/textstyleproptypes.html#writingdirection">#</a></h4></div></div></div>
docs/autogen_TimePickerAndroid.md
-26
View File
@@ -1,26 +0,0 @@
---
id: timepickerandroid
title: TimePickerAndroid
category: APIs
permalink: docs/timepickerandroid.html
---
<div><div><p>Opens the standard Android time picker dialog.</p><h3><a class="anchor" name="example"></a>Example <a class="hash-link" href="docs/timepickerandroid.html#example">#</a></h3><div class="prism language-javascript"><span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span>action<span class="token punctuation">,</span> hour<span class="token punctuation">,</span> minute<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> TimePickerAndroid<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
hour<span class="token punctuation">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
minute<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
is24Hour<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Will display '2 PM'
</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>action <span class="token operator">!==</span> TimePickerAndroid<span class="token punctuation">.</span>dismissedAction<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Selected hour (0-23), minute (0-59)
</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>code<span class="token punctuation">,</span> message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span><span class="token string">'Cannot open time picker'</span><span class="token punctuation">,</span> message<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/timepickerandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="open"></a><span class="methodType">static </span>open<span class="methodType">(options)</span> <a class="hash-link" href="docs/timepickerandroid.html#open">#</a></h4><div><p>Opens the standard Android time picker dialog.</p><p>The available keys for the <code>options</code> object are:
<em> <code>hour</code> (0-23) - the hour to show, defaults to the current time
</em> <code>minute</code> (0-59) - the minute to show, defaults to the current time
* <code>is24Hour</code> (boolean) - If <code>true</code>, the picker uses the 24-hour format. If <code>false</code>,
the picker shows an AM/PM chooser. If undefined, the default for the current locale
is used.</p><p>Returns a Promise which will be invoked an object containing <code>action</code>, <code>hour</code> (0-23),
<code>minute</code> (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will
still be resolved with action being <code>TimePickerAndroid.dismissedAction</code> and all the other keys
being undefined. <strong>Always</strong> check whether the <code>action</code> before reading the values.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="timesetaction"></a><span class="methodType">static </span>timeSetAction<span class="methodType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#timesetaction">#</a></h4><div><p>A time has been selected.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="dismissedaction"></a><span class="methodType">static </span>dismissedAction<span class="methodType">()</span> <a class="hash-link" href="docs/timepickerandroid.html#dismissedaction">#</a></h4><div><p>The dialog has been dismissed.</p></div></div></div></span></div>
docs/autogen_ToastAndroid.md
-10
View File
@@ -1,10 +0,0 @@
---
id: toastandroid
title: ToastAndroid
category: APIs
permalink: docs/toastandroid.html
---
<div><div><p>This exposes the native ToastAndroid module as a JS module. This has a function 'show'
which takes the following parameters:</p><ol><li>String message: A string with the text to toast</li><li>int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG</li></ol><p>There is also a function <code>showWithGravity</code> to specify the layout gravity. May be
ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.</p><p>Basic usage:</p><div class="prism language-javascript">ToastAndroid<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token string">'A pikachu appeared nearby !'</span><span class="token punctuation">,</span> ToastAndroid<span class="token punctuation">.</span>SHORT<span class="token punctuation">)</span><span class="token punctuation">;</span>
ToastAndroid<span class="token punctuation">.</span><span class="token function">showWithGravity</span><span class="token punctuation">(</span><span class="token string">'All Your Base Are Belong To Us'</span><span class="token punctuation">,</span> ToastAndroid<span class="token punctuation">.</span>SHORT<span class="token punctuation">,</span> ToastAndroid<span class="token punctuation">.</span>CENTER<span class="token punctuation">)</span><span class="token punctuation">;</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/toastandroid.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="show"></a><span class="methodType">static </span>show<span class="methodType">(message, duration)</span> <a class="hash-link" href="docs/toastandroid.html#show">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="showwithgravity"></a><span class="methodType">static </span>showWithGravity<span class="methodType">(message, duration, gravity)</span> <a class="hash-link" href="docs/toastandroid.html#showwithgravity">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/toastandroid.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="short"></a>SHORT<span class="propType">: MemberExpression</span> <a class="hash-link" href="docs/toastandroid.html#short">#</a></h4><div><p>// Toast duration constants</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="long"></a>LONG<span class="propType">: MemberExpression</span> <a class="hash-link" href="docs/toastandroid.html#long">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="top"></a>TOP<span class="propType">: MemberExpression</span> <a class="hash-link" href="docs/toastandroid.html#top">#</a></h4><div><p>// Toast gravity constants</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bottom"></a>BOTTOM<span class="propType">: MemberExpression</span> <a class="hash-link" href="docs/toastandroid.html#bottom">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="center"></a>CENTER<span class="propType">: MemberExpression</span> <a class="hash-link" href="docs/toastandroid.html#center">#</a></h4></div></div></span></div>
docs/autogen_ToolbarAndroid.md
-40
View File
@@ -1,40 +0,0 @@
---
id: toolbarandroid
title: ToolbarAndroid
category: Components
permalink: docs/toolbarandroid.html
---
<div><div><p>React component that wraps the Android-only <a href="https://developer.android.com/reference/android/support/v7/widget/Toolbar.html" target="_blank"><code>Toolbar</code> widget</a>. A Toolbar can display a logo,
navigation icon (e.g. hamburger menu), a title &amp; subtitle and a list of actions. The title and
subtitle are expanded so the logo and navigation icons are displayed on the left, title and
subtitle in the middle and the actions on the right.</p><p>If the toolbar has an only child, it will be displayed between the title and actions.</p><p>Although the Toolbar supports remote images for the logo, navigation and action icons, this
should only be used in DEV mode where <code>require('./some_icon.png')</code> translates into a packager
URL. In release mode you should always use a drawable resource for these icons. Using
<code>require('./some_icon.png')</code> will do this automatically for you, so as long as you don't
explicitly use e.g. <code>{uri: 'http://...'}</code>, you will be good.</p><p>Example:</p><div class="prism language-javascript">render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>ToolbarAndroid
logo<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./app_logo.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
title<span class="token operator">=</span><span class="token string">"AwesomeApp"</span>
actions<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">'Settings'</span><span class="token punctuation">,</span> icon<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./icon_settings.png'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> show<span class="token punctuation">:</span> <span class="token string">'always'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span>
onActionSelected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onActionSelected<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onActionSelected<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>position <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment" spellcheck="true"> // index of 'Settings'
</span> <span class="token function">showSettings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/toolbarandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/toolbarandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="actions"></a>actions?: <span class="propType"><span>[<span>{<span><span><span>title: string</span>, </span><span><span>icon: optionalImageSource</span>, </span><span><span>show: enum('always', 'ifRoom', 'never')</span>, </span><span>showWithText: bool</span></span>}</span>]</span></span> <a class="hash-link" href="docs/toolbarandroid.html#actions">#</a></h4><div><p>Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
menu.</p><p>This property takes an array of objects, where each object has the following keys:</p><ul><li><code>title</code>: <strong>required</strong>, the title of this action</li><li><code>icon</code>: the icon for this action, e.g. <code>require('./some_icon.png')</code></li><li><code>show</code>: when to show this action as an icon or hide it in the overflow menu: <code>always</code>,
<code>ifRoom</code> or <code>never</code></li><li><code>showWithText</code>: boolean, whether to show text alongside the icon or not</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetend"></a>contentInsetEnd?: <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetend">#</a></h4><div><p>Sets the content inset for the toolbar ending edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinsetstart"></a>contentInsetStart?: <span class="propType">number</span> <a class="hash-link" href="docs/toolbarandroid.html#contentinsetstart">#</a></h4><div><p>Sets the content inset for the toolbar starting edge.</p><p>The content inset affects the valid area for Toolbar content other than
the navigation button and menu. Insets define the minimum margin for
these components and can be used to effectively align Toolbar content
along well-known gridlines.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="logo"></a>logo?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#logo">#</a></h4><div><p>Sets the toolbar logo.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="navicon"></a>navIcon?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#navicon">#</a></h4><div><p>Sets the navigation icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onactionselected"></a>onActionSelected?: <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#onactionselected">#</a></h4><div><p>Callback that is called when an action is selected. The only argument that is passed to the
callback is the position of the action in the actions array.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="oniconclicked"></a>onIconClicked?: <span class="propType">function</span> <a class="hash-link" href="docs/toolbarandroid.html#oniconclicked">#</a></h4><div><p>Callback called when the icon is selected.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="overflowicon"></a>overflowIcon?: <span class="propType">optionalImageSource</span> <a class="hash-link" href="docs/toolbarandroid.html#overflowicon">#</a></h4><div><p>Sets the overflow icon.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rtl"></a>rtl?: <span class="propType">bool</span> <a class="hash-link" href="docs/toolbarandroid.html#rtl">#</a></h4><div><p>Used to set the toolbar direction to RTL.
In addition to this property you need to add</p><p> android:supportsRtl="true"</p><p>to your application AndroidManifest.xml and then call
<code>setLayoutDirection(LayoutDirection.RTL)</code> in your MainActivity
<code>onCreate</code> method.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitle"></a>subtitle?: <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#subtitle">#</a></h4><div><p>Sets the toolbar subtitle.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="subtitlecolor"></a>subtitleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#subtitlecolor">#</a></h4><div><p>Sets the toolbar subtitle color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="title"></a>title?: <span class="propType">string</span> <a class="hash-link" href="docs/toolbarandroid.html#title">#</a></h4><div><p>Sets the toolbar title.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="titlecolor"></a>titleColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/toolbarandroid.html#titlecolor">#</a></h4><div><p>Sets the toolbar title color.</p></div></div></div></div>
docs/autogen_TouchableHighlight.md
-28
View File
@@ -1,28 +0,0 @@
---
id: touchablehighlight
title: TouchableHighlight
category: Components
permalink: docs/touchablehighlight.html
---
<div><div><p>A wrapper for making views respond properly to touches.
On press down, the opacity of the wrapped view is decreased, which allows
the underlay color to show through, darkening or tinting the view.</p><p>The underlay comes from wrapping the child in a new View, which can affect
layout, and sometimes cause unwanted visual artifacts if not used correctly,
for example if the backgroundColor of the wrapped view isn't explicitly set
to an opaque color.</p><p>TouchableHighlight must have one child (not zero or more than one).
If you wish to have several child components, wrap them in a View.</p><p>Example:</p><div class="prism language-javascript">renderButton<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TouchableHighlight onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Image
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myButton.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableHighlight<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablehighlight.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablehighlight.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity?: <span class="propType">number</span> <a class="hash-link" href="docs/touchablehighlight.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onhideunderlay"></a>onHideUnderlay?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablehighlight.html#onhideunderlay">#</a></h4><div><p>Called immediately after the underlay is hidden</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshowunderlay"></a>onShowUnderlay?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablehighlight.html#onshowunderlay">#</a></h4><div><p>Called immediately after the underlay is shown</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/touchablehighlight.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="underlaycolor"></a>underlayColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/touchablehighlight.html#underlaycolor">#</a></h4><div><p>The color of the underlay that will show through when the touch is
active.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hastvpreferredfocus"></a><span class="platform">ios</span>hasTVPreferredFocus?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablehighlight.html#hastvpreferredfocus">#</a></h4><div><p><em>(Apple TV only)</em> TV preferred focus (see documentation for the View component).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a><span class="platform">ios</span>tvParallaxProperties?: <span class="propType">object</span> <a class="hash-link" href="docs/touchablehighlight.html#tvparallaxproperties">#</a></h4><div><p><em>(Apple TV only)</em> Object with properties to control Apple TV parallax effects.</p><p>enabled: If true, parallax effects are enabled. Defaults to true.
shiftDistanceX: Defaults to 2.0.
shiftDistanceY: Defaults to 2.0.
tiltAngle: Defaults to 0.05.
magnification: Defaults to 1.0.</p></div></div></div></div>
docs/autogen_TouchableNativeFeedback.md
-36
View File
@@ -1,36 +0,0 @@
---
id: touchablenativefeedback
title: TouchableNativeFeedback
category: Components
permalink: docs/touchablenativefeedback.html
---
<div><div><p>A wrapper for making views respond properly to touches (Android only).
On Android this component uses native state drawable to display touch
feedback.</p><p>At the moment it only supports having a single View instance as a child
node, as it's implemented by replacing that View with another instance of
RCTView node with some additional properties set.</p><p>Background drawable of native feedback touchable can be customized with
<code>background</code> property.</p><p>Example:</p><div class="prism language-javascript">renderButton<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TouchableNativeFeedback
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span>
background<span class="token operator">=</span><span class="token punctuation">{</span>TouchableNativeFeedback<span class="token punctuation">.</span><span class="token function">SelectableBackground</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>Button<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableNativeFeedback<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablenativefeedback.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablenativefeedback.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="background"></a>background?: <span class="propType">backgroundPropType</span> <a class="hash-link" href="docs/touchablenativefeedback.html#background">#</a></h4><div><p>Determines the type of background drawable that's going to be used to
display feedback. It takes an object with <code>type</code> property and extra data
depending on the <code>type</code>. It's recommended to use one of the static
methods to generate that dictionary.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="useforeground"></a>useForeground?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablenativefeedback.html#useforeground">#</a></h4><div><p>Set to true to add the ripple effect to the foreground of the view, instead of the
background. This is useful if one of your child views has a background of its own, or you're
e.g. displaying images, and you don't want the ripple to be covered by them.</p><p>Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on
Android 6.0 and above. If you try to use this on older versions you will get a warning and
fallback to background.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchablenativefeedback.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="selectablebackground"></a><span class="methodType">static </span>SelectableBackground<span class="methodType">()</span> <a class="hash-link" href="docs/touchablenativefeedback.html#selectablebackground">#</a></h4><div><p>Creates an object that represents android theme's default background for
selectable elements (?android:attr/selectableItemBackground).</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="selectablebackgroundborderless"></a><span class="methodType">static </span>SelectableBackgroundBorderless<span class="methodType">()</span> <a class="hash-link" href="docs/touchablenativefeedback.html#selectablebackgroundborderless">#</a></h4><div><p>Creates an object that represent android theme's default background for borderless
selectable elements (?android:attr/selectableItemBackgroundBorderless).
Available on android API level 21+.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="ripple"></a><span class="methodType">static </span>Ripple<span class="methodType">(color: string, borderless: boolean)</span> <a class="hash-link" href="docs/touchablenativefeedback.html#ripple">#</a></h4><div><p>Creates an object that represents ripple drawable with specified color (as a
string). If property <code>borderless</code> evaluates to true the ripple will
render outside of the view bounds (see native actionbar buttons as an
example of that behavior). This background type is available on Android
API level 21+.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>color<br><br><div><span>string</span></div></td><td class="description"><div><p>The ripple color</p></div></td></tr><tr><td>borderless<br><br><div><span>boolean</span></div></td><td class="description"><div><p>If the ripple can render outside it's bounds</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="canusenativeforeground"></a><span class="methodType">static </span>canUseNativeForeground<span class="methodType">()</span> <a class="hash-link" href="docs/touchablenativefeedback.html#canusenativeforeground">#</a></h4></div></div></span></div>
docs/autogen_TouchableOpacity.md
-19
View File
@@ -1,19 +0,0 @@
---
id: touchableopacity
title: TouchableOpacity
category: Components
permalink: docs/touchableopacity.html
---
<div><div><p>A wrapper for making views respond properly to touches.
On press down, the opacity of the wrapped view is decreased, dimming it.</p><p>Opacity is controlled by wrapping the children in an Animated.View, which is
added to the view hiearchy. Be aware that this can affect layout.</p><p>Example:</p><div class="prism language-javascript">renderButton<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>TouchableOpacity onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Image
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./myButton.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchableopacity.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchableopacity.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="activeopacity"></a>activeOpacity?: <span class="propType">number</span> <a class="hash-link" href="docs/touchableopacity.html#activeopacity">#</a></h4><div><p>Determines what the opacity of the wrapped view should be when touch is
active. Defaults to 0.2.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="focusedopacity"></a>focusedOpacity?: <span class="propType">number</span> <a class="hash-link" href="docs/touchableopacity.html#focusedopacity">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="tvparallaxproperties"></a>tvParallaxProperties?: <span class="propType">object</span> <a class="hash-link" href="docs/touchableopacity.html#tvparallaxproperties">#</a></h4><div><p>Apple TV parallax effects</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchableopacity.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setopacityto"></a>setOpacityTo<span class="methodType">(value: number, duration: number)</span> <a class="hash-link" href="docs/touchableopacity.html#setopacityto">#</a></h4><div><p>Animate the touchable to a new opacity.</p></div></div></div></span></div>
docs/autogen_TouchableWithoutFeedback.md
-19
View File
@@ -1,19 +0,0 @@
---
id: touchablewithoutfeedback
title: TouchableWithoutFeedback
category: Components
permalink: docs/touchablewithoutfeedback.html
---
<div><div><p>Do not use unless you have a very good reason. All elements that
respond to press should have a visual feedback when touched.</p><p>TouchableWithoutFeedback supports only one child.
If you wish to have several child components, wrap them in a View.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablewithoutfeedback.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a>accessibilityComponentType?: <span class="propType">AccessibilityComponentTypes</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#accessibilitycomponenttype">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a>accessibilityTraits?: <span class="propType"><span><span>AccessibilityTraits, </span><span>[AccessibilityTraits]</span></span></span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#accessibilitytraits">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#accessible">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaylongpress"></a>delayLongPress?: <span class="propType">number</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#delaylongpress">#</a></h4><div><p>Delay in ms, from onPressIn, before onLongPress is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaypressin"></a>delayPressIn?: <span class="propType">number</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#delaypressin">#</a></h4><div><p>Delay in ms, from the start of the touch, before onPressIn is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="delaypressout"></a>delayPressOut?: <span class="propType">number</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#delaypressout">#</a></h4><div><p>Delay in ms, from the release of the touch, before onPressOut is called.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disabled"></a>disabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#disabled">#</a></h4><div><p>If true, disable all interactions for this component.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hitslop"></a>hitSlop?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#hitslop">#</a></h4><div><p>This defines how far your touch can start away from the button. This is
added to <code>pressRetentionOffset</code> when moving off of the button.
<strong> NOTE </strong>
The touch area never extends past the parent view bounds and the Z-index
of sibling views always takes precedence if a touch hits two overlapping
views.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with</p><p> <code>{nativeEvent: {layout: {x, y, width, height}}}</code></p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlongpress"></a>onLongPress?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#onlongpress">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpress"></a>onPress?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#onpress">#</a></h4><div><p>Called when the touch is released, but not if cancelled (e.g. by a scroll
that steals the responder lock).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpressin"></a>onPressIn?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#onpressin">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpressout"></a>onPressOut?: <span class="propType">function</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#onpressout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pressretentionoffset"></a>pressRetentionOffset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/touchablewithoutfeedback.html#pressretentionoffset">#</a></h4><div><p>When the scroll view is disabled, this defines how far your touch may
move off of the button, before deactivating the button. Once deactivated,
try moving it back and you'll see that the button is once again
reactivated! Move it back and forth several times while the scroll view
is disabled. Ensure you pass in a constant to reduce memory allocations.</p></div></div></div><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/touchablewithoutfeedback.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="event"></a>Event <a class="hash-link" href="docs/touchablewithoutfeedback.html#event">#</a></h4><strong>Type:</strong><br>Object</div></div></span></div>
docs/autogen_Transforms.md
-7
View File
@@ -1,7 +0,0 @@
---
id: transforms
title: Transforms
category: APIs
permalink: docs/transforms.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/transforms.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="decomposedmatrix"></a>decomposedMatrix?: <span class="propType">DecomposedMatrixPropType</span> <a class="hash-link" href="docs/transforms.html#decomposedmatrix">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transform"></a>transform?: <span class="propType"><span>[<span><span><span>{<span><span>perspective: number</span></span>}</span>, </span><span><span>{<span><span>rotate: string</span></span>}</span>, </span><span><span>{<span><span>rotateX: string</span></span>}</span>, </span><span><span>{<span><span>rotateY: string</span></span>}</span>, </span><span><span>{<span><span>rotateZ: string</span></span>}</span>, </span><span><span>{<span><span>scale: number</span></span>}</span>, </span><span><span>{<span><span>scaleX: number</span></span>}</span>, </span><span><span>{<span><span>scaleY: number</span></span>}</span>, </span><span><span>{<span><span>translateX: number</span></span>}</span>, </span><span><span>{<span><span>translateY: number</span></span>}</span>, </span><span><span>{<span><span>skewX: string</span></span>}</span>, </span><span>{<span><span>skewY: string</span></span>}</span></span>]</span></span> <a class="hash-link" href="docs/transforms.html#transform">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="transformmatrix"></a>transformMatrix?: <span class="propType">TransformMatrixPropType</span> <a class="hash-link" href="docs/transforms.html#transformmatrix">#</a></h4></div></div></div>
docs/autogen_Vibration.md
-7
View File
@@ -1,7 +0,0 @@
---
id: vibration
title: Vibration
category: APIs
permalink: docs/vibration.html
---
<div><div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/vibration.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="vibrate"></a><span class="methodType">static </span>vibrate<span class="methodType">(pattern, repeat)</span> <a class="hash-link" href="docs/vibration.html#vibrate">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="cancel"></a><span class="methodType">static </span>cancel<span class="methodType">()</span> <a class="hash-link" href="docs/vibration.html#cancel">#</a></h4><div><p>Stop vibration</p></div></div></div></span></div>
docs/autogen_VibrationIOS.md
-10
View File
@@ -1,10 +0,0 @@
---
id: vibrationios
title: VibrationIOS
category: APIs
permalink: docs/vibrationios.html
---
<div><div><p>NOTE: <code>VibrationIOS</code> is being deprecated. Use <code>Vibration</code> instead.</p><p>The Vibration API is exposed at <code>VibrationIOS.vibrate()</code>. On iOS, calling this
function will trigger a one second vibration. The vibration is asynchronous
so this method will return immediately.</p><p>There will be no effect on devices that do not support Vibration, eg. the iOS
simulator.</p><p>Vibration patterns are currently unsupported.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/vibrationios.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="vibrate"></a><span class="methodType">static </span>vibrate<span class="methodType">()</span> <a class="hash-link" href="docs/vibrationios.html#vibrate">#</a></h4><div><p>@deprecated</p></div></div></div></span></div>
docs/autogen_View.md
-121
View File
@@ -1,121 +0,0 @@
---
id: view
title: View
category: Components
permalink: docs/view.html
---
<div><div><p>The most fundamental component for building a UI, <code>View</code> is a container that supports layout with
<a href="docs/flexbox.html" target="_blank">flexbox</a>, <a href="docs/style.html" target="_blank">style</a>,
<a href="docs/handling-touches.html" target="_blank">some touch handling</a>, and
<a href="docs/accessibility.html" target="_blank">accessibility</a> controls. <code>View</code> maps directly to the
native view equivalent on whatever platform React Native is running on, whether that is a
<code>UIView</code>, <code>&lt;div&gt;</code>, <code>android.view</code>, etc.</p><p><code>View</code> is designed to be nested inside other views and can have 0 to many children of any type.</p><p>This example creates a <code>View</code> that wraps two colored boxes and a text component in a row with
padding.</p><div class="prism language-javascript"><span class="token keyword">class</span> <span class="token class-name">ViewColoredBoxesWithText</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flexDirection<span class="token punctuation">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> flex<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Hello World<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><blockquote><p><code>View</code>s are designed to be used with <a href="docs/style.html" target="_blank"><code>StyleSheet</code></a> for clarity
and performance, although inline styles are also supported.</p></blockquote><h3><a class="anchor" name="synthetic-touch-events"></a>Synthetic Touch Events <a class="hash-link" href="docs/view.html#synthetic-touch-events">#</a></h3><p>For <code>View</code> responder props (e.g., <code>onResponderMove</code>), the synthetic touch event passed to them
are of the following form:</p><ul><li><code>nativeEvent</code><ul><li><code>changedTouches</code> - Array of all touch events that have changed since the last event.</li><li><code>identifier</code> - The ID of the touch.</li><li><code>locationX</code> - The X position of the touch, relative to the element.</li><li><code>locationY</code> - The Y position of the touch, relative to the element.</li><li><code>pageX</code> - The X position of the touch, relative to the root element.</li><li><code>pageY</code> - The Y position of the touch, relative to the root element.</li><li><code>target</code> - The node id of the element receiving the touch event.</li><li><code>timestamp</code> - A time identifier for the touch, useful for velocity calculation.</li><li><code>touches</code> - Array of all current touches on the screen.</li></ul></li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/view.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel?: <span class="propType">node</span> <a class="hash-link" href="docs/view.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that's read by the screen reader when the user interacts
with the element. By default, the label is constructed by traversing all the
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hitslop"></a>hitSlop?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/view.html#hitslop">#</a></h4><div><p>This defines how far a touch event can start away from the view.
Typical interface guidelines recommend touch targets that are at least
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index
of sibling views always takes precedence if a touch hits two overlapping
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">string</span> <a class="hash-link" href="docs/view.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
the new layout may not yet be reflected on the screen at the time the
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to "claim" touch responsiveness? This is called for every touch move on
the <code>View</code> when it is not the responder.</p><p><code>View.props.onMoveShouldSetResponder: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onMoveShouldSetResponderCapture: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
what is happening.</p><p><code>View.props.onResponderGrant: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
the responder.</p><p><code>View.props.onResponderReject: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
<code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens
with control center/ notification center on iOS)</p><p><code>View.props.onResponderTerminate: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onresponderterminationrequest">#</a></h4><div><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its
responder. Returning <code>true</code> allows its release.</p><p><code>View.props.onResponderTerminationRequest: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/view.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onStartShouldSetResponderCapture: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents?: <span class="propType">enum('box-none', 'none', 'box-only', 'auto')</span> <a class="hash-link" href="docs/view.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but it's
subviews can be. It behaves like if the view had the following classes
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token operator">*</span> <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></li><li><code>'box-only'</code>: The view can be the target of touch events but it's
subviews cannot be. It behaves like if the view had the following classes
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token operator">*</span> <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><blockquote><p>Since <code>pointerEvents</code> does not affect layout/appearance, and we are
already deviating from the spec by adding additional modes, we opt to not
include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to
implement it as a <code>className</code> anyways. Using <code>style</code> or not is an
implementation detail of the platform.</p></blockquote></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by <code>RCTView</code> and is useful
for scrolling content when there are many subviews, most of which are
offscreen. For this property to be effective, it must be applied to a
view that contains many subviews that extend outside its bound. The
subviews must also have <code>overflow: hidden</code>, as should the containing view
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">stylePropType</span> <a class="hash-link" href="docs/view.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/view.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType?: <span class="propType">AccessibilityComponentTypes</span> <a class="hash-link" href="docs/view.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>'none'</code></li><li><code>'button'</code></li><li><code>'radiobutton_checked'</code></li><li><code>'radiobutton_unchecked'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion?: <span class="propType">enum('none', 'polite', 'assertive')</span> <a class="hash-link" href="docs/view.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
when this view changes. Works for Android API &gt;= 19 only.
Possible values:</p><ul><li><code>'none'</code> - Accessibility services should not announce changes to this view.</li><li><code>'polite'</code>- Accessibility services should announce changes to this view.</li><li><code>'assertive'</code> - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li></ul><p>See the <a href="http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion" target="_blank">Android <code>View</code> docs</a>
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsable"></a><span class="platform">android</span>collapsable?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#collapsable">#</a></h4><div><p>Views that are only used to layout their children or otherwise don't draw
anything may be automatically removed from the native hierarchy as an
optimization. Set this property to <code>false</code> to disable this optimization and
ensure that this <code>View</code> exists in the native view hierarchy.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="importantforaccessibility"></a><span class="platform">android</span>importantForAccessibility?: <span class="propType">enum('auto', 'yes', 'no', 'no-hide-descendants')</span> <a class="hash-link" href="docs/view.html#importantforaccessibility">#</a></h4><div><p>Controls how view is important for accessibility which is if it
fires accessibility events and if it is reported to accessibility services
that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>'auto'</code> - The system determines whether the view is important for accessibility -
default (recommended).</li><li><code>'yes'</code> - The view is important for accessibility.</li><li><code>'no'</code> - The view is not important for accessibility.</li><li><code>'no-hide-descendants'</code> - The view is not important for accessibility,
nor are any of its descendant views.</li></ul><p>See the <a href="http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank">Android <code>importantForAccessibility</code> docs</a>
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
in order to preserve 100% correct colors and blending behavior. The default
(<code>false</code>) falls back to drawing the component and its children with an alpha
applied to the paint used to draw each element instead of rendering the full
component offscreen and compositing it back with an alpha value. This default
may be noticeable and undesired in the case where the <code>View</code> you are setting
an opacity on has multiple overlapping elements (e.g. multiple overlapping
<code>View</code>s, or text and a background).</p><p>Rendering offscreen to preserve correct alpha behavior is extremely
expensive and hard to debug for non-native developers, which is why it is
not turned on by default. If you do need to enable this property for an
animation, consider combining it with renderToHardwareTextureAndroid if the
view <strong>contents</strong> are static (i.e. it doesn't need to be redrawn each frame).
If that property is enabled, this View will be rendered off-screen once,
saved in a hardware texture, and then composited onto the screen with an alpha
each frame without having to switch rendering targets on the GPU.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendertohardwaretextureandroid"></a><span class="platform">android</span>renderToHardwareTextureAndroid?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#rendertohardwaretextureandroid">#</a></h4><div><p>Whether this <code>View</code> should render itself (and all of its children) into a
single hardware texture on the GPU.</p><p>On Android, this is useful for animations and interactions that only
modify opacity, rotation, translation, and/or scale: in those cases, the
view doesn't have to be redrawn and display lists don't need to be
re-executed. The texture can just be re-used and re-composited with
different parameters. The downside is that this can use up limited video
memory, so this prop should be set back to false at the end of the
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits?: <span class="propType"><span><span>AccessibilityTraits, </span><span>[AccessibilityTraits]</span></span></span> <a class="hash-link" href="docs/view.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
provided unless specified otherwise in element.</p><p>You can provide one trait or an array of many traits.</p><p>Possible values for <code>AccessibilityTraits</code> are:</p><ul><li><code>'none'</code> - The element has no traits.</li><li><code>'button'</code> - The element should be treated as a button.</li><li><code>'link'</code> - The element should be treated as a link.</li><li><code>'header'</code> - The element is a header that divides content into sections.</li><li><code>'search'</code> - The element should be treated as a search field.</li><li><code>'image'</code> - The element should be treated as an image.</li><li><code>'selected'</code> - The element is selected.</li><li><code>'plays'</code> - The element plays sound.</li><li><code>'key'</code> - The element should be treated like a keyboard key.</li><li><code>'text'</code> - The element should be treated as text.</li><li><code>'summary'</code> - The element provides app summary information.</li><li><code>'disabled'</code> - The element is disabled.</li><li><code>'frequentUpdates'</code> - The element frequently changes its value.</li><li><code>'startsMedia'</code> - The element starts a media session.</li><li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li><li><code>'allowsDirectInteraction'</code> - The element allows direct touch interaction for VoiceOver users.</li><li><code>'pageTurn'</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityviewismodal"></a><span class="platform">ios</span>accessibilityViewIsModal?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#accessibilityviewismodal">#</a></h4><div><p>A value indicating whether VoiceOver should ignore the elements
within views that are siblings of the receiver.
Default is <code>false</code>.</p><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS?: <span class="propType">bool</span> <a class="hash-link" href="docs/view.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
modify this component's dimensions nor its children; for example, when
translating the position of a static view, rasterization allows the
renderer to reuse a cached bitmap of a static view and quickly composite
it during each frame.</p><p>Rasterization incurs an off-screen drawing pass and the bitmap consumes
memory. Test and measure when using this property.</p></div></div></div><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/view.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/view.html#props">#</a></h4><strong>Type:</strong><br>ViewProps</div></div></span></div>
docs/autogen_ViewPagerAndroid.md
-54
View File
@@ -1,54 +0,0 @@
---
id: viewpagerandroid
title: ViewPagerAndroid
category: Components
permalink: docs/viewpagerandroid.html
---
<div><div><p>Container that allows to flip left and right between child views. Each
child view of the <code>ViewPagerAndroid</code> will be treated as a separate page
and will be stretched to fill the <code>ViewPagerAndroid</code>.</p><p>It is important all children are <code>&lt;View&gt;</code>s and not composite components.
You can set style properties like <code>padding</code> or <code>backgroundColor</code> for each
child.</p><p>Example:</p><div class="prism language-javascript">render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>ViewPagerAndroid
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>viewPager<span class="token punctuation">}</span>
initialPage<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>pageStyle<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>First page<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>pageStyle<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>Text<span class="token operator">&gt;</span>Second page<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>ViewPagerAndroid<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
<span class="token keyword">var</span> styles <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>
pageStyle<span class="token punctuation">:</span> <span class="token punctuation">{</span>
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/viewpagerandroid.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/viewpagerandroid.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialpage"></a>initialPage?: <span class="propType">number</span> <a class="hash-link" href="docs/viewpagerandroid.html#initialpage">#</a></h4><div><p>Index of initial page that should be selected. Use <code>setPage</code> method to
update the page, and <code>onPageSelected</code> to monitor page changes</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyboarddismissmode"></a>keyboardDismissMode?: <span class="propType"><span><span>literal | </span>literal</span></span> <a class="hash-link" href="docs/viewpagerandroid.html#keyboarddismissmode">#</a></h4><div><p>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.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescroll"></a>onPageScroll?: <span class="propType">Function</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpagescroll">#</a></h4><div><p>Executed when transitioning between pages (ether because of animation for
the requested page change or when user is swiping/dragging between pages)
The <code>event.nativeEvent</code> object for this callback will carry following data:
- position - index of first page from the left that is currently visible
- offset - value from range [0,1) describing stage between page transitions.
Value x means that (1 - x) fraction of the page at "position" index is
visible, and x fraction of the next page is visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpagescrollstatechanged"></a>onPageScrollStateChanged?: <span class="propType">Function</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpagescrollstatechanged">#</a></h4><div><p>Function called when the page scrolling state has changed.
The page scrolling state can be in 3 states:
- idle, meaning there is no interaction with the page scroller happening at the time
- dragging, meaning there is currently an interaction with the page scroller
- settling, meaning that there was an interaction with the page scroller, and the
page scroller is now finishing it's closing or opening animation</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onpageselected"></a>onPageSelected?: <span class="propType">Function</span> <a class="hash-link" href="docs/viewpagerandroid.html#onpageselected">#</a></h4><div><p>This callback will be called once ViewPager finish navigating to selected page
(when user swipes between pages). The <code>event.nativeEvent</code> object passed to this
callback will have following fields:
- position - index of page that has been selected</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pagemargin"></a>pageMargin?: <span class="propType">number</span> <a class="hash-link" href="docs/viewpagerandroid.html#pagemargin">#</a></h4><div><p>Blank space to show between pages. This is only visible while scrolling, pages are still
edge-to-edge.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="peekenabled"></a>peekEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/viewpagerandroid.html#peekenabled">#</a></h4><div><p>Whether enable showing peekFraction or not. If this is true, the preview of
last and next page will show in current screen. Defaults to false.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled?: <span class="propType">boolean</span> <a class="hash-link" href="docs/viewpagerandroid.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
The default value is true.</p></div></div></div><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/viewpagerandroid.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewpagerscrollstate"></a>ViewPagerScrollState <a class="hash-link" href="docs/viewpagerandroid.html#viewpagerscrollstate">#</a></h4><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>idle</td><td class="description"><noscript></noscript></td></tr><tr><td>dragging</td><td class="description"><noscript></noscript></td></tr><tr><td>settling</td><td class="description"><noscript></noscript></td></tr></tbody></table></div></div></div></span></div>
docs/autogen_ViewPropTypes.md
-103
View File
@@ -1,103 +0,0 @@
---
id: viewproptypes
title: ViewPropTypes
category: APIs
permalink: docs/viewproptypes.html
---
<div><noscript></noscript><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/viewproptypes.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitylabel"></a>accessibilityLabel?: <span class="propType">node</span> <a class="hash-link" href="docs/viewproptypes.html#accessibilitylabel">#</a></h4><div><p>Overrides the text that's read by the screen reader when the user interacts
with the element. By default, the label is constructed by traversing all the
children and accumulating all the <code>Text</code> nodes separated by space.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessible"></a>accessible?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewproptypes.html#accessible">#</a></h4><div><p>When <code>true</code>, indicates that the view is an accessibility element. By default,
all the touchable elements are accessible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hitslop"></a>hitSlop?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/viewproptypes.html#hitslop">#</a></h4><div><p>This defines how far a touch event can start away from the view.
Typical interface guidelines recommend touch targets that are at least
30 - 40 points/density-independent pixels.</p><p>For example, if a touchable view has a height of 20 the touchable height can be extended to
40 with <code>hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}</code></p><blockquote><p>The touch area never extends past the parent view bounds and the Z-index
of sibling views always takes precedence if a touch hits two overlapping
views.</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="nativeid"></a>nativeID?: <span class="propType">string</span> <a class="hash-link" href="docs/viewproptypes.html#nativeid">#</a></h4><div><p>Used to locate this view from native classes.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onaccessibilitytap"></a>onAccessibilityTap?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onaccessibilitytap">#</a></h4><div><p>When <code>accessible</code> is true, the system will try to invoke this function
when the user performs accessibility tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onlayout">#</a></h4><div><p>Invoked on mount and layout changes with:</p><p><code>{nativeEvent: { layout: {x, y, width, height}}}</code></p><p>This event is fired immediately once the layout has been calculated, but
the new layout may not yet be reflected on the screen at the time the
event is received, especially if a layout animation is in progress.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmagictap"></a>onMagicTap?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onmagictap">#</a></h4><div><p>When <code>accessible</code> is <code>true</code>, the system will invoke this function when the
user performs the magic tap gesture.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetresponder"></a>onMoveShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onmoveshouldsetresponder">#</a></h4><div><p>Does this view want to "claim" touch responsiveness? This is called for every touch move on
the <code>View</code> when it is not the responder.</p><p><code>View.props.onMoveShouldSetResponder: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmoveshouldsetrespondercapture"></a>onMoveShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onmoveshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a move,
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onMoveShouldSetResponderCapture: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondergrant"></a>onResponderGrant?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onrespondergrant">#</a></h4><div><p>The View is now responding for touch events. This is the time to highlight and show the user
what is happening.</p><p><code>View.props.onResponderGrant: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrespondermove"></a>onResponderMove?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onrespondermove">#</a></h4><div><p>The user is moving their finger.</p><p><code>View.props.onResponderMove: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderreject"></a>onResponderReject?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onresponderreject">#</a></h4><div><p>Another responder is already active and will not release it to that <code>View</code> asking to be
the responder.</p><p><code>View.props.onResponderReject: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderrelease"></a>onResponderRelease?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onresponderrelease">#</a></h4><div><p>Fired at the end of the touch.</p><p><code>View.props.onResponderRelease: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminate"></a>onResponderTerminate?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onresponderterminate">#</a></h4><div><p>The responder has been taken from the <code>View</code>. Might be taken by other views after a call to
<code>onResponderTerminationRequest</code>, or might be taken by the OS without asking (e.g., happens
with control center/ notification center on iOS)</p><p><code>View.props.onResponderTerminate: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch event as
described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onresponderterminationrequest"></a>onResponderTerminationRequest?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onresponderterminationrequest">#</a></h4><div><p>Some other <code>View</code> wants to become responder and is asking this <code>View</code> to release its
responder. Returning <code>true</code> allows its release.</p><p><code>View.props.onResponderTerminationRequest: (event) =&gt; {}</code>, where <code>event</code> is a synthetic touch
event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetresponder"></a>onStartShouldSetResponder?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onstartshouldsetresponder">#</a></h4><div><p>Does this view want to become responder on the start of a touch?</p><p><code>View.props.onStartShouldSetResponder: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onstartshouldsetrespondercapture"></a>onStartShouldSetResponderCapture?: <span class="propType">function</span> <a class="hash-link" href="docs/viewproptypes.html#onstartshouldsetrespondercapture">#</a></h4><div><p>If a parent <code>View</code> wants to prevent a child <code>View</code> from becoming responder on a touch start,
it should have this handler which returns <code>true</code>.</p><p><code>View.props.onStartShouldSetResponderCapture: (event) =&gt; [true | false]</code>, where <code>event</code> is a
synthetic touch event as described above.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="pointerevents"></a>pointerEvents?: <span class="propType">enum('box-none', 'none', 'box-only', 'auto')</span> <a class="hash-link" href="docs/viewproptypes.html#pointerevents">#</a></h4><div><p>Controls whether the <code>View</code> can be the target of touch events.</p><ul><li><code>'auto'</code>: The View can be the target of touch events.</li><li><code>'none'</code>: The View is never the target of touch events.</li><li><code>'box-none'</code>: The View is never the target of touch events but it's
subviews can be. It behaves like if the view had the following classes
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>box<span class="token operator">-</span>none <span class="token operator">*</span> <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token punctuation">}</span></div></li><li><code>'box-only'</code>: The view can be the target of touch events but it's
subviews cannot be. It behaves like if the view had the following classes
in CSS:<div class="prism language-javascript"><span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> all<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>box<span class="token operator">-</span>only <span class="token operator">*</span> <span class="token punctuation">{</span>
pointer<span class="token operator">-</span>events<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><blockquote><p>Since <code>pointerEvents</code> does not affect layout/appearance, and we are
already deviating from the spec by adding additional modes, we opt to not
include <code>pointerEvents</code> on <code>style</code>. On some platforms, we would need to
implement it as a <code>className</code> anyways. Using <code>style</code> or not is an
implementation detail of the platform.</p></blockquote></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewproptypes.html#removeclippedsubviews">#</a></h4><div><p>This is a special performance property exposed by <code>RCTView</code> and is useful
for scrolling content when there are many subviews, most of which are
offscreen. For this property to be effective, it must be applied to a
view that contains many subviews that extend outside its bound. The
subviews must also have <code>overflow: hidden</code>, as should the containing view
(or one of its superviews).</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">stylePropType</span> <a class="hash-link" href="docs/viewproptypes.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="testid"></a>testID?: <span class="propType">string</span> <a class="hash-link" href="docs/viewproptypes.html#testid">#</a></h4><div><p>Used to locate this view in end-to-end tests.</p><blockquote><p>This disables the 'layout-only view removal' optimization for this view!</p></blockquote></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitycomponenttype"></a><span class="platform">android</span>accessibilityComponentType?: <span class="propType">AccessibilityComponentTypes</span> <a class="hash-link" href="docs/viewproptypes.html#accessibilitycomponenttype">#</a></h4><div><p>Indicates to accessibility services to treat UI component like a
native one. Works for Android only.</p><p>Possible values are one of:</p><ul><li><code>'none'</code></li><li><code>'button'</code></li><li><code>'radiobutton_checked'</code></li><li><code>'radiobutton_unchecked'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityliveregion"></a><span class="platform">android</span>accessibilityLiveRegion?: <span class="propType">enum('none', 'polite', 'assertive')</span> <a class="hash-link" href="docs/viewproptypes.html#accessibilityliveregion">#</a></h4><div><p>Indicates to accessibility services whether the user should be notified
when this view changes. Works for Android API &gt;= 19 only.
Possible values:</p><ul><li><code>'none'</code> - Accessibility services should not announce changes to this view.</li><li><code>'polite'</code>- Accessibility services should announce changes to this view.</li><li><code>'assertive'</code> - Accessibility services should interrupt ongoing speech to immediately announce changes to this view.</li></ul><p>See the <a href="http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion" target="_blank">Android <code>View</code> docs</a>
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="collapsable"></a><span class="platform">android</span>collapsable?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewproptypes.html#collapsable">#</a></h4><div><p>Views that are only used to layout their children or otherwise don't draw
anything may be automatically removed from the native hierarchy as an
optimization. Set this property to <code>false</code> to disable this optimization and
ensure that this <code>View</code> exists in the native view hierarchy.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="importantforaccessibility"></a><span class="platform">android</span>importantForAccessibility?: <span class="propType">enum('auto', 'yes', 'no', 'no-hide-descendants')</span> <a class="hash-link" href="docs/viewproptypes.html#importantforaccessibility">#</a></h4><div><p>Controls how view is important for accessibility which is if it
fires accessibility events and if it is reported to accessibility services
that query the screen. Works for Android only.</p><p>Possible values:</p><ul><li><code>'auto'</code> - The system determines whether the view is important for accessibility -
default (recommended).</li><li><code>'yes'</code> - The view is important for accessibility.</li><li><code>'no'</code> - The view is not important for accessibility.</li><li><code>'no-hide-descendants'</code> - The view is not important for accessibility,
nor are any of its descendant views.</li></ul><p>See the <a href="http://developer.android.com/reference/android/R.attr.html#importantForAccessibility" target="_blank">Android <code>importantForAccessibility</code> docs</a>
for reference.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="needsoffscreenalphacompositing"></a><span class="platform">android</span>needsOffscreenAlphaCompositing?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewproptypes.html#needsoffscreenalphacompositing">#</a></h4><div><p>Whether this <code>View</code> needs to rendered offscreen and composited with an alpha
in order to preserve 100% correct colors and blending behavior. The default
(<code>false</code>) falls back to drawing the component and its children with an alpha
applied to the paint used to draw each element instead of rendering the full
component offscreen and compositing it back with an alpha value. This default
may be noticeable and undesired in the case where the <code>View</code> you are setting
an opacity on has multiple overlapping elements (e.g. multiple overlapping
<code>View</code>s, or text and a background).</p><p>Rendering offscreen to preserve correct alpha behavior is extremely
expensive and hard to debug for non-native developers, which is why it is
not turned on by default. If you do need to enable this property for an
animation, consider combining it with renderToHardwareTextureAndroid if the
view <strong>contents</strong> are static (i.e. it doesn't need to be redrawn each frame).
If that property is enabled, this View will be rendered off-screen once,
saved in a hardware texture, and then composited onto the screen with an alpha
each frame without having to switch rendering targets on the GPU.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendertohardwaretextureandroid"></a><span class="platform">android</span>renderToHardwareTextureAndroid?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewproptypes.html#rendertohardwaretextureandroid">#</a></h4><div><p>Whether this <code>View</code> should render itself (and all of its children) into a
single hardware texture on the GPU.</p><p>On Android, this is useful for animations and interactions that only
modify opacity, rotation, translation, and/or scale: in those cases, the
view doesn't have to be redrawn and display lists don't need to be
re-executed. The texture can just be re-used and re-composited with
different parameters. The downside is that this can use up limited video
memory, so this prop should be set back to false at the end of the
interaction/animation.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilitytraits"></a><span class="platform">ios</span>accessibilityTraits?: <span class="propType"><span><span>AccessibilityTraits, </span><span>[AccessibilityTraits]</span></span></span> <a class="hash-link" href="docs/viewproptypes.html#accessibilitytraits">#</a></h4><div><p>Provides additional traits to screen reader. By default no traits are
provided unless specified otherwise in element.</p><p>You can provide one trait or an array of many traits.</p><p>Possible values for <code>AccessibilityTraits</code> are:</p><ul><li><code>'none'</code> - The element has no traits.</li><li><code>'button'</code> - The element should be treated as a button.</li><li><code>'link'</code> - The element should be treated as a link.</li><li><code>'header'</code> - The element is a header that divides content into sections.</li><li><code>'search'</code> - The element should be treated as a search field.</li><li><code>'image'</code> - The element should be treated as an image.</li><li><code>'selected'</code> - The element is selected.</li><li><code>'plays'</code> - The element plays sound.</li><li><code>'key'</code> - The element should be treated like a keyboard key.</li><li><code>'text'</code> - The element should be treated as text.</li><li><code>'summary'</code> - The element provides app summary information.</li><li><code>'disabled'</code> - The element is disabled.</li><li><code>'frequentUpdates'</code> - The element frequently changes its value.</li><li><code>'startsMedia'</code> - The element starts a media session.</li><li><code>'adjustable'</code> - The element allows adjustment over a range of values.</li><li><code>'allowsDirectInteraction'</code> - The element allows direct touch interaction for VoiceOver users.</li><li><code>'pageTurn'</code> - Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.</li></ul><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="accessibilityviewismodal"></a><span class="platform">ios</span>accessibilityViewIsModal?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewproptypes.html#accessibilityviewismodal">#</a></h4><div><p>A value indicating whether VoiceOver should ignore the elements
within views that are siblings of the receiver.
Default is <code>false</code>.</p><p>See the <a href="docs/accessibility.html#accessibilitytraits-ios" target="_blank">Accessibility guide</a>
for more information.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shouldrasterizeios"></a><span class="platform">ios</span>shouldRasterizeIOS?: <span class="propType">bool</span> <a class="hash-link" href="docs/viewproptypes.html#shouldrasterizeios">#</a></h4><div><p>Whether this <code>View</code> should be rendered as a bitmap before compositing.</p><p>On iOS, this is useful for animations and interactions that do not
modify this component's dimensions nor its children; for example, when
translating the position of a static view, rasterization allows the
renderer to reuse a cached bitmap of a static view and quickly composite
it during each frame.</p><p>Rasterization incurs an off-screen drawing pass and the bitmap consumes
memory. Test and measure when using this property.</p></div></div></div></div>
docs/autogen_ViewStylePropTypes.md
-10
View File
File diff suppressed because one or more lines are too long
docs/autogen_VirtualizedList.md
-54
View File
@@ -1,54 +0,0 @@
---
id: virtualizedlist
title: VirtualizedList
category: Components
permalink: docs/virtualizedlist.html
---
<div><div><p>Base implementation for the more convenient <a href="/react-native/docs/flatlist.html" target=""><code>&lt;FlatList&gt;</code></a>
and <a href="/react-native/docs/sectionlist.html" target=""><code>&lt;SectionList&gt;</code></a> components, which are also better
documented. In general, this should only really be used if you need more flexibility than
<code>FlatList</code> provides, e.g. for use with immutable data instead of plain arrays.</p><p>Virtualization massively improves memory consumption and performance of large lists by
maintaining a finite render window of active items and replacing all items outside of the render
window with appropriately sized blank space. The window adapts to scrolling behavior, and items
are rendered incrementally with low-pri (after any running interactions) if they are far from the
visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.</p><p>Some caveats:</p><ul><li>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.</li><li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-
equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop
(e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on
changes. This includes the <code>data</code> prop and parent component state.</li><li>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.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="listemptycomponent"></a>ListEmptyComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/virtualizedlist.html#listemptycomponent">#</a></h4><div><p>Rendered when the list is empty. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/virtualizedlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?<span><span>ReactClass&lt;any&gt; | </span>React.Element&lt;any&gt;</span></span></span> <a class="hash-link" href="docs/virtualizedlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items. Can be a React Component Class, a render function, or
a rendered element.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array&lt;{key: string}&gt; but you can override
getItem, getItemCount, and keyExtractor to handle any type of index-based data.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="debug"></a>debug?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#debug">#</a></h4><div><p><code>debug</code> will turn on extra logging and visual overlays to aid with debugging both usage and
implementation, but with a significant perf hit.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablevirtualization"></a>disableVirtualization: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#disablevirtualization">#</a></h4><div><p>DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
unmounts react instances that are outside of the render window. You should only need to disable
this for debugging purposes.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
<code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitem"></a>getItem: <span class="propType">(data: any, index: number) =&gt; ?Item</span> <a class="hash-link" href="docs/virtualizedlist.html#getitem">#</a></h4><div><p>A generic accessor for extracting an item from any sort of data blob.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemcount"></a>getItemCount: <span class="propType">(data: any) =&gt; number</span> <a class="hash-link" href="docs/virtualizedlist.html#getitemcount">#</a></h4><div><p>Determines how many items are in the data blob.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemlayout"></a>getItemLayout?: <span class="propType">(
data: any,
index: number,
) =&gt; {length: number, offset: number, index: number}</span> <a class="hash-link" href="docs/virtualizedlist.html#getitemlayout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#horizontal">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialnumtorender"></a>initialNumToRender: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#initialnumtorender">#</a></h4><div><p>How many items to render in the initial batch. This should be enough to fill the screen but not
much more. Note these items will never be unmounted as part of the windowed rendering in order
to improve perceived performance of scroll-to-top actions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="initialscrollindex"></a>initialScrollIndex?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/virtualizedlist.html#initialscrollindex">#</a></h4><div><p>Instead of starting at the top with the first item, start at <code>initialScrollIndex</code>. This
disables the "scroll to top" optimization that keeps the first <code>initialNumToRender</code> items
always rendered and immediately renders the items starting at this initial index. Requires
<code>getItemLayout</code> to be implemented.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="inverted"></a>inverted?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#inverted">#</a></h4><div><p>Reverses the direction of scroll. Uses scale transforms of -1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: Item, index: number) =&gt; string</span> <a class="hash-link" href="docs/virtualizedlist.html#keyextractor">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="maxtorenderperbatch"></a>maxToRenderPerBatch: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#maxtorenderperbatch">#</a></h4><div><p>The maximum number of items to render in each incremental render batch. The more rendered at
once, the better the fill rate, but responsiveness my suffer because rendering content may
interfere with responding to button taps or other interactions.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType"><span>?(info: {distanceFromEnd: number}) =&gt; void</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onendreached">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onendreachedthreshold">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onlayout"></a>onLayout?: <span class="propType"><span>?Function</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onlayout">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType"><span>?Function</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onrefresh">#</a></h4><div><p>If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onviewableitemschanged"></a>onViewableItemsChanged?: <span class="propType"><span>?(info: {
viewableItems: Array&lt;ViewToken&gt;,
changed: Array&lt;ViewToken&gt;,
}) =&gt; void</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the
<code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#removeclippedsubviews">#</a></h4><div><p>Note: may have bugs (missing content) in some circumstances - use at your own risk.</p><p>This may improve scroll performance for large lists.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: any) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent?: <span class="propType">(props: Object) =&gt; React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderscrollcomponent">#</a></h4><div><p>Render a custom scroll component, e.g. with a differently styled <code>RefreshControl</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a>scrollEventThrottle?: <a class="hash-link" href="docs/virtualizedlist.html#scrolleventthrottle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="updatecellsbatchingperiod"></a>updateCellsBatchingPeriod: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#updatecellsbatchingperiod">#</a></h4><div><p>Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
screen. Similar fill rate/responsiveness tradeoff as <code>maxToRenderPerBatch</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/virtualizedlist.html#viewabilityconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="windowsize"></a>windowSize: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#windowsize">#</a></h4><div><p>Determines the maximum number of items rendered outside of the visible area, in units of
visible lengths. So if your list fills the screen, then <code>windowSize={21}</code> (the default) will
render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing
this number will reduce memory consumption and may improve performance, but will increase the
chance that fast scrolling may reveal momentary blank areas of unrendered content.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="progressviewoffset"></a><span class="platform">android</span>progressViewOffset?: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#progressviewoffset">#</a></h4><div><p>Set this when offset is needed for the loading indicator to show correctly.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/virtualizedlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoend">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoindex">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltoitem">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltooffset"></a>scrollToOffset<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/virtualizedlist.html#scrolltooffset">#</a></h4><div><p>Scroll to a specific content pixel offset in the list.</p><p>Param <code>offset</code> expects the offset to scroll to.
In case of <code>horizontal</code> is true, the offset is the x-value,
in any other case the offset is the y-value.</p><p>Param <code>animated</code> (<code>true</code> by default) defines whether the list
should do an animation while scrolling.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/virtualizedlist.html#recordinteraction">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flashscrollindicators"></a>flashScrollIndicators<span class="methodType">()</span> <a class="hash-link" href="docs/virtualizedlist.html#flashscrollindicators">#</a></h4></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/virtualizedlist.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h4><strong>Type:</strong><br>IntersectionTypeAnnotation</div></div></span></div>
docs/autogen_WebView.md
-49
View File
@@ -1,49 +0,0 @@
---
id: webview
title: WebView
category: Components
permalink: docs/webview.html
---
<div><div><p><code>WebView</code> renders web content in a native view.</p><div class="prism language-javascript"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> WebView <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">MyWeb</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>WebView
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">'https://github.com/facebook/react-native'</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginTop<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p>You can use this component to navigate back and forth in the web view's
history and configure various properties for the web content.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/webview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewproptypes"></a><a href="docs/viewproptypes.html#props">ViewPropTypes props...</a> <a class="hash-link" href="docs/webview.html#viewproptypes">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a>automaticallyAdjustContentInsets?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#automaticallyadjustcontentinsets">#</a></h4><div><p>Controls whether to adjust the content inset for web views that are
placed behind a navigation bar, tab bar, or toolbar. The default value
is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a>contentInset?: <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/webview.html#contentinset">#</a></h4><div><p>The amount by which the web view content is inset from the edges of
the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="html"></a>html?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#html">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="/react-native/img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectjavascript"></a>injectJavaScript?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#injectjavascript">#</a></h4><div><p>Function that accepts a string that will be passed to the WebView and
executed immediately as JavaScript.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectedjavascript"></a>injectedJavaScript?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#injectedjavascript">#</a></h4><div><p>Set this to provide JavaScript that will be injected into the web page
when the view loads.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mediaplaybackrequiresuseraction"></a>mediaPlaybackRequiresUserAction?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#mediaplaybackrequiresuseraction">#</a></h4><div><p>Boolean that determines whether HTML5 audio and video requires the user
to tap them before they start playing. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onerror">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> load fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onload">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> has finished loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onloadend">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> load succeeds or fails.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onloadstart">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> starts loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmessage"></a>onMessage?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onmessage">#</a></h4><div><p>A function that is invoked when the webview calls <code>window.postMessage</code>.
Setting this property will inject a <code>postMessage</code> global into your
webview, but will still call pre-existing values of <code>postMessage</code>.</p><p><code>window.postMessage</code> accepts one argument, <code>data</code>, which will be
available on the event object, <code>event.nativeEvent.data</code>. <code>data</code>
must be a string.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onnavigationstatechange"></a>onNavigationStateChange?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onnavigationstatechange">#</a></h4><div><p>Function that is invoked when the <code>WebView</code> loading starts or ends.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendererror"></a>renderError?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#rendererror">#</a></h4><div><p>Function that returns a view to show if there's an error.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderloading"></a>renderLoading?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#renderloading">#</a></h4><div><p>Function that returns a loading indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scalespagetofit"></a>scalesPageToFit?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scalespagetofit">#</a></h4><div><p>Boolean that controls whether the web content is scaled to fit
the view and enables the user to change the scale. The default value
is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source?: <span class="propType"><span><span><span>{<span><span><span>uri: string</span>, </span><span><span>method: string</span>, </span><span><span>headers: object</span>, </span><span>body: string</span></span>}</span>, </span><span><span>{<span><span><span>html: string</span>, </span><span>baseUrl: string</span></span>}</span>, </span>number</span></span> <a class="hash-link" href="docs/webview.html#source">#</a></h4><div><p>Loads static html or a uri (with optional headers) in the WebView.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="startinloadingstate"></a>startInLoadingState?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#startinloadingstate">#</a></h4><div><p>Boolean value that forces the <code>WebView</code> to show the loading view
on the first load.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">ViewPropTypes.style</span> <a class="hash-link" href="docs/webview.html#style">#</a></h4><div><p>The style to apply to the <code>WebView</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="url"></a>url?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#url">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="/react-native/img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="domstorageenabled"></a><span class="platform">android</span>domStorageEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#domstorageenabled">#</a></h4><div><p>Boolean value to control whether DOM Storage is enabled. Used only in
Android.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="javascriptenabled"></a><span class="platform">android</span>javaScriptEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#javascriptenabled">#</a></h4><div><p>Boolean value to enable JavaScript in the <code>WebView</code>. Used on Android only
as JavaScript is enabled by default on iOS. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mixedcontentmode"></a><span class="platform">android</span>mixedContentMode?: <span class="propType">enum('never', 'always', 'compatibility')</span> <a class="hash-link" href="docs/webview.html#mixedcontentmode">#</a></h4><div><p>Specifies the mixed content mode. i.e WebView will allow a secure origin to load content from any other origin.</p><p>Possible values for <code>mixedContentMode</code> are:</p><ul><li><code>'never'</code> (default) - WebView will not allow a secure origin to load content from an insecure origin.</li><li><code>'always'</code> - WebView will allow a secure origin to load content from any other origin, even if that origin is insecure.</li><li><code>'compatibility'</code> - WebView will attempt to be compatible with the approach of a modern web browser with regard to mixed content.</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="thirdpartycookiesenabled"></a><span class="platform">android</span>thirdPartyCookiesEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#thirdpartycookiesenabled">#</a></h4><div><p>Boolean value to enable third party cookies in the <code>WebView</code>. Used on
Android Lollipop and above only as third party cookies are enabled by
default on Android Kitkat and below and on iOS. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="useragent"></a><span class="platform">android</span>userAgent?: <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#useragent">#</a></h4><div><p>Sets the user-agent for the <code>WebView</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowsinlinemediaplayback"></a><span class="platform">ios</span>allowsInlineMediaPlayback?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#allowsinlinemediaplayback">#</a></h4><div><p>Boolean that determines whether HTML5 videos play inline or use the
native full-screen controller. The default value is <code>false</code>.</p><p><strong>NOTE</strong> : In order for video to play inline, not only does this
property need to be set to <code>true</code>, but the video element in the HTML
document must also include the <code>webkit-playsinline</code> attribute.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#bounces">#</a></h4><div><p>Boolean value that determines whether the web view bounces
when it reaches the edge of the content. The default value is <code>true</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="datadetectortypes"></a><span class="platform">ios</span>dataDetectorTypes?: <span class="propType"><span><span>enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), </span><span>[enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all')]</span></span></span> <a class="hash-link" href="docs/webview.html#datadetectortypes">#</a></h4><div><p>Determines the types of data converted to clickable URLs in the web view’s content.
By default only phone numbers are detected.</p><p>You can provide one type or an array of many types.</p><p>Possible values for <code>dataDetectorTypes</code> are:</p><ul><li><code>'phoneNumber'</code></li><li><code>'link'</code></li><li><code>'address'</code></li><li><code>'calendarEvent'</code></li><li><code>'none'</code></li><li><code>'all'</code></li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate?: <span class="propType">ScrollView.propTypes.decelerationRate</span> <a class="hash-link" href="docs/webview.html#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
decelerates after the user lifts their finger. You may also use the
string shortcuts <code>"normal"</code> and <code>"fast"</code> which match the underlying iOS
settings for <code>UIScrollViewDecelerationRateNormal</code> and
<code>UIScrollViewDecelerationRateFast</code> respectively:</p><ul><li>normal: 0.998</li><li>fast: 0.99 (the default for iOS web view)</li></ul></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshouldstartloadwithrequest"></a><span class="platform">ios</span>onShouldStartLoadWithRequest?: <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onshouldstartloadwithrequest">#</a></h4><div><p>Function that allows custom handling of any web view requests. Return
<code>true</code> from the function to continue loading the request and <code>false</code>
to stop loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a><span class="platform">ios</span>scrollEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scrollenabled">#</a></h4><div><p>Boolean value that determines whether scrolling is enabled in the
<code>WebView</code>. The default value is <code>true</code>.</p></div></div></div></div>
docs/building-for-apple-tv.md
-90
View File
@@ -1,90 +0,0 @@
---
id: building-for-apple-tv
title: Building For Apple TV
---
Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications.
The RNTester app supports Apple TV; use the `RNTester-tvOS` build target to build for tvOS.
## Build changes
- *Native layer*: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.
- *react-native init*: New React Native projects created with `react-native init` will have Apple TV target automatically created in their XCode projects.
- *JavaScript layer*: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing
```js
var Platform = require('Platform');
var running_on_apple_tv = Platform.isTVOS;
```
## Code changes
- *General support for tvOS*: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard.
- *Common codebase*: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS.
- *Access to touchable controls*: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight` and `TouchableOpacity` will "just work". In particular:
- `touchableHandleActivePressIn` will be executed when the touchable view goes into focus
- `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus
- `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote.
- *TV remote/keyboard input*: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code:
```js
var TVEventHandler = require('TVEventHandler');
.
.
.
class Game2048 extends React.Component {
_tvEventHandler: any;
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({board: cmp.state.board.move(2)});
} else if(evt && evt.eventType === 'up') {
cmp.setState({board: cmp.state.board.move(1)});
} else if(evt && evt.eventType === 'left') {
cmp.setState({board: cmp.state.board.move(0)});
} else if(evt && evt.eventType === 'down') {
cmp.setState({board: cmp.state.board.move(3)});
} else if(evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
```
- *Dev Menu support*: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) )
- *TV remote animations*: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties.
- *Back navigation with the TV remote menu button*: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.
- *TabBarIOS behavior*: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code.
- *Known issues*:
- [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be easily worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944).
docs/communication-ios.md
-215
View File
@@ -1,215 +0,0 @@
---
id: communication-ios
title: Communication between native and React Native
---
In [Integrating with Existing Apps guide](docs/integration-with-existing-apps.html) and [Native UI Components guide](docs/native-components-ios.html) we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.
## Introduction
React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.
The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some special, cross-language mechanisms that would allow us to pass information between them.
## Properties
Properties are the simplest way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.
### Passing properties from native to React Native
In order to embed a React Native view in a native component, we use `RCTRootView`. `RCTRootView` is a `UIView` that holds a React Native app. It also provides an interface between native side and the hosted app.
`RCTRootView` has an initializer that allows you to pass arbitrary properties down to the React Native app. The `initialProperties` parameter has to be an instance of `NSDictionary`. The dictionary is internally converted into a JSON object that the top-level JS component can reference.
```
NSArray *imageList = @[@"http://foo.com/bar1.png",
@"http://foo.com/bar2.png"];
NSDictionary *props = @{@"images" : imageList};
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"ImageBrowserApp"
initialProperties:props];
```
```
'use strict';
import React from 'react';
import {
AppRegistry,
View,
Image
} from 'react-native';
class ImageBrowserApp extends React.Component {
renderImage(imgURI) {
return (
<Image source={{uri: imgURI}} />
);
}
render() {
return (
<View>
{this.props.images.map(this.renderImage)}
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => ImageBrowserApp);
```
`RCTRootView` also provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
```
NSArray *imageList = @[@"http://foo.com/bar3.png",
@"http://foo.com/bar4.png"];
rootView.appProperties = @{@"images" : imageList};
```
It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.
There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
> ***Note:***
> Currently, JS functions `componentWillReceiveProps` and `componentWillUpdateProps` of the top level RN component will not be called after a prop update. However, you can access the new props in `componentWillMount` function.
### Passing properties from React Native to native
The problem exposing properties of native components is covered in detail in [this article](docs/native-components-ios.html#properties). In short, export properties with `RCT_CUSTOM_VIEW_PROPERTY` macro in your custom native component, then just use them in React Native as if the component was an ordinary React Native component.
### Limits of properties
The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.
Although we have a flavor of cross-language callbacks ([described here](docs/native-modules-ios.html#callbacks)), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.
## Other ways of cross-language interaction (events and native modules)
As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the 'pure native' part of your app).
React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.
### Calling React Native functions from native (events)
Events are described in detail in [this article](docs/native-components-ios.html#events). Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.
Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:
* As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.
* Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, which makes them hard to debug.
* If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you'll likely need to introduce identifiers and pass them along with events (you can use the native view's `reactTag` as an identifier).
The common pattern we use when embedding native in React Native is to make the native component's RCTViewManager a delegate for the views, sending events back to JavaScript via the bridge. This keeps related event calls in one place.
### Calling native functions from React Native (native modules)
Native modules are Objective-C classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](docs/native-modules-ios.html#content).
The fact that native modules are singletons limits the mechanism in the context of embedding. Let's say we have a React Native component embedded in a native view and we want to update the native, parent view. Using the native module mechanism, we would export a function that not only takes expected arguments, but also an identifier of the parent native view. The identifier would be used to retrieve a reference to the parent view to update. That said, we would need to keep a mapping from identifiers to native views in the module.
Although this solution is complex, it is used in `RCTUIManager`, which is an internal React Native class that manages all React Native views.
Native modules can also be used to expose existing native libraries to JS. The [Geolocation library](https://github.com/facebook/react-native/tree/master/Libraries/Geolocation) is a living example of the idea.
> ***Warning***:
> All native modules share the same namespace. Watch out for name collisions when creating new ones.
## Layout computation flow
When integrating native and React Native, we also need a way to consolidate two different layout systems. This section covers common layout problems and provides a brief description of mechanisms to address them.
### Layout of a native component embedded in React Native
This case is covered in [this article](docs/native-components-ios.html#styles). Basically, as all our native react views are subclasses of `UIView`, most style and size attributes will work like you would expect out of the box.
### Layout of a React Native component embedded in native
#### React Native content with fixed size
The simplest scenario is when we have a React Native app with a fixed size, which is known to the native side. In particular, a full-screen React Native view falls into this case. If we want a smaller root view, we can explicitly set RCTRootView's frame.
For instance, to make an RN app 200 (logical) pixels high, and the hosting view's width wide, we could do:
```
// SomeViewController.m
- (void)viewDidLoad
{
[...]
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:appName
initialProperties:props];
rootView.frame = CGRectMake(0, 0, self.view.width, 200);
[self.view addSubview:rootView];
}
```
When we have a fixed size root view, we need to respect its bounds on the JS side. In other words, we need to ensure that the React Native content can be contained within the fixed-size root view. The easiest way to ensure this is to use flexbox layout. If you use absolute positioning, and React components are visible outside the root view's bounds, you'll get overlap with native views, causing some features to behave unexpectedly. For instance, 'TouchableHighlight' will not highlight your touches outside the root view's bounds.
It's totally fine to update root view's size dynamically by re-setting its frame property. React Native will take care of the content's layout.
#### React Native content with flexible size
In some cases we'd like to render content of initially unknown size. Let's say the size will be defined dynamically in JS. We have two solutions to this problem.
1. You can wrap your React Native view in a `ScrollView` component. This guarantees that your content will always be available and it won't overlap with native views.
2. React Native allows you to determine, in JS, the size of the RN app and provide it to the owner of the hosting `RCTRootView`. The owner is then responsible for re-laying out the subviews and keeping the UI consistent. We achieve this with `RCTRootView`'s flexibility modes.
`RCTRootView` supports 4 different size flexibility modes:
```
// RCTRootView.h
typedef NS_ENUM(NSInteger, RCTRootViewSizeFlexibility) {
RCTRootViewSizeFlexibilityNone = 0,
RCTRootViewSizeFlexibilityWidth,
RCTRootViewSizeFlexibilityHeight,
RCTRootViewSizeFlexibilityWidthAndHeight,
};
```
`RCTRootViewSizeFlexibilityNone` is the default value, which makes a root view's size fixed (but it still can be updated with `setFrame:`). The other three modes allow us to track React Native content's size updates. For instance, setting mode to `RCTRootViewSizeFlexibilityHeight` will cause React Native to measure the content's height and pass that information back to `RCTRootView`'s delegate. An arbitrary action can be performed within the delegate, including setting the root view's frame, so the content fits. The delegate is called only when the size of the content has changed.
> ***Warning:***
> Making a dimension flexible in both JS and native leads to undefined behavior. For example - don't make a top-level React component's width flexible (with `flexbox`) while you're using `RCTRootViewSizeFlexibilityWidth` on the hosting `RCTRootView`.
Let's look at an example.
```
// FlexibleSizeExampleView.m
- (instancetype)initWithFrame:(CGRect)frame
{
[...]
_rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"FlexibilityExampleApp"
initialProperties:@{}];
_rootView.delegate = self;
_rootView.sizeFlexibility = RCTRootViewSizeFlexibilityHeight;
_rootView.frame = CGRectMake(0, 0, self.frame.size.width, 0);
}
#pragma mark - RCTRootViewDelegate
- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView
{
CGRect newFrame = rootView.frame;
newFrame.size = rootView.intrinsicContentSize;
rootView.frame = newFrame;
}
```
In the example we have a `FlexibleSizeExampleView` view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to `RCTRootViewSizeFlexibilityHeight`, which means that `rootViewDidChangeIntrinsicSize:` method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.
You can checkout full source code of the example [here](https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m).
It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate `rootViewDidChangeIntrinsicSize:` method will be called once the content size is known.
> ***Note:*** React Native layout calculation is performed on a special thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.
> ***Note:*** React Native does not perform any layout calculations until the root view becomes a subview of some other views. If you want to hide React Native view until its dimensions are known, add the root view as a subview and make it initially hidden (use `UIView`'s `hidden` property). Then change its visibility in the delegate method.

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