React NativeActivityIndicatorIOS
Edit on GitHubProps #
Edit on GitHubExamples #
ActivityIndicatorIOS
Edit on GitHubProps #
Edit on GitHubExamples #
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 AlertIOS
AlertIOS manages native iOS alerts, option sheets, and share dialogs
Methods #
static alert(title: string, message?: string, buttons?: Array<{
text: ?string;
onPress: ?Function;
}>) #
Edit on GitHubExamples #
'use strict';
diff --git a/docs/animation.html b/docs/animation.html
index 169f0893ec7..c1c28c3e19b 100644
--- a/docs/animation.html
+++ b/docs/animation.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React 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 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 #
AppRegistry
AppRegistry is the JS entry point to running all React Native apps. App
+
React Native | A framework for building native apps using React 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 543dc3875df..6e36593740c 100644
--- a/docs/appstateios.html
+++ b/docs/appstateios.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React AppStateIOS
AppStateIOS can tell you if the app is in the foreground or background,
+
React Native | A framework for building native apps using React 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 foregroundbackground - The app is running in the background. The user is either
in another app or on the home screeninactive - This is a transition state that currently never happens for
diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html
index 490cd28fa9b..30c3c54b686 100644
--- a/docs/asyncstorage.html
+++ b/docs/asyncstorage.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, global, key-value storage
+
React Native | A framework for building native apps using React 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 3488048576f..7e6a6fdc169 100644
--- a/docs/cameraroll.html
+++ b/docs/cameraroll.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React 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 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 d79dfe24bd3..8c1b3aee26f 100644
--- a/docs/datepickerios.html
+++ b/docs/datepickerios.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React DatePickerIOS
Use DatePickerIOS to render a date/time picker (selector) on iOS. This is
+
React Native | A framework for building native apps using React 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 916e1b851ab..55f3ec9283d 100644
--- a/docs/debugging.html
+++ b/docs/debugging.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React Debugging
Debugging React Native Apps #
To debug the javascript code of your react app do the following:
- Run your application in the iOS simulator.
- Press
Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) - Enable Pause On Caught Exceptions for a better debugging experience.
- Press
Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools. - 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:
- Run your application in the iOS simulator.
- Press
Control + Command + Z. - You will now see the
Enable/Disable Live Reload, Reload and Enable/Disable Debugging options.
Debugging
Debugging React Native Apps #
To debug the javascript code of your react app do the following:
- Run your application in the iOS simulator.
- Press
Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) - Enable Pause On Caught Exceptions for a better debugging experience.
- Press
Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools. - 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:
- Run your application in the iOS simulator.
- Press
Control + Command + Z. - You will now see the
Enable/Disable Live Reload, Reload and Enable/Disable Debugging options.
Integration with Existing App
Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.
Requirements #
Install React Native Using CocoaPods #
CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout this tutorial.
When you are ready to work with CocoaPods, add the following line to Podfile. If you don't have one, then create it under the root directory of your project.
pod 'React'
+React Native | A framework for building native apps using React Integration with Existing App
Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.
Requirements #
Install React Native Using CocoaPods #
CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout this tutorial.
When you are ready to work with CocoaPods, add the following line to Podfile. If you don't have one, then create it under the root directory of your project.
pod 'React'
pod 'React/RCTText'
# Add any subspecs you want to use in your projectRemember to install all subspecs you need. The <Text> element cannot be used without pod 'React/RCTText'.
Then install your pods:
$ pod installCreate Your React Native App #
There are two pieces you’ll need to set up:
- The root JavaScript file that will contain your actual React Native app and other components
- Wrapper Objective-C code that will load up your script and create a
RCTRootView to display and manage your React Native components
First, create a directory for your app’s React code and create a simple index.ios.js file:
$ mkdir ReactComponent
$ touch index.ios.jsCopy & paste following starter code for index.ios.js – it’s a barebones React Native app:
'use strict';
diff --git a/docs/flexbox.html b/docs/flexbox.html
index 3201fb10f82..b4e7e15883d 100644
--- a/docs/flexbox.html
+++ b/docs/flexbox.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React Flexbox
Edit on GitHubProps #
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 #
Flexbox
Edit on GitHubProps #
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 #
Geolocation
/!\ ATTENTION /!\
+
React Native | A framework for building native apps using React 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 658c03157e3..a805258f9bd 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 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 happeningView.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 fingerView.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 releaseView.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:
nativeEventchangedTouches - Array of all touch events that have changed since the last eventidentifier - The ID of the touchlocationX - The X position of the touch, relative to the elementlocationY - The Y position of the touch, relative to the elementpageX - The X position of the touch, relative to the screenpageY - The Y position of the touch, relative to the screentarget - The node id of the element receiving the touch eventtimestamp - A time identifier for the touch, useful for velocity calculationtouches - 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.
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 happeningView.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 fingerView.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 releaseView.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:
nativeEventchangedTouches - Array of all touch events that have changed since the last eventidentifier - The ID of the touchlocationX - The X position of the touch, relative to the elementlocationY - The Y position of the touch, relative to the elementpageX - The X position of the touch, relative to the screenpageY - The Y position of the touch, relative to the screentarget - The node id of the element receiving the touch eventtimestamp - A time identifier for the touch, useful for velocity calculationtouches - 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.
Getting Started
Requirements #
- OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
- New to Xcode? Download it from the Mac App Store.
- Homebrew is the recommended way to install node, watchman, and flow.
brew install node. New to node or npm?brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.brew install flow. If you want to use flow.
Quick start #
npm install -g react-native-clireact-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.
If you run into any issues getting started, see the troubleshooting page.
Getting Started
Requirements #
- OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
- New to Xcode? Download it from the Mac App Store.
- Homebrew is the recommended way to install node, watchman, and flow.
brew install node. New to node or npm?brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.brew install flow. If you want to use flow.
Quick start #
npm install -g react-native-clireact-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.
If you run into any issues getting started, see the troubleshooting page.
Image
A react component for displaying different types of images,
+
React Native | A framework for building native apps using React 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 23ce316c7e9..28de1e1139d 100644
--- a/docs/interactionmanager.html
+++ b/docs/interactionmanager.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React InteractionManager
InteractionManager allows long-running work to be scheduled after any
+
React Native | A framework for building native apps using React 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 9410017d7b8..08f171ffc8d 100644
--- a/docs/layoutanimation.html
+++ b/docs/layoutanimation.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React 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 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 #
Linking Libraries
Not every app uses all the native capabilities, and including the code to support
+
React Native | A framework for building native apps using React Linking Libraries
Not every app uses all the native capabilities, and including the code to support
all those features would impact the binary size... But we still want to make it
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 simple 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
diff --git a/docs/linkingios.html b/docs/linkingios.html
index b75f0f3b20b..fa6fe730bf5 100644
--- a/docs/linkingios.html
+++ b/docs/linkingios.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React LinkingIOS
LinkingIOS gives you a general interface to interact with both, incoming
+
React Native | A framework for building native apps using React LinkingIOS
LinkingIOS gives you a general interface to interact with both, incoming
and outgoing app links.
Basic Usage #
Handling deep links #
If your app was launched from a external url registered to your app you can
access and handle it from any component you want with
componentDidMount() {
var url = LinkingIOS.popInitialURL();
diff --git a/docs/listview.html b/docs/listview.html
index 8a55bcf10ad..1ac1348d72a 100644
--- a/docs/listview.html
+++ b/docs/listview.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React ListView
ListView - A core component designed for efficient display of vertically
+
React Native | A framework for building native apps using React 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 9fd74fe110b..89ca1a98aef 100644
--- a/docs/mapview.html
+++ b/docs/mapview.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React MapView
Edit on GitHubProps #
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 MapView
Edit on GitHubProps #
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 ef073bb1715..29822f846ff 100644
--- a/docs/nativemodulesios.html
+++ b/docs/nativemodulesios.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React 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 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"
#import "RCTLog.h"
diff --git a/docs/navigator.html b/docs/navigator.html
index 64636a7232b..ac4cd20dbd7 100644
--- a/docs/navigator.html
+++ b/docs/navigator.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React Navigator
Use Navigator to transition between different scenes in your app. To
+
React Native | A framework for building native apps using React 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 6118df89da3..2e59a2b6642 100644
--- a/docs/navigatorios.html
+++ b/docs/navigatorios.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React NavigatorIOS
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe
+
React Native | A framework for building native apps using React 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 1575fe83775..cd398e1f250 100644
--- a/docs/netinfo.html
+++ b/docs/netinfo.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React NetInfo
NetInfo exposes info about online/offline status
reachabilityIOS #
Asyncronously determine if the device is online and on a cellular network.
none - device is offlinewifi - device is online and connected via wifi, or is the iOS simulatorcell - device is connected via Edge, 3G, WiMax, or LTEunknown - error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => {
+React Native | A framework for building native apps using React NetInfo
NetInfo exposes info about online/offline status
reachabilityIOS #
Asyncronously determine if the device is online and on a cellular network.
none - device is offlinewifi - device is online and connected via wifi, or is the iOS simulatorcell - device is connected via Edge, 3G, WiMax, or LTEunknown - 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 c40fbdfabc1..99113e9ffff 100644
--- a/docs/network.html
+++ b/docs/network.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React Network
One of React Native's goals 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 Network
One of React Native's goals 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 ba450b9f480..89c0c34bb31 100644
--- a/docs/panresponder.html
+++ b/docs/panresponder.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React PanResponder
PanResponder reconciles several touches into a single gesture. It makes
+
React Native | A framework for building native apps using React 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 4db7bd0b01c..4af19217778 100644
--- a/docs/pickerios.html
+++ b/docs/pickerios.html
@@ -1,4 +1,4 @@
-
React Native | A framework for building native apps using React PickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict';
+React Native | A framework for building native apps using React PickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict';
var React = require('react-native');
var {
diff --git a/docs/pixelratio.html b/docs/pixelratio.html
index 14930d0d63c..d5116ca7d55 100644
--- a/docs/pixelratio.html
+++ b/docs/pixelratio.html
@@ -1,4 +1,4 @@
-React Native | A framework for building native apps using React
AlertIOS
AlertIOS manages native iOS alerts, option sheets, and share dialogs
Methods #
static alert(title: string, message?: string, buttons?: Array<{ text: ?string; onPress: ?Function; }>) #
Edit on GitHubExamples #
Animation
All rights reserved.
This source code is licensed under the BSD-style license found in the +
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 #
AppRegistry
AppRegistry is the JS entry point to running all React Native apps. App
+
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 543dc3875df..6e36593740c 100644
--- a/docs/appstateios.html
+++ b/docs/appstateios.html
@@ -1,4 +1,4 @@
-
AppStateIOS
AppStateIOS can tell you if the app is in the foreground or background,
+
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 foregroundbackground- The app is running in the background. The user is either in another app or on the home screeninactive- This is a transition state that currently never happens for diff --git a/docs/asyncstorage.html b/docs/asyncstorage.html index 490cd28fa9b..30c3c54b686 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, global, key-value storage +
React Native | A framework for building native apps using React 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 3488048576f..7e6a6fdc169 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React 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 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
tagto 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 d79dfe24bd3..8c1b3aee26f 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React DatePickerIOS
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is +React Native | A framework for building native apps using React DatePickerIOS
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to theonDateChangecallback and update thedateprop in order for the component to update, otherwise the user's change will be reverted immediately to reflectprops.dateas the diff --git a/docs/debugging.html b/docs/debugging.html index 916e1b851ab..55f3ec9283d 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Debugging
Debugging React Native Apps #
To debug the javascript code of your react app do the following:
- Run your application in the iOS simulator.
- Press
Command + Dand a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) - Enable Pause On Caught Exceptions for a better debugging experience.
- Press
Command + Option + Ito open the Chrome Developer tools, or open it viaView->Developer->Developer Tools. - 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
Reacttab when the developer tools are open.Live Reload #
To activate Live Reload do the following:
- Run your application in the iOS simulator.
- Press
Control + Command + Z. - You will now see the
Enable/Disable Live Reload,ReloadandEnable/Disable Debuggingoptions.
Debugging
Debugging React Native Apps #
To debug the javascript code of your react app do the following:
- Run your application in the iOS simulator.
- Press
Command + Dand a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) - Enable Pause On Caught Exceptions for a better debugging experience.
- Press
Command + Option + Ito open the Chrome Developer tools, or open it viaView->Developer->Developer Tools. - 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
Reacttab when the developer tools are open.Live Reload #
To activate Live Reload do the following:
- Run your application in the iOS simulator.
- Press
Control + Command + Z. - You will now see the
Enable/Disable Live Reload,ReloadandEnable/Disable Debuggingoptions.
Integration with Existing App
Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the
VinMVC– it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.Requirements #
Install React Native Using CocoaPods #
CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout this tutorial.
When you are ready to work with CocoaPods, add the following line to
Podfile. If you don't have one, then create it under the root directory of your project.pod 'React' +React Native | A framework for building native apps using React Integration with Existing App
Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the
VinMVC– it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.Requirements #
Install React Native Using CocoaPods #
CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout this tutorial.
When you are ready to work with CocoaPods, add the following line to
Podfile. If you don't have one, then create it under the root directory of your project.pod 'React' pod 'React/RCTText' # Add any subspecs you want to use in your projectRemember to install all subspecs you need. The
<Text>element cannot be used withoutpod 'React/RCTText'.Then install your pods:
$ pod installCreate Your React Native App #
There are two pieces you’ll need to set up:
- The root JavaScript file that will contain your actual React Native app and other components
- Wrapper Objective-C code that will load up your script and create a
RCTRootViewto display and manage your React Native components
First, create a directory for your app’s React code and create a simple
index.ios.jsfile:$ mkdir ReactComponent $ touch index.ios.jsCopy & paste following starter code for
index.ios.js– it’s a barebones React Native app:'use strict'; diff --git a/docs/flexbox.html b/docs/flexbox.html index 3201fb10f82..b4e7e15883d 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Flexbox
Edit on GitHubProps #
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 #
Flexbox
Edit on GitHubProps #
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 #
Geolocation
/!\ ATTENTION /!\ +
React Native | A framework for building native apps using React 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 658c03157e3..a805258f9bd 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 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
Touchableimplementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. UseTouchableHighlightanywhere 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 happeningView.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 fingerView.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 releaseView.props.onResponderTerminate: (evt) => {}- The responder has been taken from the View. Might be taken by other views after a call toonResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)
evtis a synthetic touch event with the following form:nativeEventchangedTouches- Array of all touch events that have changed since the last eventidentifier- The ID of the touchlocationX- The X position of the touch, relative to the elementlocationY- The Y position of the touch, relative to the elementpageX- The X position of the touch, relative to the screenpageY- The Y position of the touch, relative to the screentarget- The node id of the element receiving the touch eventtimestamp- A time identifier for the touch, useful for velocity calculationtouches- Array of all current touches on the screen
Capture ShouldSet Handlers #
onStartShouldSetResponderandonMoveShouldSetResponderare 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*ShouldSetResponderhandlers. 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 aonStartShouldSetResponderCapturehandler which returns true.View.props.onStartShouldSetResponderCapture: (evt) => true,View.props.onMoveShouldSetResponderCapture: (evt) => true,
PanResponder #
For higher-level gesture interpretation, check out PanResponder.
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
Touchableimplementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. UseTouchableHighlightanywhere 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 happeningView.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 fingerView.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 releaseView.props.onResponderTerminate: (evt) => {}- The responder has been taken from the View. Might be taken by other views after a call toonResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)
evtis a synthetic touch event with the following form:nativeEventchangedTouches- Array of all touch events that have changed since the last eventidentifier- The ID of the touchlocationX- The X position of the touch, relative to the elementlocationY- The Y position of the touch, relative to the elementpageX- The X position of the touch, relative to the screenpageY- The Y position of the touch, relative to the screentarget- The node id of the element receiving the touch eventtimestamp- A time identifier for the touch, useful for velocity calculationtouches- Array of all current touches on the screen
Capture ShouldSet Handlers #
onStartShouldSetResponderandonMoveShouldSetResponderare 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*ShouldSetResponderhandlers. 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 aonStartShouldSetResponderCapturehandler which returns true.View.props.onStartShouldSetResponderCapture: (evt) => true,View.props.onMoveShouldSetResponderCapture: (evt) => true,
PanResponder #
For higher-level gesture interpretation, check out PanResponder.
Getting Started
Requirements #
- OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
- New to Xcode? Download it from the Mac App Store.
- Homebrew is the recommended way to install node, watchman, and flow.
brew install node. New to node or npm?brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.brew install flow. If you want to use flow.
Quick start #
npm install -g react-native-clireact-native init AwesomeProject
In the newly created folder
AwesomeProject/- Open
AwesomeProject.xcodeprojand hit run in Xcode - Open
index.ios.jsin 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.
If you run into any issues getting started, see the troubleshooting page.
Getting Started
Requirements #
- OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
- New to Xcode? Download it from the Mac App Store.
- Homebrew is the recommended way to install node, watchman, and flow.
brew install node. New to node or npm?brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.brew install flow. If you want to use flow.
Quick start #
npm install -g react-native-clireact-native init AwesomeProject
In the newly created folder
AwesomeProject/- Open
AwesomeProject.xcodeprojand hit run in Xcode - Open
index.ios.jsin 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.
If you run into any issues getting started, see the troubleshooting page.
Image
A react component for displaying different types of images, +
React Native | A framework for building native apps using React 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 23ce316c7e9..28de1e1139d 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React InteractionManager
InteractionManager allows long-running work to be scheduled after any +
React Native | A framework for building native apps using React 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 9410017d7b8..08f171ffc8d 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React 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 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 #
Linking Libraries
Not every app uses all the native capabilities, and including the code to support +
React Native | A framework for building native apps using React Linking Libraries
Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it 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 simple 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
Librariesfolder in diff --git a/docs/linkingios.html b/docs/linkingios.html index b75f0f3b20b..fa6fe730bf5 100644 --- a/docs/linkingios.html +++ b/docs/linkingios.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React LinkingIOS
LinkingIOSgives you a general interface to interact with both, incoming +React Native | A framework for building native apps using React LinkingIOS
LinkingIOSgives you a general interface to interact with both, incoming and outgoing app links.Basic Usage #
Handling deep links #
If your app was launched from a external url registered to your app you can access and handle it from any component you want with
componentDidMount() { var url = LinkingIOS.popInitialURL(); diff --git a/docs/listview.html b/docs/listview.html index 8a55bcf10ad..1ac1348d72a 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React ListView
ListView - A core component designed for efficient display of vertically +
React Native | A framework for building native apps using React 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 aListViewcomponent with that data source and arenderRowdiff --git a/docs/mapview.html b/docs/mapview.html index 9fd74fe110b..89ca1a98aef 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React MapView
Edit on GitHubProps #
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 MapView
Edit on GitHubProps #
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.jsfor 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
trueand 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 tofalse, the camera’s pitch diff --git a/docs/nativemodulesios.html b/docs/nativemodulesios.html index ef073bb1715..29822f846ff 100644 --- a/docs/nativemodulesios.html +++ b/docs/nativemodulesios.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React 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
RCTBridgeModuleprotocol. If you are wondering, RCT is a shorthand for ReaCT.// CalendarManager.h +React Native | A framework for building native apps using React 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
RCTBridgeModuleprotocol. If you are wondering, RCT is a shorthand for ReaCT.// CalendarManager.h #import "RCTBridgeModule.h" #import "RCTLog.h" diff --git a/docs/navigator.html b/docs/navigator.html index 64636a7232b..ac4cd20dbd7 100644 --- a/docs/navigator.html +++ b/docs/navigator.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Navigator
Use
Navigatorto transition between different scenes in your app. To +React Native | A framework for building native apps using React Navigator
Use
Navigatorto transition between different scenes in your app. To accomplish this, provide route objects to the navigator to identify each scene, and also arenderScenefunction 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 6118df89da3..2e59a2b6642 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React NavigatorIOS
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +
React Native | A framework for building native apps using React 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 1575fe83775..cd398e1f250 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React NetInfo
NetInfo exposes info about online/offline status
reachabilityIOS #
Asyncronously determine if the device is online and on a cellular network.
none- device is offlinewifi- device is online and connected via wifi, or is the iOS simulatorcell- device is connected via Edge, 3G, WiMax, or LTEunknown- error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => { +React Native | A framework for building native apps using React NetInfo
NetInfo exposes info about online/offline status
reachabilityIOS #
Asyncronously determine if the device is online and on a cellular network.
none- device is offlinewifi- device is online and connected via wifi, or is the iOS simulatorcell- device is connected via Edge, 3G, WiMax, or LTEunknown- 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 c40fbdfabc1..99113e9ffff 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Network
One of React Native's goals 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 Network
One of React Native's goals 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 ba450b9f480..89c0c34bb31 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React PanResponder
PanResponderreconciles several touches into a single gesture. It makes +React Native | A framework for building native apps using React PanResponder
PanResponderreconciles 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 4db7bd0b01c..4af19217778 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React PickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict'; +React Native | A framework for building native apps using React PickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict'; var React = require('react-native'); var { diff --git a/docs/pixelratio.html b/docs/pixelratio.html index 14930d0d63c..d5116ca7d55 100644 --- a/docs/pixelratio.html +++ b/docs/pixelratio.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React