From c60ca0cabb46e1852d0831dcb75d38a5013eda1c Mon Sep 17 00:00:00 2001 From: Travis CI Date: Thu, 19 Mar 2015 21:04:55 +0000 Subject: [PATCH] update website --- css/react-native.css | 1 + docs/activityindicatorios.html | 2 +- docs/alertios.html | 4 ++-- docs/animation.html | 2 +- docs/appregistry.html | 4 ++-- docs/appstate.html | 2 +- docs/appstateios.html | 2 +- docs/asyncstorage.html | 14 +++++++------- docs/cameraroll.html | 4 ++-- docs/datepickerios.html | 8 ++++---- docs/expandingtext.html | 25 ------------------------- docs/getting-started.html | 2 +- docs/image.html | 4 ++-- docs/interactionmanager.html | 4 ++-- docs/layoutanimation.html | 2 +- docs/listview.html | 12 ++++++------ docs/mapview.html | 4 ++-- docs/navigatorios.html | 4 ++-- docs/netinfo.html | 2 +- docs/network.html | 2 +- docs/pickerios.html | 2 +- docs/pixelratio.html | 4 ++-- docs/pixels.html | 2 +- docs/scrollview.html | 10 +++++----- docs/{slider.html => sliderios.html} | 4 ++-- docs/statusbarios.html | 2 +- docs/style.html | 2 +- docs/stylesheet.html | 4 ++-- docs/switchios.html | 4 ++-- docs/tabbarios.html | 2 +- docs/text.html | 4 ++-- docs/textinput.html | 4 ++-- docs/timers.html | 2 +- docs/touchablehighlight.html | 7 +++---- docs/touchableopacity.html | 4 ++-- docs/touchablewithoutfeedback.html | 5 +++-- docs/vibrationios.html | 4 ++-- docs/view.html | 6 +++--- docs/webview.html | 2 +- 39 files changed, 77 insertions(+), 101 deletions(-) delete mode 100644 docs/expandingtext.html rename docs/{slider.html => sliderios.html} (50%) diff --git a/css/react-native.css b/css/react-native.css index b7bb73adaae..f04b8d74a2b 100644 --- a/css/react-native.css +++ b/css/react-native.css @@ -906,6 +906,7 @@ div[data-twttr-id] iframe { .propTitle { font-weight: bold; + font-size: 16px; } .prop { diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 24d36db2f37..dfb5a8b6d27 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

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') #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

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

Guides

components

apis

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

Guides

components

apis

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

Guides

components

apis

Animation

@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

Guides

components

apis

Animation

@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

Guides

components

apis

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

Guides

components

apis

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

Guides

components

apis

AppState

Methods #

static setApplicationIconBadgeNumber(number) #

static getApplicationIconBadgeNumber(callback) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

AppState

Methods #

static setApplicationIconBadgeNumber(number) #

static getApplicationIconBadgeNumber(callback) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

AppStateIOS

Methods #

static addEventListener(type, handler) #

static removeEventListener(type, handler) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

AppStateIOS

Methods #

static addEventListener(type, handler) #

static removeEventListener(type, handler) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

AsyncStorage

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

React Native

Quick Start

Guides

components

apis

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 -a clear JS API, real Error objects, and simple non-multi functions.

Methods #

static getItem(key: string, callback: (error: ?Error, result: ?string) => void) #

Fetches key and passes the result to callback, along with an Error if -there is any.

static setItem(key: string, value: string, callback: ?(error: ?Error) => void) #

Sets value for key and calls callback on completion, along with an -Error if there is any.

static removeItem(key: string, callback: ?(error: ?Error) => void) #

static mergeItem(key: string, value: string, callback: ?(error: ?Error) => void) #

Merges existing value with input value, assuming they are stringified json.

Not supported by all native implementations.

static clear(callback: ?(error: ?Error) => void) #

Erases all AsyncStorage for all clients, libraries, etc. You probably +a clear JS API, real Error objects, and simple non-multi functions.

Methods #

static getItem(key: string, callback: (error: ?Error, result: ?string) => void) #

Fetches key and passes the result to callback, along with an Error if +there is any.

static setItem(key: string, value: string, callback: ?(error: ?Error) => void) #

Sets value for key and calls callback on completion, along with an +Error if there is any.

static removeItem(key: string, callback: ?(error: ?Error) => void) #

static mergeItem(key: string, value: string, callback: ?(error: ?Error) => void) #

Merges existing value with input value, assuming they are stringified json.

Not supported by all native implementations.

static clear(callback: ?(error: ?Error) => void) #

Erases all AsyncStorage for all clients, libraries, etc. You probably don't want to call this - use removeItem or multiRemove to clear only your -own keys instead.

static getAllKeys(callback: (error: ?Error) => void) #

Gets all keys known to the system, for all callers, libraries, etc.

static multiGet(keys: Array<string>, callback: (errors: ?Array<Error>, result: ?Array<Array<string>>) => void) #

multiGet invokes callback with an array of key-value pair arrays that -matches the input format of multiSet.

multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

static multiSet(keyValuePairs: Array<Array<string>>, callback: ?(errors: ?Array<Error>) => void) #

multiSet and multiMerge take arrays of key-value array pairs that match -the output of multiGet, e.g.

multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

static multiRemove(keys: Array<string>, callback: ?(errors: ?Array<Error>) => void) #

Delete all the keys in the keys array.

static multiMerge(keyValuePairs: Array<Array<string>>, callback: ?(errors: ?Array<Error>) => void) #

Merges existing values with input values, assuming they are stringified +own keys instead.

static getAllKeys(callback: (error: ?Error) => void) #

Gets all keys known to the system, for all callers, libraries, etc.

static multiGet(keys: Array<string>, callback: (errors: ?Array<Error>, result: ?Array<Array<string>>) => void) #

multiGet invokes callback with an array of key-value pair arrays that +matches the input format of multiSet.

multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']])

static multiSet(keyValuePairs: Array<Array<string>>, callback: ?(errors: ?Array<Error>) => void) #

multiSet and multiMerge take arrays of key-value array pairs that match +the output of multiGet, e.g.

multiSet([['k1', 'val1'], ['k2', 'val2']], cb);

static multiRemove(keys: Array<string>, callback: ?(errors: ?Array<Error>) => void) #

Delete all the keys in the keys array.

static multiMerge(keyValuePairs: Array<Array<string>>, callback: ?(errors: ?Array<Error>) => void) #

Merges existing values with input values, assuming they are stringified json.

Not supported by all native implementations.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

CameraRoll

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: +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

CameraRoll

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 2. assets-library tag - 3. tag returned from storing an image in memory

static getPhotos(params: object, callback: function, errorCallback: function) #

Invokes callback with photo identifier objects from the local camera + 3. tag returned from storing an image in memory

static getPhotos(params: object, callback: function, errorCallback: function) #

Invokes callback with photo identifier objects from the local camera roll of the device matching shape defined by getPhotosReturnChecker.

@param {object} params - See getPhotosParamChecker. @param {function} callback - Invoked with arg of shape defined by getPhotosReturnChecker on success. diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 656d0004b9b..3c42e0f546f 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,12 +1,12 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

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

Guides

components

apis

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 -source of truth.

Props #

date Date #

The currently selected date.

maximumDate Date #

Maximum date.

Restricts the range of possible date/time values.

minimumDate Date #

Minimum date.

Restricts the range of possible date/time values.

minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #

The interval at which minutes can be selected.

mode Object.keys(RCTDatePickerIOSConsts.DatePickerModes) #

The date picker mode.

Valid modes on iOS are: 'date', 'time', 'datetime'.

onDateChange func #

Date change handler.

This is called when the user changes the date or time in the UI. +source of truth.

Props #

date Date #

The currently selected date.

maximumDate Date #

Maximum date.

Restricts the range of possible date/time values.

minimumDate Date #

Minimum date.

Restricts the range of possible date/time values.

minuteInterval enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) #

The interval at which minutes can be selected.

mode enum('date', 'time', 'datetime') #

The date picker mode.

onDateChange function #

Date change handler.

This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new -date and time.

timeZoneOffsetInMinutes number #

Timezone offset in seconds.

By default, the date picker will use the device's timezone. With this +date and time.

timeZoneOffsetInMinutes number #

Timezone offset in minutes.

By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For -instance, to show times in Pacific Standard Time, pass -7 * 60.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

ExpandingText

A react component for displaying text which supports truncating -based on a set truncLength.

In the following example, the text will truncate -to show only the first 17 characters plus '...' with a See More button to -expand the text to its full length.

render: function() { - return <ExpandingText truncLength={20} text={EXAMPLE_TEXT} />; -},

Props #

seeMoreStyle Text.propTypes.style #

The styles that will be applied to the See More button. Default -is bold.

seeMoreText string #

The caption that will be appended at the end, by default it is -'See More'.

text string #

Text to be displayed. It will be truncated if the character length -is greater than the truncLength property.

textStyle Text.propTypes.style #

The styles that will be applied to the text (both truncated and -expanded).

truncLength number #

The maximum character length for the text that will -be displayed by default. Note that ... will be -appended to the truncated text which is counted towards -the total truncLength of the default displayed string. -The default is 130.

Next →
© 2015 Facebook Inc.
\ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 8192b0db352..424d5d259be 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

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

Guides

components

apis

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 f5295079da3..2bf6fa51871 100644 --- a/docs/image.html +++ b/docs/image.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

Image

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

React Native

Quick Start

Guides

components

apis

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 ( @@ -14,7 +14,7 @@ images from local disk, such as the camera roll.

Example usage:

/View> ); },

Props #

accessibilityLabel string #

accessibilityLabel - Custom string to display for accessibility.

accessible bool #

accessible - Whether this element should be revealed as an accessible -element.

capInsets EdgeInsetsPropType #

capInsets - When the image is resized, the corners of the size specified +element.

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

capInsets - When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info:

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets:

source {uri: string} #

style StyleSheetPropType(ImageStylePropTypes) #

testID string #

testID - A unique identifier for this element to be used in UI Automation diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index 80e5a577ea3..d792085a220 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

InteractionManager

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

React Native

Quick Start

Guides

components

apis

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... @@ -10,7 +10,7 @@ completion:

// later, on animation completion: InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared

Methods #

static runAfterInteractions(callback) #

Schedule a function to run after all interactions have completed.

static createInteractionHandle() #

Notify manager that an interaction has started.

static clearInteractionHandle(handle) #

Notify manager that an interaction has completed.

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

LayoutAnimation

Methods #

static configureNext(config, onAnimationDidEnd, onError) #

static create(duration, type, creationProp) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

LayoutAnimation

Methods #

static configureNext(config, onAnimationDidEnd, onError) #

static create(duration, type, creationProp) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

ListView

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

React Native

Quick Start

Guides

components

apis

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 @@ -30,22 +30,22 @@ event-loop (customizable with the pageSize prop). This breaks up t work into smaller chunks to reduce the chance of dropping frames while rendering rows.

Props #

ScrollView props... #

dataSource ListViewDataSource #

initialListSize number #

How many rows to render on initial component mount. Use this to make it so that the first screen worth of data apears at one time instead of -over the course of multiple frames.

onChangeVisibleRows func #

(visibleRows, changedRows) => void

Called when the set of visible rows changes. visibleRows maps +over the course of multiple frames.

onChangeVisibleRows function #

(visibleRows, changedRows) => void

Called when the set of visible rows changes. visibleRows maps { sectionID: { rowID: true }} for all the visible rows, and changedRows maps { sectionID: { rowID: true | false }} for the rows that have changed their visibility, with true indicating visible, and -false indicating the view has moved out of view.

onEndReached func #

Called when all rows have been rendered and the list has been scrolled +false indicating the view has moved out of view.

onEndReached function #

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.

onEndReachedThreshold number #

Threshold in pixels for onEndReached.

pageSize number #

Number of rows to render per event loop.

removeClippedSubviews bool #

An experimental performance optimization for improving scroll perf of large lists, used in conjunction with overflow: 'hidden' on the row -containers. Use at your own risk.

renderFooter func #

() => renderable

The header and footer are always rendered (if these props are provided) +containers. Use at your own risk.

renderFooter function #

() => renderable

The header and footer are always rendered (if these props are provided) on every render pass. If they are expensive to re-render, wrap them in StaticContainer or other mechanism as appropriate. Footer is always -at the bottom of the list, and header at the top, on every render pass.

renderHeader func #

renderRow func #

(rowData, sectionID, rowID) => renderable +at the bottom of the list, and header at the top, on every render pass.

renderHeader function #

renderRow function #

(rowData, sectionID, rowID) => renderable Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the row. By default the data is exactly what was put into the data source, but it's also possible to -provide custom extractors.

renderSectionHeader func #

(sectionData, sectionID) => renderable

If provided, a sticky header is rendered for this section. The sticky +provide custom extractors.

renderSectionHeader function #

(sectionData, sectionID) => renderable

If provided, a sticky header is rendered for this section. 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 diff --git a/docs/mapview.html b/docs/mapview.html index 73a78c92243..5ca30fe62ac 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,5 +1,5 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

MapView

Props #

legalLabelInsets EdgeInsetsPropType #

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 func #

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

onRegionChangeComplete func #

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 +React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

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 angle is ignored and the map is always displayed as if the user diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 17f44b95fe6..94b564bb7fb 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Guides

components

apis

NavigatorIOS

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

React Native

Quick Start

Guides

components

apis

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 ( @@ -33,7 +33,7 @@ transitions back to it
  • resetTo(route) - Replaces the top it initialRoute={...} /> ), -});

    • Props #

    initialRoute {component: func, title: string, passProps: object, backButtonTitle: string, rightButtonTitle: string, onRightButtonPress: func, wrapperStyle: View.propTypes.style} #

    NavigatorIOS uses "route" objects to identify child views, their props, +});

    Props #

    initialRoute {component: function, title: string, passProps: object, backButtonTitle: string, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: View.propTypes.style} #

    NavigatorIOS uses "route" objects to identify child views, their props, and navigation bar configuration. "push" and all the other navigation operations expect routes to be like this:

    itemWrapperStyle View.propTypes.style #

    The default wrapper style for components in the navigator. A common use case is to set the backgroundColor for every page

    tintColor string #

    The color used for buttons in the navigation bar

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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) { diff --git a/docs/network.html b/docs/network.html index 4cfe35cab12..d5d022b0644 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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/pickerios.html b/docs/pickerios.html index 18c56b3b9fa..99170b99f0c 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Guides

    components

    apis

    PickerIOS

    Props #

    onValueChange func #

    selectedValue any #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    PickerIOS

    Props #

    onValueChange function #

    selectedValue any #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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/scrollview.html b/docs/scrollview.html index c68b6a76d0b..31902b1227c 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Guides

    components

    apis

    ScrollView

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

    React Native

    Quick Start

    Guides

    components

    apis

    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 @@ -17,7 +17,7 @@ wraps all of the child views. Example:

    return ( contentContainer: { paddingVertical: 20 } - });

    contentInset EdgeInsetsPropType #

    contentOffset PointPropType #

    decelerationRate number #

    A floating-point number that determines how quickly the scroll view + });

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

    contentOffset PointPropType #

    decelerationRate number #

    A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Reasonable choices include - Normal: 0.998 (the default) - Fast: 0.9

    horizontal bool #

    When true, the scroll view's children are arranged horizontally in a row @@ -29,17 +29,17 @@ instead of vertically in a column. The default value is false.

    keyboardShouldPersistTaps bool #

    When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value -is false.

    maximumZoomScale number #

    The maximum allowed zoom scale. The default value is 1.0.

    minimumZoomScale number #

    The minimum allowed zoom scale. The default value is 1.0.

    onScroll func #

    onScrollAnimationEnd func #

    pagingEnabled bool #

    When true, the scroll view stops on multiples of the scroll view's size +is false.

    maximumZoomScale number #

    The maximum allowed zoom scale. The default value is 1.0.

    minimumZoomScale number #

    The minimum allowed zoom scale. The default value is 1.0.

    onScroll function #

    onScrollAnimationEnd function #

    pagingEnabled bool #

    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.

    removeClippedSubviews bool #

    Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. The default value is -false.

    scrollEnabled bool #

    scrollIndicatorInsets EdgeInsetsPropType #

    scrollsToTop bool #

    When true, the scroll view scrolls to top when the status bar is tapped. +false.

    scrollEnabled bool #

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

    scrollsToTop bool #

    When true, the scroll view scrolls to top when the status bar is tapped. The default value is true.

    showsHorizontalScrollIndicator bool #

    showsVerticalScrollIndicator bool #

    stickyHeaderIndices [number] #

    An array of child indices determining which children get docked to the top of the screen when scrolling. For example, passing stickyHeaderIndices={[0]} will cause the first child to be fixed to the top of the scroll view. This property is not supported in conjunction -with horizontal={true}.

    style StyleSheetPropType(ViewStylePropTypes) #

    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

    Guides

    components

    apis

    Slider

    Props #

    onSlidingComplete func #

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

    onValueChange func #

    Callback continuously called while the user is dragging the slider.

    style View.propTypes.style #

    Used to style and layout the Slider. See StyleSheet.js and +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Guides

    components

    apis

    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.propTypes.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 the value, the component won't be reseted to it's inital value.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    StatusBarIOS

    @flow

    Methods #

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

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

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    StatusBarIOS

    @flow

    Methods #

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

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

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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 e95a12f7266..16b59ddd8ca 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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

    Guides

    components

    apis

    SwitchIOS

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

    React Native

    Quick Start

    Guides

    components

    apis

    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 source of truth.

    Props #

    disabled bool #

    If true the user won't be able to toggle the switch. -Default value is false.

    onTintColor string #

    Background color when the switch is turned on.

    onValueChange func #

    Callback that is called when the user toggles the switch.

    thumbTintColor string #

    Background color for the switch round button.

    tintColor string #

    Background color when the switch is turned off.

    value bool #

    The value of the switch, if true the switch will be turned on. +Default value is false.

    onTintColor string #

    Background color when the switch is turned on.

    onValueChange function #

    Callback that is called when the user toggles the switch.

    thumbTintColor string #

    Background color for the switch round button.

    tintColor string #

    Background color when the switch is turned off.

    value bool #

    The value of the switch, if true the switch will be turned on. Default value is false.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    TabBarIOS

    Props #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    TabBarIOS

    Props #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    Text

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

    React Native

    Quick Start

    Guides

    components

    apis

    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 @@ -25,7 +25,7 @@ each other on account of the literal newlines:

    }, };

    Props #

    numberOfLines number #

    Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does -not exceed this number.

    onPress func #

    This function is called on press. Text intrinsically supports press +not exceed this number.

    onPress function #

    This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).

    style stylePropType #

    suppressHighlighting bool #

    When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down.

    testID string #

    Used to locate this view in end-to-end tests.

    Nested Text #

    In iOS, the way to display formatted text is by using NSAttributedString: you give the text that you want to display and annotate ranges with some specific formatting. In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.

    <Text style={{fontWeight: 'bold'}}> diff --git a/docs/textinput.html b/docs/textinput.html index 0eddd6fdadb..a4b25218977 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Guides

    components

    apis

    TextInput

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

    React Native

    Quick Start

    Guides

    components

    apis

    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 @@ -22,7 +22,7 @@ the native text input. The default should be fine, but if you're potentially doing very slow operations on every keystroke then you may want to try increasing this.

    clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') #

    When the clear button should appear on the right side of the text view

    controlled bool #

    If you really want this to behave as a controlled component, you can set this true, but you will probably see flickering, dropped keystrokes, -and/or laggy typing, depending on how you process onChange events.

    editable bool #

    If false, text is not editable. Default value is true.

    keyboardType enum('default', 'numeric') #

    Determines which keyboard to open, e.g.numeric.

    multiline bool #

    If true, the text input can be multiple lines. Default value is false.

    onBlur func #

    Callback that is called when the text input is blurred

    onChangeText func #

    (text: string) => void

    Callback that is called when the text input's text changes.

    onEndEditing func #

    onFocus func #

    Callback that is called when the text input is focused

    onSubmitEditing func #

    placeholder string #

    The string that will be rendered before text input has been entered

    placeholderTextColor string #

    The text color of the placeholder string

    selectionState DocumentSelectionState #

    See DocumentSelectionState.js, some state that is responsible for +and/or laggy typing, depending on how you process onChange events.

    editable bool #

    If false, text is not editable. Default value is true.

    keyboardType enum('default', 'numeric') #

    Determines which keyboard to open, e.g.numeric.

    multiline bool #

    If true, the text input can be multiple lines. Default value is false.

    onBlur function #

    Callback that is called when the text input is blurred

    onChangeText function #

    (text: string) => void

    Callback that is called when the text input's text changes.

    onEndEditing function #

    onFocus function #

    Callback that is called when the text input is focused

    onSubmitEditing function #

    placeholder string #

    The string that will be rendered before text input has been entered

    placeholderTextColor string #

    The text color of the placeholder string

    selectionState DocumentSelectionState #

    See DocumentSelectionState.js, some state that is responsible for maintaining selection information for a document

    style Text.propTypes.style #

    value string #

    The default value for the text input

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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 90f6e5fd7bb..65132ad5bec 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
    React Native

    Quick Start

    Guides

    components

    apis

    TouchableHighlight

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

    React Native

    Quick Start

    Guides

    components

    apis

    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 @@ -12,9 +12,8 @@ backgroundColor of the wrapped view isn't explicitly set to an opaque color /> </View> ); -},

    Props #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is -active.

    onPress func #

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

    style View.propTypes.style #

    underlayColor string #

    The color of the underlay that will show through when the touch is +},

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is +active.

    style View.propTypes.style #

    underlayColor string #

    The color of the underlay that will show through when the touch is active.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    TouchableOpacity

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

    React Native

    Quick Start

    Guides

    components

    apis

    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() { @@ -10,7 +10,7 @@ easy to add to an app without weird side-effects.

    Example:

    /> </View> ); -},

    Props #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is +},

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity number #

    Determines what the opacity of the wrapped view should be when touch is active.

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    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

    Guides

    components

    apis

    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 #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    VibrationIOS

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

    React Native

    Quick Start

    Guides

    components

    apis

    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() #

    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    View

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

    React Native

    Quick Start

    Guides

    components

    apis

    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 @@ -15,9 +15,9 @@ a default parent (flexDirection: 'column'), the children will fill the but not the height.

    Many library components can be treated like plain Views in many cases, for example passing them children, setting style, etc.

    Views are designed to be used with StyleSheets for clarity and performance, although inline styles are also supported. It is common for -StyleSheets to be combined dynamically. See StyleSheet.js for more info.

    Props #

    accessible bool #

    When true, indicates that the view is an accessibility element

    onMoveShouldSetResponder func #

    onResponderGrant func #

    For most touch interactions, you'll simply want to wrap your component in +StyleSheets to be combined dynamically. See StyleSheet.js for more info.

    Props #

    accessible bool #

    When true, indicates that the view is an accessibility element

    onMoveShouldSetResponder function #

    onResponderGrant function #

    For most touch interactions, you'll simply want to wrap your component in TouchableHighlight.js. Check out Touchable.js and -ScrollResponder.js for more discussion.

    onResponderMove func #

    onResponderReject func #

    onResponderRelease func #

    onResponderTerminate func #

    onResponderTerminationRequest func #

    onStartShouldSetResponder func #

    onStartShouldSetResponderCapture func #

    pointerEvents enum('box-none', 'none', 'box-only', 'auto') #

    In the absence of auto property, none is much like CSS's none +ScrollResponder.js for more discussion.

    onResponderMove function #

    onResponderReject function #

    onResponderRelease function #

    onResponderTerminate function #

    onResponderTerminationRequest function #

    onStartShouldSetResponder function #

    onStartShouldSetResponderCapture function #

    pointerEvents enum('box-none', 'none', 'box-only', 'auto') #

    In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:

    .cantTouchThis * { pointer-events: auto; } diff --git a/docs/webview.html b/docs/webview.html index e4377b39d05..f46762d43af 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React

    React Native

    Quick Start

    Guides

    components

    apis

    WebView

    Props #

    automaticallyAdjustContentInsets bool #

    contentInset EdgeInsetsPropType #

    onNavigationStateChange func #

    renderErrorView func #

    renderLoadingView func #

    shouldInjectAJAXHandler bool #

    startInLoadingState bool #

    style View.propTypes.style #

    url string #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    WebView

    Props #

    automaticallyAdjustContentInsets bool #

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

    onNavigationStateChange function #

    renderErrorView function #

    renderLoadingView function #

    shouldInjectAJAXHandler bool #

    startInLoadingState bool #

    style View.propTypes.style #

    url string #

    Next →
    © 2015 Facebook Inc.