From 24d45c8dfaa06e1c3c050a3832acc53e9e4515d0 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Mon, 23 Mar 2015 22:18:01 +0000 Subject: [PATCH] update website --- css/react-native.css | 23 ++++++++++++++++++++++- docs/activityindicatorios.html | 2 +- docs/alertios.html | 2 +- docs/animation.html | 4 +++- docs/appregistry.html | 2 +- docs/appstate.html | 4 +++- docs/appstateios.html | 4 +++- docs/asyncstorage.html | 2 +- docs/cameraroll.html | 4 +++- docs/datepickerios.html | 2 +- docs/getting-started.html | 2 +- docs/image.html | 4 ++-- docs/interactionmanager.html | 2 +- docs/layoutanimation.html | 4 +++- docs/layoutproptypes.html | 12 ++++++++++++ docs/listview.html | 2 +- docs/mapview.html | 4 ++-- docs/nativemodulesios.html | 2 +- docs/navigatorios.html | 6 +++--- docs/netinfo.html | 2 +- docs/network.html | 2 +- docs/pickerios.html | 2 +- docs/pixelratio.html | 2 +- docs/pixels.html | 2 +- docs/scrollview.html | 4 ++-- docs/sliderios.html | 4 ++-- docs/statusbarios.html | 4 +++- docs/style.html | 2 +- docs/stylesheet.html | 2 +- docs/switchios.html | 2 +- docs/tabbarios.html | 2 +- docs/text.html | 4 ++-- docs/textinput.html | 4 ++-- docs/timers.html | 2 +- docs/touchablehighlight.html | 4 ++-- docs/touchableopacity.html | 2 +- docs/touchablewithoutfeedback.html | 2 +- docs/vibrationios.html | 4 ++-- docs/videos.html | 2 +- docs/view.html | 4 ++-- docs/webview.html | 2 +- 41 files changed, 96 insertions(+), 51 deletions(-) create mode 100644 docs/layoutproptypes.html diff --git a/css/react-native.css b/css/react-native.css index 35906a65205..ebef0965cb1 100644 --- a/css/react-native.css +++ b/css/react-native.css @@ -901,7 +901,13 @@ div[data-twttr-id] iframe { background-color: hsl(198, 100%, 96%); } -.prop:nth-child(2n) { +.compactProps { + border-left: 2px solid hsl(198, 100%, 94%); + margin-left: 20px; + padding-left: 5px; +} + +.props > .prop:nth-child(2n) { background-color: hsl(198, 100%, 94%); } @@ -910,15 +916,30 @@ div[data-twttr-id] iframe { font-size: 16px; } +.compactProps .propTitle { + font-size: 14px; + margin-bottom: 0; + margin-top: 0; +} + .prop { padding: 5px 10px; } +.compactProps .prop { + padding: 3px 10px; +} + .propType { font-weight: normal; font-size: 15px; } +.compactProps .propType { + font-weight: normal; + font-size: 13px; +} + #content { display: none; diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 8551d23f830..9c3409b82f9 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
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

styles

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

styles

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

@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

styles

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

styles

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 diff --git a/docs/appstate.html b/docs/appstate.html index fbd0477e6a0..d528699a25b 100644 --- a/docs/appstate.html +++ b/docs/appstate.html @@ -1,4 +1,6 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AppState

Methods #

static setApplicationIconBadgeNumber(number) #

static getApplicationIconBadgeNumber(callback) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

styles

Polyfills

AppState

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

static getApplicationIconBadgeNumber(callback) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

AppStateIOS

Methods #

static addEventListener(type, handler) #

static removeEventListener(type, handler) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

styles

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

styles

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 5dd0749e178..d7f70bc4cf6 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,6 @@ -React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

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

Community Resources

Guides

components

apis

styles

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 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 diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 797da625a31..2f945cfa137 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

styles

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/getting-started.html b/docs/getting-started.html index eb4e23d7076..a1e9e4b3093 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

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

styles

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 4fa147e7f49..a0082cccb0a 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

styles

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

Example usage:

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 +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 style #

LayoutPropTypes...
backgroundColor string
borderColor string
borderRadius number
borderWidth number
opacity number
resizeMode Object.keys(ImageResizeMode)
tintColor string

testID string #

testID - A unique identifier for this element to be used in UI Automation testing scripts.

Displaying images is a fascinating subject, React Native uses some cool tricks to make it a better experience.

No Automatic Sizing #

If you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.

In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.

Background Image via Nesting #

A common feature request from developers familiar with the web is background-image. To handle this use case, simply create a normal <Image> component and add whatever children to it you would like to layer on top of it.

return ( <Image source={...}> <Text>Inside</Text> diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index 6b8786d596c..3bfc0767de3 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

styles

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 516ed2a361d..6f36f7d8ed3 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,4 +1,6 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Community Resources

Guides

components

apis

Polyfills

LayoutAnimation

Methods #

static configureNext(config, onAnimationDidEnd, onError) #

static create(duration, type, creationProp) #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Community Resources

Guides

components

apis

styles

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

styles

Polyfills

LayoutPropTypes

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.
\ No newline at end of file diff --git a/docs/listview.html b/docs/listview.html index 017012daf05..19dd4ba119e 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -1,4 +1,4 @@ -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 +React Native | Build Native Apps Using React

React Native

Quick Start

Community Resources

Guides

components

apis

styles

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 21125e6f0de..07214968d18 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

styles

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 @@ -12,7 +12,7 @@ that true north is situated at the top of the map view

true.

showsUserLocation bool #

If true the app will ask for the user's location and focus on it. Default value is false.

NOTE: You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going -to fail silently!

style View.propTypes.style #

Used to style and layout the MapView. See StyleSheet.js and +to fail silently!

style View#style #

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

zoomEnabled bool #

If false the user won't be able to pinch/zoom the map. Default value is true.

Next →
© 2015 Facebook Inc.
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

styles

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 878dbeffa25..89630e62bf9 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

styles

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

    • 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, +});

    Props #

    initialRoute {component: function, title: string, passProps: object, backButtonTitle: string, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]} #

    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. +operations expect routes to be like this:

    itemWrapperStyle View#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

    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

    styles

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

    Quick Start

    Community Resources

    Guides

    components

    apis

    styles

    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/pickerios.html b/docs/pickerios.html index 3fb2232dd52..9bf3c1ce291 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

    styles

    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

    styles

    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 diff --git a/docs/pixels.html b/docs/pixels.html index 795d8d517d1..7133d41accb 100644 --- a/docs/pixels.html +++ b/docs/pixels.html @@ -1,4 +1,4 @@ -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({ +React Native | Build Native Apps Using React
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    styles

    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/scrollview.html b/docs/scrollview.html index 949b237a442..333b34d8bcd 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

    styles

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

    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.propTypes.style #

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

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    styles

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

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    Polyfills

    StatusBarIOS

    @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

    styles

    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

    styles

    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 2871c2e1fcc..df80cb54ad1 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

    styles

    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, diff --git a/docs/switchios.html b/docs/switchios.html index fae9bf5ab30..09e4e07951b 100644 --- a/docs/switchios.html +++ b/docs/switchios.html @@ -1,4 +1,4 @@ -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 +React Native | Build Native Apps Using React

    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    styles

    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 cb1fa546056..50db3b7054f 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

    styles

    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

    styles

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

    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 +suppressHighlighting).

    style style #

    View#style...
    color string
    containerBackgroundColor string
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold')
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center')
    writingDirection enum("auto", 'ltr', 'rtl')

    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'}}> I am bold <Text style={{color: 'red'}}> diff --git a/docs/textinput.html b/docs/textinput.html index 45632c3d019..45800d919f2 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

    styles

    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 @@ -23,7 +23,7 @@ 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 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

    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

    styles

    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 0089927ee29..0fed530c17c 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

    styles

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

    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.

    style View#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

    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

    styles

    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 afd2271d4f2..a8de4a60627 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

    styles

    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

    styles

    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

    styles

    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

    styles

    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 @@ -32,7 +32,7 @@ for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view -(or one of its superviews).

    style stylePropType #

    Used to style and layout the View. See StyleSheet.js and +(or one of its superviews).

    style style #

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

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

    testID string #

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

    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.propTypes.style #

    url string #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Community Resources

    Guides

    components

    apis

    styles

    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.