React NativeActivityIndicatorIOS
Edit on GitHubProps #
Edit on GitHubExamples #
ActivityIndicatorIOS
Edit on GitHubProps #
Edit on GitHubExamples #
AlertIOS
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the +
AlertIOS
Launches an alert dialog with the specified title and message.
Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button
The last button in the list will be considered the 'Primary' button and it will appear bold.
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 be037712af1..ea595bb61ca 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 262603bd5e1..11280a89f54 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, global, key-value storage +
React Native | A framework for building native apps using React AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, global, key-value storage system. It should be used instead of LocalStorage.
It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.
This JS code is a simple facad over the native iOS implementation to provide diff --git a/docs/cameraroll.html b/docs/cameraroll.html index e1a0e94e421..7e5170bcf79 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React CameraRoll
All rights reserved.
This source code is licensed under the BSD-style license found in the +
React Native | A framework for building native apps using React CameraRoll
All rights reserved.
This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant of patent rights can be found in the PATENTS file in the same directory.
@flow
Methods #
static saveImageWithTag(tag: string, successCallback, errorCallback) #
Saves the image with tag
tagto the camera roll.@param {string} tag - Can be any of the three kinds of tags we accept: 1. URL diff --git a/docs/datepickerios.html b/docs/datepickerios.html index ac37d4b58ce..c532ec71f36 100644 --- a/docs/datepickerios.html +++ b/docs/datepickerios.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React DatePickerIOS
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is +React Native | A framework for building native apps using React DatePickerIOS
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to theonDateChangecallback and update thedateprop in order for the component to update, otherwise the user's change will be reverted immediately to reflectprops.dateas the diff --git a/docs/debugging.html b/docs/debugging.html index 482a564fa95..f39e5ecca3d 100644 --- a/docs/debugging.html +++ b/docs/debugging.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Debugging
Debugging React Native Apps #
To debug the javascript code of your react app do the following:
- Run your application in the iOS simulator.
- Press
Command + Dand a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) - Enable Pause On Caught Exceptions for a better debugging experience.
- Press
Command + Option + Ito open the Chrome Developer tools, or open it viaView->Developer->Developer Tools. - You should now be able to debug as you normally would.
Hint
To debug on a real device: Open the file
RCTWebSocketExecutor.mand changelocalhostto the IP address of your computer. Shake the device to open the development menu with the option to start debugging.Optional #
Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the
Reacttab when the developer tools are open.Live Reload #
To activate Live Reload do the following:
- Run your application in the iOS simulator.
- Press
Control + Command + Z. - You will now see the
Enable/Disable Live Reload,ReloadandEnable/Disable Debuggingoptions.
Debugging
Debugging React Native Apps #
To debug the javascript code of your react app do the following:
- Run your application in the iOS simulator.
- Press
Command + Dand a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) - Enable Pause On Caught Exceptions for a better debugging experience.
- Press
Command + Option + Ito open the Chrome Developer tools, or open it viaView->Developer->Developer Tools. - You should now be able to debug as you normally would.
Hint
To debug on a real device: Open the file
RCTWebSocketExecutor.mand changelocalhostto the IP address of your computer. Shake the device to open the development menu with the option to start debugging.Optional #
Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the
Reacttab when the developer tools are open.Live Reload #
To activate Live Reload do the following:
- Run your application in the iOS simulator.
- Press
Control + Command + Z. - You will now see the
Enable/Disable Live Reload,ReloadandEnable/Disable Debuggingoptions.
Integration with Existing App
Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the
VinMVC– it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.Requirements #
Install React Native Using CocoaPods #
CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout this tutorial.
When you are ready to work with CocoaPods, add the following line to
Podfile. If you don't have one, then create it under the root directory of your project.pod 'React' +React Native | A framework for building native apps using React Integration with Existing App
Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the
VinMVC– it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.Requirements #
Install React Native Using CocoaPods #
CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout this tutorial.
When you are ready to work with CocoaPods, add the following line to
Podfile. If you don't have one, then create it under the root directory of your project.pod 'React' pod 'React/RCTText' # Add any subspecs you want to use in your projectRemember to install all subspecs you need. The
<Text>element cannot be used withoutpod 'React/RCTText'.Then install your pods:
$ pod installCreate Your React Native App #
There are two pieces you’ll need to set up:
- The root JavaScript file that will contain your actual React Native app and other components
- Wrapper Objective-C code that will load up your script and create a
RCTRootViewto display and manage your React Native components
First, create a directory for your app’s React code and create a simple
index.ios.jsfile:$ mkdir ReactComponent $ touch index.ios.jsCopy & paste following starter code for
index.ios.js– it’s a barebones React Native app:'use strict'; diff --git a/docs/flexbox.html b/docs/flexbox.html index 6378e01f091..cbdfade2ba5 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Flexbox
Edit on GitHubProps #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
borderBottomWidth number #
borderLeftWidth number #
borderRightWidth number #
borderTopWidth number #
borderWidth number #
bottom number #
flex number #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
height number #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
left number #
margin number #
marginBottom number #
marginHorizontal number #
marginLeft number #
marginRight number #
marginTop number #
marginVertical number #
padding number #
paddingBottom number #
paddingHorizontal number #
paddingLeft number #
paddingRight number #
paddingTop number #
paddingVertical number #
position enum('absolute', 'relative') #
right number #
top number #
width number #
Flexbox
Edit on GitHubProps #
alignItems enum('flex-start', 'flex-end', 'center', 'stretch') #
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') #
borderBottomWidth number #
borderLeftWidth number #
borderRightWidth number #
borderTopWidth number #
borderWidth number #
bottom number #
flex number #
flexDirection enum('row', 'column') #
flexWrap enum('wrap', 'nowrap') #
height number #
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') #
left number #
margin number #
marginBottom number #
marginHorizontal number #
marginLeft number #
marginRight number #
marginTop number #
marginVertical number #
padding number #
paddingBottom number #
paddingHorizontal number #
paddingLeft number #
paddingRight number #
paddingTop number #
paddingVertical number #
position enum('absolute', 'relative') #
right number #
top number #
width number #
Geolocation
You need to include the
NSLocationWhenInUseUsageDescriptionkey +React Native | A framework for building native apps using React Geolocation
You need to include the
NSLocationWhenInUseUsageDescriptionkey in Info.plist to enable geolocation. Geolocation is enabled by default when you create a project withreact-native init.Geolocation follows the MDN specification: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation
Methods #
Edit on GitHubExamples #
/* eslint no-console: 0 */ diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index 38221937e47..9d377dddadd 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Gesture Responder System
Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.
The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in
ResponderEventPlugin.js, which contains further details and documentation.Best Practices #
Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes:
- Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
- Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
TouchableHighlight and Touchable* #
The responder system can be complicated to use. So we have provided an abstract
Touchableimplementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. UseTouchableHighlightanywhere where you would use a button or link on web.Responder Lifecycle #
A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:
View.props.onStartShouldSetResponder: (evt) => true,- Does this view want to become responder on the start of a touch?View.props.onMoveShouldSetResponder: (evt) => true,- Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?
If the View returns true and attempts to become the responder, one of the following will happen:
View.props.onResponderGrant: (evt) => {}- The View is now responding for touch events. This is the time to highlight and show the user what is happeningView.props.onResponderReject: (evt) => {}- Something else is the responder right now and will not release it
If the view is responding, the following handlers can be called:
View.props.onResponderMove: (evt) => {}- The user is moving their fingerView.props.onResponderRelease: (evt) => {}- Fired at the end of the touch, ie "touchUp"View.props.onResponderTerminationRequest: (evt) => true- Something else wants to become responder. Should this view release the responder? Returning true allows releaseView.props.onResponderTerminate: (evt) => {}- The responder has been taken from the View. Might be taken by other views after a call toonResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)
evtis a synthetic touch event with the following form:nativeEventchangedTouches- Array of all touch events that have changed since the last eventidentifier- The ID of the touchlocationX- The X position of the touch, relative to the elementlocationY- The Y position of the touch, relative to the elementpageX- The X position of the touch, relative to the screenpageY- The Y position of the touch, relative to the screentarget- The node id of the element receiving the touch eventtimestamp- A time identifier for the touch, useful for velocity calculationtouches- Array of all current touches on the screen
Capture ShouldSet Handlers #
onStartShouldSetResponderandonMoveShouldSetResponderare called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for*ShouldSetResponderhandlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing
on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have aonStartShouldSetResponderCapturehandler which returns true.View.props.onStartShouldSetResponderCapture: (evt) => true,View.props.onMoveShouldSetResponderCapture: (evt) => true,
PanResponder #
For higher-level gesture interpretation, check out PanResponder.
Gesture Responder System
Gesture recognition on mobile devices is much more complicated than web. A touch can go through several phases as the app determines what the user's intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.
The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components. This system is implemented in
ResponderEventPlugin.js, which contains further details and documentation.Best Practices #
Users can feel huge differences in the usability of web apps vs. native, and this is one of the big causes. Every action should have the following attributes:
- Feedback/highlighting- show the user what is handling their touch, and what will happen when they release the gesture
- Cancel-ability- when making an action, the user should be able to abort it mid-touch by dragging their finger away
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
TouchableHighlight and Touchable* #
The responder system can be complicated to use. So we have provided an abstract
Touchableimplementation for things that should be "tappable". This uses the responder system and allows you to easily configure tap interactions declaratively. UseTouchableHighlightanywhere where you would use a button or link on web.Responder Lifecycle #
A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:
View.props.onStartShouldSetResponder: (evt) => true,- Does this view want to become responder on the start of a touch?View.props.onMoveShouldSetResponder: (evt) => true,- Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?
If the View returns true and attempts to become the responder, one of the following will happen:
View.props.onResponderGrant: (evt) => {}- The View is now responding for touch events. This is the time to highlight and show the user what is happeningView.props.onResponderReject: (evt) => {}- Something else is the responder right now and will not release it
If the view is responding, the following handlers can be called:
View.props.onResponderMove: (evt) => {}- The user is moving their fingerView.props.onResponderRelease: (evt) => {}- Fired at the end of the touch, ie "touchUp"View.props.onResponderTerminationRequest: (evt) => true- Something else wants to become responder. Should this view release the responder? Returning true allows releaseView.props.onResponderTerminate: (evt) => {}- The responder has been taken from the View. Might be taken by other views after a call toonResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)
evtis a synthetic touch event with the following form:nativeEventchangedTouches- Array of all touch events that have changed since the last eventidentifier- The ID of the touchlocationX- The X position of the touch, relative to the elementlocationY- The Y position of the touch, relative to the elementpageX- The X position of the touch, relative to the screenpageY- The Y position of the touch, relative to the screentarget- The node id of the element receiving the touch eventtimestamp- A time identifier for the touch, useful for velocity calculationtouches- Array of all current touches on the screen
Capture ShouldSet Handlers #
onStartShouldSetResponderandonMoveShouldSetResponderare called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for*ShouldSetResponderhandlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing
on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have aonStartShouldSetResponderCapturehandler which returns true.View.props.onStartShouldSetResponderCapture: (evt) => true,View.props.onMoveShouldSetResponderCapture: (evt) => true,
PanResponder #
For higher-level gesture interpretation, check out PanResponder.
Getting Started
Requirements #
- OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
- New to Xcode? Download it from the Mac App Store.
- Homebrew is the recommended way to install node, watchman, and flow.
brew install node. New to node or npm?brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.brew install flow. If you want to use flow.
Quick start #
npm install -g react-native-clireact-native init AwesomeProject
In the newly created folder
AwesomeProject/- Open
AwesomeProject.xcodeprojand hit run in Xcode - Open
index.ios.jsin your text editor of choice and edit some lines - Hit cmd+R in your iOS simulator to reload the app and see your change!
Congratulations! You've just successfully run and modified your first React Native app.
If you run into any issues getting started, see the troubleshooting page.
Getting Started
Requirements #
- OS X - This repo only contains the iOS implementation right now, and Xcode only runs on Mac.
- New to Xcode? Download it from the Mac App Store.
- Homebrew is the recommended way to install node, watchman, and flow.
brew install node. New to node or npm?brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.brew install flow. If you want to use flow.
Quick start #
npm install -g react-native-clireact-native init AwesomeProject
In the newly created folder
AwesomeProject/- Open
AwesomeProject.xcodeprojand hit run in Xcode - Open
index.ios.jsin your text editor of choice and edit some lines - Hit cmd+R in your iOS simulator to reload the app and see your change!
Congratulations! You've just successfully run and modified your first React Native app.
If you run into any issues getting started, see the troubleshooting page.
Image
A react component for displaying different types of images, +
React Native | A framework for building native apps using React Image
A react component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
Example usage:
renderImages: function() { return ( diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index 22f6623e542..141867a12b2 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React InteractionManager
InteractionManager allows long-running work to be scheduled after any +
React Native | A framework for building native apps using React InteractionManager
InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
Applications can schedule tasks to run after interactions with the following:
InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task... diff --git a/docs/javascript-environment.html b/docs/javascript-environment.html index 5ab33044e0b..6f1376ea3cf 100644 --- a/docs/javascript-environment.html +++ b/docs/javascript-environment.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React JavaScript Environment
JavaScript Runtime #
When using React Native, you're going to be running your JavaScript code in two environments:
- In the simulator and on the phone: JavaScriptCore which is the JavaScript engine that powers Safari and web views. Due to the absence of writable executable memory in iOS apps, it doesn't run with JIT.
- When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with Objective-C via WebSocket. So you are using V8.
While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.
JavaScript Transforms #
React Native ships with many JavaScript transforms to make writing code more enjoyable. If you are curious, you can see the implementation of all those transformations. Here's the full list:
ES5
- Reserved Words:
promise.catch(function() { });
ES6
- Arrow function:
<C onPress={() => this.setState({pressed: true})} - Call spread:
Math.max(...array); - Class:
class C extends React.Component { render() { return <View />; } } - Destructuring:
var {isActive, style} = this.props; - Iteration:
for (var element of array) { } - Computed Properties:
var key = 'abc'; var obj = {[key]: 10}; - Object Consise Method:
var obj = { method() { return 10; } }; - Object Short Notation:
var name = 'vjeux'; var obj = { name }; - Rest Params:
function(type, ...args) { } - Template:
var who = 'world'; var str = `Hello ${who}`;
ES7
- Object Spread:
var extended = { ...obj, a: 10 }; - Function Trailing Comma:
function f(a, b, c,) { }
JavaScript Environment
JavaScript Runtime #
When using React Native, you're going to be running your JavaScript code in two environments:
- In the simulator and on the phone: JavaScriptCore which is the JavaScript engine that powers Safari and web views. Due to the absence of writable executable memory in iOS apps, it doesn't run with JIT.
- When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with Objective-C via WebSocket. So you are using V8.
While both environments are very similar, you may end up hitting some inconsistencies. We're likely going to experiment with other JS engines in the future, so it's best to avoid relying on specifics of any runtime.
JavaScript Transforms #
React Native ships with many JavaScript transforms to make writing code more enjoyable. If you are curious, you can see the implementation of all those transformations. Here's the full list:
ES5
- Reserved Words:
promise.catch(function() { });
ES6
- Arrow function:
<C onPress={() => this.setState({pressed: true})} - Call spread:
Math.max(...array); - Class:
class C extends React.Component { render() { return <View />; } } - Destructuring:
var {isActive, style} = this.props; - Iteration:
for (var element of array) { } - Computed Properties:
var key = 'abc'; var obj = {[key]: 10}; - Object Consise Method:
var obj = { method() { return 10; } }; - Object Short Notation:
var name = 'vjeux'; var obj = { name }; - Rest Params:
function(type, ...args) { } - Template:
var who = 'world'; var str = `Hello ${who}`;
ES7
- Object Spread:
var extended = { ...obj, a: 10 }; - Function Trailing Comma:
function f(a, b, c,) { }
LayoutAnimation
All rights reserved.
This source code is licensed under the BSD-style license found in the +
React Native | A framework for building native apps using React LayoutAnimation
All rights reserved.
This source code is licensed under the BSD-style license found in the LICENSE file in the root directory of this source tree. An additional grant of patent rights can be found in the PATENTS file in the same directory.
@flow
Methods #
Linking Libraries
Not every app uses all the native capabilities, and including the code to support +
React Native | A framework for building native apps using React Linking Libraries
Not every app uses all the native capabilities, and including the code to support all those features would impact the binary size... But we still want to make it easy to add these features whenever you need them.
With that in mind we exposed many of these features as independent static libraries.
For most of the libs it will be as simple as dragging two files, sometimes a third step will be necessary, but no more than that.
All the libraries we ship with React Native live on the
Librariesfolder in diff --git a/docs/linkingios.html b/docs/linkingios.html index fee2d790550..9b4f04ae276 100644 --- a/docs/linkingios.html +++ b/docs/linkingios.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React LinkingIOS
LinkingIOSgives you a general interface to interact with both, incoming +React Native | A framework for building native apps using React LinkingIOS
LinkingIOSgives you a general interface to interact with both, incoming and outgoing app links.Basic Usage #
Handling deep links #
If your app was launched from a external url registered to your app you can access and handle it from any component you want with
componentDidMount() { var url = LinkingIOS.popInitialURL(); diff --git a/docs/listview.html b/docs/listview.html index b35ee145c39..8b8861658ef 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React ListView
ListView - A core component designed for efficient display of vertically +
React Native | A framework for building native apps using React ListView
ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a
ListView.DataSource, populate it with a simple array of data blobs, and instantiate aListViewcomponent with that data source and arenderRowdiff --git a/docs/mapview.html b/docs/mapview.html index fb022d886eb..fb1a7f3af07 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React MapView
Edit on GitHubProps #
annotations [{latitude: number, longitude: number, title: string, subtitle: string}] #
Map annotations with title/subtitle.
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map. +
React Native | A framework for building native apps using React MapView
Edit on GitHubProps #
annotations [{latitude: number, longitude: number, title: string, subtitle: string}] #
Map annotations with title/subtitle.
legalLabelInsets {top: number, left: number, bottom: number, right: number} #
Insets for the map's legal label, originally at bottom left of the map. See
EdgeInsetsPropType.jsfor more information.maxDelta number #
Maximum size of area that can be displayed.
minDelta number #
Minimum size of area that can be displayed.
onRegionChange function #
Callback that is called continuously when the user is dragging the map.
onRegionChangeComplete function #
Callback that is called once, when the user is done moving the map.
pitchEnabled bool #
When this property is set to
trueand a valid camera is associated with the map, the camera’s pitch angle is used to tilt the plane of the map. When this property is set tofalse, the camera’s pitch diff --git a/docs/nativecomponentsios.html b/docs/nativecomponentsios.html new file mode 100644 index 00000000000..0700baed4fb --- /dev/null +++ b/docs/nativecomponentsios.html @@ -0,0 +1,241 @@ +React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/nativemodulesios.html b/docs/nativemodulesios.html index ffb03d234fa..50afd863e81 100644 --- a/docs/nativemodulesios.html +++ b/docs/nativemodulesios.html @@ -1,8 +1,8 @@ -Native UI Components (iOS)
There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like
ScrollViewandTextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing
MapViewcomponent available in the core React Native library.iOS MapView example #
Let's say we want to add an interactive Map to our app - might as well use
MKMapView, we just need to make it usable from JavaScript.Native views are created and manipulated by subclasses of
RCTViewManager. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They vend native views to theRCTUIManager, which delegates back to them to set and update the properties of the views as necessary. TheRCTViewManagers are also typically the delegates for the views, sending events back to JavaScript via the bridge.Vending a view is simple: +- Create the basic subclass. +- Add the
RCT_EXPORT_MODULE()marker macro. +- Implement the-(UIView *)viewmethod// RCTMapManager.m +#import <MapKit/MapKit.h> + +#import "RCTViewManager.h" + +@interface RCTMapManager : RCTViewManager +@end + +@implementation RCTMapManager + +RCT_EXPORT_MODULE() + +- (UIView *)view +{ + return [[MKMapView alloc] init]; +} + +@endThen you just need a little bit of JavaScript to make this a usable React component:
// MapView.js + +var { requireNativeComponent } = require('react-native'); + +module.exports = requireNativeComponent('RCTMap', null);This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(
Properties #
The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable pitch control specify the visible region. Disabling pitch is a simple boolean, so we just add this one line:
// RCTMapManager.m +RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)Note that we explicitly specify the type as
BOOL- React Native usesRCTConvertunder the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.Now to actually disable pitch, we just set the property in JS:
// MyApp.js +<MapView pitchEnabled={false} />This isn't very well documented though - in order to know what properties are available and what values they accept, the client of your new component needs to dig through the Objective-C code. To make this better, let's make a wrapper component and document the interface with React
PropTypes:// MapView.js +var React = require('react-native'); +var { requireNativeComponent } = React; + +class MapView extends React.Component { + render() { + return <RCTMap {...this.props} />; + } +} + +var RCTMap= requireNativeComponent('RCTMap', MapView); + +MapView.propTypes = { + /** + * When this property is set to `true` and a valid camera is associated + * with the map, the camera’s pitch angle is used to tilt the plane + * of the map. When this property is set to `false`, the camera’s pitch + * angle is ignored and the map is always displayed as if the user + * is looking straight down onto it. + */ + pitchEnabled = React.PropTypes.bool, +}; + +module.exports = MapView;Now we have a nicely documented wrapper component that is easy to work with. Note that we changed the second argument to
requireNativeComponentfromnullto the newMapViewwrapper component. This allows the infrastructure to verify that the propTypes match the native props to reduce the chances of mismatches between the ObjC and JS code.Next, let's add the more complex
regionprop. We start by adding the native code:// RCTMapManager.m +RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap) +{ + [view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES]; +}Ok, this is clearly more complicated than the simple
BOOLcase we had before. Now we have aMKCoordinateRegiontype that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. There is also adefaultViewthat we use to reset the property back to the default value if JS sends us a null sentinel.You could of course write any conversion function you want for your view - here is the implementation for
MKCoordinateRegionvia two categories onRCTConvert:@implementation RCTConvert(CoreLocation) + +RCT_CONVERTER(CLLocationDegrees, CLLocationDegrees, doubleValue); +RCT_CONVERTER(CLLocationDistance, CLLocationDistance, doubleValue); + ++ (CLLocationCoordinate2D)CLLocationCoordinate2D:(id)json +{ + json = [self NSDictionary:json]; + return (CLLocationCoordinate2D){ + [self CLLocationDegrees:json[@"latitude"]], + [self CLLocationDegrees:json[@"longitude"]] + }; +} + +@end + +@implementation RCTConvert(MapKit) + ++ (MKCoordinateSpan)MKCoordinateSpan:(id)json +{ + json = [self NSDictionary:json]; + return (MKCoordinateSpan){ + [self CLLocationDegrees:json[@"latitudeDelta"]], + [self CLLocationDegrees:json[@"longitudeDelta"]] + }; +} + ++ (MKCoordinateRegion)MKCoordinateRegion:(id)json +{ + return (MKCoordinateRegion){ + [self CLLocationCoordinate2D:json], + [self MKCoordinateSpan:json] + }; +}These conversion functions are designed to safely process any JSON that the JS might throw at them by displaying "RedBox" errors and returning standard initialization values when missing keys or other developer errors are encountered.
To finish up support for the
regionprop, we need to document it inpropTypes(or we'll get an error that the native prop is undocumented), then we can set it just like any other prop:// MapView.js + +MapView.propTypes = { + /** + * When this property is set to `true` and a valid camera is associated + * with the map, the camera’s pitch angle is used to tilt the plane + * of the map. When this property is set to `false`, the camera’s pitch + * angle is ignored and the map is always displayed as if the user + * is looking straight down onto it. + */ + pitchEnabled = React.PropTypes.bool, + + /** + * The region to be displayed by the map. + * + * The region is defined by the center coordinates and the span of + * coordinates to display. + */ + region: React.PropTypes.shape({ + /** + * Coordinates for the center of the map. + */ + latitude: React.PropTypes.number.isRequired, + longitude: React.PropTypes.number.isRequired, + + /** + * Distance between the minimum and the maximum latitude/longitude + * to be displayed. + */ + latitudeDelta: React.PropTypes.number.isRequired, + longitudeDelta: React.PropTypes.number.isRequired, + }), +}; + +// MyApp.js + + render() { + var region = { + latitude: 37.48, + longitude: -122.16, + latitudeDelta: 0.1, + longitudeDelta: 0.1, + }; + return <MapView region={region} />; + }Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet.
Events #
So now we have a native map component that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region? The key is to make the
RCTMapManagera delegate for all the views it vends, and forward the events to JS via the event dispatcher. This looks like so (simplified from the full implementation):// RCTMapManager.m + +#import "RCTMapManager.h" + +#import <MapKit/MapKit.h> + +#import "RCTBridge.h" +#import "RCTEventDispatcher.h" +#import "UIView+React.h" + +@interface RCTMapManager() <MKMapViewDelegate> +@end + +@implementation RCTMapManager + +RCT_EXPORT_MODULE() + +- (UIView *)view +{ + MKMapView *map = [[MKMapView alloc] init]; + map.delegate = self; + return map; +} + +#pragma mark MKMapViewDelegate + +- (void)mapView:(RCTMap *)mapView regionDidChangeAnimated:(BOOL)animated +{ + MKCoordinateRegion region = mapView.region; + NSDictionary *event = @{ + @"target": [mapView reactTag], + @"region": @{ + @"latitude": @(region.center.latitude), + @"longitude": @(region.center.longitude), + @"latitudeDelta": @(region.span.latitudeDelta), + @"longitudeDelta": @(region.span.longitudeDelta), + } + }; + [self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event]; +}You can see we're setting the manager as the delegate for every view that it vends, then in the delegate method
-mapView:regionDidChangeAnimated:the region is combined with thereactTagtarget to make an event that is dispatched to the corresponding React component instance in your application viasendInputEventWithName:body:. The event name@"topChange"maps to theonChangecallback prop in JavaScript (mappings are here). This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:// MapView.js + +class MapView extends React.Component { + constructor() { + this._onChange = this._onChange.bind(this); + } + _onChange(event: Event) { + if (!this.props.onRegionChange) { + return; + } + this.props.onRegionChange(event.nativeEvent.region); + } + render() { + return <RCTMap {...this.props} onChange={this._onChange} />; + } +} +MapView.propTypes = { + /** + * Callback that is called continuously when the user is dragging the map. + */ + onRegionChange: React.PropTypes.func, + ... +};Styles #
Since all our native react views are subclasses of
UIView, most style attributes will work like you would expect out of the box. Some components will want a default style, however, for exampleUIDatePickerwhich is a fixed size. This default style is important for the layout algorithm to work as expected, but we also want to be able to override the default style when using the component.DatePickerIOSdoes this by wrapping the native component in an extra view, which has flexible styling, and using a fixed style (which is generated with constants passed in from native) on the inner native component:// DatePickerIOS.ios.js + +var RCTDatePickerIOSConsts = require('NativeModules').UIManager.RCTDatePicker.Constants; +... + render: function() { + return ( + <View style={this.props.style}> + <RCTDatePickerIOS + ref={DATEPICKER} + style={styles.rkDatePickerIOS} + ... + /> + </View> + ); + } +}); + +var styles = StyleSheet.create({ + rkDatePickerIOS: { + height: RCTDatePickerIOSConsts.ComponentHeight, + width: RCTDatePickerIOSConsts.ComponentWidth, + }, +});The
RCTDatePickerIOSConstsconstants are exported from native by grabbing the actual frame of the native component like so:// RCTDatePickerManager.m + +- (NSDictionary *)constantsToExport +{ + UIDatePicker *dp = [[UIDatePicker alloc] init]; + [dp layoutIfNeeded]; + + return @{ + @"ComponentHeight": @(CGRectGetHeight(dp.frame)), + @"ComponentWidth": @(CGRectGetWidth(dp.frame)), + @"DatePickerModes": @{ + @"time": @(UIDatePickerModeTime), + @"date": @(UIDatePickerModeDate), + @"datetime": @(UIDatePickerModeDateAndTime), + } + }; +}This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the actual
RCTMapManagerand other components in the source code.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 the iOS Calendar API example. Let's say we would like to be able to access the iOS calendar from JavaScript.
A native module is just an Objective-C class that implements the
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 module 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 for image processing, a database, or any number of advanced extensions.
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 the iOS Calendar API example. Let's say we would like to be able to access the iOS calendar from JavaScript.
A native module is just an Objective-C class that implements the
RCTBridgeModuleprotocol. If you are wondering, RCT is an abbreviation of ReaCT.// CalendarManager.h #import "RCTBridgeModule.h" @interface CalendarManager : NSObject <RCTBridgeModule> -@endIn addition to implementing the
RCTBridgeModuleprotocol, your class must also include theRCT_EXPORT_MODULE()macro. This takes an optional argument that specifies the name that the module will accessed by in your JavaScript code (more on this later). If you do not specify a name, the JavaScript module name will match the Objective-C class name.// CalendarManager.m +@endIn addition to implementing the
RCTBridgeModuleprotocol, your class must also include theRCT_EXPORT_MODULE()macro. This takes an optional argument that specifies the name that the module will be accessible as in your JavaScript code (more on this later). If you do not specify a name, the JavaScript module name will match the Objective-C class name.// CalendarManager.m @implementation CalendarManager RCT_EXPORT_MODULE(); @@ -11,7 +11,7 @@ { RCTLogInfo(@"Pretending to create an event %@ at %@", name, location); }Now, from your JavaScript file you can call the method like this:
var CalendarManager = require('NativeModules').CalendarManager; -CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');NOTE: JavaScript method names
The name of the method exported to JavaScript is the native method's name up to the first colon. React Native also defines a macro called
RCT_REMAP_METHOD()to specify the JavaScript method's name. This is useful when multiple native methods are the same up to the first colon and would have conflicting JavaScript names.The return type of bridge methods is always
void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).Argument types #
RCT_EXPORT_METHODsupports all standard JSON object types, such as:- string (
NSString) - number (
NSInteger,float,double,CGFloat,NSNumber) - boolean (
BOOL,NSNumber) - array (
NSArray) of any types from this list - map (
NSDictionary) with string keys and values of any type from this list - function (
RCTResponseSenderBlock)
But it also works with any type that is supported by the
RCTConvertclass (seeRCTConvertfor details). TheRCTConverthelper functions all accept a JSON value as input and map it to a native Objective-C type or class.In our
CalendarManagerexample, we to pass the event date to the native method. We can't send JavaScript Date objects over the bridge, so we need to convert the date to a string or number. We could write our native function like this:RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSNumber *)secondsSinceUnixEpoch) +CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');NOTE: JavaScript method names
The name of the method exported to JavaScript is the native method's name up to the first colon. React Native also defines a macro called
RCT_REMAP_METHOD()to specify the JavaScript method's name. This is useful when multiple native methods are the same up to the first colon and would have conflicting JavaScript names.The return type of bridge methods is always
void. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).Argument Types #
RCT_EXPORT_METHODsupports all standard JSON object types, such as:- string (
NSString) - number (
NSInteger,float,double,CGFloat,NSNumber) - boolean (
BOOL,NSNumber) - array (
NSArray) of any types from this list - map (
NSDictionary) with string keys and values of any type from this list - function (
RCTResponseSenderBlock)
But it also works with any type that is supported by the
RCTConvertclass (seeRCTConvertfor details). TheRCTConverthelper functions all accept a JSON value as input and map it to a native Objective-C type or class.In our
CalendarManagerexample, we need to pass the event date to the native method. We can't send JavaScript Date objects over the bridge, so we need to convert the date to a string or number. We could write our native function like this:RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSNumber *)secondsSinceUnixEpoch) { NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch]; }or like this:
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSString *)ISO8601DateString) @@ -19,8 +19,8 @@ CalendarManager.*date = [RCTConvert NSDate:ISO8601DateString]; }But by using the automatic type conversion feature, we can skip the manual conversion step completely, and just write:
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSDate *)date) { - // Date it ready to use! -}You would then call this from JavaScript by using:
CalendarManager.addEvent('Birthday Party', date.toTime()); // passing date as number of seconds since Unix epochor
CalendarManager.addEvent('Birthday Party', date.toISOString()); // passing date as ISO-8601 stringAs
CalendarManager.addEventmethod gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:#import "RCTConvert.h" + // Date is ready to use! +}You would then call this from JavaScript by using either:
CalendarManager.addEvent('Birthday Party', date.toTime()); // passing date as number of seconds since Unix epochor
CalendarManager.addEvent('Birthday Party', date.toISOString()); // passing date as ISO-8601 stringAnd both values would get converted correctly to the native
NSDate. A bad value, like anArray, would generate a helpful "RedBox" error message.As
CalendarManager.addEventmethod gets more and more complex, the number of arguments will grow. Some of them might be optional. In this case it's worth considering changing the API a little bit to accept a dictionary of event attributes, like this:#import "RCTConvert.h" RCT_EXPORT_METHOD(addEvent:(NSString *)name details:(NSDictionary *)details) { @@ -31,28 +31,26 @@ CalendarManager.: '4 Privet Drive, Surrey', time: date.toTime(), description: '...' -})NOTE: About array and map
Objective-C doesn't provide any guarantees about the types of values in these structures. Your native module might expect an array of strings, but if JavaScript calls your method with an array containing numbers and strings, you'll get an
NSArraycontaining a mix ofNSNumberandNSString. For arrays,RCTConvertprovides some typed collections you can use in your method declaration, such asNSStringArray, orUIColorArray. For maps, it is the developer's responsibility to check the value types individually by manually callingRCTConverthelper methods.Callbacks #
WARNING
This section is more experimental than others, we don't have a set of best practices around callbacks yet.
Native module also supports a special kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.
RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback) +})NOTE: About array and map
Objective-C doesn't provide any guarantees about the types of values in these structures. Your native module might expect an array of strings, but if JavaScript calls your method with an array containing numbers and strings, you'll get an
NSArraycontaining a mix ofNSNumberandNSString. For arrays,RCTConvertprovides some typed collections you can use in your method declaration, such asNSStringArray, orUIColorArray. For maps, it is the developer's responsibility to check the value types individually by manually callingRCTConverthelper methods.Callbacks #
WARNING
This section is more experimental than others because we don't have a solid set of best practices around callbacks yet.
Native modules also supports a special kind of argument- a callback. In most cases it is used to provide the function call result to JavaScript.
RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callback) { NSArray *events = ... callback(@[[NSNull null], events]); -}RCTResponseSenderBlockaccepts only one argument - an array of arguments to pass to the JavaScript callback. In this case we use node's convention to set first argument to error and the rest - to the result of the function.CalendarManager.findEvents((error, events) => { +}RCTResponseSenderBlockaccepts only one argument - an array of parameters to pass to the JavaScript callback. In this case we use node's convention to make the first parameter an error object (usuallynullwhen there is no error) and the rest are the results of the function.CalendarManager.findEvents((error, events) => { if (error) { console.error(error); } else { this.setState({events: events}); } -})Native module is supposed to invoke its callback only once. It can, however, store the callback as an ivar and invoke it later. This pattern is often used to wrap iOS APIs that require delegate. See
RCTAlertManager.If you want to pass error-like object to JavaScript, use
RCTMakeErrorfromRCTUtils.h.Implementing a native module #
The native module should not have any assumptions about what thread it is being called on. React Native invokes native modules methods on a separate serial GCD queue, but this is an implementation detail and might change. If the native module needs to call main-thread-only iOS API, it should schedule the operation on the main queue:
RCT_EXPORT_METHOD(addEvent:(NSString *)name callback:(RCTResponseSenderBlock)callback) +})A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later. This pattern is often used to wrap iOS APIs that require delegates. See
RCTAlertManagerfor an example.If you want to pass error-like objects to JavaScript, use
RCTMakeErrorfromRCTUtils.h. Right now this just passes an Error-shaped dictionary to JavaScript, but we would like to automatically generate real JavaScriptErrorobjects in the future.Threading #
The native module should not have any assumptions about what thread it is being called on. React Native invokes native modules methods on a separate serial GCD queue, but this is an implementation detail and might change. The
- (dispatch_queue_t)methodQueuemethod allows the native module to specify which queue its methods should be run on. For example, if it needs to use a main-thread-only iOS API, it should specify this via:- (dispatch_queue_t)methodQueue { - dispatch_async(dispatch_get_main_queue(), ^{ - // Call iOS API on main thread - ... - // You can invoke callback from any thread/queue - callback(@[...]); - }); -}The same way if the operation can take a long time to complete, the native module should not block. It is a good idea to use
dispatch_asyncto schedule expensive work on background queue.Exporting constants #
Native module can export constants that are instantly available to JavaScript at runtime. This is useful to export some initial data that would otherwise require a bridge round-trip.
- (NSDictionary *)constantsToExport + return dispatch_get_main_queue(); +}Similarly, if an operation may take a long time to complete, the native module should not block and can specify it's own queue to run operations on. For example, the
RCTAsyncLocalStoragemodule creates it's own queue so the React queue isn't blocked waiting on potentially slow disk access:- (dispatch_queue_t)methodQueue +{ + return dispatch_queue_create("com.facebook.React.AsyncLocalStorageQueue", DISPATCH_QUEUE_SERIAL); +}Exporting Constants #
A native module can export constants that are immediately available to JavaScript at runtime. This is useful for communicating static data that would otherwise require a round-trip through the bridge.
- (NSDictionary *)constantsToExport { return @{ @"firstDayOfTheWeek": @"Monday" }; -}JavaScript can use this value right away:
console.log(CalendarManager.firstDayOfTheWeek);Note that the constants are exported only at initialization time, so if you change
constantsToExportvalue at runtime it won't affect JavaScript environment.Sending events to JavaScript #
The native module can signal events to JavaScript without being invoked directly. The easiest way to do this is to use
eventDispatcher:#import "RCTBridge.h" +}JavaScript can use this value right away, synchronously:
console.log(CalendarManager.firstDayOfTheWeek);Note that the constants are exported only at initialization time, so if you change
constantsToExportvalues at runtime it won't affect the JavaScript environment.Sending Events to JavaScript #
The native module can signal events to JavaScript without being invoked directly. The easiest way to do this is to use
eventDispatcher:#import "RCTBridge.h" #import "RCTEventDispatcher.h" @implementation CalendarManager @@ -71,8 +69,8 @@ CalendarManager.(reminder) => console.log(reminder.name) ); ... -// Don't forget to unsubscribe -subscription.remove();For more examples of sending events to JavaScript, see
RCTLocationObserver.Navigator
Use
Navigatorto transition between different scenes in your app. To +React Native | A framework for building native apps using React Navigator
Use
Navigatorto transition between different scenes in your app. To accomplish this, provide route objects to the navigator to identify each scene, and also arenderScenefunction that the navigator can use to render the scene for a given route.To change the animation or gesture properties of the scene, provide a diff --git a/docs/navigatorios.html b/docs/navigatorios.html index 9e7b929c8a8..d4cddfa3107 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React NavigatorIOS
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +
React Native | A framework for building native apps using React NavigatorIOS
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe functionality across your app.
Routes #
A route is an object used to describe each page in the navigator. The first route is provided to NavigatorIOS as
initialRoute:render: function() { return ( diff --git a/docs/netinfo.html b/docs/netinfo.html index 056512b6ee0..a7f4461ab07 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React NetInfo
NetInfo exposes info about online/offline status
reachabilityIOS #
Asyncronously determine if the device is online and on a cellular network.
none- device is offlinewifi- device is online and connected via wifi, or is the iOS simulatorcell- device is connected via Edge, 3G, WiMax, or LTEunknown- error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => { +React Native | A framework for building native apps using React NetInfo
NetInfo exposes info about online/offline status
reachabilityIOS #
Asyncronously determine if the device is online and on a cellular network.
none- device is offlinewifi- device is online and connected via wifi, or is the iOS simulatorcell- device is connected via Edge, 3G, WiMax, or LTEunknown- error case and the network status is unknown
NetInfo.reachabilityIOS.fetch().done((reach) => { console.log('Initial: ' + reach); }); function handleFirstReachabilityChange(reach) { diff --git a/docs/network.html b/docs/network.html index 3ae8d534f43..401577a9d07 100644 --- a/docs/network.html +++ b/docs/network.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React Network
One of React Native's goals is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change anything, we tried to be as faithful as possible to the browser APIs. The networking stack is a great example.
XMLHttpRequest #
XMLHttpRequest API is implemented on-top of iOS networking apis. The notable difference from web is the security model: you can read from arbitrary websites on the internet since there is no concept of CORS.
var request = new XMLHttpRequest(); +React Native | A framework for building native apps using React Network
One of React Native's goals is to be a playground where we can experiment with different architectures and crazy ideas. Since browsers are not flexible enough, we had no choice but to reimplement the entire stack. In the places that we did not intend to change anything, 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 7f74d51f80c..49c2576a00d 100644 --- a/docs/panresponder.html +++ b/docs/panresponder.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React PanResponder
PanResponderreconciles several touches into a single gesture. It makes +React Native | A framework for building native apps using React PanResponder
PanResponderreconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.It provides a predictable wrapper of the responder handlers provided by the gesture responder system. diff --git a/docs/pickerios.html b/docs/pickerios.html index e7e5888d550..6a57265b31e 100644 --- a/docs/pickerios.html +++ b/docs/pickerios.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React PickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict'; +React Native | A framework for building native apps using React PickerIOS
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict'; var React = require('react-native'); var { diff --git a/docs/pixelratio.html b/docs/pixelratio.html index 45f0ddb54f1..222eddc9384 100644 --- a/docs/pixelratio.html +++ b/docs/pixelratio.html @@ -1,4 +1,4 @@ -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 +
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 9eed91e5e49..bd994c496aa 100644 --- a/docs/pushnotificationios.html +++ b/docs/pushnotificationios.html @@ -1,4 +1,4 @@ -
React Native | A framework for building native apps using React