From a0d10306be03bafe6905af1466eadab48aeecc14 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Sun, 29 Mar 2015 01:14:08 +0000 Subject: [PATCH] update website --- docs/activityindicatorios.html | 2 +- docs/alertios.html | 2 +- docs/animation.html | 2 +- docs/appregistry.html | 2 +- docs/appstateios.html | 2 +- docs/asyncstorage.html | 2 +- docs/cameraroll.html | 2 +- docs/datepickerios.html | 2 +- docs/debugging.html | 2 +- docs/flexbox.html | 2 +- docs/geolocation.html | 2 +- docs/gesture-responder-system.html | 2 +- docs/getting-started.html | 2 +- docs/image.html | 2 +- docs/interactionmanager.html | 2 +- docs/layoutanimation.html | 2 +- docs/linking-libraries.html | 32 +++++++++++++++++++++++++++++ docs/linkingios.html | 2 +- docs/listview.html | 2 +- docs/mapview.html | 2 +- docs/nativemodulesios.html | 4 ++-- docs/navigator.html | 2 +- docs/navigatorios.html | 2 +- docs/netinfo.html | 2 +- docs/network.html | 2 +- docs/panresponder.html | 2 +- docs/pickerios.html | 2 +- docs/pixelratio.html | 2 +- docs/pushnotificationios.html | 2 +- docs/scrollview.html | 2 +- docs/sliderios.html | 2 +- docs/statusbarios.html | 2 +- docs/style.html | 2 +- docs/stylesheet.html | 2 +- docs/switchios.html | 2 +- docs/tabbarios.html | 2 +- docs/testing.html | 2 +- docs/text.html | 2 +- docs/textinput.html | 2 +- docs/timers.html | 2 +- docs/touchablehighlight.html | 2 +- docs/touchableopacity.html | 2 +- docs/touchablewithoutfeedback.html | 2 +- docs/tutorial.html | 2 +- docs/vibrationios.html | 2 +- docs/videos.html | 2 +- docs/view.html | 2 +- docs/webview.html | 2 +- img/AddToBuildPhases.png | Bin 0 -> 612768 bytes img/AddToLibraries.png | Bin 0 -> 839198 bytes img/AddToSearchPaths.png | Bin 0 -> 581137 bytes 51 files changed, 80 insertions(+), 48 deletions(-) create mode 100644 docs/linking-libraries.html create mode 100644 img/AddToBuildPhases.png create mode 100644 img/AddToLibraries.png create mode 100644 img/AddToSearchPaths.png diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 388e749a8f4..6354fafe8c5 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -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.
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.
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<{ +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.
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 +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.
React Native

Quick Start

Guides

components

apis

Polyfills

AppRegistry

AppRegistry is the JS entry point to running all React Native apps. App +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 diff --git a/docs/appstateios.html b/docs/appstateios.html index 768229268f9..1b952fa4cdd 100644 --- a/docs/appstateios.html +++ b/docs/appstateios.html @@ -1,4 +1,4 @@ -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, +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 diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index 14571cc29cf..8d944d69d4f 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/cameraroll.html b/docs/cameraroll.html index a98c172cc27..1e28aa4d11a 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/datepickerios.html b/docs/datepickerios.html index 1b31dbce978..a4d3bf00405 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/debugging.html b/docs/debugging.html index d5e3fa37132..a278959418d 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -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.

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

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

    Quick Start

    Guides

    components

    apis

    Polyfills

    Geolocation

    /!\ ATTENTION /!\ +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! diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index b4e160fb6d6..61e4f22c62a 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -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.
    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.
    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.
    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.
    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    Image

    A react component for displaying different types of images, +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 ( diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index 3cb9c2404fb..c217e847a82 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -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 +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... diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index 102a6b272c5..63d5a4258d7 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,4 +1,4 @@ -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 +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.
    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 diff --git a/docs/linkingios.html b/docs/linkingios.html index 9d950480839..99f3280b969 100644 --- a/docs/linkingios.html +++ b/docs/linkingios.html @@ -1,4 +1,4 @@ -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 +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.
    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    ListView

    ListView - A core component designed for efficient display of vertically +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 diff --git a/docs/mapview.html b/docs/mapview.html index b60f5eafb5a..63a077e514b 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -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. +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 diff --git a/docs/nativemodulesios.html b/docs/nativemodulesios.html index b9581f26190..31b254999a1 100644 --- a/docs/nativemodulesios.html +++ b/docs/nativemodulesios.html @@ -1,4 +1,4 @@ -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 +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> @@ -59,7 +59,7 @@ CalendarManager.); ... // Don't forget to unsubscribe -subscription.remove();

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

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    Navigator

    Use Navigator to transition between different scenes in your app. To +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 diff --git a/docs/navigatorios.html b/docs/navigatorios.html index f7c5f8d625e..06d581326a2 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -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 +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 ( diff --git a/docs/netinfo.html b/docs/netinfo.html index 9bde36e2497..514f0b5ae49 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -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) => { +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) { diff --git a/docs/network.html b/docs/network.html index 6651fdcac33..9c823968c01 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,4 +1,4 @@ -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(); +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; diff --git a/docs/panresponder.html b/docs/panresponder.html index 0b3d1ec1f34..09be1f40830 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -1,4 +1,4 @@ -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 +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. diff --git a/docs/pickerios.html b/docs/pickerios.html index f15572ad81d..f35140f1aac 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -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.
    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    PickerIOS

    Props #

    onValueChange function #

    selectedValue any #

    Next →
    © 2015 Facebook Inc.
    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 +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 diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html index d3fe67dab88..400f82c130a 100644 --- a/docs/pushnotificationios.html +++ b/docs/pushnotificationios.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/scrollview.html b/docs/scrollview.html index 51f5b809f79..81f41e76cee 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/sliderios.html b/docs/sliderios.html index ddb35685d1d..4d16237c0aa 100644 --- a/docs/sliderios.html +++ b/docs/sliderios.html @@ -1,4 +1,4 @@ -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 +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. diff --git a/docs/statusbarios.html b/docs/statusbarios.html index 55814a3de5d..15fb3fb979a 100644 --- a/docs/statusbarios.html +++ b/docs/statusbarios.html @@ -1,4 +1,4 @@ -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 +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.
    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.

    +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: { diff --git a/docs/stylesheet.html b/docs/stylesheet.html index e706d942283..479994b5245 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -1,4 +1,4 @@ -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({ +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, diff --git a/docs/switchios.html b/docs/switchios.html index ea9a214a03f..047838be142 100644 --- a/docs/switchios.html +++ b/docs/switchios.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/tabbarios.html b/docs/tabbarios.html index 078d97e0eaa..aab359e9e06 100644 --- a/docs/tabbarios.html +++ b/docs/tabbarios.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React

    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    TabBarIOS

    Props #

    Next →
    © 2015 Facebook Inc.
    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    TabBarIOS

    Props #

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

    Quick Start

    Guides

    components

    apis

    Polyfills

    Text

    A react component for displaying text which supports nesting, +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 diff --git a/docs/textinput.html b/docs/textinput.html index ed3491c26f1..40edbd758db 100644 --- a/docs/textinput.html +++ b/docs/textinput.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/timers.html b/docs/timers.html index 0c1deffa7b9..5e79e1e5926 100644 --- a/docs/timers.html +++ b/docs/timers.html @@ -1,4 +1,4 @@ -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(() => { +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) diff --git a/docs/touchablehighlight.html b/docs/touchablehighlight.html index fd2c6e6b61a..f9c15a7b3cd 100644 --- a/docs/touchablehighlight.html +++ b/docs/touchablehighlight.html @@ -1,4 +1,4 @@ -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. +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 diff --git a/docs/touchableopacity.html b/docs/touchableopacity.html index 2d0a5a2130f..02323f072db 100644 --- a/docs/touchableopacity.html +++ b/docs/touchableopacity.html @@ -1,4 +1,4 @@ -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. +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() { diff --git a/docs/touchablewithoutfeedback.html b/docs/touchablewithoutfeedback.html index 1ddcfed20a7..663b4159f29 100644 --- a/docs/touchablewithoutfeedback.html +++ b/docs/touchablewithoutfeedback.html @@ -1,4 +1,4 @@ -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 +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.
    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 = [ +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, diff --git a/docs/vibrationios.html b/docs/vibrationios.html index 0edd9e7bd27..297ae5db8e9 100644 --- a/docs/vibrationios.html +++ b/docs/vibrationios.html @@ -1,4 +1,4 @@ -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 +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.
    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    Videos

    +React Native | A framework for building native apps using React
    React Native

    Quick Start

    Guides

    components

    apis

    Polyfills

    Videos

    diff --git a/docs/view.html b/docs/view.html index 6aecdd08db0..fdba4dfcac8 100644 --- a/docs/view.html +++ b/docs/view.html @@ -1,4 +1,4 @@ -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 +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 diff --git a/docs/webview.html b/docs/webview.html index bbfa98b4880..706da58b6f9 100644 --- a/docs/webview.html +++ b/docs/webview.html @@ -1,4 +1,4 @@ -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.
    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.