React NativeNative iOS Components
With React Native, you can use the standard platform components such as UITabBar and UINavigationController on iOS. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and NavigatorIOS.
Native iOS Components
With React Native, you can use the standard platform components such as UITabBar and UINavigationController on iOS. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and NavigatorIOS.
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 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 01bfde6d185..318d8a3d1b1 100644
--- a/docs/appstateios.html
+++ b/docs/appstateios.html
@@ -1,4 +1,4 @@
-
React Native | Build 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 ca247ac63e8..d7088d196a7 100644
--- a/docs/asyncstorage.html
+++ b/docs/asyncstorage.html
@@ -1,4 +1,4 @@
-React Native | Build 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 c737e2857b2..6f0b9f5f065 100644
--- a/docs/cameraroll.html
+++ b/docs/cameraroll.html
@@ -1,4 +1,4 @@
-
React Native | Build 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 ac8f556f0a4..dac68d4eae5 100644
--- a/docs/datepickerios.html
+++ b/docs/datepickerios.html
@@ -1,4 +1,4 @@
-
React Native | Build 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/flexbox.html b/docs/flexbox.html
index 7bcffcdd288..1ad3122493c 100644
--- a/docs/flexbox.html
+++ b/docs/flexbox.html
@@ -1,4 +1,4 @@
-
React Native | Build Native Apps Using React Flexbox
Props #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
borderBottomWidth number #
borderLeftWidth number #
borderRightWidth number #
borderTopWidth number #
borderWidth number #
bottom number #
flex number #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
height number #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
left number #
margin number #
marginBottom number #
marginHorizontal number #
marginLeft number #
marginRight number #
marginTop number #
marginVertical number #
padding number #
paddingBottom number #
paddingHorizontal number #
paddingLeft number #
paddingRight number #
paddingTop number #
paddingVertical number #
position enum('absolute', 'relative') #
right number #
top number #
width number #
Flexbox
Props #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
borderBottomWidth number #
borderLeftWidth number #
borderRightWidth number #
borderTopWidth number #
borderWidth number #
bottom number #
flex number #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
height number #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
left number #
margin number #
marginBottom number #
marginHorizontal number #
marginLeft number #
marginRight number #
marginTop number #
marginVertical number #
padding number #
paddingBottom number #
paddingHorizontal number #
paddingLeft number #
paddingRight number #
paddingTop number #
paddingVertical number #
position enum('absolute', 'relative') #
right number #
top number #
width number #
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 8772749f07a..7e9adef6a87 100644
--- a/docs/gesture-responder-system.html
+++ b/docs/gesture-responder-system.html
@@ -1,4 +1,4 @@
-
React Native | Build 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.
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.
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 1764210fd9f..6325a3ef641 100644
--- a/docs/interactionmanager.html
+++ b/docs/interactionmanager.html
@@ -1,4 +1,4 @@
-React Native | Build 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 c0027ebb856..7c2535cf7ee 100644
--- a/docs/layoutanimation.html
+++ b/docs/layoutanimation.html
@@ -1,4 +1,4 @@
-React Native | Build 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 #
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 5f4585d045f..a67108ed81c 100644
--- a/docs/mapview.html
+++ b/docs/mapview.html
@@ -1,4 +1,4 @@
-
React Native | Build Native Apps Using React MapView
Props #
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map.
+
React Native | A framework for building native apps using React MapView
Props #
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map.
See EdgeInsetsPropType.js for more information.
maxDelta number #
Maximum size of area that can be displayed.
minDelta number #
Minimum size of area that can be displayed.
onRegionChange function #
Callback that is called continuously when the user is dragging the map.
onRegionChangeComplete function #
Callback that is called once, when the user is done moving the map.
pitchEnabled bool #
When this property is set to true and a valid camera is associated
with the map, the camera’s pitch angle is used to tilt the plane
of the map. When this property is set to false, the camera’s pitch
@@ -14,7 +14,7 @@ Default value is false.
NOTE: You need to ad
Info.plist to enable geolocation, otherwise it is going
to fail silently!
style View#style #
Used to style and layout the MapView. See StyleSheet.js and
ViewStylePropTypes.js for more info.
zoomEnabled bool #
If false the user won't be able to pinch/zoom the map.
-Default value is true.
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"
@interface CalendarManager : NSObject <RCTBridgeModule>
diff --git a/docs/navigator.html b/docs/navigator.html
new file mode 100644
index 00000000000..cc3f19bb3b6
--- /dev/null
+++ b/docs/navigator.html
@@ -0,0 +1,62 @@
+React Native | A framework for building native apps using React Navigator
Use ReactNavigator to transition between different scenes in your app. To
+accomplish this, provide route objects to the navigator to identify each
+scene, and also a renderScene function that the navigator can use to
+render the scene for a given route.
To change the animation or gesture properties of the scene, provide a
+configureScene prop to get the config object for a given route. See
+ReactNavigator.SceneConfigs for default animations and more info on
+scene config options.
Basic Usage #
<ReactNavigator
+ initialRoute={{name: 'My First Scene', index: 0}}
+ renderScene={(route, navigator) =>
+ <MySceneComponent
+ name={route.name}
+ onForward={() => {
+ var nextIndex = route.index + 1;
+ navigator.push({
+ name: 'Scene ' + nextIndex,
+ index: nextIndex,
+ });
+ }}
+ onBack={() => {
+ if (route.index > 0) {
+ navigator.pop();
+ }
+ }}
+ />
+ }
+ />Navigation Methods #
ReactNavigator can be told to navigate in two ways. If you have a ref to
+the element, you can invoke several methods on it to trigger navigation:
jumpBack() - Jump backward without unmounting the current scenejumpForward() - Jump forward to the next scene in the route stackjumpTo(route) - Transition to an existing scene without unmountingpush(route) - Navigate forward to a new scene, squashing any scenes
+ that you could jumpForward topop() - Transition back and unmount the current scenereplace(route) - Replace the current scene with a new routereplaceAtIndex(route, index) - Replace a scene as specified by an indexreplacePrevious(route) - Replace the previous sceneimmediatelyResetRouteStack(routeStack) - Reset every scene with an
+ array of routespopToRoute(route) - Pop to a particular scene, as specified by it's
+ route. All scenes after it will be unmountedpopToTop() - Pop to the first scene in the stack, unmounting every
+ other scene
Navigator Object #
The navigator object is made available to scenes through the renderScene
+function. The object has all of the navigation methods on it, as well as a
+few utilities:
parentNavigator - a refrence to the parent navigator object that was
+ passed in through props.navigatoronWillFocus - used to pass a navigation focus event up to the parent
+ navigatoronDidFocus - used to pass a navigation focus event up to the parent
+ navigator
Props #
configureScene function #
Optional function that allows configuration about scene animations and
+gestures. Will be invoked with the route and should return a scene
+configuration object
(route) => ReactNavigator.SceneConfigs.FloatFromRightinitialRoute object #
Provide a single "route" to start on. A route is an arbitrary object
+that the navigator will use to identify each scene before rendering.
+Either initialRoute or initialRouteStack is required.
initialRouteStack [object] #
Provide a set of routes to initially mount the scenes for. Required if no
+initialRoute is provided
navigationBar node #
Optionally provide a navigation bar that persists across scene
+transitions
navigator object #
Optionally provide the navigator object from a parent ReactNavigator
onDidFocus function #
Will be called with the new route of each scene after the transition is
+complete or after the initial mounting. This overrides the onDidFocus
+handler that would be found in this.props.navigator
onItemRef function #
Will be called with (ref, indexInStack) when the scene ref changes
onWillFocus function #
Will emit the target route upon mounting and before each nav transition,
+overriding the handler in this.props.navigator. This overrides the onDidFocus
+handler that would be found in this.props.navigator
renderScene function #
Required function which renders the scene for a given route. Will be
+invoked with the route, the navigator object, and a ref handler that
+will allow a ref to your scene to be provided by props.onItemRef
(route, navigator, onRef) =>
+ <MySceneComponent title={route.title} ref={onRef} />sceneStyle View#style #
Styles to apply to the container of each scene
shouldJumpOnBackstackPop bool #
Should the backstack back button "jump" back instead of pop? Set to true
+if a jump forward might happen after the android back button is pressed,
+so the scenes will remain mounted
React Native | Build 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 bd96ee32ee7..e61a946658e 100644
--- a/docs/netinfo.html
+++ b/docs/netinfo.html
@@ -1,4 +1,4 @@
-React Native | Build 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 4f1c67029d7..b08999e3627 100644
--- a/docs/network.html
+++ b/docs/network.html
@@ -1,4 +1,4 @@
-React Native | Build Native Apps Using React Network
One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.
XMLHttpRequest #
XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.
var request = new XMLHttpRequest();
+React Native | A framework for building native apps using React Network
One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.
XMLHttpRequest #
XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
diff --git a/docs/panresponder.html b/docs/panresponder.html
index 71747d0cb9f..2edb6ccbba8 100644
--- a/docs/panresponder.html
+++ b/docs/panresponder.html
@@ -1,53 +1,53 @@
-React Native | Build Native Apps Using React PanResponder
+----------------------------+ +--------------------------------+
-| ResponderTouchHistoryStore | |TouchHistoryMath |
-+----------------------------+ +----------+---------------------+
-|Global store of touchHistory| |Allocation-less math util |
-|including activeness, start | |on touch history (centroids |
-|position, prev/cur position.| |and multitouch movement etc) |
-| | | |
-+----^-----------------------+ +----^---------------------------+
- | |
- | (records relevant history |
- | of touches relevant for |
- | implementing higher level |
- | gestures) |
- | |
-+----+-----------------------+ +----|---------------------------+
-| ResponderEventPlugin | | | Your App/Component |
-+----------------------------+ +----|---------------------------+
-|Negotiates which view gets | Low level | | High level |
-|onResponderMove events. | events w/ | +-+-------+ events w/ |
-|Also records history into | touchHistory| | Pan | multitouch + |
-|ResponderTouchHistoryStore. +---------------->Responder+-----> accumulative|
-+----------------------------+ attached to | | | distance and |
- each event | +---------+ velocity. |
- | |
- | |
- +--------------------------------+
Gesture that calculates cumulative movement over time in a way that just
-"does the right thing" for multiple touches. The "right thing" is very
-nuanced. When moving two touches in opposite directions, the cumulative
-distance is zero in each dimension. When two touches move in parallel five
-pixels in the same direction, the cumulative distance is five, not ten. If
-two touches start, one moves five in a direction, then stops and the other
-touch moves fives in the same direction, the cumulative distance is ten.
This logic requires a kind of processing of time "clusters" of touch events
-so that two touch moves that essentially occur in parallel but move every
-other frame respectively, are considered part of the same movement.
Explanation of some of the non-obvious fields:
- moveX/moveY: If no move event has been observed, then
(moveX, moveY) is
-invalid. If a move event has been observed, (moveX, moveY) is the
-centroid of the most recently moved "cluster" of active touches.
-(Currently all move have the same timeStamp, but later we should add some
-threshold for what is considered to be "moving"). If a palm is
-accidentally counted as a touch, but a finger is moving greatly, the palm
-will move slightly, but we only want to count the single moving touch. - x0/y0: Centroid location (non-cumulative) at the time of becoming
-responder.
- dx/dy: Cumulative touch distance - not the same thing as sum of each touch
-distance. Accounts for touch moves that are clustered together in time,
-moving the same direction. Only valid when currently responder (otherwise,
-it only represents the drag distance below the threshold).
- vx/vy: Velocity.
Methods #
static create(config: object) #
@param {object} config Enhanced versions of all of the responder callbacks
-that accept not only the typical ResponderSyntheticEvent, but also the
+
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.
+For each handler, it provides a new gestureState object alongside the
+normal event.
A gestureState object has the following:
stateID - ID of the gestureState- persisted as long as there at least
+ one touch on screenmoveX - the latest screen coordinates of the recently-moved touchmoveY - the latest screen coordinates of the recently-moved touchx0 - the screen coordinates of the responder granty0 - the screen coordinates of the responder grantdx - accumulated distance of the gesture since the touch starteddy - accumulated distance of the gesture since the touch startedvx - current velocity of the gesturevy - current velocity of the gesturenumberActiveTouches - Number of touches currently on screeen
Basic Usage #
componentWillMount: function() {
+ this._panGesture = PanResponder.create({
+ // Ask to be the responder:
+ onStartShouldSetPanResponder: (evt, gestureState) => true,
+ onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+ onMoveShouldSetPanResponder: (evt, gestureState) => true,
+ onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+
+ onPanResponderGrant: (evt, gestureState) => {
+ // The guesture has started. Show visual feedback so the user knows
+ // what is happening!
+
+ // gestureState.{x,y}0 will be set to zero now
+ },
+ onPanResponderMove: (evt, gestureState) => {
+ // The most recent move distance is gestureState.move{X,Y}
+
+ // The accumulated gesture distance since becoming responder is
+ // gestureState.d{x,y}
+ },
+ onResponderTerminationRequest: (evt, gestureState) => true,
+ onPanResponderRelease: (evt, gestureState) => {
+ // The user has released all touches while this view is the
+ // responder. This typically means a gesture has succeeded
+ },
+ onPanResponderTerminate: (evt, gestureState) => {
+ // Another component has become the responder, so this gesture
+ // should be cancelled
+ },
+ });
+ },
+
+ render: function() {
+ return (
+ <View {...this._panResponder.panHandlers} />
+ );
+ },Working Example #
To see it in action, try the
+PanResponder example in UIExplorer
Methods #
static create(config: object) #
@param {object} config Enhanced versions of all of the responder callbacks
+that provide not only the typical ResponderSyntheticEvent, but also the
PanResponder gesture state. Simply replace the word Responder with
PanResponder in each of the typical onResponder* callbacks. For
-example, the config object would look like:
- onMoveShouldSetPanResponder: (e, gestureState) => {...}
- onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
- onStartShouldSetPanResponder: (e, gestureState) => {...}
- onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
- onPanResponderReject: (e, gestureState) => {...}
- onPanResponderGrant: (e, gestureState) => {...}
- onPanResponderStart: (e, gestureState) => {...}
- onPanResponderEnd: (e, gestureState) => {...}
- onPanResponderRelease: (e, gestureState) => {...}
- onPanResponderMove: (e, gestureState) => {...}
- onPanResponderTerminate: (e, gestureState) => {...}
onPanResponderTerminationRequest: (e, gestureState) => {...}
In general, for events that have capture equivalents, we update the
+example, the config object would look like:
onMoveShouldSetPanResponder: (e, gestureState) => {...}onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}onStartShouldSetPanResponder: (e, gestureState) => {...}onStartShouldSetPanResponderCapture: (e, gestureState) => {...}onPanResponderReject: (e, gestureState) => {...}onPanResponderGrant: (e, gestureState) => {...}onPanResponderStart: (e, gestureState) => {...}onPanResponderEnd: (e, gestureState) => {...}onPanResponderRelease: (e, gestureState) => {...}onPanResponderMove: (e, gestureState) => {...}onPanResponderTerminate: (e, gestureState) => {...}onPanResponderTerminationRequest: (e, gestureState) => {...}
In general, for events that have capture equivalents, we update the
gestureState once in the capture phase and can use it in the bubble phase
-as well.
Be careful with onStartShould* callbacks. They only reflect updated
+as well.
Be careful with onStartShould* callbacks. They only reflect updated
gestureState for start/end events that bubble/capture to the Node.
Once the node is the responder, you can rely on every start/end event
being processed by the gesture and gestureState being updated
diff --git a/docs/pickerios.html b/docs/pickerios.html
index 2bc33e7f0b2..526639eb503 100644
--- a/docs/pickerios.html
+++ b/docs/pickerios.html
@@ -1,4 +1,4 @@
-
React Native | Build Native Apps Using React PixelRatio
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
Displaying a line that's as thin as the device permits #
A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's
+
React Native | A framework for building native apps using React PixelRatio
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
Displaying a line that's as thin as the device permits #
A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's
thinner using a width of 1 / PixelRatio.get(). It's a technique that works
on all the devices independent of their pixel density.
style={{ borderWidth: 1 / PixelRatio.get() }}Fetching a correctly sized image #
You should get a higher resolution image if you are on a high pixel density
device. A good rule of thumb is to multiply the size of the image you display
diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html
index 02f1f12d74c..ec80743475d 100644
--- a/docs/pushnotificationios.html
+++ b/docs/pushnotificationios.html
@@ -1,4 +1,4 @@
-
React Native | Build Native Apps Using React PushNotificationIOS
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 PushNotificationIOS
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 setApplicationIconBadgeNumber(number) #
static getApplicationIconBadgeNumber(callback) #
static addEventListener(type, handler) #
static requestPermissions() #
static checkPermissions(callback) #
static removeEventListener(type, handler) #
static popInitialNotification() #
constructor(nativeNotif) #
getMessage() #
getSound() #
getAlert() #
getBadgeCount() #
getData() #
ReactNavigator
Props #
configureScene function #
initialRoute object #
initialRouteStack [object] #
navigationBar node #
navigator object #
onDidFocus function #
onItemRef function #
onWillFocus function #
renderScene function #
sceneStyle #
shouldJumpOnBackstackPop bool #
Should the backstack back button "jump" back instead of pop? Set to true
-if a jump forward might happen after the android back button is pressed,
-so the scenes will remain mounted
React Native | Build Native Apps Using React ScrollView
Component that wraps platform ScrollView while providing
+
React Native | A framework for building native apps using React ScrollView
Component that wraps platform ScrollView while providing
integration with touch locking "responder" system.
Doesn't yet support other contained responders from blocking this scroll
view from becoming the responder.
Props #
alwaysBounceHorizontal bool #
When true, the scroll view bounces horizontally when it reaches the end
even if the content is smaller than the scroll view itself. The default
@@ -39,7 +39,7 @@ The default value is true.
style style #
backgroundColor string
borderBottomColor string
borderColor string
borderLeftColor string
borderRadius number
borderRightColor string
borderTopColor string
opacity number
overflow enum('visible', 'hidden')
rotation number
scaleX number
scaleY number
shadowColor string
shadowOffset {h: number, w: number}
shadowOpacity number
shadowRadius number
transformMatrix [number]
translateX number
translateY number
throttleScrollCallbackMS number #
zoomScale number #
The current scale of the scroll view content. The default value is 1.0.
SliderIOS
Props #
onSlidingComplete function #
Callback called when the user finishes changing the value (e.g. when
+
React Native | A framework for building native apps using React SliderIOS
Props #
maximumValue number #
Initial maximum value of the slider. Default value is 1.
minimumValue number #
Initial minimum value of the slider. Default value is 0.
onSlidingComplete function #
Callback called when the user finishes changing the value (e.g. when
the slider is released).
onValueChange function #
Callback continuously called while the user is dragging the slider.
style View#style #
Used to style and layout the Slider. See StyleSheet.js and
-ViewStylePropTypes.js for more info.
value number #
Initial value of the slider. The value should be between 0 and 1.
+ViewStylePropTypes.js for more info.
value number #
Initial value of the slider. The value should be between minimumValue
+and maximumValue, which default to 0 and 1 respectively.
Default value is 0.
This is not a controlled component, e.g. if you don't update
-the value, the component won't be reseted to it's inital value.
StatusBarIOS
All rights reserved.
This source code is licensed under the BSD-style license found in the
+
React Native | A framework for building native apps using React StatusBarIOS
All rights reserved.
This source code is licensed under the BSD-style license found in the
LICENSE file in the root directory of this source tree. An additional grant
of patent rights can be found in the PATENTS file in the same directory.
@flow
Methods #
Style
React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.
+React Native | A framework for building native apps using React Style
React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.
Declare Styles #
The way to declare styles in React Native is the following:
var styles = StyleSheet.create({
base: {
diff --git a/docs/stylesheet.html b/docs/stylesheet.html
index 52506d2296a..268f7b67687 100644
--- a/docs/stylesheet.html
+++ b/docs/stylesheet.html
@@ -1,4 +1,4 @@
-React Native | Build Native Apps Using React StyleSheet
A StyleSheet is an abstraction similar to CSS StyleSheets
Create a new StyleSheet:
var styles = StyleSheet.create({
+React Native | A framework for building native apps using React StyleSheet
A StyleSheet is an abstraction similar to CSS StyleSheets
Create a new StyleSheet:
var styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
diff --git a/docs/switchios.html b/docs/switchios.html
index 98f64dd81f5..dd86aba7aec 100644
--- a/docs/switchios.html
+++ b/docs/switchios.html
@@ -1,4 +1,4 @@
-React Native | Build Native Apps Using React
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 01bfde6d185..318d8a3d1b1 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 ca247ac63e8..d7088d196a7 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -React Native | Build 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 c737e2857b2..6f0b9f5f065 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -
React Native | Build 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 ac8f556f0a4..dac68d4eae5 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -
React Native | Build 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/flexbox.html b/docs/flexbox.html index 7bcffcdd288..1ad3122493c 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React Flexbox
Props #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
borderBottomWidth number #
borderLeftWidth number #
borderRightWidth number #
borderTopWidth number #
borderWidth number #
bottom number #
flex number #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
height number #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
left number #
margin number #
marginBottom number #
marginHorizontal number #
marginLeft number #
marginRight number #
marginTop number #
marginVertical number #
padding number #
paddingBottom number #
paddingHorizontal number #
paddingLeft number #
paddingRight number #
paddingTop number #
paddingVertical number #
position enum('absolute', 'relative') #
right number #
top number #
width number #
Flexbox
Props #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
borderBottomWidth number #
borderLeftWidth number #
borderRightWidth number #
borderTopWidth number #
borderWidth number #
bottom number #
flex number #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
height number #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
left number #
margin number #
marginBottom number #
marginHorizontal number #
marginLeft number #
marginRight number #
marginTop number #
marginVertical number #
padding number #
paddingBottom number #
paddingHorizontal number #
paddingLeft number #
paddingRight number #
paddingTop number #
paddingVertical number #
position enum('absolute', 'relative') #
right number #
top number #
width number #
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 8772749f07a..7e9adef6a87 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -
React Native | Build 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.
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.
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 1764210fd9f..6325a3ef641 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -React Native | Build 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 c0027ebb856..7c2535cf7ee 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,4 +1,4 @@ -React Native | Build 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 #
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 5f4585d045f..a67108ed81c 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React MapView
Props #
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map. +
React Native | A framework for building native apps using React MapView
Props #
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map. See
EdgeInsetsPropType.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 @@ -14,7 +14,7 @@ Default value isfalse.NOTE: You need to ad Info.plist to enable geolocation, otherwise it is going to fail silently!
style View#style #
Used to style and layout the
MapView. SeeStyleSheet.jsandViewStylePropTypes.jsfor more info.zoomEnabled bool #
If
falsethe user won't be able to pinch/zoom the map. -Defaultvalueis true.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" @interface CalendarManager : NSObject <RCTBridgeModule> diff --git a/docs/navigator.html b/docs/navigator.html new file mode 100644 index 00000000000..cc3f19bb3b6 --- /dev/null +++ b/docs/navigator.html @@ -0,0 +1,62 @@ +React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 020d87fa6d4..591d21aab9c 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -Navigator
Use
ReactNavigatorto 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 +
configureSceneprop to get the config object for a given route. See +ReactNavigator.SceneConfigsfor default animations and more info on +scene config options.Basic Usage #
<ReactNavigator + initialRoute={{name: 'My First Scene', index: 0}} + renderScene={(route, navigator) => + <MySceneComponent + name={route.name} + onForward={() => { + var nextIndex = route.index + 1; + navigator.push({ + name: 'Scene ' + nextIndex, + index: nextIndex, + }); + }} + onBack={() => { + if (route.index > 0) { + navigator.pop(); + } + }} + /> + } + />Navigation Methods #
ReactNavigatorcan be told to navigate in two ways. If you have a ref to +the element, you can invoke several methods on it to trigger navigation:jumpBack()- Jump backward without unmounting the current scenejumpForward()- Jump forward to the next scene in the route stackjumpTo(route)- Transition to an existing scene without unmountingpush(route)- Navigate forward to a new scene, squashing any scenes + that you couldjumpForwardtopop()- Transition back and unmount the current scenereplace(route)- Replace the current scene with a new routereplaceAtIndex(route, index)- Replace a scene as specified by an indexreplacePrevious(route)- Replace the previous sceneimmediatelyResetRouteStack(routeStack)- Reset every scene with an + array of routespopToRoute(route)- Pop to a particular scene, as specified by it's + route. All scenes after it will be unmountedpopToTop()- Pop to the first scene in the stack, unmounting every + other scene
Navigator Object #
The navigator object is made available to scenes through the
renderScene+function. The object has all of the navigation methods on it, as well as a +few utilities:parentNavigator- a refrence to the parent navigator object that was + passed in through props.navigatoronWillFocus- used to pass a navigation focus event up to the parent + navigatoronDidFocus- used to pass a navigation focus event up to the parent + navigator
Props #
configureScene function #
Optional function that allows configuration about scene animations and +gestures. Will be invoked with the route and should return a scene +configuration object
(route) => ReactNavigator.SceneConfigs.FloatFromRightinitialRoute object #
Provide a single "route" to start on. A route is an arbitrary object +that the navigator will use to identify each scene before rendering. +Either initialRoute or initialRouteStack is required.
initialRouteStack [object] #
Provide a set of routes to initially mount the scenes for. Required if no +initialRoute is provided
navigationBar node #
Optionally provide a navigation bar that persists across scene +transitions
navigator object #
Optionally provide the navigator object from a parent ReactNavigator
onDidFocus function #
Will be called with the new route of each scene after the transition is +complete or after the initial mounting. This overrides the onDidFocus +handler that would be found in this.props.navigator
onItemRef function #
Will be called with (ref, indexInStack) when the scene ref changes
onWillFocus function #
Will emit the target route upon mounting and before each nav transition, +overriding the handler in this.props.navigator. This overrides the onDidFocus +handler that would be found in this.props.navigator
renderScene function #
Required function which renders the scene for a given route. Will be +invoked with the route, the navigator object, and a ref handler that +will allow a ref to your scene to be provided by props.onItemRef
(route, navigator, onRef) => + <MySceneComponent title={route.title} ref={onRef} />sceneStyle View#style #
Styles to apply to the container of each scene
shouldJumpOnBackstackPop bool #
Should the backstack back button "jump" back instead of pop? Set to true +if a jump forward might happen after the android back button is pressed, +so the scenes will remain mounted
React Native | Build 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 bd96ee32ee7..e61a946658e 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -React Native | Build 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 4f1c67029d7..b08999e3627 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React Network
One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.
XMLHttpRequest #
XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.
var request = new XMLHttpRequest(); +React Native | A framework for building native apps using React Network
One of React Native goal is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.
XMLHttpRequest #
XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.
var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; diff --git a/docs/panresponder.html b/docs/panresponder.html index 71747d0cb9f..2edb6ccbba8 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -1,53 +1,53 @@ -React Native | Build Native Apps Using React PanResponder
+----------------------------+ +--------------------------------+ -| ResponderTouchHistoryStore | |TouchHistoryMath | -+----------------------------+ +----------+---------------------+ -|Global store of touchHistory| |Allocation-less math util | -|including activeness, start | |on touch history (centroids | -|position, prev/cur position.| |and multitouch movement etc) | -| | | | -+----^-----------------------+ +----^---------------------------+ - | | - | (records relevant history | - | of touches relevant for | - | implementing higher level | - | gestures) | - | | -+----+-----------------------+ +----|---------------------------+ -| ResponderEventPlugin | | | Your App/Component | -+----------------------------+ +----|---------------------------+ -|Negotiates which view gets | Low level | | High level | -|onResponderMove events. | events w/ | +-+-------+ events w/ | -|Also records history into | touchHistory| | Pan | multitouch + | -|ResponderTouchHistoryStore. +---------------->Responder+-----> accumulative| -+----------------------------+ attached to | | | distance and | - each event | +---------+ velocity. | - | | - | | - +--------------------------------+
Gesture that calculates cumulative movement over time in a way that just -"does the right thing" for multiple touches. The "right thing" is very -nuanced. When moving two touches in opposite directions, the cumulative -distance is zero in each dimension. When two touches move in parallel five -pixels in the same direction, the cumulative distance is five, not ten. If -two touches start, one moves five in a direction, then stops and the other -touch moves fives in the same direction, the cumulative distance is ten.
This logic requires a kind of processing of time "clusters" of touch events -so that two touch moves that essentially occur in parallel but move every -other frame respectively, are considered part of the same movement.
Explanation of some of the non-obvious fields:
- moveX/moveY: If no move event has been observed, then
(moveX, moveY)is -invalid. If a move event has been observed,(moveX, moveY)is the -centroid of the most recently moved "cluster" of active touches. -(Currently all move have the same timeStamp, but later we should add some -threshold for what is considered to be "moving"). If a palm is -accidentally counted as a touch, but a finger is moving greatly, the palm -will move slightly, but we only want to count the single moving touch. - x0/y0: Centroid location (non-cumulative) at the time of becoming -responder.
- dx/dy: Cumulative touch distance - not the same thing as sum of each touch -distance. Accounts for touch moves that are clustered together in time, -moving the same direction. Only valid when currently responder (otherwise, -it only represents the drag distance below the threshold).
- vx/vy: Velocity.
Methods #
static create(config: object) #
@param {object} config Enhanced versions of all of the responder callbacks -that accept not only the typical
ResponderSyntheticEvent, but also the +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. +For each handler, it provides a new
gestureStateobject alongside the +normal event.A
gestureStateobject has the following:stateID- ID of the gestureState- persisted as long as there at least + one touch on screenmoveX- the latest screen coordinates of the recently-moved touchmoveY- the latest screen coordinates of the recently-moved touchx0- the screen coordinates of the responder granty0- the screen coordinates of the responder grantdx- accumulated distance of the gesture since the touch starteddy- accumulated distance of the gesture since the touch startedvx- current velocity of the gesturevy- current velocity of the gesturenumberActiveTouches- Number of touches currently on screeen
Basic Usage #
componentWillMount: function() { + this._panGesture = PanResponder.create({ + // Ask to be the responder: + onStartShouldSetPanResponder: (evt, gestureState) => true, + onStartShouldSetPanResponderCapture: (evt, gestureState) => true, + onMoveShouldSetPanResponder: (evt, gestureState) => true, + onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, + + onPanResponderGrant: (evt, gestureState) => { + // The guesture has started. Show visual feedback so the user knows + // what is happening! + + // gestureState.{x,y}0 will be set to zero now + }, + onPanResponderMove: (evt, gestureState) => { + // The most recent move distance is gestureState.move{X,Y} + + // The accumulated gesture distance since becoming responder is + // gestureState.d{x,y} + }, + onResponderTerminationRequest: (evt, gestureState) => true, + onPanResponderRelease: (evt, gestureState) => { + // The user has released all touches while this view is the + // responder. This typically means a gesture has succeeded + }, + onPanResponderTerminate: (evt, gestureState) => { + // Another component has become the responder, so this gesture + // should be cancelled + }, + }); + }, + + render: function() { + return ( + <View {...this._panResponder.panHandlers} /> + ); + },Working Example #
To see it in action, try the +PanResponder example in UIExplorer
Methods #
static create(config: object) #
@param {object} config Enhanced versions of all of the responder callbacks +that provide not only the typical
ResponderSyntheticEvent, but also thePanRespondergesture state. Simply replace the wordResponderwithPanResponderin each of the typicalonResponder*callbacks. For -example, theconfigobject would look like:- onMoveShouldSetPanResponder: (e, gestureState) => {...}
- onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
- onStartShouldSetPanResponder: (e, gestureState) => {...}
- onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
- onPanResponderReject: (e, gestureState) => {...}
- onPanResponderGrant: (e, gestureState) => {...}
- onPanResponderStart: (e, gestureState) => {...}
- onPanResponderEnd: (e, gestureState) => {...}
- onPanResponderRelease: (e, gestureState) => {...}
- onPanResponderMove: (e, gestureState) => {...}
- onPanResponderTerminate: (e, gestureState) => {...}
onPanResponderTerminationRequest: (e, gestureState) => {...}
In general, for events that have capture equivalents, we update the +example, the
configobject would look like:onMoveShouldSetPanResponder: (e, gestureState) => {...}onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}onStartShouldSetPanResponder: (e, gestureState) => {...}onStartShouldSetPanResponderCapture: (e, gestureState) => {...}onPanResponderReject: (e, gestureState) => {...}onPanResponderGrant: (e, gestureState) => {...}onPanResponderStart: (e, gestureState) => {...}onPanResponderEnd: (e, gestureState) => {...}onPanResponderRelease: (e, gestureState) => {...}onPanResponderMove: (e, gestureState) => {...}onPanResponderTerminate: (e, gestureState) => {...}onPanResponderTerminationRequest: (e, gestureState) => {...}In general, for events that have capture equivalents, we update the gestureState once in the capture phase and can use it in the bubble phase -as well.
Be careful with onStartShould* callbacks. They only reflect updated +as well.
Be careful with onStartShould* callbacks. They only reflect updated
gestureStatefor start/end events that bubble/capture to the Node. Once the node is the responder, you can rely on every start/end event being processed by the gesture andgestureStatebeing updated diff --git a/docs/pickerios.html b/docs/pickerios.html index 2bc33e7f0b2..526639eb503 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React PixelRatio
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
Displaying a line that's as thin as the device permits #
A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's +
React Native | A framework for building native apps using React PixelRatio
PixelRatio class gives access to the device pixel density.
There are a few use cases for using PixelRatio:
Displaying a line that's as thin as the device permits #
A width of 1 is actually pretty thick on an iPhone 4+, we can do one that's thinner using a width of
1 / PixelRatio.get(). It's a technique that works on all the devices independent of their pixel density.style={{ borderWidth: 1 / PixelRatio.get() }}Fetching a correctly sized image #
You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html index 02f1f12d74c..ec80743475d 100644 --- a/docs/pushnotificationios.html +++ b/docs/pushnotificationios.html @@ -1,4 +1,4 @@ -
React Native | Build Native Apps Using React PushNotificationIOS
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 PushNotificationIOS
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 setApplicationIconBadgeNumber(number) #
static getApplicationIconBadgeNumber(callback) #
static addEventListener(type, handler) #
static requestPermissions() #
static checkPermissions(callback) #
static removeEventListener(type, handler) #
static popInitialNotification() #
constructor(nativeNotif) #
getMessage() #
getSound() #
getAlert() #
getBadgeCount() #
getData() #
\ No newline at end of file diff --git a/docs/scrollview.html b/docs/scrollview.html index 4adbcd25066..9fd4d6e1487 100644 --- a/docs/scrollview.html +++ b/docs/scrollview.html @@ -1,4 +1,4 @@ -ReactNavigator
Props #
configureScene function #
initialRoute object #
initialRouteStack [object] #
navigationBar node #
navigator object #
onDidFocus function #
onItemRef function #
onWillFocus function #
renderScene function #
sceneStyle #
shouldJumpOnBackstackPop bool #
Should the backstack back button "jump" back instead of pop? Set to true -if a jump forward might happen after the android back button is pressed, -so the scenes will remain mounted
React Native | Build Native Apps Using React ScrollView
Component that wraps platform ScrollView while providing +
React Native | A framework for building native apps using React ScrollView
Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
Props #
alwaysBounceHorizontal bool #
When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default @@ -39,7 +39,7 @@ The default value is true.
style style #
backgroundColor string
borderBottomColor string
borderColor string
borderLeftColor string
borderRadius number
borderRightColor string
borderTopColor string
opacity number
overflow enum('visible', 'hidden')
rotation number
scaleX number
scaleY number
shadowColor string
shadowOffset {h: number, w: number}
shadowOpacity number
shadowRadius number
transformMatrix [number]
translateX number
translateY number
throttleScrollCallbackMS number #
zoomScale number #
The current scale of the scroll view content. The default value is 1.0.
SliderIOS
Props #
onSlidingComplete function #
Callback called when the user finishes changing the value (e.g. when +
React Native | A framework for building native apps using React SliderIOS
Props #
maximumValue number #
Initial maximum value of the slider. Default value is 1.
minimumValue number #
Initial minimum value of the slider. Default value is 0.
onSlidingComplete function #
Callback called when the user finishes changing the value (e.g. when the slider is released).
onValueChange function #
Callback continuously called while the user is dragging the slider.
style View#style #
Used to style and layout the
Slider. SeeStyleSheet.jsand -ViewStylePropTypes.jsfor more info.value number #
Initial value of the slider. The value should be between 0 and 1. +
ViewStylePropTypes.jsfor more info.value number #
Initial value of the slider. The value should be between minimumValue +and maximumValue, which default to 0 and 1 respectively. Default value is 0.
This is not a controlled component, e.g. if you don't update -the value, the component won't be reseted to it's inital value.
StatusBarIOS
All rights reserved.
This source code is licensed under the BSD-style license found in the +
React Native | A framework for building native apps using React StatusBarIOS
All rights reserved.
This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant of patent rights can be found in the PATENTS file in the same directory.
@flow
Methods #
Style
React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.
+React Native | A framework for building native apps using React Style
React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.
Declare Styles #
The way to declare styles in React Native is the following:
var styles = StyleSheet.create({ base: { diff --git a/docs/stylesheet.html b/docs/stylesheet.html index 52506d2296a..268f7b67687 100644 --- a/docs/stylesheet.html +++ b/docs/stylesheet.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React StyleSheet
A StyleSheet is an abstraction similar to CSS StyleSheets
Create a new StyleSheet:
var styles = StyleSheet.create({ +React Native | A framework for building native apps using React StyleSheet
A StyleSheet is an abstraction similar to CSS StyleSheets
Create a new StyleSheet:
var styles = StyleSheet.create({ container: { borderRadius: 4, borderWidth: 0.5, diff --git a/docs/switchios.html b/docs/switchios.html index 98f64dd81f5..dd86aba7aec 100644 --- a/docs/switchios.html +++ b/docs/switchios.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React