AlertIOS manages native iOS alerts, option sheets, and share dialogs
All rights reserved.
This source code is licensed under the BSD-style license found in the +
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
AppRegistry is the JS entry point to running all React Native apps. App
+
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 @@
-
AppStateIOS can tell you if the app is in the foreground or background,
+
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.
React Nativeactive - 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 14571cc29cf..8d944d69d4f 100644
--- a/docs/asyncstorage.html
+++ b/docs/asyncstorage.html
@@ -1,4 +1,4 @@
-AsyncStorage is a simple, asynchronous, persistent, global, key-value storage +
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 @@ -
All rights reserved.
This source code is licensed under the BSD-style license found in the +
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
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 @@ -
Use DatePickerIOS to render a date/time picker (selector) on iOS. This is
+
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 @@
-
To debug the javascript code of your react app do the following:
Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now)Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.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.
To debug the javascript code of your react app do the following:
Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now)Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.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.
/!\ ATTENTION /!\ +
/!\ 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 @@ -
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.
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:
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
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.
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 itIf 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 screenonStartShouldSetResponder 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,For higher-level gesture interpretation, check out PanResponder.
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.
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:
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
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.
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 itIf 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 screenonStartShouldSetResponder 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,For higher-level gesture interpretation, check out PanResponder.
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.npm install -g react-native-clireact-native init AwesomeProjectIn the newly created folder AwesomeProject/
AwesomeProject.xcodeproj and hit run in Xcodeindex.ios.js in your text editor of choice and edit some linesCongratulations! You've just successfully run and modified your first React Native app.
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.npm install -g react-native-clireact-native init AwesomeProjectIn the newly created folder AwesomeProject/
AwesomeProject.xcodeproj and hit run in Xcodeindex.ios.js in your text editor of choice and edit some linesCongratulations! You've just successfully run and modified your first React Native app.
A react component for displaying different types of images, +
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:
InteractionManager allows long-running work to be scheduled after any +
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:
All rights reserved.
This source code is licensed under the BSD-style license found in the +
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
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.
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);
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
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).
All rights reserved.
This source code is licensed under the BSD-style license found in the +
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
ListView - A core component designed for efficient display of vertically +
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 @@
-
Insets for the map's legal label, originally at bottom left of the map. +
Insets for the map's legal label, originally at bottom left of the map.
See EdgeInsetsPropType.js for more information.
Maximum size of area that can be displayed.
Minimum size of area that can be displayed.
Callback that is called continuously when the user is dragging the map.
Callback that is called once, when the user is done moving the map.
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 @@
-
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).
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.
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).
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.
For more examples of sending events to JavaScript, see RCTLocationObserver.
Use Navigator to transition between different scenes in your app. To
+
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 @@ -
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app.
A route is an object used to describe each page in the navigator. The first
route is provided to NavigatorIOS as initialRoute:
NetInfo exposes info about online/offline status
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 unknownNetInfo exposes info about online/offline status
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 unknownOne 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 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.
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 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.
PanResponder reconciles several touches into a single gesture. It makes
+
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 @@ -
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's +
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
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.
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 @@ -
Handle push notifications for your app, including permission handling and +
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.
Sets the badge number for the app icon on the home screen
Gets the current badge number for the app icon on the home screen
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
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 @@ -
Component that wraps platform ScrollView while providing +
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.
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 @@ -
Initial maximum value of the slider. Default value is 1.
Initial minimum value of the slider. Default value is 0.
Callback called when the user finishes changing the value (e.g. when +
Initial maximum value of the slider. Default value is 1.
Initial minimum value of the slider. Default value is 0.
Callback called when the user finishes changing the value (e.g. when the slider is released).
Callback continuously called while the user is dragging the slider.
Used to style and layout the Slider. See StyleSheet.js and
ViewStylePropTypes.js for more info.
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 @@ -