From 17274257ee824fa3e09c623bc75ea349ad90d5e5 Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Tue, 24 Mar 2015 20:54:37 -0700 Subject: [PATCH] update website --- _index.html | 50 +++++++++++++++++- docs/activityindicatorios.html | 2 +- docs/alertios.html | 2 +- docs/animation.html | 2 +- docs/appregistry.html | 4 +- docs/appstate.html | 12 ----- docs/appstateios.html | 4 +- docs/asyncstorage.html | 2 +- docs/cameraroll.html | 2 +- docs/datepickerios.html | 2 +- docs/flexbox.html | 2 +- docs/getting-started.html | 2 +- docs/image.html | 2 +- docs/interactionmanager.html | 2 +- docs/layoutanimation.html | 4 +- docs/listview.html | 2 +- docs/mapview.html | 2 +- docs/nativemodulesios.html | 2 +- docs/navigatorios.html | 2 +- docs/netinfo.html | 4 +- docs/network.html | 2 +- docs/panresponder.html | 83 ++++++++++++++++++++++++++++++ docs/pickerios.html | 2 +- docs/pixelratio.html | 4 +- docs/pixels.html | 2 +- docs/pushnotificationios.html | 14 +++++ docs/reactnavigator.html | 14 +++++ docs/scrollview.html | 4 +- docs/sliderios.html | 2 +- docs/statusbarios.html | 2 +- docs/style.html | 2 +- docs/stylesheet.html | 4 +- docs/switchios.html | 2 +- docs/tabbarios.html | 2 +- docs/text.html | 2 +- docs/textinput.html | 2 +- docs/timers.html | 2 +- docs/touchablehighlight.html | 2 +- docs/touchableopacity.html | 2 +- docs/touchablewithoutfeedback.html | 2 +- docs/vibrationios.html | 2 +- docs/videos.html | 2 +- docs/view.html | 2 +- docs/webview.html | 2 +- 44 files changed, 206 insertions(+), 59 deletions(-) delete mode 100644 docs/appstate.html create mode 100644 docs/panresponder.html create mode 100644 docs/pushnotificationios.html create mode 100644 docs/reactnavigator.html diff --git a/_index.html b/_index.html index 58eaa647bb2..ecc56094d60 100644 --- a/_index.html +++ b/_index.html @@ -1,4 +1,52 @@ -React Native | Build Native Apps Using React
React Native
React Native
Build native apps using React
Learn more about React Native

© 2015 Facebook Inc.
React Native
React Native
Build native apps using React
Learn more about React Native

Native iOS Components

With React Native, you can use the platform components such as iOS UITabBar and UINavigationController.

var React = require('react-native'); +var { TabBarIOS, NavigatorIOS } = React; +module.exports = React.createClass({ + render: function() { + return ( + <TabBarIOS> + <TabBarIOS.Item title="React Native" selected={true}> + <NavigatorIOS initialRoute={{ title: 'React Native' }} /> + </TabBarIOS.Item> + </TabBarIOS> + ); + }, +});

Async

Decoding images off of the main thread... Asynchronous bridge, Chrome Dev Tools...

Touch Handling

iOS has a very powerful system called Responder to handle touches which the web lacks. React Native implements iOS responder system and provides high level components such as TouchableHighlight that work well right off the bat.

var React = require('react-native'); +var { ScrollView, TouchableHighlight, Text } = React; +module.exports = React.createClass({ + render: function() { + return ( + <ScrollView> + <TouchableHighlight underlayColor="#cccccc"> + <Text>Proper Touch Handling</Text> + </TouchableHighlight> + </ScrollView> + ); + }, +});

Flexbox

Laying out views should be easy

var React = require('react-native'); +var { Image, StyleSheet, Text, View } = React; +module.exports = React.createClass({ + render: function() { + return ( + <View style={styles.row}> + <Image + source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} + style={styles.image} + /> + <View style={styles.text}> + <Text style={styles.title}>React Native</Text> + <Text style={styles.subtitle}>Build high quality mobile apps using React</Text> + </View> + </View> + ); + }, +}); +var styles = StyleSheet.create({ + row: { flexDirection: 'row', margin: 40 }, + image: { width: 40, height: 40, marginRight: 10 }, + text: { flex: 1, justifyContent: 'center'}, + title: { fontSize: 11, fontWeight: 'bold' }, + subtitle: { fontSize: 10 }, +});

Polyfills

React Native attempts to innovate on the view layer, for the rest, it polyfills web standards. You can use npm to install JavaScript dependencies, XMLHttpRequest, requestAnimationFrame, navigator.geolocation...

© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Props #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

ActivityIndicatorIOS

Props #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AlertIOS

AlertIOS manages native iOS alerts, option sheets, and share dialogs

Methods #

static alert(title: string, message?: string, buttons?: Array<{ +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AlertIOS

AlertIOS manages native iOS alerts, option sheets, and share dialogs

Methods #

static alert(title: string, message?: string, buttons?: Array<{ text: ?string; onPress: ?Function; }>) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Animation

All rights reserved.

This source code is licensed under the BSD-style license found in the +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Animation

All rights reserved.

This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant of patent rights can be found in the PATENTS file in the same directory.

@flow

Methods #

static startAnimation(node: any, duration: number, delay: number, easing: (string | EasingFunction), properties: {[key: string]: any}) #

static stopAnimation(tag: number) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AppRegistry

AppRegistry is the JS entry point to running all React Native apps. App +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AppRegistry

AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.

AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are -required.

Methods #

static registerConfig(config) #

static registerComponent(appKey, getComponentFunc) #

static registerRunnable(appKey, func) #

static runApplication(appKey, appParameters) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AppState

Error
Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/appstateios.html b/docs/appstateios.html index 56052ac52aa..d66755c4b10 100644 --- a/docs/appstateios.html +++ b/docs/appstateios.html @@ -1,6 +1,6 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AppStateIOS

All rights reserved.

This source code is licensed under the BSD-style license found in the +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AppStateIOS

All rights reserved.

This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant -of patent rights can be found in the PATENTS file in the same directory.

Methods #

static addEventListener(type, handler) #

static removeEventListener(type, handler) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AsyncStorage

AsyncStorage is a simple, asynchronous, persistent, global, key-value storage +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AsyncStorage

AsyncStorage is a simple, asynchronous, persistent, global, key-value storage system. It should be used instead of LocalStorage.

It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.

This JS code is a simple facad over the native iOS implementation to provide diff --git a/docs/cameraroll.html b/docs/cameraroll.html index b4019ae9518..128cd088f33 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

CameraRoll

All rights reserved.

This source code is licensed under the BSD-style license found in the +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

CameraRoll

All rights reserved.

This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant of patent rights can be found in the PATENTS file in the same directory.

Methods #

static saveImageWithTag(tag: string, successCallback, errorCallback) #

Saves the image with tag tag to the camera roll.

@param {string} tag - Can be any of the three kinds of tags we accept: 1. URL diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 0fe476686d1..4a16c4d7b6e 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

DatePickerIOS

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

DatePickerIOS

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the onDateChange callback and update the date prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.date as the diff --git a/docs/flexbox.html b/docs/flexbox.html index f90bac02494..ad6e33acf06 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Flexbox

Props #

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

flexDirection enum('row', 'column') #

flexWrap enum('wrap', 'nowrap') #

height number #

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

position enum('absolute', 'relative') #

right number #

top number #

width number #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Flexbox

Props #

alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

flexDirection enum('row', 'column') #

flexWrap enum('wrap', 'nowrap') #

height number #

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

position enum('absolute', 'relative') #

right number #

top number #

width number #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Getting Started

Our first React Native implementation is ReactKit, targeting iOS. We are also +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Getting Started

Our first React Native implementation is ReactKit, targeting iOS. We are also working on an Android implementation which we will release later. ReactKit apps are built using the React JS framework, and render directly to native UIKit elements using a fully asynchronous architecture. There is no diff --git a/docs/image.html b/docs/image.html index 7207629d8e6..47ef17a89d1 100644 --- a/docs/image.html +++ b/docs/image.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Image

A react component for displaying different types of images, +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Image

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.

Example usage:

renderImages: function() { return ( diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index edee2bed2b8..4f6ba08e48d 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

InteractionManager

InteractionManager allows long-running work to be scheduled after any +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

InteractionManager

InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.

Applications can schedule tasks to run after interactions with the following:

InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task... diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index a0be4ed28ac..e00774ca873 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,6 +1,6 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

LayoutAnimation

All rights reserved.

This source code is licensed under the BSD-style license found in the +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

LayoutAnimation

All rights reserved.

This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant -of patent rights can be found in the PATENTS file in the same directory.

Methods #

static configureNext(config, onAnimationDidEnd, onError) #

static create(duration, type, creationProp) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

ListView

ListView - A core component designed for efficient display of vertically +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

ListView

ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow diff --git a/docs/mapview.html b/docs/mapview.html index ce6718634e4..fa64701277a 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

MapView

Props #

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

MapView

Props #

legalLabelInsets {top: number, left: number, bottom: number, right: number} #

Insets for the map's legal label, originally at bottom left of the map. See EdgeInsetsPropType.js for more information.

maxDelta number #

Maximum size of area that can be displayed.

minDelta number #

Minimum size of area that can be displayed.

onRegionChange function #

Callback that is called continuously when the user is dragging the map.

onRegionChangeComplete function #

Callback that is called once, when the user is done moving the map.

pitchEnabled bool #

When this property is set to true and a valid camera is associated with the map, the camera’s pitch angle is used to tilt the plane of the map. When this property is set to false, the camera’s pitch diff --git a/docs/nativemodulesios.html b/docs/nativemodulesios.html index 6a035cab8a0..2c7b177209a 100644 --- a/docs/nativemodulesios.html +++ b/docs/nativemodulesios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Native Modules (iOS)

Sometimes an app needs access to platform API, and React Native doesn't have a corresponding wrapper yet. Maybe you want to reuse some existing Objective-C or C++ code without having to reimplement it in JavaScript. Or write some high performance, multi-threaded code such as image processing, network stack, database or rendering.

We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.

This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C (Swift is not supported yet) and core libraries (Foundation, UIKit).

iOS Calendar module example #

This guide will use iOS Calendar API example. Let's say we would like to be able to access iOS calendar from JavaScript.

Native module is just an Objectve-C class that implements RCTBridgeModule protocol. If you are wondering, RCT is a shorthand for ReaCT.

// CalendarManager.h +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Native Modules (iOS)

Sometimes an app needs access to platform API, and React Native doesn't have a corresponding wrapper yet. Maybe you want to reuse some existing Objective-C or C++ code without having to reimplement it in JavaScript. Or write some high performance, multi-threaded code such as image processing, network stack, database or rendering.

We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.

This is a more advanced guide that shows how to build a native module. It assumes the reader knows Objective-C (Swift is not supported yet) and core libraries (Foundation, UIKit).

iOS Calendar module example #

This guide will use iOS Calendar API example. Let's say we would like to be able to access iOS calendar from JavaScript.

Native module is just an Objectve-C class that implements RCTBridgeModule protocol. If you are wondering, RCT is a shorthand for ReaCT.

// CalendarManager.h #import "RCTBridgeModule.h" @interface CalendarManager : NSObject <RCTBridgeModule> diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 6525e613940..d4e8d647958 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

NavigatorIOS

NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

NavigatorIOS

NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app.

Routes #

A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as initialRoute:

render: function() { return ( diff --git a/docs/netinfo.html b/docs/netinfo.html index 3905146ebd5..da3d315f4d0 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

NetInfo

NetInfo exposes info about online/offline status

== iOS Reachability

Asyncronously determine if the device is online and on a cellular network.

  • "none" - device is offline
  • "wifi" - device is online and connected via wifi, or is the iOS simulator
  • "cell" - device is connected via Edge, 3G, WiMax, or LTE
  • "unknown" - error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => { +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

NetInfo

NetInfo exposes info about online/offline status

== iOS Reachability

Asyncronously determine if the device is online and on a cellular network.

  • "none" - device is offline
  • "wifi" - device is online and connected via wifi, or is the iOS simulator
  • "cell" - device is connected via Edge, 3G, WiMax, or LTE
  • "unknown" - error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => { console.log('Initial: ' + reach); }); function handleFirstReachabilityChange(reach) { @@ -11,7 +11,7 @@ NetInfo.reachabilityIOS.addEventListener( 'change', handleFirstReachabilityChange -);

Methods #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Network

One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.

XMLHttpRequest #

XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.

var request = new XMLHttpRequest(); +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Network

One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.

XMLHttpRequest #

XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.

var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; diff --git a/docs/panresponder.html b/docs/panresponder.html new file mode 100644 index 00000000000..08d0614f1cf --- /dev/null +++ b/docs/panresponder.html @@ -0,0 +1,83 @@ +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

PanResponder

+----------------------------+ +--------------------------------+ +| ResponderTouchHistoryStore | |TouchHistoryMath | ++----------------------------+ +----------+---------------------+ +|Global store of touchHistory| |Allocation-less math util | +|including activeness, start | |on touch history (centroids | +|position, prev/cur position.| |and multitouch movement etc) | +| | | | ++----^-----------------------+ +----^---------------------------+ + | | + | (records relevant history | + | of touches relevant for | + | implementing higher level | + | gestures) | + | | ++----+-----------------------+ +----|---------------------------+ +| ResponderEventPlugin | | | Your App/Component | ++----------------------------+ +----|---------------------------+ +|Negotiates which view gets | Low level | | High level | +|onResponderMove events. | events w/ | +-+-------+ events w/ | +|Also records history into | touchHistory| | Pan | multitouch + | +|ResponderTouchHistoryStore. +---------------->Responder+-----> accumulative| ++----------------------------+ attached to | | | distance and | + each event | +---------+ velocity. | + | | + | | + +--------------------------------+

Gesture that calculates cumulative movement over time in a way that just +"does the right thing" for multiple touches. The "right thing" is very +nuanced. When moving two touches in opposite directions, the cumulative +distance is zero in each dimension. When two touches move in parallel five +pixels in the same direction, the cumulative distance is five, not ten. If +two touches start, one moves five in a direction, then stops and the other +touch moves fives in the same direction, the cumulative distance is ten.

This logic requires a kind of processing of time "clusters" of touch events +so that two touch moves that essentially occur in parallel but move every +other frame respectively, are considered part of the same movement.

Explanation of some of the non-obvious fields:

  • moveX/moveY: If no move event has been observed, then (moveX, moveY) is +invalid. If a move event has been observed, (moveX, moveY) is the +centroid of the most recently moved "cluster" of active touches. +(Currently all move have the same timeStamp, but later we should add some +threshold for what is considered to be "moving"). If a palm is +accidentally counted as a touch, but a finger is moving greatly, the palm +will move slightly, but we only want to count the single moving touch.
  • x0/y0: Centroid location (non-cumulative) at the time of becoming +responder.
  • dx/dy: Cumulative touch distance - not the same thing as sum of each touch +distance. Accounts for touch moves that are clustered together in time, +moving the same direction. Only valid when currently responder (otherwise, +it only represents the drag distance below the threshold).
  • vx/vy: Velocity.

Methods #

static _initializeGestureState(gestureState) #

static _updateGestureStateOnMove(gestureState, touchHistory) #

This is nuanced and is necessary. It is incorrect to continuously take all +active and recently moved touches, find the centroid, and track how that +result changes over time. Instead, we must take all recently moved +touches, and calculate how the centroid has changed just for those +recently moved touches, and append that change to an accumulator. This is +to (at least) handle the case where the user is moving three fingers, and +then one of the fingers stops but the other two continue.

This is very different than taking all of the recently moved touches and +storing their centroid as dx/dy. For correctness, we must accumulate +changes in the centroid of recently moved touches.

There is also some nuance with how we handle multiple moved touches in a +single event. With the way ReactIOSEventEmitter dispatches touches as +individual events, multiple touches generate two 'move' events, each of +them triggering onResponderMove. But with the way PanResponder works, +all of the gesture inference is performed on the first dispatch, since it +looks at all of the touches (even the ones for which there hasn't been a +native dispatch yet). Therefore, PanResponder does not call +onResponderMove passed the first dispatch. This diverges from the +typical responder callback pattern (without using PanResponder), but +avoids more dispatches than necessary.

static create(config: object) #

@param {object} config Enhanced versions of all of the responder callbacks +that accept not only the typical ResponderSyntheticEvent, but also the +PanResponder gesture state. Simply replace the word Responder with +PanResponder in each of the typical onResponder* callbacks. For +example, the config object would look like:

  • onMoveShouldSetPanResponder: (e, gestureState) => {...}
  • onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
  • onStartShouldSetPanResponder: (e, gestureState) => {...}
  • onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
  • onPanResponderReject: (e, gestureState) => {...}
  • onPanResponderGrant: (e, gestureState) => {...}
  • onPanResponderStart: (e, gestureState) => {...}
  • onPanResponderEnd: (e, gestureState) => {...}
  • onPanResponderRelease: (e, gestureState) => {...}
  • onPanResponderMove: (e, gestureState) => {...}
  • onPanResponderTerminate: (e, gestureState) => {...}

  • onPanResponderTerminationRequest: (e, gestureState) => {...}

  • In general, for events that have capture equivalents, we update the +gestureState once in the capture phase and can use it in the bubble phase +as well.

  • Be careful with onStartShould* callbacks. They only reflect updated +gestureState for start/end events that bubble/capture to the Node. +Once the node is the responder, you can rely on every start/end event +being processed by the gesture and gestureState being updated +accordingly. (numberActiveTouches) may not be totally accurate unless you +are the responder.

Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/pickerios.html b/docs/pickerios.html index 760d4ddcda6..6e7e70fd8c9 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

PickerIOS

Props #

onValueChange function #

selectedValue any #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

PickerIOS

Props #

onValueChange function #

selectedValue any #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

PixelRatio

PixelRatio class gives access to the device pixel density.

There are a few use cases for using PixelRatio:

Displaying a line that's as thin as the device permits #

A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

PixelRatio

PixelRatio class gives access to the device pixel density.

There are a few use cases for using PixelRatio:

Displaying a line that's as thin as the device permits #

A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's thinner using a width of 1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.

style={{ borderWidth: 1 / PixelRatio.get() }}

Fetching a correctly sized image #

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display @@ -6,7 +6,7 @@ by the pixel ratio.

: 200 * PixelRatio.get(), height: 100 * PixelRatio.get() }); -<Image source={image} style={{width: 200, height: 100}} />

Methods #

static get() #

Returns the device pixel density. Some examples:

  • PixelRatio.get() === 2
    • iPhone 4, 4S
    • iPhone 5, 5c, 5s
    • iPhone 6
  • PixelRatio.get() === 3
    • iPhone 6 plus
Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Physical vs Logical Pixels

Pixel Grid Snapping #

In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.

In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

Displaying a line that's as thin as the device permits #

A width of 1 is actually 2 physical pixels thick on an iPhone 4 and 3 physical pixels thick on an iphone 6+. If you want to display a line that's as thin as possible, you can use a width of 1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.

style={{ borderWidth: 1 / PixelRatio.get() }}

Fetching a correctly sized image #

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

var image = getImage({ +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Physical vs Logical Pixels

Pixel Grid Snapping #

In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry.

In practice, we found out that developers do not want this feature and they have to work around it by doing manual rounding in order to avoid having blurry elements. In React Native, we are rounding all the pixels automatically.

We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big.

In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors.

Displaying a line that's as thin as the device permits #

A width of 1 is actually 2 physical pixels thick on an iPhone 4 and 3 physical pixels thick on an iphone 6+. If you want to display a line that's as thin as possible, you can use a width of 1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.

style={{ borderWidth: 1 / PixelRatio.get() }}

Fetching a correctly sized image #

You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio.

var image = getImage({ width: 200 * PixelRatio.get(), height: 100 * PixelRatio.get(), }); diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html new file mode 100644 index 00000000000..eb74eef18cf --- /dev/null +++ b/docs/pushnotificationios.html @@ -0,0 +1,14 @@ +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

PushNotificationIOS

All rights reserved.

This source code is licensed under the BSD-style license found in the +LICENSE file in the root directory of this source tree. An additional grant +of patent rights can be found in the PATENTS file in the same directory.

@flow

Methods #

static setApplicationIconBadgeNumber(number) #

static getApplicationIconBadgeNumber(callback) #

static addEventListener(type, handler) #

static requestPermissions() #

static checkPermissions(callback) #

static removeEventListener(type, handler) #

static popInitialNotification() #

0constructor(nativeNotif) #

0getMessage() #

0getSound() #

0getAlert() #

0getBadgeCount() #

0getData() #

Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/reactnavigator.html b/docs/reactnavigator.html new file mode 100644 index 00000000000..23321f37315 --- /dev/null +++ b/docs/reactnavigator.html @@ -0,0 +1,14 @@ +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

ReactNavigator

Props #

configureScene function #

initialRoute object #

initialRouteStack [object] #

navigationBar node #

navigator object #

onDidFocus function #

onItemRef function #

onWillFocus function #

renderScene function #

sceneStyle #

shouldJumpOnBackstackPop bool #

Should the backstack back button "jump" back instead of pop? Set to true +if a jump forward might happen after the android back button is pressed, +so the scenes will remain mounted

Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/scrollview.html b/docs/scrollview.html index b7cff487648..41418606e77 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

ScrollView

Component that wraps platform ScrollView while providing +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

ScrollView

Component that wraps platform ScrollView while providing integration with touch locking "responder" system.

Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.

Props #

alwaysBounceHorizontal bool #

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 @@ -39,7 +39,7 @@ The default value is true.

style style #

Flexbox...
backgroundColor string
borderBottomColor string
borderColor string
borderLeftColor string
borderRadius number
borderRightColor string
borderTopColor string
opacity number
overflow enum('visible', 'hidden')
rotation number
scaleX number
scaleY number
shadowColor string
shadowOffset {h: number, w: number}
shadowOpacity number
shadowRadius number
transformMatrix [number]
translateX number
translateY number

throttleScrollCallbackMS number #

zoomScale number #

The current scale of the scroll view content. The default value is 1.0.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

SliderIOS

Props #

onSlidingComplete function #

Callback called when the user finishes changing the value (e.g. when +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

SliderIOS

Props #

onSlidingComplete function #

Callback called when the user finishes changing the value (e.g. when the slider is released).

onValueChange function #

Callback continuously called while the user is dragging the slider.

style View#style #

Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info.

value number #

Initial value of the slider. The value should be between 0 and 1. Default value is 0.

This is not a controlled component, e.g. if you don't update diff --git a/docs/statusbarios.html b/docs/statusbarios.html index c6ba2e9519e..5191ac590a1 100644 --- a/docs/statusbarios.html +++ b/docs/statusbarios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

StatusBarIOS

All rights reserved.

This source code is licensed under the BSD-style license found in the +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

StatusBarIOS

All rights reserved.

This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant of patent rights can be found in the PATENTS file in the same directory.

@flow

Methods #

static setStyle(style: number, animated?: boolean) #

static setHidden(hidden: boolean, animation: number) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Style

Declaring Styles #

The way to declare styles in React Native is the following:

var styles = StyleSheet.create({ +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

Style

Declaring Styles #

The way to declare styles in React Native is the following:

var styles = StyleSheet.create({ base: { width: 38, height: 38, diff --git a/docs/stylesheet.html b/docs/stylesheet.html index d4e018cc0b2..ff89f0f9127 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

StyleSheet

A StyleSheet is an abstraction similar to CSS StyleSheets

Create a new StyleSheet:

var styles = StyleSheet.create({ +React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

StyleSheet

A StyleSheet is an abstraction similar to CSS StyleSheets

Create a new StyleSheet:

var styles = StyleSheet.create({ container: { borderRadius: 4, borderWidth: 0.5, @@ -17,7 +17,7 @@ code easier to understand.
  • Naming the styles is a good way to add meaning to the low level components in the render function.

    • Performance:

    • Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
    • It also allows to send the style only once through the bridge. All -subsequent uses are going to refer an id (not implemented yet).

    Methods #

    static create(obj) #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    SwitchIOS

    Use SwitchIOS to render a boolean input on iOS. This is +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    SwitchIOS

    Use SwitchIOS to render a boolean input on iOS. This is a controlled component, so you must hook in to the onValueChange callback and update the value prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect props.value as the diff --git a/docs/tabbarios.html b/docs/tabbarios.html index 33bffb237e8..b467f0a6d75 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TabBarIOS

    Props #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TabBarIOS

    Props #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    Text

    A react component for displaying text which supports nesting, +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    Text

    A react component for displaying text which supports nesting, styling, and touch handling. In the following example, the nested title and body text will inherit the fontFamily from styles.baseText, but the title provides its own additional styles. The title and body will stack on top of diff --git a/docs/textinput.html b/docs/textinput.html index 8b68d1effc2..3be1c26eee0 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TextInput

    A foundational component for inputting text into the app via a +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TextInput

    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.

    The simplest use case is to plop down a TextInput and subscribe to the diff --git a/docs/timers.html b/docs/timers.html index 58717d8d648..1693c8b9af3 100644 --- a/docs/timers.html +++ b/docs/timers.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    Timers

    Timers are an important part of an application and React Native implements the browser timers.

    Timers #

    • setTimeout, clearTimeout
    • setInterval, clearInterval
    • setImmediate, clearImmediate
    • requestAnimationFrame, cancelAnimationFrame

    requestAnimationFrame(fn) is the exact equivalent of setTimeout(fn, 0), they are triggered right after the screen has been flushed.

    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:

    InteractionManager.runAfterInteractions(() => { +React Native | Build Native Apps Using React
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    Timers

    Timers are an important part of an application and React Native implements the browser timers.

    Timers #

    • setTimeout, clearTimeout
    • setInterval, clearInterval
    • setImmediate, clearImmediate
    • requestAnimationFrame, cancelAnimationFrame

    requestAnimationFrame(fn) is the exact equivalent of setTimeout(fn, 0), they are triggered right after the screen has been flushed.

    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:

    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:

    var handle = InteractionManager.createInteractionHandle(); // run animation... (`runAfterInteractions` tasks are queued) diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index 90d33bb5f2b..2323a35e258 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TouchableHighlight

    A wrapper for making views respond properly to touches. +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TouchableHighlight

    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. The underlay comes from adding a view to the view hierarchy, which can sometimes diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index 9cb6f099345..bd1be5fc0e9 100644 --- a/docs/touchableopacity.html +++ b/docs/touchableopacity.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TouchableOpacity

    A wrapper for making views respond properly to touches. +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TouchableOpacity

    A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

    Example:

    renderButton: function() { diff --git a/docs/touchablewithoutfeedback.html b/docs/touchablewithoutfeedback.html index 2057cea89a1..3b25d45bf7a 100644 --- a/docs/touchablewithoutfeedback.html +++ b/docs/touchablewithoutfeedback.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TouchableWithoutFeedback

    Do not use unless you have a very good reason. All the elements that +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    TouchableWithoutFeedback

    Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native".

    Props #

    onLongPress function #

    onPress function #

    Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock).

    onPressIn function #

    onPressOut function #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    VibrationIOS

    The Vibration API is exposed at VibrationIOS.vibrate(). On iOS, calling this +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    VibrationIOS

    The Vibration API is exposed at VibrationIOS.vibrate(). On iOS, calling this function will trigger a one second vibration. The vibration is asynchronous so this method will return immediately.

    There will be no effect on devices that do not support Vibration, eg. the iOS simulator.

    Vibration patterns are currently unsupported.

    Methods #

    static vibrate() #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    Videos

    +React Native | Build Native Apps Using React
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    Videos

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    View

    The most fundamental component for building UI, View is a +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    View

    The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls, and is designed to be nested inside other views and to have 0 to many children of any type. View maps directly to the native diff --git a/docs/webview.html b/docs/webview.html index 8e4537d1e34..694642f962f 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    WebView

    Props #

    automaticallyAdjustContentInsets bool #

    contentInset {top: number, left: number, bottom: number, right: number} #

    onNavigationStateChange function #

    renderError function #

    renderLoading function #

    shouldInjectAJAXHandler bool #

    startInLoadingState bool #

    style View#style #

    url string #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    WebView

    Props #

    automaticallyAdjustContentInsets bool #

    contentInset {top: number, left: number, bottom: number, right: number} #

    onNavigationStateChange function #

    renderError function #

    renderLoading function #

    shouldInjectAJAXHandler bool #

    startInLoadingState bool #

    style View#style #

    url string #

    Next →
    © 2015 Facebook Inc.