From eb8b020716b99f747e48a4a901246cede2b32673 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Mon, 30 Mar 2015 18:50:22 +0000 Subject: [PATCH] update website --- docs/activityindicatorios.html | 23 +-- docs/alertios.html | 26 +-- docs/animation.html | 25 +-- docs/appregistry.html | 29 +-- docs/appstateios.html | 51 +---- docs/asyncstorage.html | 34 +--- docs/cameraroll.html | 32 +-- docs/datepickerios.html | 31 +-- docs/debugging.html | 23 +-- docs/flexbox.html | 23 +-- docs/geolocation.html | 28 +-- docs/gesture-responder-system.html | 23 +-- docs/getting-started.html | 23 +-- docs/image.html | 56 +----- docs/interactionmanager.html | 35 +--- docs/layoutanimation.html | 25 +-- docs/linking-libraries.html | 43 +--- docs/linkingios.html | 25 +-- docs/listview.html | 75 +------ docs/mapview.html | 39 +--- docs/nativemodulesios.html | 84 +------- docs/navigator.html | 73 +------ docs/navigatorios.html | 61 +----- docs/netinfo.html | 50 +---- docs/network.html | 44 +--- docs/panresponder.html | 77 +------ docs/pickerios.html | 23 +-- docs/pixelratio.html | 31 +-- docs/pushnotificationios.html | 33 +-- docs/scrollview.html | 64 +----- docs/sliderios.html | 28 +-- docs/statusbarios.html | 25 +-- docs/style.html | 60 +----- docs/stylesheet.html | 42 +--- docs/switchios.html | 29 +-- docs/tabbarios.html | 23 +-- docs/testing.html | 23 +-- docs/text.html | 99 +-------- docs/textinput.html | 48 +---- docs/timers.html | 39 +--- docs/touchablehighlight.html | 39 +--- docs/touchableopacity.html | 36 +--- docs/touchablewithoutfeedback.html | 26 +-- docs/tutorial.html | 310 +---------------------------- docs/vibrationios.html | 26 +-- docs/videos.html | 38 +--- docs/view.html | 59 +----- docs/webview.html | 23 +-- 48 files changed, 528 insertions(+), 1654 deletions(-) diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 6354fafe8c5..5a094a35673 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

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.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/alertios.html b/docs/alertios.html index 1e8ca87c0ca..5a094a35673 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,15 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

AlertIOS

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

Methods #

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

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/animation.html b/docs/animation.html index 6727299e594..5a094a35673 100644 --- a/docs/animation.html +++ b/docs/animation.html @@ -1,14 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Animation

All rights reserved.

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

@flow

Methods #

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

static stopAnimation(tag: number) #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/appregistry.html b/docs/appregistry.html index 385b3d39e0a..5a094a35673 100644 --- a/docs/appregistry.html +++ b/docs/appregistry.html @@ -1,18 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

AppRegistry

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

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

Methods #

static registerConfig(config: Array<AppConfig>) #

static registerComponent(appKey: string, getComponentFunc: Function) #

static registerRunnable(appKey: string, func: Function) #

static runApplication(appKey: string, appParameters: any) #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/appstateios.html b/docs/appstateios.html index 1b952fa4cdd..5a094a35673 100644 --- a/docs/appstateios.html +++ b/docs/appstateios.html @@ -1,40 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

AppStateIOS

AppStateIOS can tell you if the app is in the foreground or background, -and notify you when the state changes.

AppStateIOS is frequently used to determine the intent and proper behavior when -handling push notifications.

iOS App States #

  • active - The app is running in the foreground
  • background - The app is running in the background. The user is either - in another app or on the home screen
  • inactive - This is a transition state that currently never happens for - typical React Native apps.

For more information, see -Apple's documentation

Basic Usage #

To see the current state, you can check AppStateIOS.currentState, which -will be kept up-to-date. However, currentState will be null at launch -while AppStateIOS retrieves it over the bridge.

getInitialState: function() { - return { - currentAppState: AppStateIOS.currentState, - }; -}, -componentDidMount: function() { - AppStateIOS.addEventListener('change', this._handleAppStateChange); -}, -componentWillUnmount: function() { - AppStateIOS.removeEventListener('change', this._handleAppStateChange); -}, -_handleAppStateChange: function(currentAppState) { - this.setState({ currentAppState, }); -}, -render: function() { - return ( - <Text>Current state is: {this.state.currentAppState}</Text> - ); -},

This example will only ever appear to say "Current state is: active" because -the app is only visible to the user when in the active state, and the null -state will happen only momentarily.

Methods #

static addEventListener(type: string, handler: Function) #

Add a handler to AppState changes by listening to the change event type -and providing the handler

static removeEventListener(type: string, handler: Function) #

Remove a handler by passing the change event type and the handler

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index 8d944d69d4f..5a094a35673 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,23 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

AsyncStorage

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

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

This JS code is a simple facad over the native iOS implementation to provide -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 -json.

Not supported by all native implementations.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 1e28aa4d11a..5a094a35673 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,21 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

CameraRoll

All rights reserved.

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

@flow

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 - 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. - @param {function} errorCallback - Invoked with error message on error.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/datepickerios.html b/docs/datepickerios.html index a4d3bf00405..5a094a35673 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,20 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

DatePickerIOS

Use DatePickerIOS to render a date/time picker (selector) on iOS. This is -a controlled component, so you must hook in to the onDateChange callback -and update the date prop in order for the component to update, otherwise -the user's change will be reverted immediately to reflect props.date as the -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 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.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/debugging.html b/docs/debugging.html index fda87bd89d5..5a094a35673 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Debugging

Debugging React Native Apps #

To debug the javascript code of your react app do the following:

  1. Run your application in the iOS simulator.
  2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now)
  3. Enable Pause On Caught Exceptions for a better debugging experience.
  4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
  5. You should now be able to debug as you normally would.

Optional #

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React tab when the developer tools are open.

Live Reload. #

To activate Live Reload do the following:

  1. Run your application in the iOS simulator.
  2. Press Control + Command + Z.
  3. You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debugging options.
Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/flexbox.html b/docs/flexbox.html index dda7b75a185..5a094a35673 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Flexbox

Props #

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

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

borderBottomWidth number #

borderLeftWidth number #

borderRightWidth number #

borderTopWidth number #

borderWidth number #

bottom number #

flex number #

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

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

height number #

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

left number #

margin number #

marginBottom number #

marginHorizontal number #

marginLeft number #

marginRight number #

marginTop number #

marginVertical number #

padding number #

paddingBottom number #

paddingHorizontal number #

paddingLeft number #

paddingRight number #

paddingTop number #

paddingVertical number #

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

right number #

top number #

width number #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/geolocation.html b/docs/geolocation.html index 8decfc4794a..5a094a35673 100644 --- a/docs/geolocation.html +++ b/docs/geolocation.html @@ -1,17 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Geolocation

/!\ ATTENTION /!\ -You need to add NSLocationWhenInUseUsageDescription key -in Info.plist to enable geolocation, otherwise it's going -to fail silently! -!/ !/

Geolocation follows the MDN specification: -https://developer.mozilla.org/en-US/docs/Web/API/Geolocation

Methods #

static getCurrentPosition(geo_success: Function, geo_error?: Function, geo_options?: Object) #

static watchPosition(success: Function, error?: Function, options?: Object) #

static clearWatch(watchID: number) #

static stopObserving() #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index 61e4f22c62a..5a094a35673 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Gesture Responder System

Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.

The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in ResponderEventPlugin.js, which contains further details and documentation.

Best Practices #

Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes:

  • Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
  • Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away

These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.

TouchableHighlight and Touchable* #

The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. Use TouchableHighlight anywhere where you would use a button or link on web.

Responder Lifecycle #

A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:

  • View.props.onStartShouldSetResponder: (evt) => true, - Does this view want to become responder on the start of a touch?
  • View.props.onMoveShouldSetResponder: (evt) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

If the View returns true and attempts to become the responder, one of the following will happen:

  • View.props.onResponderGrant: (evt) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
  • View.props.onResponderReject: (evt) => {} - Something else is the responder right now and will not release it

If the view is responding, the following handlers can be called:

  • View.props.onResponderMove: (evt) => {} - The user is moving their finger
  • View.props.onResponderRelease: (evt) => {} - Fired at the end of the touch, ie "touchUp"
  • View.props.onResponderTerminationRequest: (evt) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
  • View.props.onResponderTerminate: (evt) => {} - The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

evt is a synthetic touch event with the following form:

  • nativeEvent
    • changedTouches - Array of all touch events that have changed since the last event
    • identifier - The ID of the touch
    • locationX - The X position of the touch, relative to the element
    • locationY - The Y position of the touch, relative to the element
    • pageX - The X position of the touch, relative to the screen
    • pageY - The Y position of the touch, relative to the screen
    • target - The node id of the element receiving the touch event
    • timestamp - A time identifier for the touch, useful for velocity calculation
    • touches - Array of all current touches on the screen

Capture ShouldSet Handlers #

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

  • View.props.onStartShouldSetResponderCapture: (evt) => true,
  • View.props.onMoveShouldSetResponderCapture: (evt) => true,

PanResponder #

For higher-level gesture interpretation, check out PanResponder.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/getting-started.html b/docs/getting-started.html index 3f3f470a46d..5a094a35673 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
  2. New to Xcode? Download it from the Mac App Store.
  3. Homebrew is the recommended way to install node, watchman, and flow.
  4. brew install node. New to node or npm?
  5. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  6. brew install flow. If you want to use flow.

Quick start #

  • npm install -g react-native-cli
  • react-native init AwesomeProject

In the newly created folder AwesomeProject/

  • Open AwesomeProject.xcodeproj and hit run in Xcode
  • Open index.ios.js in your text editor of choice and edit some lines
  • Hit cmd+R (twice) in your iOS simulator to reload the app and see your change!

Congratulations! You've just successfully run and modified your first React Native app.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/image.html b/docs/image.html index 2b71882cd2d..5a094a35673 100644 --- a/docs/image.html +++ b/docs/image.html @@ -1,45 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Image

A react component for displaying different types of images, -including network images, static resources, temporary local images, and -images from local disk, such as the camera roll.

Example usage:

renderImages: function() { - return ( - <View> - <Image - style={styles.icon} - source={require('image!myIcon')} - /> - <Image - style={styles.logo} - source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} - /> - </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 {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 style #

Flexbox...
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> - </Image> -);

Off-thread Decoding #

Image decoding can take more than a frame-worth of time. This is one of the major source of frame drops on the web because decoding is done in the main thread. In React Native, image decoding is done in a different thread. In practice, you already need to handle the case when the image is not downloaded yet, so displaying the placeholder for a few more frames while it is decoding does not require any code change.

Static Assets #

In the course of a project, it is not uncommon to add and remove many images and accidentally end up shipping images you are no longer using in the app. In order to fight this, we need to find a way to know statically which images are being used in the app. To do that, we introduced a marker on require. The only allowed way to refer to an image in the bundle is to literally write require('image!name-of-the-asset') in the source.

// GOOD -<Image source={require('image!my-icon')} /> - -// BAD -var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; -<Image source={require('image!' + icon)} /> - -// GOOD -var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive'); -<Image source={icon} />

When your entire codebase respects this convention, you're able to do interesting things like automatically packaging the assets that are being used in your app. Note that in the current form, nothing is enforced, but it will be in the future.

Best Camera Roll Image #

iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself.

Source being an object #

In React Native, one interesting decision is that the src attribute is named source and doesn't take a string but an object with an uri attribute.

<Image source={{uri: 'something.jpg'}} />

On the infrastructure side, the reason is that it allows to attach metadata to this object. For example if you are using require('image!icon'), then we add an isStatic attribute to flag it as a local file (don't rely on this fact, it's likely to change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.

On the user side, this lets you annotate the object with useful attributes such as the dimension of the image in order to compute the size it's going to be displayed in. Feel free to use it as your data structure to store more information about your image.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index c217e847a82..5a094a35673 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,24 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

InteractionManager

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

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

InteractionManager.runAfterInteractions(() => { - // ...long-running synchronous task... -});

Compare this to other scheduling alternatives:

  • requestAnimationFrame(): for code that animates a view over time.
  • setImmediate/setTimeout(): run code later, note this may delay animations.
  • runAfterInteractions(): run code later, without delaying active animations.

The touch handling system considers one or more active touches to be an -'interaction' and will delay runAfterInteractions() callbacks until all -touches have ended or been cancelled.

InteractionManager also allows applications to register animations by -creating an interaction 'handle' on animation start, and clearing it upon -completion:

var handle = InteractionManager.createInteractionHandle(); -// run animation... (`runAfterInteractions` tasks are queued) -// later, on animation completion: -InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared

Methods #

static runAfterInteractions(callback: Function) #

Schedule a function to run after all interactions have completed.

static createInteractionHandle() #

Notify manager that an interaction has started.

static clearInteractionHandle(handle: number) #

Notify manager that an interaction has completed.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index 63d5a4258d7..5a094a35673 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,14 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

LayoutAnimation

All rights reserved.

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

@flow

Methods #

static configureNext(config: Config, onAnimationDidEnd?: Function, onError?: Function) #

static create(duration: number, type, creationProp) #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/linking-libraries.html b/docs/linking-libraries.html index 8c67f117a73..5a094a35673 100644 --- a/docs/linking-libraries.html +++ b/docs/linking-libraries.html @@ -1,32 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Linking Libraries

Not every app uses all the native capabilities, and including the code to support -all those features would impact in the binary size... But we still want to make -easy to add these features whenever you need them.

With that in mind we exposed many of these features as independent static libraries.

For most of the libs it will be as simples as dragging two files, sometimes a third -step will be necessary, but no more than that.

All the libraries we ship with React Native live on the Libraries folder in -the root of the repository. Some of them are pure JavaScript, and you just need -to require it. Other libraries also rely on some native code, in that case -you'll have to add these files to your app, otherwise the app will throw an -error as soon as you try to use the library.

Here the few steps to link your libraries that contain native code #

Step 1 #

If the library has native code, there must be a .xcodeproj file inside it's -folder. -Drag this file to your project on Xcode (usually under the Libaries group -on Xcode);

Step 2 #

Click on your main project file (the one that represents the .xcodeproj) -select Build Phases and drag the static library from the Products folder -insed the Library you are importing to Link Binary With Libraries

Step 3 #

Not every library will need this step, what you need to consider is:

Do I need to know the contents of the library at compile time?

What that means is, are you using this library on the native site or just in -JavaScript? If you are just using it in JavaScript, you are good to go!

This step is not necessary for all libraries that we ship we React Native but -PushNotificationIOS and LinkingIOS.

In the case of the PushNotificationIOS for example, you have to call a method -on the library from your AppDelegate every time a new push notifiation is -received.

For that we need to know the library's headers. To achieve that you have to go -to your project's file, select Build Settings and search for Header Search -Paths. There you should include the path to you library (if it has relevant -files on subdirectories remember to make it recursive, like React on the -example).

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/linkingios.html b/docs/linkingios.html index 99f3280b969..5a094a35673 100644 --- a/docs/linkingios.html +++ b/docs/linkingios.html @@ -1,14 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

LinkingIOS

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 addEventListener(type, handler) #

static removeEventListener(type, handler) #

static openURL(url) #

static canOpenURL(url, callback) #

static popInitialURL() #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/listview.html b/docs/listview.html index 55999255921..5a094a35673 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -1,64 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

ListView

ListView - A core component designed for efficient display of vertically -scrolling lists of changing data. The minimal API is to create a -ListView.DataSource, populate it with a simple array of data blobs, and -instantiate a ListView component with that data source and a renderRow -callback which takes a blob from the data array and returns a renderable -component.

Minimal example:

getInitialState: function() { - var ds = new ListViewDataSource({rowHasChanged: (r1, r2) => r1 !== r2}); - return { - dataSource: ds.cloneWithRows(['row 1', 'row 2']), - }; -}, - -render: function() { - return ( - <ListView - dataSource={this.state.dataSource} - renderRow={(rowData) => <Text>{rowData}</Text>} - /> - ); -},

ListView also supports more advanced features, including sections with sticky -section headers, header and footer support, callbacks on reaching the end of -the available data (onEndReached) and on the set of rows that are visible -in the device viewport change (onChangeVisibleRows), and several -performance optimizations.

There are a few performance operations designed to make ListView scroll -smoothly while dynamically loading potentially very large (or conceptually -infinite) data sets:

  • Only re-render changed rows - the hasRowChanged function provided to the -data source tells the ListView if it needs to re-render a row because the -source data has changed - see ListViewDataSource for more details.

  • Rate-limited row rendering - By default, only one row is rendered per -event-loop (customizable with the pageSize prop). This breaks up the -work into smaller chunks to reduce the chance of dropping frames while -rendering rows.

Props #

ScrollView props... #

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

scrollRenderAheadDistance number #

How early to start rendering rows before they come on screen, in -pixels.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/mapview.html b/docs/mapview.html index 63a077e514b..5a094a35673 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,28 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

MapView

Props #

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

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

maxDelta number #

Maximum size of area that can be displayed.

minDelta number #

Minimum size of area that can be displayed.

onRegionChange function #

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

onRegionChangeComplete function #

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

pitchEnabled bool #

When this property is set to true and a valid camera is associated -with the map, the camera’s pitch angle is used to tilt the plane -of the map. When this property is set to false, the camera’s pitch -angle is ignored and the map is always displayed as if the user -is looking straight down onto it.

region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number} #

The region to be displayed by the map.

The region is defined by the center coordinates and the span of -coordinates to display.

rotateEnabled bool #

When this property is set to true and a valid camera is associated with -the map, the camera’s heading angle is used to rotate the plane of the -map around its center point. When this property is set to false, the -camera’s heading angle is ignored and the map is always oriented so -that true north is situated at the top of the map view

scrollEnabled bool #

If false the user won't be able to change the map region being displayed. -Default value is 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#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.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/nativemodulesios.html b/docs/nativemodulesios.html index 31b254999a1..5a094a35673 100644 --- a/docs/nativemodulesios.html +++ b/docs/nativemodulesios.html @@ -1,73 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Native Modules (iOS)

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

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

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

iOS Calendar module example #

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

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

// CalendarManager.h -#import "RCTBridgeModule.h" - -@interface CalendarManager : NSObject <RCTBridgeModule> -@end

React Native will not expose any methods of CalendarManager to JavaScript unless explicitly asked. Fortunately this is pretty easy with RCT_EXPORT:

// CalendarManager.m -@implementation CalendarManager - -- (void)addEventWithName:(NSString *)name location:(NSString *)location -{ - RCT_EXPORT(); - RCTLogInfo(@"Pretending to create an event %@ at %@", name, location); -} - -@end

Now from your JavaScript file you can call the method like this:

var CalendarManager = require('NativeModules').CalendarManager; -CalendarManager.addEventWithName('Birthday Party', '4 Privet Drive, Surrey');

Notice that the exported method name was generated from first part of Objective-C selector. Sometimes it results in a non-idiomatic JavaScript name (like the one in our example). You can change the name by supplying an optional argument to RCT_EXPORT, e.g. RCT_EXPORT(addEvent).

The return type of the method should always be void. React Native bridge is asynchronous, so the only way to pass result to JavaScript is by using callbacks or emitting events (see below).

Argument types #

React Native supports several types of arguments that can be passed from JavaScript code to native module:

  • string (NSString)
  • number (NSInteger, float, double, CGFloat, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) of any types from this list
  • map (NSDictionary) with string keys and values of any type from this list
  • function (RCTResponseSenderBlock)

In our CalendarManager example, if we want to pass event date to native, we have to convert it to a string or a number:

- (void)addEventWithName:(NSString *)name location:(NSString *)location date:(NSInteger)secondsSinceUnixEpoch -{ - RCT_EXPORT(addEvent); - NSDate *date = [NSDate dateWithTimeIntervalSince1970:secondsSinceUnixEpoch]; -}

As CalendarManager.addEvent method gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:

- (void)addEventWithName:(NSString *)name details:(NSDictionary *)details -{ - RCT_EXPORT(addEvent); - NSString *location = [RCTConvert NSString:details[@"location"]]; // ensure location is a string - ... -}

and call it from JavaScript:

CalendarManager.addEvent('Birthday Party', { - location: '4 Privet Drive, Surrey', - time: date.toTime(), - description: '...' -})

NOTE: About array and map

React Native doesn't provide any guarantees about the types of values in these structures. Your native module might expect array of strings, but if JavaScript calls your method with an array that contains number and string you'll get NSArray with NSNumber and NSString. It's developer's responsibility to check array/map values types (see RCTConvert for helper methods).

Callbacks #

WARNING

This section is even more experimental than others, we don't have a set of best practices around callbacks yet.

Native module also supports a special kind of argument - callback. In most cases it is used to provide function call result to JavaScript.

- (void)findEvents:(RCTResponseSenderBlock)callback -{ - RCT_EXPORT(); - NSArray *events = ... - callback(@[[NSNull null], events]); -}

RCTResponseSenderBlock accepts only one argument - array of arguments to pass to JavaScript callback. In this case we use node's convention to set first argument to error and the rest - to the result of the function.

CalendarManager.findEvents((error, events) => { - if (error) { - console.error(error); - } else { - this.setState({events: events}); - } -})

Native module is supposed to invoke callback only once. It can, however, store the callback as an ivar and invoke it later. This pattern is often used to wrap iOS APIs that require delegate. See RCTAlertManager.

If you want to pass error-like object to JavaScript, use RCTMakeError from RCTUtils.h.

Implementing native module #

The native module should not have any assumptions about what thread it is being called on. React Native invokes native modules methods on a separate serial GCD queue, but this is an implementation detail and might change. If the native module needs to call main-thread-only iOS API, it should schedule the operation on the main queue:

- (void)addEventWithName:(NSString *)name callback:(RCTResponseSenderBlock)callback -{ - RCT_EXPORT(addEvent); - dispatch_async(dispatch_get_main_queue(), ^{ - // Call iOS API on main thread - ... - // You can invoke callback from any thread/queue - callback(@[...]); - }); -}

The same way if the operation can take a long time to complete, the native module should not block. It is a good idea to use dispatch_async to schedule expensive work on background queue.

Exporting constants #

Native module can export constants that are instantly available to JavaScript at runtime. This is useful to export some initial data that would otherwise require a bridge round-trip.

- (NSDictionary *)constantsToExport -{ - return @{ @"firstDayOfTheWeek": @"Monday" }; -}

JavaScript can use this value right away:

console.log(CalendarManager.firstDayOfTheWeek);

Note that the constants are exported only at initialization time, so if you change constantsToExport value at runtime it won't affect JavaScript environment.

Sending events to JavaScript #

The native module can signal events to JavaScript without being invoked directly. The easiest way to do this is to use eventDispatcher:

- (void)calendarEventReminderReceived:(NSNotification *)notification -{ - NSString *eventName = notification.userInfo[@"name"]; - [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" - body:@{@"name": eventName}]; -}

JavaScript code can subscribe to these events:

var subscription = DeviceEventEmitter.addListener( - 'EventReminder', - (reminder) => console.log(reminder.name) -); -... -// Don't forget to unsubscribe -subscription.remove();

For more examples of sending events to JavaScript, see RCTLocationObserver.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/navigator.html b/docs/navigator.html index 13ae440765c..5a094a35673 100644 --- a/docs/navigator.html +++ b/docs/navigator.html @@ -1,62 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Navigator

Use Navigator to transition between different scenes in your app. To -accomplish this, provide route objects to the navigator to identify each -scene, and also a renderScene function that the navigator can use to -render the scene for a given route.

To change the animation or gesture properties of the scene, provide a -configureScene prop to get the config object for a given route. See -Navigator.SceneConfigs for default animations and more info on -scene config options.

Basic Usage #

<Navigator - initialRoute={{name: 'My First Scene', index: 0}} - renderScene={(route, navigator) => - <MySceneComponent - name={route.name} - onForward={() => { - var nextIndex = route.index + 1; - navigator.push({ - name: 'Scene ' + nextIndex, - index: nextIndex, - }); - }} - onBack={() => { - if (route.index > 0) { - navigator.pop(); - } - }} - /> - } - />

Navigation Methods #

Navigator can be told to navigate in two ways. If you have a ref to -the element, you can invoke several methods on it to trigger navigation:

  • jumpBack() - Jump backward without unmounting the current scene
  • jumpForward() - Jump forward to the next scene in the route stack
  • jumpTo(route) - Transition to an existing scene without unmounting
  • push(route) - Navigate forward to a new scene, squashing any scenes - that you could jumpForward to
  • pop() - Transition back and unmount the current scene
  • replace(route) - Replace the current scene with a new route
  • replaceAtIndex(route, index) - Replace a scene as specified by an index
  • replacePrevious(route) - Replace the previous scene
  • immediatelyResetRouteStack(routeStack) - Reset every scene with an - array of routes
  • popToRoute(route) - Pop to a particular scene, as specified by it's - route. All scenes after it will be unmounted
  • popToTop() - Pop to the first scene in the stack, unmounting every - other scene

Navigator Object #

The navigator object is made available to scenes through the renderScene -function. The object has all of the navigation methods on it, as well as a -few utilities:

  • parentNavigator - a refrence to the parent navigator object that was - passed in through props.navigator
  • onWillFocus - used to pass a navigation focus event up to the parent - navigator
  • onDidFocus - used to pass a navigation focus event up to the parent - navigator

Props #

configureScene function #

Optional function that allows configuration about scene animations and -gestures. Will be invoked with the route and should return a scene -configuration object

(route) => Navigator.SceneConfigs.FloatFromRight

initialRoute object #

Provide a single "route" to start on. A route is an arbitrary object -that the navigator will use to identify each scene before rendering. -Either initialRoute or initialRouteStack is required.

initialRouteStack [object] #

Provide a set of routes to initially mount the scenes for. Required if no -initialRoute is provided

navigationBar node #

Optionally provide a navigation bar that persists across scene -transitions

navigator object #

Optionally provide the navigator object from a parent Navigator

onDidFocus function #

Will be called with the new route of each scene after the transition is -complete or after the initial mounting. This overrides the onDidFocus -handler that would be found in this.props.navigator

onItemRef function #

Will be called with (ref, indexInStack) when the scene ref changes

onWillFocus function #

Will emit the target route upon mounting and before each nav transition, -overriding the handler in this.props.navigator. This overrides the onDidFocus -handler that would be found in this.props.navigator

renderScene function #

Required function which renders the scene for a given route. Will be -invoked with the route, the navigator object, and a ref handler that -will allow a ref to your scene to be provided by props.onItemRef

(route, navigator, onRef) => - <MySceneComponent title={route.title} ref={onRef} />

sceneStyle View#style #

Styles to apply to the container of each scene

shouldJumpOnBackstackPop bool #

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

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 06d581326a2..5a094a35673 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,50 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

NavigatorIOS

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

Routes #

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

render: function() { - return ( - <NavigatorIOS - initialRoute={{ - component: MyView, - title: 'My View Title', - passProps: { myProp: 'foo' }, - }} - /> - ); -},

Now MyView will be rendered by the navigator. It will recieve the route -object in the route prop, a navigator, and all of the props specified in -passProps.

See the initialRoute propType for a complete definition of a route.

Navigator #

A navigator is an object of navigation functions that a view can call. It -is passed as a prop to any component rendered by NavigatorIOS.

var MyView = React.createClass({ - _handleBackButtonPress: function() { - this.props.navigator.pop(); - }, - _handleNextButtonPress: function() { - this.props.navigator.push(nextRoute); - }, - ... -});

A navigation object contains the following functions:

  • push(route) - Navigate forward to a new route
  • pop() - Go back one page
  • popN(n) - Go back N pages at once. When N=1, behavior matches pop()
  • replace(route) - Replace the route for the current page and immediately -load the view for the new route
  • replacePrevious(route) - Replace the route/view for the previous page
  • replacePreviousAndPop(route) - Replaces the previous route/view and -transitions back to it
  • resetTo(route) - Replaces the top item and popToTop
  • popToRoute(route) - Go back to the item for a particular route object
  • popToTop() - Go back to the top item

Navigator functions are also available on the NavigatorIOS component:

var MyView = React.createClass({ - _handleNavigationRequest: function() { - this.refs.nav.push(otherRoute); - }, - render: () => ( - <NavigatorIOS - ref="nav" - initialRoute={...} - /> - ), -});

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#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.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/netinfo.html b/docs/netinfo.html index 514f0b5ae49..5a094a35673 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,39 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

NetInfo

NetInfo exposes info about online/offline status

reachabilityIOS #

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) { - console.log('First change: ' + reach); - NetInfo.reachabilityIOS.removeEventListener( - 'change', - handleFirstReachabilityChange - ); -} -NetInfo.reachabilityIOS.addEventListener( - 'change', - handleFirstReachabilityChange -);

isConnected #

Available on all platforms. Asyncronously fetch a boolean to determine -internet connectivity.

NetInfo.isConnected.fetch().done((isConnected) => { - console.log('First, is ' + (isConnected ? 'online' : 'offline')); -}); -function handleFirstConnectivityChange(isConnected) { - console.log('Then, is ' + (isConnected ? 'online' : 'offline')); - NetInfo.isConnected.removeEventListener( - 'change', - handleFirstConnectivityChange - ); -} -NetInfo.isConnected.addEventListener( - 'change', - handleFirstConnectivityChange -);
Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/network.html b/docs/network.html index 9c823968c01..5a094a35673 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,33 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Network

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

XMLHttpRequest #

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

var request = new XMLHttpRequest(); -request.onreadystatechange = (e) => { - if (request.readyState !== 4) { - return; - } - - if (request.status === 200) { - console.log('success', request.responseText); - } else { - console.warn('error'); - } -}; - -request.open('GET', 'https://mywebsite.com/endpoint.php'); -request.send();

Please follow the MDN Documentation for a complete description of the API.

As a developer, you're probably not going to use XMLHttpRequest directly as its API is very tedious to work with. But the fact that it is implemented and compatible with the browser API gives you the ability to use third-party libraries such as Parse or super-agent directly from npm.

Fetch #

fetch is a better networking API being worked on by the standard committee and is already available in Chrome. It is available in React Native by default.

fetch('https://mywebsite.com/endpoint.php') - .then((response) => response.text()) - .then((responseText) => { - console.log(responseText); - }) - .catch((error) => { - console.warn(error); - });
Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/panresponder.html b/docs/panresponder.html index 09be1f40830..5a094a35673 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -1,66 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

PanResponder

PanResponder reconciles several touches into a single gesture. It makes -single-touch gestures resilient to extra touches, and can be used to -recognize simple multi-touch gestures.

It provides a predictable wrapper of the responder handlers provided by the -gesture responder system. -For each handler, it provides a new gestureState object alongside the -normal event.

A gestureState object has the following:

  • stateID - ID of the gestureState- persisted as long as there at least - one touch on screen
  • moveX - the latest screen coordinates of the recently-moved touch
  • moveY - the latest screen coordinates of the recently-moved touch
  • x0 - the screen coordinates of the responder grant
  • y0 - the screen coordinates of the responder grant
  • dx - accumulated distance of the gesture since the touch started
  • dy - accumulated distance of the gesture since the touch started
  • vx - current velocity of the gesture
  • vy - current velocity of the gesture
  • numberActiveTouches - Number of touches currently on screeen

Basic Usage #

componentWillMount: function() { - this._panGesture = PanResponder.create({ - // Ask to be the responder: - onStartShouldSetPanResponder: (evt, gestureState) => true, - onStartShouldSetPanResponderCapture: (evt, gestureState) => true, - onMoveShouldSetPanResponder: (evt, gestureState) => true, - onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, - - onPanResponderGrant: (evt, gestureState) => { - // The guesture has started. Show visual feedback so the user knows - // what is happening! - - // gestureState.{x,y}0 will be set to zero now - }, - onPanResponderMove: (evt, gestureState) => { - // The most recent move distance is gestureState.move{X,Y} - - // The accumulated gesture distance since becoming responder is - // gestureState.d{x,y} - }, - onResponderTerminationRequest: (evt, gestureState) => true, - onPanResponderRelease: (evt, gestureState) => { - // The user has released all touches while this view is the - // responder. This typically means a gesture has succeeded - }, - onPanResponderTerminate: (evt, gestureState) => { - // Another component has become the responder, so this gesture - // should be cancelled - }, - }); - }, - - render: function() { - return ( - <View {...this._panResponder.panHandlers} /> - ); - },

Working Example #

To see it in action, try the -PanResponder example in UIExplorer

Methods #

static create(config: object) #

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

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

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

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

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

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/pickerios.html b/docs/pickerios.html index f35140f1aac..5a094a35673 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

PickerIOS

Props #

onValueChange function #

selectedValue any #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/pixelratio.html b/docs/pixelratio.html index a383f25edb1..5a094a35673 100644 --- a/docs/pixelratio.html +++ b/docs/pixelratio.html @@ -1,20 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

PixelRatio

PixelRatio class gives access to the device pixel density.

There are a few use cases for using PixelRatio:

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

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

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

Fetching a correctly sized image #

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

var image = getImage({ - width: 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

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.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html index 400f82c130a..5a094a35673 100644 --- a/docs/pushnotificationios.html +++ b/docs/pushnotificationios.html @@ -1,22 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

PushNotificationIOS

Handle push notifications for your app, including permission handling and -icon badge number.

To get up and running, configure your notifications with Apple -and your server-side system. To get an idea, this is the Parse guide.

Methods #

static setApplicationIconBadgeNumber(number: number) #

Sets the badge number for the app icon on the home screen

static getApplicationIconBadgeNumber(callback: Function) #

Gets the current badge number for the app icon on the home screen

static addEventListener(type: string, handler: Function) #

Attaches a listener to remote notifications while the app is running in the -foreground or the background.

The handler will get be invoked with an instance of PushNotificationIOS

static requestPermissions() #

Requests all notification permissions from iOS, prompting the user's -dialog box.

static checkPermissions(callback: Function) #

See what push permissions are currently enabled. callback will be -invoked with a permissions object:

  • alert :boolean
  • badge :boolean
  • sound :boolean

static removeEventListener(type: string, handler: Function) #

Removes the event listener. Do this in componentWillUnmount to prevent -memory leaks

static popInitialNotification() #

An initial notification will be available if the app was cold-launched -from a notification.

The first caller of popInitialNotification will get the initial -notification object, or null. Subsequent invocations will return null.

constructor(nativeNotif) #

You will never need to instansiate PushNotificationIOS yourself. -Listening to the notification event and invoking -popInitialNotification is sufficient

getMessage() #

An alias for getAlert to get the notification's main message string

getSound() #

Gets the sound string from the aps object

getAlert() #

Gets the notification's main message from the aps object

getBadgeCount() #

Gets the badge count number from the aps object

getData() #

Gets the data object on the notif

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/scrollview.html b/docs/scrollview.html index 81f41e76cee..5a094a35673 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -1,53 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

ScrollView

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

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

Props #

alwaysBounceHorizontal bool #

When true, the scroll view bounces horizontally when it reaches the end -even if the content is smaller than the scroll view itself. The default -value is true when horizontal={true} and false otherwise.

alwaysBounceVertical bool #

When true, the scroll view bounces vertically when it reaches the end -even if the content is smaller than the scroll view itself. The default -value is false when horizontal={true} and true otherwise.

automaticallyAdjustContentInsets bool #

centerContent bool #

When true, the scroll view automatically centers the content when the -content is smaller than the scroll view bounds; when the content is -larger than the scroll view, this property has no effect. The default -value is false.

contentContainerStyle StyleSheetPropType(ViewStylePropTypes) #

These styles will be applied to the scroll view content container which -wraps all of the child views. Example:

return ( - <ScrollView contentContainerStyle={styles.contentContainer}> - </ScrollView> - ); - ... - var styles = StyleSheet.create({ - contentContainer: { - paddingVertical: 20 - } - });

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 -instead of vertically in a column. The default value is false.

keyboardDismissMode enum("none", 'interactive', 'onDrag') #

Determines whether the keyboard gets dismissed in response to a drag. - - 'none' (the default), drags do not dismiss the keyboard. - - 'onDrag', the keyboard is dismissed when a drag begins. - - 'interactive', the keyboard is dismissed interactively with the drag - and moves in synchrony with the touch; dragging upwards cancels the - dismissal.

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

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

throttleScrollCallbackMS number #

zoomScale number #

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

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/sliderios.html b/docs/sliderios.html index 4d16237c0aa..5a094a35673 100644 --- a/docs/sliderios.html +++ b/docs/sliderios.html @@ -1,17 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

SliderIOS

Props #

maximumValue number #

Initial maximum value of the slider. Default value is 1.

minimumValue number #

Initial minimum value of the slider. Default value is 0.

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 minimumValue -and maximumValue, which default to 0 and 1 respectively. -Default value is 0.

This is not a controlled component, e.g. if you don't update -the value, the component won't be reset to it's inital value.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/statusbarios.html b/docs/statusbarios.html index 15fb3fb979a..5a094a35673 100644 --- a/docs/statusbarios.html +++ b/docs/statusbarios.html @@ -1,14 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

StatusBarIOS

All rights reserved.

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

@flow

Methods #

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

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

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/style.html b/docs/style.html index 318eaacb77f..5a094a35673 100644 --- a/docs/style.html +++ b/docs/style.html @@ -1,49 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Style

React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.

- -

Declare Styles #

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

var styles = StyleSheet.create({ - base: { - width: 38, - height: 38, - }, - background: { - backgroundColor: '#222222', - }, - active: { - borderWidth: 2, - borderColor: '#00ff00', - }, -});

StyleSheet.create construct is optional but provides some key advantages. It ensures that the values are immutable and opaque by transforming them into plain numbers that reference an internal table. By putting it at the end of the file, you also ensure that they are only created once for the application and not on every render.

All the attribute names and values are a subset of what works on the web. For layout, React Native implements Flexbox.

Using Styles #

All the core components accept a style attribute

<Text style={styles.base} /> -<View style={styles.background} />

and also accepts an array of styles

<View style={[styles.base, styles.background]} />

The behavior is the same as Object.assign: in case of conflicting values, the one from the right-most element will have precedence and falsy values like false, undefined and null will be ignored. A common pattern is to conditionally add a style based on some condition.

<View style={[styles.base, this.state.active && styles.active]} />

Finally, if you really have to, you can also create style objects in render, but they are highly discouraged. Put them last in the array definition.

<View - style={[styles.base, { - width: this.state.width, - height: this.state.width * this.state.aspectRatio - }]} -/>

Pass Styles Around #

In order to let a call site customize the style of your component children, you can pass styles around. Use View.propTypes.style and Text.propTypes.style in order to make sure only styles are being passed.

var List = React.createClass({ - propTypes: { - style: View.propTypes.style, - elementStyle: View.propTypes.style, - }, - render: function() { - return ( - <View style={this.props.style}> - {elements.map((element) => - <View style={[styles.element, this.props.elementStyle]} /> - )} - </View> - ); - } -}); - -// ... in another file ... -<List style={styles.list} elementStyle={styles.listElement} />
Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/stylesheet.html b/docs/stylesheet.html index 479994b5245..5a094a35673 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -1,31 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

StyleSheet

A StyleSheet is an abstraction similar to CSS StyleSheets

Create a new StyleSheet:

var styles = StyleSheet.create({ - container: { - borderRadius: 4, - borderWidth: 0.5, - borderColor: '#d6d7da', - }, - title: { - fontSize: 19, - fontWeight: 'bold', - }, - activeTitle: { - color: 'red', - }, -});

Use a StyleSheet:

<View style={styles.container}> - <Text style={[styles.title, this.props.isActive && styles.activeTitle]} /> -</View>

Code quality:

  • By moving styles away from the render function, you're making the code -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: {[key: string]: any}) #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/switchios.html b/docs/switchios.html index 047838be142..5a094a35673 100644 --- a/docs/switchios.html +++ b/docs/switchios.html @@ -1,18 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

SwitchIOS

Use SwitchIOS to render a boolean input on iOS. This is -a controlled component, so you must hook in to the onValueChange callback -and update the value prop in order for the component to update, otherwise -the user's change will be reverted immediately to reflect props.value as the -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 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.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/tabbarios.html b/docs/tabbarios.html index aab359e9e06..5a094a35673 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

TabBarIOS

Props #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/testing.html b/docs/testing.html index 2de894e7ce6..5a094a35673 100644 --- a/docs/testing.html +++ b/docs/testing.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Testing

Running Tests and Contributing #

The React Native repo has several tests you can run to verify you haven't caused a regression with your PR. These tests are run with the Travis continuous integration system, and will automatically post the results to your PR. You can also run them locally with cmd+U in the IntegrationTest and UIExplorer apps in Xcode. You can run the jest tests via npm test on the command line. We don't have great test coverage yet, however, so most changes will still require significant manual verification, but we would love it if you want to help us increase our test coverage!

Jest Tests #

Jest tests are JS-only tests run on the command line with node. The tests themselves live in the __tests__ directories of the files they test, and there is a large emphasis on aggressively mocking out functionality that is not under test for failure isolation and maximum speed. You can run the existing React Native jest tests with npm test from the react-native root, and we encourage you to add your own tests for any components you want to contribute to. See getImageSource-test.js for a basic example.

Integration Tests. #

React Native provides facilities to make it easier to test integrated components that require both native and JS components to communicate across the bridge. The two main components are RCTTestRunner and RCTTestModule. RCTTestRunner sets up the ReactNative environment and provides facilities to run the tests as XCTestCases in Xcode (runTest:module is the simplest method). RCTTestModule is exported to JS via NativeModules as TestModule. The tests themselves are written in JS, and must call TestModule.markTestCompleted() when they are done, otherwise the test will timeout and fail. Test failures are primarily indicated by throwing an exception. It is also possible to test error conditions with runTest:module:initialProps:expectErrorRegex: or runTest:module:initialProps:expectErrorBlock: which will expect an error to be thrown and verify the error matches the provided criteria. See IntegrationTestHarnessTest.js and IntegrationTestsTests.m for example usage.

Snapshot Tests #

A common type of integration test is the snapshot test. These tests render a component, and verify snapshots of the screen against reference images using TestModule.verifySnapshot(), using the FBSnapshotTestCase library behind the scenes. Reference images are recorded by setting recordMode = YES on the RCTTestRunner, then running the tests. Snapshots will differ slightly between 32 and 64 bit, and various OS versions, so it's recommended that you enforce tests are run with the correct configuration. It's also highly recommended that all network data be mocked out, along with other potentially troublesome dependencies. See SimpleSnapshotTest for a basic example.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/text.html b/docs/text.html index a7ba6e49866..5a094a35673 100644 --- a/docs/text.html +++ b/docs/text.html @@ -1,88 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Text

A react component for displaying text which supports nesting, -styling, and touch handling. In the following example, the nested title and -body text will inherit the fontFamily from styles.baseText, but the title -provides its own additional styles. The title and body will stack on top of -each other on account of the literal newlines:

renderText: function() { - return ( - <Text style={styles.baseText}> - <Text style={styles.titleText} onPress={this.onPressTitle}> - {this.state.titleText + '\n\n'} - </Text> - <Text numberOfLines={5}> - {this.state.bodyText} - </Text> - </Text> - ); -}, -... -var styles = StyleSheet.create({ - baseText: { - fontFamily: 'Cochin', - }, - titleText: { - fontSize: 20, - fontWeight: 'bold', - }, -};

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

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

style style #

View#style...
color string
containerBackgroundColor string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
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'}}> - and red - </Text> -</Text>

Behind the scenes, this is going to be converted to a flat NSAttributedString that contains the following information

"I am bold and red" -0-9: bold -9-17: bold, red

Containers #

The <Text> element is special relative to layout: everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.

<Text> - <Text>First part and </Text> - <Text>second part</Text> -</Text> -// Text container: all the text flows as if it was one -// |First part | -// |and second | -// |part | - -<View> - <Text>First part and </Text> - <Text>second part</Text> -</View> -// View container: each text is its own block -// |First part | -// |and | -// |second part|

Limited Style Inheritance #

On the web, the usual way to set a font family and size for the entire document is to write:

/* CSS, *not* React Native */ -html { - font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; - font-size: 11px; - color: #141823; -}

When the browser is trying to render a text node, it's going to go all the way up to the root element of the tree and find an element with a font-size attribute. An unexpected property of this system is that any node can have font-size attribute, including a <div>. This was designed for convenience, even though not really semantically correct.

In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component; you cannot have a text node directly under a <View>.

// BAD: will fatal, can't have a text node as child of a <View> -<View> - Some text -</View> - -// GOOD -<View> - <Text> - Some text - </Text> -</View>

You also lose the ability to set up a default font for an entire subtree. The recommended way to use consistent fonts and sizes across your application is to create a component MyAppText that includes them and use this component across your app. You can also use this component to make more specific components like MyAppHeaderText for other kinds of text.

<View> - <MyAppText>Text styled with the default font for the entire application</MyAppText> - <MyAppHeaderText>Text styled as a header</MyAppHeaderText> -</View>

React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.

<Text style={{fontWeight: 'bold'}}> - I am bold - <Text style={{color: 'red'}}> - and red - </Text> -</Text>

We believe that this more constrained way to style text will yield better apps:

  • (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.

  • (Implementor) The implementation of React Native is also simplified. We do not need to have a fontFamily field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/textinput.html b/docs/textinput.html index 40edbd758db..5a094a35673 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -1,37 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

TextInput

A foundational component for inputting text into the app via a -keyboard. Props provide configurability for several features, such as auto- -correction, auto-capitalization, placeholder text, and different keyboard -types, such as a numeric keypad.

The simplest use case is to plop down a TextInput and subscribe to the -onChangeText events to read the user input. There are also other events, such -as onSubmitEditing and onFocus that can be subscribed to. A simple -example:

<View> - <TextInput - style={{height: 40, borderColor: 'gray', borderWidth: 1}} - onChangeText={(text) => this.setState({input: text})} - /> - <Text>{'user input: ' + this.state.input}</Text> -</View>

The value prop can be used to set the value of the input in order to make -the state of the component clear, but <TextInput> does not behave as a true -controlled component by default because all operations are asynchronous. -Setting value once is like setting the default value, but you can change it -continuously based on onChangeText events as well. If you really want to -force the component to always revert to the value you are setting, you can -set controlled={true}.

The multiline prop is not supported in all releases, and some props are -multiline only.

Props #

autoCapitalize enum('none', 'sentences', 'words', 'characters') #

Can tell TextInput to automatically capitalize certain characters.

  • characters: all characters,
  • words: first letter of each word
  • sentences: first letter of each sentence (default)
  • none: don't auto capitalize anything

autoCorrect bool #

If false, disables auto-correct. Default value is true.

autoFocus bool #

If true, focuses the input on componentDidMount. Default value is false.

bufferDelay number #

This helps avoid drops characters due to race conditions between JS and -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 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#style #

value string #

The default value for the text input

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/timers.html b/docs/timers.html index 5e79e1e5926..5a094a35673 100644 --- a/docs/timers.html +++ b/docs/timers.html @@ -1,28 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Timers

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

Timers #

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

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

setImmediate is executed at the end of the current JavaScript execution block, right before sending the batched response back to native. Note that if you call setImmediate within a setImmediate callback, it will be executed right away, it won't yield back to native in between.

The Promise implementation uses setImmediate as its asynchronicity primitive.

InteractionManager #

One reason why well-built native apps feel so smooth is by avoiding expensive operations during interactions and animations. In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed.

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

InteractionManager.runAfterInteractions(() => { - // ...long-running synchronous task... -});

Compare this to other scheduling alternatives:

  • requestAnimationFrame(): for code that animates a view over time.
  • setImmediate/setTimeout/setInterval(): run code later, note this may delay animations.
  • runAfterInteractions(): run code later, without delaying active animations.

The touch handling system considers one or more active touches to be an 'interaction' and will delay runAfterInteractions() callbacks until all touches have ended or been cancelled.

InteractionManager also allows applications to register animations by creating an interaction 'handle' on animation start, and clearing it upon completion:

var handle = InteractionManager.createInteractionHandle(); -// run animation... (`runAfterInteractions` tasks are queued) -// later, on animation completion: -InteractionManager.clearInteractionHandle(handle); -// queued tasks run if all handles were cleared

TimerMixin #

We found out that the primary cause of fatals in apps created with React Native was due to timers firing after a component was unmounted. To solve this recurring issue, we introduced TimerMixin. If you include TimerMixin, then you can replace your calls to setTimeout(fn, 500) with this.setTimeout(fn, 500) (just prepend this.) and everything will be properly cleaned up for you when the component unmounts.

var TimerMixin = require('react-timer-mixin'); - -var Component = React.createClass({ - mixins: [TimerMixin], - componentDidMount: function() { - this.setTimeout( - () => { console.log('I do not leak!'); }, - 500 - ); - } -});

We highly recommend never using bare timers and always using this mixin, it will save you from a lot of hard to track down bugs.

© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index f9c15a7b3cd..5a094a35673 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -1,28 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

TouchableHighlight

A wrapper for making views respond properly to touches. -On press down, the opacity of the wrapped view is decreased, which allows -the underlay color to show through, darkening or tinting the view. The -underlay comes from adding a view to the view hierarchy, which can sometimes -cause unwanted visual artifacts if not used correctly, for example if the -backgroundColor of the wrapped view isn't explicitly set to an opaque color.

Example:

renderButton: function() { - return ( - <TouchableHighlight onPress={this._onPressButton}> - <Image - style={styles.button} - source={require('image!myButton')} - /> - </View> - ); -},

Props #

TouchableWithoutFeedback props... #

activeOpacity number #

Determines what the opacity of the wrapped view should be when 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.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index 02323f072db..5a094a35673 100644 --- a/docs/touchableopacity.html +++ b/docs/touchableopacity.html @@ -1,25 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

TouchableOpacity

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

Example:

renderButton: function() { - return ( - <TouchableOpacity onPress={this._onPressButton}> - <Image - style={styles.button} - source={require('image!myButton')} - /> - </View> - ); -},

Props #

TouchableWithoutFeedback props... #

activeOpacity number #

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

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/touchablewithoutfeedback.html b/docs/touchablewithoutfeedback.html index 663b4159f29..5a094a35673 100644 --- a/docs/touchablewithoutfeedback.html +++ b/docs/touchablewithoutfeedback.html @@ -1,15 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

TouchableWithoutFeedback

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

Props #

onLongPress function #

onPress function #

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

onPressIn function #

onPressOut function #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/tutorial.html b/docs/tutorial.html index 823b9313b46..5a094a35673 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -1,299 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Tutorial

Preface #

This tutorial aims to get you up to speed with writing iOS apps using React Native. If you're wondering what React Native is and why Facebook built it, this blog post explains that.

We assume you have experience writing websites with React. If not, you can learn about it on the React website.

Setup #

React Native requires OSX, Xcode, Homebrew, node, npm, and watchman. Flow is optional.

After installing these dependencies there are two simple commands to get a React Native project all set up for development.

  1. npm install -g react-native-cli

    react-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install react-nativeas a command in your terminal. You only ever need to do this once.

  2. react-native init AwesomeProject

    This command fetches the React Native source code and dependencies and then creates a new Xcode project in AwesomeProject/AwesomeProject.xcodeproj.

Development #

You can now open this new project (AwesomeProject/AwesomeProject.xcodeproj) in Xcode and simply build and run it with cmd+R. Doing so will also start a node server which enables live code reloading. With this you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.

For this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

Hello World #

react-native init will copy Examples/SampleProject to whatever you named your project, in this case AwesomeProject. This is a simple hello world app. You can edit index.ios.js to make changes to the app and then press cmd+R in the simulator to see the changes.

Mocking data #

Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like. In index.ios.js:

var MOCKED_MOVIES_DATA = [ - {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, -];

Render a movie #

We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.

var { - AppRegistry, - Image, - StyleSheet, - Text, - View, -} = React;

Now change the render function so that we're rendering the data mentioned above rather than hello world.

render: function() { - var movie = MOCKED_MOVIES_DATA[0]; - return ( - <View style={styles.container}> - <Text>{movie.title}</Text> - <Text>{movie.year}</Text> - <Image source={{uri: movie.posters.thumbnail}} /> - </View> - ); - }

Press cmd+R and you should see "Title" above "2015". Notice that the Image doesn't render anything. This is because we haven't specified the width and height of the image we want to render. This is done via styles. While we're changing the styles let's also clean up the styles we're no longer using.

var styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - thumbnail: { - width: 53, - height: 81, - }, -});

And lastly we need to apply this style to the Image component:

<Image - source={{uri: movie.posters.thumbnail}} - style={styles.thumbnail} - />

Press cmd+R and the image should now render.

- -
- - -

Add some styling #

Great, we've rendered our data. Now let's make it look better. I'd like to put the text to the right of the image and make the title larger and centered within that area:

+---------------------------------+ -|+-------++----------------------+| -|| || Title || -|| Image || || -|| || Year || -|+-------++----------------------+| -+---------------------------------+

We'll need to add another container in order to vertically lay out components within horizontally layed out components.

return ( - <View style={styles.container}> - <Image - source={{uri: movie.posters.thumbnail}} - style={styles.thumbnail} - /> - <View style={styles.rightContainer}> - <Text style={styles.title}>{movie.title}</Text> - <Text style={styles.year}>{movie.year}</Text> - </View> - </View> - );

Not too much has changed, we added a container around the Texts and then moved them after the Image (because they're to the right of the Image). Let's see what the style changes look like:

container: { - flex: 1, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - },

We use FlexBox for layout - see this great guide to learn more about it.

In the above code snippet, we simply added flexDirection: 'row' that will make children of our main container to be layed out horizontally instead of vertically.

Now add another style to the JS style object:

rightContainer: { - flex: 1, - },

This means that the rightContainer takes up the remaining space in the parent container that isn't taken up by the Image. If this doesn't make sense, add a backgroundColor to rightContainer and then try removing the flex: 1. You'll see that this causes the container's size to be the minimum size that fits its children.

Styling the text is pretty straightforward:

title: { - fontSize: 20, - marginBottom: 8, - textAlign: 'center', - }, - year: { - textAlign: 'center', - },

Go ahead and press cmd+R and you'll see the updated view.

- -
- -

Fetching real data #

Fetching data from Rotten Tomatoes's API isn't really relevant to learning React Native so feel free to breeze through this section.

Add the following constants to the top of the file (typically below the requires) to create the REQUEST_URL used to request data with.

/** - * For quota reasons we replaced the Rotten Tomatoes' API with a sample data of - * their very own API that lives in React Native's Github repo. - */ -var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

Add some initial state to our application so that we can check this.state.movies === null to determine whether the movies data has been loaded or not. We can set this data when the response comes back with this.setState({movies: moviesData}). Add this code just above the render function inside our React class.

getInitialState: function() { - return { - movies: null, - }; - },

We want to send off the request after the component has finished loading. componentDidMount is a function of React components that React will call exactly once, just after the component has been loaded.

componentDidMount: function() { - this.fetchData(); - },

Now add fetchData function used above to our main component. This method will be responsible for handling data fetching. All you need to do is call this.setState({movies: data}) after resolving the promise chain because the way React works is that setState actually triggers a re-render and then the render function will notice that this.state.movies is no longer null. Note that we call done() at the end of the promise chain - always make sure to call done() or any errors thrown will get swallowed.

fetchData: function() { - fetch(REQUEST_URL) - .then((response) => response.json()) - .then((responseData) => { - this.setState({ - movies: responseData.movies, - }); - }) - .done(); - },

Now modify the render function to render a loading view if we don't have any movies data, and to render the first movie otherwise.

render: function() { - if (!this.state.movies) { - return this.renderLoadingView(); - } - - var movie = this.state.movies[0]; - return this.renderMovie(movie); - }, - - renderLoadingView: function() { - return ( - <View style={styles.container}> - <Text> - Loading movies... - </Text> - </View> - ); - }, - - renderMovie: function(movie) { - return ( - <View style={styles.container}> - <Image - source={{uri: movie.posters.thumbnail}} - style={styles.thumbnail} - /> - <View style={styles.rightContainer}> - <Text style={styles.title}>{movie.title}</Text> - <Text style={styles.year}>{movie.year}</Text> - </View> - </View> - ); - },

Now press cmd+R and you should see "Loading movies..." until the response comes back, then it will render the first movie it fetched from Rotten Tomatoes.

- -
- -

ListView #

Let's now modify this application to render all of this data in a ListView component, rather than just rendering the first movie.

Why is a ListView better than just rendering all of these elements or putting them in a ScrollView? Despite React being fast, rendering a possibly infinite list of elements could be slow. ListView schedules rendering of views so that you only display the ones on screen and those already rendered but off screen are removed from the native view hierarchy.

First thing's first: add the ListView require to the top of the file.

var { - AppRegistry, - Image, - ListView, - StyleSheet, - Text, - View, -} = React;

Now modify the render function so that once we have our data it renders a ListView of movies instead of a single movie.

render: function() { - if (!this.state.loaded) { - return this.renderLoadingView(); - } - - return ( - <ListView - dataSource={this.state.dataSource} - renderRow={this.renderMovie} - style={styles.listView} - /> - ); - },

The DataSource is an interface that ListView is using to determine which rows have changed over the course of updates.

You'll notice we used dataSource from this.state. The next step is to add an empty dataSource to the object returned by getInitialState. Also, now that we're storing the data in dataSource, we should no longer use this.state.movies to avoid storing data twice. We can use boolean property of the state (this.state.loaded) to tell whether data fetching has finished.

getInitialState: function() { - return { - dataSource: new ListView.DataSource({ - rowHasChanged: (row1, row2) => row1 !== row2, - }), - loaded: false, - }; - },

And here is the modified fetchData method that updates the state accordingly:

fetchData: function() { - fetch(REQUEST_URL) - .then((response) => response.json()) - .then((responseData) => { - this.setState({ - dataSource: this.state.dataSource.cloneWithRows(responseData.movies), - loaded: true, - }); - }) - .done(); - },

Finally, we add styles for the ListView component to the styles JS object:

listView: { - paddingTop: 20, - backgroundColor: '#F5FCFF', - },

And here's the final result:

- -
- -

There's still some work to be done to make it a fully functional app such as: adding navigation, search, infinite scroll loading, etc. Check the Movies Example to see it all working.

Final source code #

/** - * Sample React Native App - * https://github.com/facebook/react-native - */ -'use strict'; - -var React = require('react-native'); -var { - AppRegistry, - Image, - ListView, - StyleSheet, - Text, - View, -} = React; - -var API_KEY = '7waqfqbprs7pajbz28mqf6vz'; -var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'; -var PAGE_SIZE = 25; -var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE; -var REQUEST_URL = API_URL + PARAMS; - -var AwesomeProject = React.createClass({ - getInitialState: function() { - return { - dataSource: new ListView.DataSource({ - rowHasChanged: (row1, row2) => row1 !== row2, - }), - loaded: false, - }; - }, - - componentDidMount: function() { - this.fetchData(); - }, - - fetchData: function() { - fetch(REQUEST_URL) - .then((response) => response.json()) - .then((responseData) => { - this.setState({ - dataSource: this.state.dataSource.cloneWithRows(responseData.movies), - loaded: true, - }); - }) - .done(); - }, - - render: function() { - if (!this.state.loaded) { - return this.renderLoadingView(); - } - - return ( - <ListView - dataSource={this.state.dataSource} - renderRow={this.renderMovie} - style={styles.listView} - /> - ); - }, - - renderLoadingView: function() { - return ( - <View style={styles.container}> - <Text> - Loading movies... - </Text> - </View> - ); - }, - - renderMovie: function(movie) { - return ( - <View style={styles.container}> - <Image - source={{uri: movie.posters.thumbnail}} - style={styles.thumbnail} - /> - <View style={styles.rightContainer}> - <Text style={styles.title}>{movie.title}</Text> - <Text style={styles.year}>{movie.year}</Text> - </View> - </View> - ); - }, -}); - -var styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - rightContainer: { - flex: 1, - }, - title: { - fontSize: 20, - marginBottom: 8, - textAlign: 'center', - }, - year: { - textAlign: 'center', - }, - thumbnail: { - width: 53, - height: 81, - }, - listView: { - paddingTop: 20, - backgroundColor: '#F5FCFF', - }, -}); - -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/vibrationios.html b/docs/vibrationios.html index 297ae5db8e9..5a094a35673 100644 --- a/docs/vibrationios.html +++ b/docs/vibrationios.html @@ -1,15 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

VibrationIOS

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

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

Vibration patterns are currently unsupported.

Methods #

static vibrate() #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/videos.html b/docs/videos.html index 5937e5c7beb..5a094a35673 100644 --- a/docs/videos.html +++ b/docs/videos.html @@ -1,27 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Videos

- - - - - -

The Changelog #149 #

With Christopher "vjeux" Chedeau and Spencer Ahrens

- -

JSJabber #146 #

With Christopher "vjeux" Chedeau and Jordan Walke

-
Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/view.html b/docs/view.html index fdba4dfcac8..5a094a35673 100644 --- a/docs/view.html +++ b/docs/view.html @@ -1,48 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

View

The most fundamental component for building UI, View is a -container that supports layout with flexbox, style, some touch handling, and -accessibility controls, and is designed to be nested inside other views and -to have 0 to many children of any type. View maps directly to the native -view equivalent on whatever platform react is running on, whether that is a -UIView, <div>, android.view, etc. This example creates a View that -wraps two colored boxes and custom component in a row with padding.

<View style={{flexDirection: 'row', height: 100, padding: 20}}> - <View style={{backgroundColor: 'blue', flex: 0.3}} /> - <View style={{backgroundColor: 'red', flex: 0.5}} /> - <MyCustomComponent {...customProps} /> -</View>

Views are designed to be used with StyleSheets for clarity and -performance, although inline styles are also supported.

Props #

accessibilityLabel string #

Overrides the text that's read by the screen reader when the user interacts -with the element. By default, the label is constructed by traversing all the -children and accumulating all the Text nodes separated by space.

accessible bool #

When true, indicates that the view is an accessibility element. By default, -all the touchable elements are accessible.

onMoveShouldSetResponder function #

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

onResponderGrant function #

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:

.box-none { - pointer-events: none; -} -.box-none * { - pointer-events: all; -}

box-only is the equivalent of

.box-only { - pointer-events: all; -} -.box-only * { - pointer-events: none; -}

But since pointerEvents does not affect layout/appearance, and we are -already deviating from the spec by adding additional modes, we opt to not -include pointerEvents on style. On some platforms, we would need to -implement it as a className anyways. Using style or not is an -implementation detail of the platform.

removeClippedSubviews bool #

This is a special performance property exposed by RCTView and is useful -for scrolling content when there are many subviews, most of which are -offscreen. For this property to be effective, it must be applied to a -view that contains many subviews that extend outside its bound. The -subviews must also have overflow: hidden, as should the containing view -(or one of its superviews).

style style #

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

testID string #

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

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file diff --git a/docs/webview.html b/docs/webview.html index 706da58b6f9..5a094a35673 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -1,12 +1,11 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

WebView

Props #

automaticallyAdjustContentInsets bool #

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

onNavigationStateChange function #

renderError function #

renderLoading function #

shouldInjectAJAXHandler bool #

startInLoadingState bool #

style View#style #

url string #

Next →
© 2015 Facebook Inc.
\ No newline at end of file +Error: `next: linking-libraries` in nativemodulesios doesn't exist + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 + at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) + at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) + at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) + at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) + at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) + at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 + at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) + at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file