React NativeAccessibility (iOS)
Accessibility on iOS encompasses many topics, but for many, accessibility is synonymous with VoiceOver, a technology available since iOS 3.0. It acts as a screen reader, allowing people with visual impairments to use their iOS devices. Click here to learn more.
Making Accessible Apps #
Coding Accessibly #
accessible #
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
accessibilityLabel #
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View:
Accessibility
iOS #
Accessibility on iOS encompasses many topics, but for many, accessibility is synonymous with VoiceOver, a technology available since iOS 3.0. It acts as a screen reader, allowing people with visual impairments to use their iOS devices. Click here to learn more.
Android #
Accessibility on Android involves many diverse topics, one of which is enabling people with vision loss to use your application. For this community, Google provides a built-in screen reader service with Android called TalkBack. With TalkBack, you can use touch exploration and gestures to navigate a mobile device and application. TalkBack will read back the content on screen using text-to-speech and alert users to important notifications within your application. Click here to learn more about Android accessibility features and here to learn more about making your native applications accessible.
Making Accessible Apps #
Accessibility properties #
accessible (iOS, Android) #
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
accessibilityLabel (iOS, Android) #
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
accessibilityTraits #
Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by accessibilityTraits.
To use, set the accessibilityTraits property to one of (or an array of) accessibility trait strings:
- none Used when the element has no traits.
- button Used when the element should be treated as a button.
- link Used when the element should be treated as a link.
- header Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
- search Used when the text field element should also be treated as a search field.
- image Used when the element should be treated as an image. Can be combined with button or link, for example.
- selected Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
- plays Used when the element plays its own sound when activated.
- key Used when the element acts as a keyboard key.
- text Used when the element should be treated as static text that cannot change.
- summary Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches. For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
- disabled Used when the control is not enabled and does not respond to user input.
- frequentUpdates Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
- startsMedia Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
- adjustable Used when an element can be "adjusted" (e.g. a slider).
- allowsDirectInteraction Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
- pageTurn Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
onAccessibilityTap #
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
onMagicTap #
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
Testing VoiceOver Support #
To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.
To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.
At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.
ActionSheetIOS
Methods #
Edit on GitHubExamples #
ActionSheetIOS
Methods #
Edit on GitHubExamples #
ActivityIndicatorIOS
Edit on GitHubProps #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
color string #
The foreground color of the spinner (default is gray).
hidesWhenStopped bool #
Whether the indicator should hide when not animating (true by default).
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36.
Edit on GitHubExamples #
ActivityIndicatorIOS
Edit on GitHubProps #
animating bool #
Whether to show the indicator (true, the default) or hide it (false).
color string #
The foreground color of the spinner (default is gray).
hidesWhenStopped bool #
Whether the indicator should hide when not animating (true by default).
onLayout function #
Invoked on mount and layout changes with
{nativeEvent: { layout: {x, y, width, height}}}.
size enum('small', 'large') #
Size of the indicator. Small has a height of 20, large has a height of 36.
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.
Android Setup
This guide describes basic steps of the android development environment setup that are required to run React Native android apps on an android emulator. We don't discuss developer tool configuration such as IDEs here.
These instructions only cover installation "from scratch". If you happen to have some old, outdated version of Android SDK make sure to update required packages to the version mentioned below and install all the missing ones.
Install and configure SDK #
- Install the latest JDK.
- Install the Android SDK with
brew install android-sdk. - Add this to your
~/.bashrc,~/.zshrcor whatever your shell uses:export ANDROID_HOME=/usr/local/opt/android-sdk - Start a new shell and run
android; in the window that appears make sure you check:- Android SDK Build-tools version 23.0.1
- Android 6.0 (API 23)
- Android Support Repository
- Click "Install Packages".
Install and run Android stock emulator #
- Start a new shell and run
android; in the window that appears make sure you check:- Intel x86 Atom System Image (for Android 5.1.1 - API 22)
- Intel x86 Emulator Accelerator (HAXM installer)
+
- Click "Install Packages".
- Configure HAXM.
- Create an Android Virtual Device (AVD) to use with the Android emulator:
- Run
android avdand click on Create... +
- With the new AVD selected, click
Start...
- Run
Animated
Animations are an important part of modern UX, and the Animated
+
Animated
Animations are an important part of modern UX, and the Animated
library is designed to make them fluid, powerful, and easy to build and
maintain.
The simplest workflow is to create an Animated.Value, hook it up to one or
more style attributes of an animated component, and then drive updates either
diff --git a/docs/animations.html b/docs/animations.html
index 146ec70c777..bdba5733dd1 100644
--- a/docs/animations.html
+++ b/docs/animations.html
@@ -1,4 +1,4 @@
-
Animations
Fluid, meaningful animations are essential to the mobile user experience. Like +
Animations
Fluid, meaningful animations are essential to the mobile user experience. Like
everything in React Native, Animation APIs for React Native are currently under
development, but have started to coalesce around two complementary systems:
LayoutAnimation for animated global layout transactions, and Animated for
@@ -134,7 +134,7 @@ vertical panning.
The above API gives a powerful tool for expressing all s
concise, robust, and performant way. Check out more example code in
UIExplorer/AnimationExample. Of course there may still be times where Animated
doesn't support what you need, and the following sections cover other animation
-systems.
LayoutAnimation #
LayoutAnimation allows you to globally configure create and update
+systems.
LayoutAnimation (iOS only) #
LayoutAnimation allows you to globally configure create and update
animations that will be used for all views in the next render/layout cycle.
This is useful for doing flexbox layout updates without bothering to measure or
calculate specific properties in order to animate them directly, and is
diff --git a/docs/appregistry.html b/docs/appregistry.html
index f4d9edc7677..77b99adff65 100644
--- a/docs/appregistry.html
+++ b/docs/appregistry.html
@@ -1,4 +1,4 @@
-
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 26c94fa098b..23c065134be 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 25dffcdd00d..2c7ee115f27 100644 --- a/docs/asyncstorage.html +++ b/docs/asyncstorage.html @@ -1,4 +1,4 @@ -AsyncStorage – React Native | A framework for building native apps using React AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, key-value storage +
AsyncStorage – React Native | A framework for building native apps using React AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. 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 facade over the native iOS implementation to provide @@ -113,7 +113,7 @@ exports.examples : 'Basics - getItem, setItem, removeItem', render(): ReactElement { return <BasicStorageExample />; } }, -];
\ No newline at end of file diff --git a/docs/cameraroll.html b/docs/cameraroll.html index 596e36f98d5..eefbfbb1fc8 100644 --- a/docs/cameraroll.html +++ b/docs/cameraroll.html @@ -1,133 +1,11 @@ -CameraRoll – React Native | A framework for building native apps using React CameraRoll
CameraRollprovides access to the local camera roll / gallery.Methods #
static saveImageWithTag(tag, successCallback, errorCallback) #
Saves the image to the camera roll / gallery.
@param {string} tag On Android, this is a local URI, such +
CameraRoll – React Native | A framework for building native apps using React CameraRoll
CameraRollprovides access to the local camera roll / gallery.Methods #
static saveImageWithTag(tag, successCallback, errorCallback) #
Saves the image to the camera roll / gallery.
@param {string} tag On Android, this is a local URI, such as
"file:///sdcard/img.png".On iOS, the tag can be one of the following:
- local URI
- assets-library tag
- a tag not maching any of the above, which means the image data will be stored in memory (and consume memory as long as the process is alive)
@param successCallback Invoked with the value of
tagon success. @param errorCallback Invoked with error message on error.static getPhotos(params, callback, errorCallback) #
Invokes
callbackwith photo identifier objects from the local camera roll of the device matching shape defined bygetPhotosReturnChecker.@param {object} params See
getPhotosParamChecker. @param {function} callback Invoked with arg of shape defined bygetPhotosReturnCheckeron success. - @param {function} errorCallback Invoked with error message on error.Edit on GitHubExamples #
'use strict'; - -var React = require('react-native'); -var { - CameraRoll, - Image, - SliderIOS, - StyleSheet, - SwitchIOS, - Text, - View, - TouchableOpacity -} = React; - -var CameraRollView = require('./CameraRollView.ios'); -var AssetScaledImageExampleView = require('./AssetScaledImageExample'); - -var CAMERA_ROLL_VIEW = 'camera_roll_view'; - -var CameraRollExample = React.createClass({ - - getInitialState() { - return { - groupTypes: 'SavedPhotos', - sliderValue: 1, - bigImages: true, - }; - }, - - render() { - return ( - <View> - <SwitchIOS - onValueChange={this._onSwitchChange} - value={this.state.bigImages} /> - <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text> - <SliderIOS - value={this.state.sliderValue} - onValueChange={this._onSliderChange} - /> - <Text>{'Group Type: ' + this.state.groupTypes}</Text> - <CameraRollView - ref={CAMERA_ROLL_VIEW} - batchSize={20} - groupTypes={this.state.groupTypes} - renderImage={this._renderImage} - /> - </View> - ); - }, - - loadAsset(asset){ - this.props.navigator.push({ - title: 'Camera Roll Image', - component: AssetScaledImageExampleView, - backButtonTitle: 'Back', - passProps: { asset: asset }, - }); - }, - - _renderImage(asset) { - var imageSize = this.state.bigImages ? 150 : 75; - var imageStyle = [styles.image, {width: imageSize, height: imageSize}]; - var location = asset.node.location.longitude ? - JSON.stringify(asset.node.location) : 'Unknown location'; - return ( - <TouchableOpacity onPress={ this.loadAsset.bind( this, asset ) }> - <View key={asset} style={styles.row}> - <Image - source={asset.node.image} - style={imageStyle} - /> - <View style={styles.info}> - <Text style={styles.url}>{asset.node.image.uri}</Text> - <Text>{location}</Text> - <Text>{asset.node.group_name}</Text> - <Text>{new Date(asset.node.timestamp).toString()}</Text> - </View> - </View> - </TouchableOpacity> - ); - }, - - _onSliderChange(value) { - var options = CameraRoll.GroupTypesOptions; - var index = Math.floor(value * options.length * 0.99); - var groupTypes = options[index]; - if (groupTypes !== this.state.groupTypes) { - this.setState({groupTypes: groupTypes}); - } - }, - - _onSwitchChange(value) { - this.refs[CAMERA_ROLL_VIEW].rendererChanged(); - this.setState({ bigImages: value }); - } -}); - -var styles = StyleSheet.create({ - row: { - flexDirection: 'row', - flex: 1, - }, - url: { - fontSize: 9, - marginBottom: 14, - }, - image: { - margin: 4, - }, - info: { - flex: 1, - }, -}); - -exports.title = 'Camera Roll'; -exports.description = 'Example component that uses CameraRoll to list user\'s photos'; -exports.examples = [ - { - title: 'Photos', - render(): ReactElement { return <CameraRollExample />; } - } -];DatePickerIOS
Use
DatePickerIOSto render a date/time picker (selector) on iOS. This is +DatePickerIOS – 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 @@ -158,7 +158,7 @@ exports.examples : '500', fontSize: 14, }, -});Debugging
Debugging React Native Apps #
To access the in-app developer menu, shake the iOS device or press
control + ⌘ + zin the simulator.Hint
To disable the developer menu for production builds, open your project in Xcode and select
Product→Scheme→Edit Scheme...(or press⌘ + <). Next, selectRunfrom the menu on the left and change the Build Configuration toRelease.Reload #
Selecting
Reloador pressing⌘ + rin the simulator will reload the JavaScript that powers your application. If you have added new resources (such as an image toImages.xcassets) or modified any Objective-C/Swift code, you will need to re-build from Xcode for the changes to take effect (you can do this with⌘ + rin Xcode).Chrome Developer Tools #
To debug the JavaScript code in Chrome, select
Debug in Chromefrom the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.Press
⌘ + option + ior selectView→Developer→Developer Toolsto toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.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.React Developer Tools (optional) #
Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the
Reactin the developer tools (see facebook/react-devtools for more information).Live Reload #
Select
Enable Live Reloadvia the developer menu to have the application automatically reload when changes are made to the JavaScript.FPS (Frames per Second) Monitor #
On
0.5.0-rcand higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.Debugging
Debugging React Native Apps #
To access the in-app developer menu:
- On iOS shake the device or press
control + ⌘ + zin the simulator. - On Android shake the device or press hardware menu button (available on older devices and in most of the emulators, e.g. in genymotion you can press
⌘ + mto simulate hardware menu button click)
Hint
To disable the developer menu for production builds:
- For iOS open your project in Xcode and select
Product→Scheme→Edit Scheme...(or press⌘ + <). Next, selectRunfrom the menu on the left and change the Build Configuration toRelease. - For Android, by default, developer menu will be disabled in release builds done by gradle (e.g with gralde
assembleReleasetask). Although this behavior can be customized by passing proper value toReactInstanceManager#setUseDeveloperSupport.
Reload #
Selecting
Reload(or pressing⌘ + rin the iOS simulator) will reload the JavaScript that powers your application. If you have added new resources (such as an image toImages.xcassetson iOS or tores/drawablefolder on Android) or modified any native code (Objective-C/Swift code on iOS or Java/C++ code on Android), you will need to re-build the app for the changes to take effect.Chrome Developer Tools #
To debug the JavaScript code in Chrome, select
Debug in Chromefrom the developer menu. This will open a new tab at http://localhost:8081/debugger-ui.In Chrome, press
⌘ + option + ior selectView→Developer→Developer Toolsto toggle the developer tools console. Enable Pause On Caught Exceptions for a better debugging experience.To debug on a real device:
- On iOS - 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. - On Android, if you're running Android 5.0+ device connected via USB you can use
adbcommand line tool to setup port forwarding from the device to your computer. For that run:adb reverse 8081 8081(see this link for help onadbcommand). Alternatively, you can open dev menu on the device and selectDev Settings, then updateDebug server host for devicesetting to the IP address of your computer.
React Developer Tools (optional) #
Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the component hierarchy via the
Reactin the developer tools (see facebook/react-devtools for more information).Live Reload #
This option allows for your JS changes to trigger automatic reload on the connected device/emulator. To enable this option:
- On iOS, select
Enable Live Reloadvia the developer menu to have the application automatically reload when changes are made to the JavaScript. - On Android, launch dev menu, go to
Dev Settingsand selectAuto reload on JS changeoption
FPS (Frames per Second) Monitor #
On
0.5.0-rcand higher versions, you can enable a FPS graph overlay in the developers menu in order to help you debug performance problems.Direct Manipulation
It is sometimes necessary to make changes directly to a component +
Direct Manipulation – React Native | A framework for building native apps using React Direct Manipulation
It is sometimes necessary to make changes directly to a component without using state/props to trigger a re-render of the entire subtree. When using React in the browser for example, you sometimes need to directly modify a DOM node, and the same is true for views in mobile diff --git a/docs/drawerlayoutandroid.html b/docs/drawerlayoutandroid.html new file mode 100644 index 00000000000..5a31ca945e0 --- /dev/null +++ b/docs/drawerlayoutandroid.html @@ -0,0 +1,37 @@ +
DrawerLayoutAndroid – React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index 9b17d397b28..4ed99fdaab4 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -1,4 +1,4 @@ -DrawerLayoutAndroid
React component that wraps the platform
DrawerLayout(Android only). The +Drawer (typically used for navigation) is rendered withrenderNavigationView+and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by thedrawerPositionprop and its width can +be set by thedrawerWidthprop.Example:
render: function() { + var navigationView = ( + <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text> + ); + return ( + <DrawerLayoutAndroid + drawerWidth={300} + drawerPosition={DrawerLayoutAndroid.positions.Left} + renderNavigationView={() => navigationView}> + <Text style={{10, fontSize: 15, textAlign: 'right'}}>Hello</Text> + <Text style={{10, fontSize: 15, textAlign: 'right'}}>World!</Text> + </DrawerLayoutAndroid> + ); +},Edit on GitHubProps #
drawerPosition enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) #
Specifies the side of the screen from which the drawer will slide in.
drawerWidth number #
Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window.
keyboardDismissMode enum('none', "on-drag") #
Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins.
onDrawerClose function #
Function called whenever the navigation view has been closed.
onDrawerOpen function #
Function called whenever the navigation view has been opened.
onDrawerSlide function #
Function called whenever there is an interaction with the navigation view.
onDrawerStateChanged function #
Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interation with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation
renderNavigationView function #
The navigation view that will be rendered to the side of the screen and can be pulled in.
Integrating with Existing Apps (iOS) – React Native | A framework for building native apps using React Integrating with Existing Apps (iOS)
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 #
- CocoaPods –
gem install cocoapods - io.js
- Install nvm with its setup instructions here. Then run
nvm install iojs-v2 && nvm alias default iojs-v2, which installs the latest compatible version of io.js and sets up your terminal so that typingnoderuns io.js. With nvm you can install multiple versions of Node and io.js and easily switch between them.
- Install nvm with its setup instructions here. Then run
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 installed CocoaPods yet, check out 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' +Integrating with Existing Apps (iOS) – React Native | A framework for building native apps using React Integrating with Existing Apps (iOS)
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 #
- CocoaPods –
gem install cocoapods - io.js
- Install nvm with its setup instructions here. Then run
nvm install iojs-v2 && nvm alias default iojs-v2, which installs the latest compatible version of io.js and sets up your terminal so that typingnoderuns io.js. With nvm you can install multiple versions of Node and io.js and easily switch between them.
- Install nvm with its setup instructions here. Then run
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 installed CocoaPods yet, check out 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 ReactComponent/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 e11938fea12..3aba913f04c 100644 --- a/docs/flexbox.html +++ b/docs/flexbox.html @@ -1,4 +1,4 @@ -Flexbox – 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 +Geolocation – 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 #
static getCurrentPosition(geo_success: Function, geo_error?: Function, geo_options?: GeoOptions) #
Invokes the success callback once with the latest location info. Supported diff --git a/docs/gesture-responder-system.html b/docs/gesture-responder-system.html index 50ff4574fd1..82c35799348 100644 --- a/docs/gesture-responder-system.html +++ b/docs/gesture-responder-system.html @@ -1,4 +1,4 @@ -
Gesture Responder System – 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 (7+) implementation right now, and Xcode only runs on Mac.
- Xcode 6.3 or higher is recommended.
- Homebrew is the recommended way to install io.js, watchman, and flow.
- Install io.js 1.0 or newer. io.js is the modern version of Node.
- Install nvm with its setup instructions here. To benefit from the changes to your .bashrc, close and reopen your terminal window. Then run
nvm install iojs-v2 && nvm alias default iojs-v2, which installs the latest compatible version of io.js and sets up your terminal so that typingnoderuns io.js. With nvm you can install multiple versions of Node and io.js and easily switch between them. - New to npm?
- Install nvm with its setup instructions here. To benefit from the changes to your .bashrc, close and reopen your terminal window. Then run
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.
We recommend periodically running
brew update && brew upgradeto keep your programs up-to-date.Quick start #
npm install -g react-native-clireact-native init AwesomeProject
In the newly created folder
AwesomeProject/- Open
iOS/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 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 - Only OS X is currently supported
- Homebrew is the recommended way to install io.js, watchman, and flow.
- Install io.js 1.0 or newer. io.js is the modern version of Node.
- Install nvm with its setup instructions here. Then run
nvm install iojs-v2 && nvm alias default iojs-v2, which installs the latest compatible version of io.js and sets up your terminal so that typingnoderuns io.js. With nvm you can install multiple versions of Node and io.js and easily switch between them. - New to npm?
- Install nvm with its setup instructions here. Then run
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.
We recommend periodically running
brew update && brew upgradeto keep your programs up-to-date.iOS Setup #
Xcode 6.3 or higher is required. It can be installed from the App Store.
Android Setup #
To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See Android setup guide for instructions on how to set up your Android environment.
Quick start #
$ npm install -g react-native-cli +$ react-native init AwesomeProject +$ cd AwesomeProject/To run the iOS app:
- Open
ios/AwesomeProject.xcodeprojand hit run in Xcode. - Open
index.ios.jsin your text editor of choice and edit some lines. - Hit ⌘-R in your iOS simulator to reload the app and see your change!
To run the Android app:
$ react-native run-android- Open
index.android.jsin your text editor of choice and edit some lines. - Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
Run
adb logcat *:S ReactNative:V ReactNativeJS:Vin a terminal to see your app's logs$ react-native run-android- Open
index.android.jsin your text editor of choice and edit some lines. - Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
- Run
adb logcat *:S ReactNative:V ReactNativeJS:Vin a terminal to see your app's logs
Congratulations! You've successfully run and modified your first React Native app.
If you run into any issues getting started, see the troubleshooting page.
Adding Android to an existing React Native project #
If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:
- Update the
react-nativedependency in yourpackage.jsonfile to the latest version $ npm install$ react-native android
Image
A React component for displaying different types of images, +
Image – 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 ( @@ -33,8 +33,7 @@ network.When your entire codebase respects this convention, you're able to do interesting things like automatically packaging the assets that are being used in your app. Note that in the current form, nothing is enforced, but it will be in the future.
Adding Static Resources to your App using Images.xcassets #
NOTE: App build required for new resources
Any time you add a new resource to
Images.xcassetsyou will need to re-build your app through Xcode before you can use it - a reload from within the simulator is not enough.This process is currently being improved, a much better workflow will be -available shortly.
Network Resources #
Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image.
// GOOD +<Image source={icon} />When your entire codebase respects this convention, you're able to do interesting things like automatically packaging the assets that are being used in your app. Note that in the current form, nothing is enforced, but it will be in the future.
Adding Static Resources to your iOS App using Images.xcassets #
NOTE: App build required for new resources
Any time you add a new resource to
Images.xcassetsyou will need to re-build your app through Xcode before you can use it - a reload from within the simulator is not enough.This process is currently being improved, a much better workflow will be available shortly.
Adding Static Resources to your Android app #
Add your images as bitmap drawables to the android project (
<yourapp>/android/app/src/main/res). To provide different resolutions of your assets, check out using configuration qualifiers. Normally, you will want to put your assets in the following directories (create them underresif they don't exist):drawable-mdpi(1x)drawable-hdpi(1.5x)drawable-xhdpi(2x)drawable-xxhdpi(3x)
If you're missing a resolution for your asset, Android will take the next best thing and resize it for you.
NOTE: App build required for new resources
Any time you add a new resource to your drawables you will need to re-build your app by running
react-native run-androidbefore you can use it - reloading the JS is not enough.This process is currently being improved, a much better workflow will be available shortly.
Network Resources #
Many of the images you will display in your app will not be available at compile time, or you will want to load some dynamically to keep the binary size down. Unlike with static resources, you will need to manually specify the dimensions of your image.
// GOOD <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} /> diff --git a/docs/interactionmanager.html b/docs/interactionmanager.html index fec3f28a112..b94df2f56b8 100644 --- a/docs/interactionmanager.html +++ b/docs/interactionmanager.html @@ -1,4 +1,4 @@ -InteractionManager – React Native | A framework for building native apps using React InteractionManager
InteractionManager allows long-running work to be scheduled after any +
InteractionManager – 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 804511b95e0..eb419a85525 100644 --- a/docs/javascript-environment.html +++ b/docs/javascript-environment.html @@ -1,4 +1,4 @@ -JavaScript Environment – 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:
- On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
- 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 Syntax Transformers #
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
Here's a full list of React Native's enabled transformations.
ES5
- Reserved Words:
promise.catch(function() { });
ES6
- Arrow functions:
<C onPress={() => this.setState({pressed: true})} - Call spread:
Math.max(...array); - Classes:
class C extends React.Component { render() { return <View />; } } - Destructuring:
var {isActive, style} = this.props; - 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 Literals:
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:
- On iOS simulators and devices, Android emulators and devices React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
- When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code 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 Syntax Transformers #
Syntax transformers make writing code more enjoyable by allowing you to use new JavaScript syntax without having to wait for support on all interpreters.
As of version 0.5.0, React Native ships with the Babel JavaScript compiler. Check Babel documentation on its supported transformations for more details.
Here's a full list of React Native's enabled transformations.
ES5
- Reserved Words:
promise.catch(function() { });
ES6
- Arrow functions:
<C onPress={() => this.setState({pressed: true})} - Call spread:
Math.max(...array); - Classes:
class C extends React.Component { render() { return <View />; } } - Destructuring:
var {isActive, style} = this.props; - 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 Literals:
var who = 'world'; var str = `Hello ${who}`;
ES7
- Object Spread:
var extended = { ...obj, a: 10 }; - Function Trailing Comma:
function f(a, b, c,) { }
\ No newline at end of file diff --git a/docs/layoutanimation.html b/docs/layoutanimation.html index 25d217dd1fa..d921ddf2a7a 100644 --- a/docs/layoutanimation.html +++ b/docs/layoutanimation.html @@ -1,4 +1,4 @@ -Known Issues
Missing Modules and Native Views #
This is an initial release of React Native Android and therefore not all of the views present on iOS are released on Android. We are very much interested in the communities' feedback on the next set of modules and views for Open Source. Not all native views between iOS and Android have a 100% equivalent representation, here it will be necessary to use a counterpart eg using ProgressBar on Android in place of ActivityIndicator on iOS.
Our provisional plan for common views and modules includes:
Views
View Pager + Swipe Refresh + Spinner + ART + Maps + WebviewModules
Geo Location + Net Info + Camera Roll + App State + Dialog + Intent + Media + Pasteboard + AlertPublishing modules on Android #
There is currently no easy way of publishing custom native modules on Android. Smooth work flow for contributors is important and this will be looked at very closely after the initial Open Source release. Of course the aim will be to streamline and optimize the process between iOS and Android as much as possible.
Overlay view with opacity of 0 cannot be clicked through #
There is a noted difference in the handling of Views with an opacity of 0 between iOS and Android. While iOS will allow these views to be clicked through and the View below will receive the touch input, for Android the touch will be blocked. This can be demonstrated in this example where it will only be possible to click the touchable on iOS.
<View style={{flex: 1}}> + <TouchableOpacity onPress={() => alert('hi!')}> + <Text>HELLO!</Text> + </TouchableOpacity> + <View style={{ + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + opacity: 0}} /> + </View>Layout-only nodes on android #
An optimization feature of the Android version of React Native is for views which only contribute to the layout to not have a native view, only their layout properties are propagated to their children views. This optimization is to provide stability in deep view hierarchies for React Native and is therefore enabled by default. Should you depend on a view being present or internal tests incorrectly detect a view is layout only it will be necessary to turn off this behavior. To do this, set
collapsableto false as in this example:<View collapsable={false}> + ... + </View>LayoutAnimation – React Native | A framework for building native apps using React LayoutAnimation
Automatically animates views to their new positions when the +
LayoutAnimation – React Native | A framework for building native apps using React LayoutAnimation
Automatically animates views to their new positions when the next layout happens.
A common way to use this API is to call
LayoutAnimation.configureNextbefore callingsetState.Methods #
static configureNext(config: Config, onAnimationDidEnd?: Function) #
Schedules an animation to happen on the next layout.
@param config Specifies animation properties:
durationin millisecondscreate, config for animating in new views (seeAnimtype)update, config for animating views that have been updated (seeAnimtype)
@param onAnimationDidEnd Called when the animation finished. diff --git a/docs/linking-libraries-ios.html b/docs/linking-libraries-ios.html index a7b608b730d..bfcd0bd7854 100644 --- a/docs/linking-libraries-ios.html +++ b/docs/linking-libraries-ios.html @@ -1,4 +1,4 @@ -
Linking Libraries (iOS) – React Native | A framework for building native apps using React Linking Libraries (iOS)
Not every app uses all the native capabilities, and including the code to support +
Linking Libraries (iOS) – React Native | A framework for building native apps using React Linking Libraries (iOS)
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 f4c4aacdb59..16f73a7f2e3 100644 --- a/docs/linkingios.html +++ b/docs/linkingios.html @@ -1,4 +1,4 @@ -LinkingIOS – React Native | A framework for building native apps using React LinkingIOS
LinkingIOSgives you a general interface to interact with both, incoming +LinkingIOS – 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 an 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 2720f00d03d..a7a74f024d6 100644 --- a/docs/listview.html +++ b/docs/listview.html @@ -1,4 +1,4 @@ -ListView – React Native | A framework for building native apps using React ListView
ListView - A core component designed for efficient display of vertically +
ListView – 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 30e4c031380..37d0911e9d3 100644 --- a/docs/mapview.html +++ b/docs/mapview.html @@ -1,4 +1,4 @@ -MapView – React Native | A framework for building native apps using React MapView
Edit on GitHubProps #
annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: 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. +
MapView – React Native | A framework for building native apps using React MapView
Edit on GitHubProps #
annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: 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.mapType enum('standard', 'satellite', 'hybrid') #
The map type to be displayed.
- standard: standard road map (default)
- satellite: satellite view
- hybrid: satellite view with roads and points of interest overlayed
maxDelta number #
Maximum size of area that can be displayed.
minDelta number #
Minimum size of area that can be displayed.
onAnnotationPress function #
Callback that is called once, when the user is clicked on a annotation.
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/modal.html b/docs/modal.html index 30f3798c8b3..2fe5534f91e 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -1,4 +1,4 @@ -Modal – React Native | A framework for building native apps using React Modal
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict'; +Modal – React Native | A framework for building native apps using React Modal
Edit on GitHubProps #
Edit on GitHubExamples #
'use strict'; var React = require('react-native'); var { diff --git a/docs/native-components-android.html b/docs/native-components-android.html new file mode 100644 index 00000000000..62058b89398 --- /dev/null +++ b/docs/native-components-android.html @@ -0,0 +1,98 @@ +Native UI Components (Android) – React Native | A framework for building native apps using React \ No newline at end of file diff --git a/docs/native-components-ios.html b/docs/native-components-ios.html index c8675af664b..e69efbb2fce 100644 --- a/docs/native-components-ios.html +++ b/docs/native-components-ios.html @@ -1,4 +1,4 @@ -Native UI Components (Android)
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 Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing
ImageViewcomponent available in the core React Native library.ImageView example #
For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.
Native views are created and manipulated by extending
ViewManageror more commonlySimpleViewManager. ASimpleViewManageris convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout. An example of when you would useViewManagerinstead is when wrapping a component with FrameLayout, such as ProgressBar.These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the
NativeViewHierarchyManager, which delegates back to them to set and update the properties of the views as necessary. TheViewManagersare also typically the delegates for the views, sending events back to JavaScript via the bridge.Vending a view is simple:
- Create the ViewManager subclass.
- Annotate the view properties with
@UIProp - Implement the
createViewInstancemethod - Implement the
updateViewmethod - Register the manager in
createViewManagersof the applications package. - Implement the JavaScript module
1. Create the
ViewManagersubclass #In this example we create view manager class
ReactImageManagerthat extendsSimpleViewManagerof typeReactImageView.ReactImageViewis the type of object managed by the manager, this will be the custom native view. Name returned bygetNameis used to reference the native view type from JavaScript.... + +public class ReactImageManager extends SimpleViewManager<ReactImageView> { + + public static final String REACT_CLASS = "RCTImageView"; + + @Override + public String getName() { + return REACT_CLASS; + }2. Annotate the view properties #
Properties that are to be reflected in JavaScript are annotated with
@UIProp. The types currently supported areBOOLEAN,NUMBER,STRING,MAPandARRAY. Each property is declared as a public static final String and its assigned value will be the name of the property in JavaScript.@UIProp(UIProp.Type.STRING) + public static final String PROP_SRC = "src"; + @UIProp(UIProp.Type.NUMBER) + public static final String PROP_BORDER_RADIUS = "borderRadius"; + @UIProp(UIProp.Type.STRING) + public static final String PROP_RESIZE_MODE = ViewProps.RESIZE_MODE;3. Implement method
createViewInstance#Views are created in the
createViewInstancemethod, the view should initialize itself in its default state, any properties will be set via a follow up call toupdateView.@Override + public ReactImageView createViewInstance(ThemedReactContext context) { + return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext); + }4. Implement method
updateView#Setting properties on a view is not handled by automatically calling setter methods as it is on iOS; for Android, you manually invoke the setters via the
updateViewof yourViewManager. Values are fetched from theCatalystStylesDiffMapand dispatched to theViewinstance as required. It is up to a combination ofupdateViewand theViewclass to check the validity of the properties and behave accordingly.@Override + public void updateView(final ReactImageView view, + final CatalystStylesDiffMap props) { + super.updateView(view, props); + + if (props.hasKey(PROP_RESIZE_MODE)) { + view.setScaleType( + ImageResizeMode.toScaleType(props.getString(PROP_RESIZE_MODE))); + } + if (props.hasKey(PROP_SRC)) { + view.setSource(props.getString(PROP_SRC)); + } + if (props.hasKey(PROP_BORDER_RADIUS)) { + view.setBorderRadius(props.getFloat(PROP_BORDER_RADIUS, 0.0f)); + } + view.maybeUpdateView(); + } +}5. Register the
ViewManager#The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function
createViewManagers.@Override + public List<ViewManager> createViewManagers( + ReactApplicationContext reactContext) { + return Arrays.<ViewManager>asList( + new ReactImageManager() + ); + }6. Implement the JavaScript module #
The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the
propTypes.// ImageView.js + +var { requireNativeComponent } = require('react-native'); + +var iface = { + name: 'ImageView', + propTypes: { + src: PropTypes.string, + borderRadius: PropTypes.number, + resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']), + }, +}; + +module.exports = requireNativeComponent('RCTImageView', iface);requireNativeComponentcommonly takes two parameters, the first is the name of the native view and the second is an object that describes the component interface. The component interface should declare a friendlynamefor use in debug messages and must declare thepropTypesreflected by the Native View. ThepropTypesare used for checking the validity of a user's use of the native view.Events #
So now we know how to expose native view components that we can control easily from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the
getId()method.class MyCustomView extends View { + ... + public void onReceiveNativeEvent() { + WritableMap event = Arguments.createMap(); + event.putString("message", "MyMessage"); + ReactContext reactContext = (ReactContext)getContext(); + reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( + getId(), + "topChange", + event); + } +}The event name
topChangemaps to theonChangecallback prop in JavaScript (mappings are inUIManagerModuleConstants.java). This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:// MyCustomView.js + +class MyCustomView extends React.Component { + constructor() { + this._onChange = this._onChange.bind(this); + } + _onChange(event: Event) { + if (!this.props.onChange) { + return; + } + this.props.onChange(event.nativeEvent.message); + } + render() { + return <RCTMyCustomView {...this.props} onChange={this._onChange} />; + } +} +MyCustomView.propTypes = { + /** + * Callback that is called continuously when the user is dragging the map. + */ + onChange: React.PropTypes.func, + ... +};Native UI Components (iOS) – React Native | A framework for building native apps using React 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 +Native UI Components (iOS) – React Native | A framework for building native apps using React 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" @@ -225,7 +225,7 @@ MapView.propTypes "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.\ No newline at end of file diff --git a/docs/native-modules-ios.html b/docs/native-modules-ios.html index fd8eb4035b9..d436572f776 100644 --- a/docs/native-modules-ios.html +++ b/docs/native-modules-ios.html @@ -1,4 +1,4 @@ -Native Modules (Android)
Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java 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.
The Toast Module #
This guide will use the Toast example. Let's say we would like to be able to create a toast message from JavaScript.
We start by creating a native module. A native module is a Java class that usually extends the
ReactContextBaseJavaModuleclass and implements the functionality required by the JavaScript. Our goal here is to be able to writeToastAndroid.show('Awesome', ToastAndroid.SHORT);from JavaScript to display a short toast on the screen.package com.facebook.react.modules.toast; + +import android.widget.Toast; + +import com.facebook.react.bridge.NativeModule; +import com.facebook.react.bridge.ReactApplicationContext; +import com.facebook.react.bridge.ReactContext; +import com.facebook.react.bridge.ReactContextBaseJavaModule; +import com.facebook.react.bridge.ReactMethod; + +import java.util.Map; + +public class ToastModule extends ReactContextBaseJavaModule { + + private static final String DURATION_SHORT_KEY = "SHORT"; + private static final String DURATION_LONG_KEY = "LONG"; + + public ToastModule(ReactApplicationContext reactContext) { + super(reactContext); + } +}ReactContextBaseJavaModulerequires that a method calledgetNameis implemented. The purpose of this method is to return the string name of theNativeModulewhich represents this class in JavaScript. So here we will call thisToastAndroidso that we can access it throughReact.NativeModules.ToastAndroidin JavaScript.@Override + public String getName() { + return "ToastAndroid"; + }An optional method called
getConstantsreturns the constant values exposed to JavaScript. Its implementation is not required but is very useful to key pre-defined values that need to be communicated from JavaScript to Java in sync.@Override + public Map<String, Object> getConstants() { + final Map<String, Object> constants = new HashMap<>(); + constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT); + constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG); + return constants; + }To expose a method to JavaScript a Java method must be annotated using
@ReactMethod. The return type of bridge methods is alwaysvoid. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).@ReactMethod + public void show(String message, int duration) { + Toast.makeText(getReactApplicationContext(), message, duration).show(); + }Argument Types #
The following argument types are supported for methods annotated with
@ReactMethodand they directly map to their JavaScript equivalentsBoolean -> Bool +Integer -> Number +Double -> Number +Float -> Number +String -> String +Callback -> function +ReadableMap -> Object +ReadableArray -> ArrayRegister the Module #
The last step within Java is to register the Module; this happens in the
createNativeModulesof your apps package. If a module is not registered it will not be available from JavaScript.class AnExampleReactPackage implements ReactPackage { + + ... + + @Override + public List<NativeModule> createNativeModules( + ReactApplicationContext reactContext) { + List<NativeModule> modules = new ArrayList<>(); + + modules.add(new ToastModule(reactContext)); + + return modules; + }The package needs to be provided to the ReactInstanceManager when it is built. See
UIExplorerActivity.javafor an example. The default package when you initialize a new project isMainReactPackage.java.mReactInstanceManager = ReactInstanceManager.builder() + .setApplication(getApplication()) + .setBundleAssetName("AnExampleApp.android.bundle") + .setJSMainModuleName("Examples/AnExampleApp/AnExampleApp.android") + .addPackage(new AnExampleReactPackage()) + .setUseDeveloperSupport(true) + .setInitialLifecycleState(LifecycleState.RESUMED) + .build();To make it simpler for to access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of
NativeModuleseach time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality./** + * @providesModule ToastAndroid + */ + +'use strict'; + +/** + * This exposes the native ToastAndroid module as a JS module. This has a function 'showText' + * which takes the following parameters: + * + * 1. String message: A string with the text to toast + * 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG + */ +var { NativeModules } = require('react-native'); +module.exports = NativeModules.ToastAndroid;Now, from your JavaScript file you can call the method like this:
var ToastAndroid = require('ToastAndroid') +ToastAndroid.show('Awesome', ToastAndroid.SHORT); + +// Note: We require ToastAndroid without any relative filepath because +// of the @providesModule directive. Using @providesModule is optional.Beyond Toasts #
Callbacks #
Native modules also support a special kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.
public class UIManagerModule extends ReactContextBaseJavaModule { + +... + + @ReactMethod + public void measureLayout( + int tag, + int ancestorTag, + Callback errorCallback, + Callback successCallback) { + try { + measureLayout(tag, ancestorTag, mMeasureBuffer); + float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]); + float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]); + float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]); + float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]); + successCallback.invoke(relativeX, relativeY, width, height); + } catch (IllegalViewOperationException e) { + errorCallback.invoke(e.getMessage()); + } + } + +...This method would be accessed in JavaScript using:
UIManager.measureLayout( + 100, + 100, + (msg) => { + console.log(msg); + }, + (x, y, width, height) => { + console.log(x + ':' + y + ':' + width + ':' + height); + } +);A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.
It is very important to highlight that the callback is not invoked immediately after the native function completes - remember that bridge communication is asynchronous, and this too is tied to the run loop.
Threading #
Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.
Sending Events to JavaScript #
Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the
RCTDeviceEventEmitterwhich can be obtained from theReactContextas in the code snippet below.... +private void sendEvent(ReactContext reactContext, + String eventName, + @Nullable WritableMap params) { + reactContext + .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) + .emit(eventName, params); +} +... +WritableMap params = Arguments.createMap(); +... +sendEvent(reactContext, "keyboardWillShow", params);JavaScript modules can then register to receive events by
addListenerOnusing theSubscribablemixinvar RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); +... + +var ScrollResponderMixin = { + mixins: [Subscribable.Mixin], + + + componentWillMount: function() { + ... + this.addListenerOn(RCTDeviceEventEmitter, + 'keyboardWillShow', + this.scrollResponderKeyboardWillShow); + ... + }, + scrollResponderKeyboardWillShow:function(e: Event) { + this.keyboardWillOpenTo = e; + this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e); + },Native Modules (iOS) – 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, Swift 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 or Swift 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 +Native Modules (iOS) – 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, Swift 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 or Swift 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> @@ -114,7 +114,7 @@ class CalendarManagerRCT_EXTERN_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(NSNumber *)date) @endFor those of you new to Swift and Objective-C, whenever you mix the two languages in an iOS project, you will also need an additional bridging file, known as a bridging header, to expose the Objective-C files to Swift. Xcode will offer to create this header file for you if you add your Swift file to your app through the Xcode
File>New Filemenu option. You will need to importRCTBridgeModule.hin this header file.// CalendarManager-Bridging-Header.h -#import "RCTBridgeModule.h"You can also use
RCT_EXTERN_REMAP_MODULEandRCT_EXTERN_REMAP_METHODto alter the JavaScript name of the module or methods you are exporting. For more information seeRCTBridgeModule.Navigator Comparison
The differences between Navigator +
Navigator Comparison – React Native | A framework for building native apps using React Navigator Comparison
The differences between Navigator and NavigatorIOS are a common source of confusion for newcomers.
Both
NavigatorandNavigatorIOSare components that allow you to manage the navigation in your app between various "scenes" (another word @@ -12,7 +12,7 @@ class, andNavigatorre-implements that functionality entirely in JavaScript as a React component. A corollary of this is thatNavigatorwill be compatible with Android and iOS, whereasNavigatorIOSwill only work on the one platform. Below is an itemized list of differences -between the two.Navigator #
- Extensive API makes it completely customizable from JavaScript.
- Under active development from the React Native team.
- Written in JavaScript.
- Works on iOS and Android.
- Includes a simple navigation bar component similar to the default
NavigatorIOSbar:Navigator.NavigationBar, and another with breadcrumbs calledNavigator.BreadcrumbNavigationBar. See the UIExplorer demo to try them out and see how to use them.- Currently animations are good and improving, but they are still less refined than Apple's, which you get from
NavigatorIOS.
- Currently animations are good and improving, but they are still less refined than Apple's, which you get from
- You can provide your own navigation bar by passing it through the
navigationBarprop.
NavigatorIOS #
- Small, limited API makes it much less customizable than
Navigatorin its current form. - Development belongs to open-source community - not used by the React Native team on their apps.
- A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.
- Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript.
- Consequently, you get the animations and behaviour that Apple has developed.
- iOS only.
- Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.
For most non-trivial apps, you will want to use
Navigator- it won't be long before you run into issues when trying to do anything complex withNavigatorIOS.Navigator
Use
Navigatorto transition between different scenes in your app. To +Navigator – 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 b799099f3e8..ff8eceb6d91 100644 --- a/docs/navigatorios.html +++ b/docs/navigatorios.html @@ -1,4 +1,4 @@ -
NavigatorIOS – React Native | A framework for building native apps using React NavigatorIOS
NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +
NavigatorIOS – 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 724544ea14a..34456ac1228 100644 --- a/docs/netinfo.html +++ b/docs/netinfo.html @@ -1,4 +1,4 @@ -NetInfo – React Native | A framework for building native apps using React