Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
32f33acc095fb6e26558ee33b14fc73cc386edaf
react-native/docs/running-on-device.html
T
Website Deployment Script 9c3c17b00b Deploy website 
Deploy website version based on d4917c68cb
2017-12-19 17:55:27 +00:00

388 lines
57 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Running On Device · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta property="og:title" content="Running On Device · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/index.html"/><meta property="og:description" content="&lt;style&gt;"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/blog/feed.xml" title="React Native Blog RSS Feed"/><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><link rel="stylesheet" href="/react-native/css/main.css"/></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png"/><h2 class="headerTitle">React Native</h2></a><a href="/react-native/versions.html"><h3>0.52-RC</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" target="_self">Docs</a></li><li><a href="/react-native/en/help.html" target="_self">Community</a></li><li><a href="/react-native/blog" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search"/></li><li><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li><li><a href="https://reactjs.org/" target="_self">React</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Guides</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>The Basics</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/getting-started.html">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tutorial.html">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/props.html">Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/state.html">State</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/style.html">Style</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/height-and-width.html">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/flexbox.html">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/handling-text-input.html">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/handling-touches.html">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/using-a-scrollview.html">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/using-a-listview.html">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/network.html">Networking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/more-resources.html">More Resources</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/components-and-apis.html">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/platform-specific-code.html">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/navigation.html">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/images.html">Images</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/animations.html">Animations</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/accessibility.html">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/improvingux.html">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/timers.html">Timers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/debugging.html">Debugging</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/performance.html">Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/gesture-responder-system.html">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/javascript-environment.html">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/direct-manipulation.html">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/colors.html">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/integration-with-existing-apps.html">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/building-for-apple-tv.html">Building For TV Devices</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/react-native/docs/running-on-device.html">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/upgrading.html">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/troubleshooting.html">Troubleshooting</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides (iOS)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/native-modules-ios.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/native-components-ios.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/linking-libraries-ios.html">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/running-on-simulator-ios.html">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/communication-ios.html">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/app-extensions.html">App Extensions</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides (Android)</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/native-modules-android.html">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/native-components-android.html">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/headless-js-android.html">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/signed-apk-android.html">Generating Signed APK</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="navGroup navGroupActive"><h3>Contributing</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/contributing.html">How to Contribute</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/maintainers.html">What to Expect from Maintainers</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/testing.html">Testing your Changes</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/understanding-cli.html">Understanding the CLI</a></li></ul></div><div class="navGroup navGroupActive"><h3>Components</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/activityindicator.html">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/button.html">Button</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/datepickerios.html">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/flatlist.html">FlatList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/image.html">Image</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/listview.html">ListView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/maskedviewios.html">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/modal.html">Modal</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/navigatorios.html">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/picker.html">Picker</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pickerios.html">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/progressbarandroid.html">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/progressviewios.html">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/refreshcontrol.html">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/scrollview.html">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/sectionlist.html">SectionList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/slider.html">Slider</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/snapshotviewios.html">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/statusbar.html">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/switch.html">Switch</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tabbarios.html">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/tabbarios-item.html">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/text.html">Text</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/textinput.html">TextInput</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/toolbarandroid.html">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablehighlight.html">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchableopacity.html">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/view.html">View</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/virtualizedlist.html">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/webview.html">WebView</a></li></ul></div><div class="navGroup navGroupActive"><h3>APIs</h3><ul><li class="navListItem"><a class="navItem" href="/react-native/docs/accessibilityinfo.html">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/actionsheetios.html">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/alert.html">Alert</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/alertios.html">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/animated.html">Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/appregistry.html">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/appstate.html">AppState</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/asyncstorage.html">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/backandroid.html">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/backhandler.html">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/cameraroll.html">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/clipboard.html">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/datepickerandroid.html">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/dimensions.html">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/easing.html">Easing</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/geolocation.html">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imageeditor.html">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imagepickerios.html">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/imagestore.html">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/image-style-props.html">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/interactionmanager.html">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/keyboard.html">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/layout-props.html">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/layoutanimation.html">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/linking.html">Linking</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/listviewdatasource.html">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/netinfo.html">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/panresponder.html">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/permissionsandroid.html">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pixelratio.html">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/pushnotificationios.html">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/settings.html">Settings</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/shadow-props.html">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/share.html">Share</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/statusbarios.html">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/stylesheet.html">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/systrace.html">Systrace</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/text-style-props.html">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/timepickerandroid.html">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/toastandroid.html">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/transforms.html">Transforms</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/vibration.html">Vibration</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/vibrationios.html">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/react-native/docs/view-style-props.html">View Style Props</a></li></ul></div></div></section></div><script>
var toggler = document.getElementById('navToggler');
var nav = document.getElementById('docsNav');
toggler.onclick = function() {
nav.classList.toggle('docsSliderActive');
};
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/running-on-device.md" target="_blank">Edit</a><h1>Running On Device</h1></header><article><div><span><style>
.toggler li {
display: inline-block;
position: relative;
top: 1px;
padding: 10px;
margin: 0px 2px 0px 2px;
border: 1px solid #05A5D1;
border-bottom-color: transparent;
border-radius: 3px 3px 0px 0px;
color: #05A5D1;
background-color: transparent;
font-size: 0.99em;
cursor: pointer;
}
.toggler li:first-child {
margin-left: 0;
}
.toggler li:last-child {
margin-right: 0;
}
.toggler ul {
width: 100%;
display: inline-block;
list-style-type: none;
margin: 0;
border-bottom: 1px solid #05A5D1;
cursor: default;
}
@media screen and (max-width: 960px) {
.toggler li,
.toggler li:first-child,
.toggler li:last-child {
display: block;
border-bottom-color: #05A5D1;
border-radius: 3px;
margin: 2px 0px 2px 0px;
}
.toggler ul {
border-bottom: 0;
}
}
.toggler a {
display: inline-block;
padding: 10px 5px;
margin: 2px;
border: 1px solid #05A5D1;
border-radius: 3px;
text-decoration: none !important;
}
.display-os-mac .toggler .button-mac,
.display-os-linux .toggler .button-linux,
.display-os-windows .toggler .button-windows,
.display-platform-ios .toggler .button-ios,
.display-platform-android .toggler .button-android {
background-color: #05A5D1;
color: white;
}
block { display: none; }
.display-platform-ios.display-os-mac .ios.mac,
.display-platform-ios.display-os-linux .ios.linux,
.display-platform-ios.display-os-windows .ios.windows,
.display-platform-android.display-os-mac .android.mac,
.display-platform-android.display-os-linux .android.linux,
.display-platform-android.display-os-windows .android.windows {
display: block;
}
</style>
<p>It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.</p>
<p>If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the <a href="/react-native/docs/getting-started.html">Getting Started guide</a>.</p>
<div class="toggler">
<ul role="tablist" >
<li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
iOS
</li>
<li id="android" class="button-android" aria-selected="false" role="tab" tabindex="-1" aria-controls="androidtab" onclick="displayTab('platform', 'android')">
Android
</li>
</ul>
</div>
<p><block class="linux windows mac ios" /></p>
<h2><a class="anchor" aria-hidden="true" name="running-your-app-on-ios-devices"></a><a href="#running-your-app-on-ios-devices" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your app on iOS devices</h2>
<p><block class="linux windows mac android" /></p>
<h2><a class="anchor" aria-hidden="true" name="running-your-app-on-android-devices"></a><a href="#running-your-app-on-android-devices" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Running your app on Android devices</h2>
<p><block class="linux windows mac ios android" /></p>
<div class="toggler">
<span>Development OS:</span>
<a href="javascript:void(0);" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
<a href="javascript:void(0);" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
</div>
<p><block class="linux windows ios" /></p>
<p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="/react-native/docs/getting-started.html">Quick Start instructions</a> to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.</p>
<p><block class="mac ios" /></p>
<h3><a class="anchor" aria-hidden="true" name="1-plug-in-your-device-via-usb"></a><a href="#1-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Plug in your device via USB</h3>
<p>Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the <code>ios</code> folder in your project, then open the <code>.xcodeproj</code> file within it using Xcode.</p>
<p>If this is your first time running an app on your iOS device, you may need to register your device for development. Open the <strong>Product</strong> menu from Xcode's menubar, then go to <strong>Destination</strong>. Look for and select your device from the list. Xcode will then register your device for development.</p>
<h3><a class="anchor" aria-hidden="true" name="2-configure-code-signing"></a><a href="#2-configure-code-signing" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Configure code signing</h3>
<p>Register for an <a href="https://developer.apple.com/">Apple developer account</a> if you don't have one yet.</p>
<p>Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the &quot;General&quot; tab. Go to &quot;Signing&quot; and make sure your Apple developer account or team is selected under the Team dropdown.</p>
<p><img src="/react-native/docs/assets/RunningOnDeviceCodeSigning.png" alt=""></p>
<p>Repeat this step for the Tests target in your project.</p>
<h3><a class="anchor" aria-hidden="true" name="3-build-and-run-your-app"></a><a href="#3-build-and-run-your-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Build and Run your app</h3>
<p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (<code>⇧⌘2</code>). You can now press the <strong>Build and run</strong> button (<code>⌘R</code>) or select <strong>Run</strong> from the <strong>Product</strong> menu. Your app will launch on your device shortly.</p>
<p><img src="/react-native/docs/assets/RunningOnDeviceReady.png" alt=""></p>
<blockquote>
<p>If you run into any issues, please take a look at Apple's <a href="https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4">Launching Your App on a Device</a> docs.</p>
</blockquote>
<p><block class="mac windows linux android" /></p>
<h3><a class="anchor" aria-hidden="true" name="1-enable-debugging-over-usb"></a><a href="#1-enable-debugging-over-usb" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Enable Debugging over USB</h3>
<p>Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.</p>
<p>To enable USB debugging on your device, you will first need to enable the &quot;Developer options&quot; menu by going to <strong>Settings</strong> → <strong>About phone</strong> and then tapping the <code>Build number</code> row at the bottom seven times. You can then go back to <strong>Settings</strong> → <strong>Developer options</strong> to enable &quot;USB debugging&quot;.</p>
<h3><a class="anchor" aria-hidden="true" name="2-plug-in-your-device-via-usb"></a><a href="#2-plug-in-your-device-via-usb" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Plug in your device via USB</h3>
<p>Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.</p>
<p><block class="linux android" /></p>
<p>Next, check the manufacturer code by using <code>lsusb</code> (on mac, you must first <a href="https://github.com/jlhonora/lsusb">install lsusb</a>). <code>lsusb</code> should output something like this:</p>
<pre><code class="hljs css bash">$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
</code></pre>
<p>These lines represent the USB devices currently connected to your machine.</p>
<p>You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:</p>
<pre><code class="hljs css bash">$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
</code></pre>
<p>You'll see that after removing the phone, the line which has the phone model (&quot;Motorola PCS&quot; in this case) disappeared from the list. This is the line that we care about.</p>
<p><code>Bus 001 Device 003: ID 22b8:2e76 Motorola PCS</code></p>
<p>From the above line, you want to grab the first four digits from the device ID:</p>
<p><code>22b8:2e76</code></p>
<p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
<p>You'll need to input this into your udev rules in order to get up and running:</p>
<pre><code class="hljs css sh"><span class="hljs-built_in">echo</span> SUBSYSTEM==<span class="hljs-string">"usb"</span>, ATTR{idVendor}==<span class="hljs-string">"22b8"</span>, MODE=<span class="hljs-string">"0666"</span>, GROUP=<span class="hljs-string">"plugdev"</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
</code></pre>
<p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
<p><block class="mac windows linux android" /></p>
<p>Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running <code>adb devices</code>.</p>
<pre><code class="hljs">$ adb devices
<span class="hljs-built_in">List</span> <span class="hljs-keyword">of</span> devices attached
emulator-<span class="hljs-number">5554</span> offline <span class="hljs-comment"># Google emulator</span>
<span class="hljs-number">14</span>ed2fcc device <span class="hljs-comment"># Physical device</span>
</code></pre>
<p>Seeing <code>device</code> in the right column means the device is connected. You must have <strong>only one device connected</strong> at a time.</p>
<h3><a class="anchor" aria-hidden="true" name="3-run-your-app"></a><a href="#3-run-your-app" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Run your app</h3>
<p>Type the following in your command prompt to install and launch your app on the device:</p>
<pre><code class="hljs">$ react-native <span class="hljs-keyword">run</span><span class="bash">-android
</span></code></pre>
<blockquote>
<p>If you get a &quot;bridge configuration isn't available&quot; error, see <a href="/react-native/docs/running-on-device.html#method-1-using-adb-reverse-recommended">Using adb reverse</a>.</p>
</blockquote>
<blockquote>
<p>Hint</p>
<p>You can also use the <code>React Native CLI</code> to generate and run a <code>Release</code> build (e.g. <code>react-native run-android --variant=release</code>).</p>
</blockquote>
<p><block class="mac windows linux android ios" /></p>
<p><block class="mac ios" /></p>
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Connecting to the development server</h2>
<p>You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the <a href="/react-native/docs/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p>
<p><img src="/react-native/docs/assets/DeveloperMenu.png" alt=""></p>
<h3><a class="anchor" aria-hidden="true" name="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
<blockquote>
<p>If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.</p>
</blockquote>
<p>When trying to connect to the development server you might get a <a href="/react-native/docs/debugging.html#in-app-errors-and-warnings">red screen with an error</a> saying:</p>
<blockquote>
<p>Connection to <a href="">http://localhost:8081/debugger-proxy?role=client</a> timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in <code>RCTWebSocketExecutor.m</code>.</p>
</blockquote>
<p>To solve this issue check the following points.</p>
<h4><a class="anchor" aria-hidden="true" name="1-wi-fi-network"></a><a href="#1-wi-fi-network" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Wi-Fi network.</h4>
<p>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</p>
<h4><a class="anchor" aria-hidden="true" name="2-ip-address"></a><a href="#2-ip-address" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. IP address</h4>
<p>Make sure that the build script detected the IP address of your machine correctly (e.g. 10.0.1.123).</p>
<p><img src="/react-native/docs/assets/XcodeBuildIP.png" alt=""></p>
<p>Open the <strong>Report navigator</strong> tab, select the last <strong>Build</strong> and search for <code>xip.io</code>. The IP address which gets embedded in the app should match your machines IP address plus the domain <code>.xip.io</code> (e.g. 10.0.1.123.xip.io)</p>
<h4><a class="anchor" aria-hidden="true" name="3-network-router-configuration"></a><a href="#3-network-router-configuration" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Network/router configuration</h4>
<p>React Native uses the wildcard DNS service <strong>xip.io</strong> to address your device. Some routers have security features to prevent DNS Servers to resolve anything in the local IP range.</p>
<p>Now check if you are able to resolve the xip.io address, by running <code>nslookup</code>.</p>
<pre><code class="hljs css bash">$ nslookup 10.0.1.123.xip.io
</code></pre>
<p>If it doesn't resolve your local IP address either the <strong>xip.io</strong> service is down or more likely your router prevents it.</p>
<p>To still use xip.io behind your router:</p>
<ul>
<li>configure your phone to use Google DNS (8.8.8.8)</li>
<li>disable the appropriate security feature in your router</li>
</ul>
<p><block class="mac windows linux android" /></p>
<h2><a class="anchor" aria-hidden="true" name="connecting-to-the-development-server"></a><a href="#connecting-to-the-development-server" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Connecting to the development server</h2>
<p>You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.</p>
<h3><a class="anchor" aria-hidden="true" name="method-1-using-adb-reverse-recommended"></a><a href="#method-1-using-adb-reverse-recommended" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Method 1: Using adb reverse (recommended)</h3>
<p><block class="mac windows linux android" /></p>
<p>You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.</p>
<p><block class="mac windows linux android" /></p>
<p>Run the following in a command prompt:</p>
<pre><code class="hljs">$ adb reverse <span class="hljs-built_in">t</span><span class="hljs-symbol">cp:8081</span> <span class="hljs-built_in">t</span><span class="hljs-symbol">cp:8081</span>
</code></pre>
<p>You can now enable Live reloading from the <a href="/react-native/docs/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p>
<h3><a class="anchor" aria-hidden="true" name="method-2-connect-via-wi-fi"></a><a href="#method-2-connect-via-wi-fi" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Method 2: Connect via Wi-Fi</h3>
<p>You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.</p>
<p><block class="mac android" /></p>
<p>You can find the IP address in <strong>System Preferences</strong> → <strong>Network</strong>.</p>
<p><block class="windows android" /></p>
<p>Open the command prompt and type <code>ipconfig</code> to find your machine's IP address (<a href="http://windows.microsoft.com/en-us/windows/using-command-line-tools-networking-information">more info</a>).</p>
<p><block class="linux android" /></p>
<p>Open a terminal and type <code>/sbin/ifconfig</code> to find your machine's IP address.</p>
<p><block class="mac windows linux android" /></p>
<ol>
<li>Make sure your laptop and your phone are on the <strong>same</strong> Wi-Fi network.</li>
<li>Open your React Native app on your device.</li>
<li>You'll see a <a href="/react-native/docs/debugging.html#in-app-errors-and-warnings">red screen with an error</a>. This is OK. The following steps will fix that.</li>
<li>Open the in-app <a href="/react-native/docs/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>.</li>
<li>Go to <strong>Dev Settings</strong> → <strong>Debug server host for device</strong>.</li>
<li>Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).</li>
<li>Go back to the <strong>Developer menu</strong> and select <strong>Reload JS</strong>.</li>
</ol>
<p>You can now enable Live reloading from the <a href="/react-native/docs/debugging.html#accessing-the-in-app-developer-menu">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p>
<p><block class="mac ios" /></p>
<h2><a class="anchor" aria-hidden="true" name="building-your-app-for-production"></a><a href="#building-your-app-for-production" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Building your app for production</h2>
<p>You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account.</p>
<h3><a class="anchor" aria-hidden="true" name="1-enable-app-transport-security"></a><a href="#1-enable-app-transport-security" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Enable App Transport Security</h3>
<p>App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server. ATS is disabled for <code>localhost</code> by default in React Native projects in order to make development easier.</p>
<p>You should re-enable ATS prior to building your app for production by removing the <code>localhost</code> entry from the <code>NSExceptionDomains</code> dictionary in your <code>Info.plist</code> file in the <code>ios/</code> folder. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry.</p>
<blockquote>
<p>If your application needs to access HTTP resources on production, see <a href="http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/">this post</a> to learn how to configure ATS on your project.</p>
</blockquote>
<h3><a class="anchor" aria-hidden="true" name="2-configure-release-scheme"></a><a href="#2-configure-release-scheme" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Configure release scheme</h3>
<p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. Apps built for <code>Release</code> will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p>
<p>To configure your app to be built using the <code>Release</code> scheme, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme</strong>. Select the <strong>Run</strong> tab in the sidebar, then set the Build Configuration dropdown to <code>Release</code>.</p>
<p><img src="/react-native/docs/assets/ConfigureReleaseScheme.png" alt=""></p>
<h3><a class="anchor" aria-hidden="true" name="3-build-app-for-release"></a><a href="#3-build-app-for-release" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Build app for release</h3>
<p>You can now build your app for release by tapping <code>⌘B</code> or selecting <strong>Product</strong> → <strong>Build</strong> from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p>
<blockquote>
<p>You can also use the <code>React Native CLI</code> to perform this operation using the option <code>--configuration</code> with the value <code>Release</code> (e.g. <code>react-native run-ios --configuration Release</code>).</p>
</blockquote>
<p><block class="mac windows linux android" /></p>
<h2><a class="anchor" aria-hidden="true" name="building-your-app-for-production"></a><a href="#building-your-app-for-production" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Building your app for production</h2>
<p>You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for <a href="/react-native/docs/signed-apk-android.html">generating a signed APK</a> to learn more.</p>
<script>
function displayTab(type, value) {
var container = document.getElementsByTagName('block')[0].parentNode;
container.className = 'display-' + type + '-' + value + ' ' +
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
}
function convertBlocks() {
// Convert <div>...<span><block /></span>...</div>
// Into <div>...<block />...</div>
var blocks = document.querySelectorAll('block');
for (var i = 0; i < blocks.length; ++i) {
var block = blocks[i];
var span = blocks[i].parentNode;
var container = span.parentNode;
container.insertBefore(block, span);
container.removeChild(span);
}
// Convert <div>...<block />content<block />...</div>
// Into <div>...<block>content</block><block />...</div>
blocks = document.querySelectorAll('block');
for (var i = 0; i < blocks.length; ++i) {
var block = blocks[i];
while (
block.nextSibling &&
block.nextSibling.tagName !== 'BLOCK'
) {
block.appendChild(block.nextSibling);
}
}
}
function guessPlatformAndOS() {
if (!document.querySelector('block')) {
return;
}
// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
var foundHash = false;
if (
window.location.hash !== '' &&
window.location.hash !== 'content'
) {
// content is default
var hashLinks = document.querySelectorAll(
'a.hash-link'
);
for (
var i = 0;
i < hashLinks.length && !foundHash;
++i
) {
if (hashLinks[i].hash === window.location.hash) {
var parent = hashLinks[i].parentElement;
while (parent) {
if (parent.tagName === 'BLOCK') {
// Could be more than one target os and dev platform, but just choose some sort of order
// of priority here.
// Dev OS
if (parent.className.indexOf('mac') > -1) {
displayTab('os', 'mac');
foundHash = true;
} else if (
parent.className.indexOf('linux') > -1
) {
displayTab('os', 'linux');
foundHash = true;
} else if (
parent.className.indexOf('windows') > -1
) {
displayTab('os', 'windows');
foundHash = true;
} else {
break;
}
// Target Platform
if (parent.className.indexOf('ios') > -1) {
displayTab('platform', 'ios');
foundHash = true;
} else if (
parent.className.indexOf('android') > -1
) {
displayTab('platform', 'android');
foundHash = true;
} else {
break;
}
// Guide
if (parent.className.indexOf('native') > -1) {
displayTab('guide', 'native');
foundHash = true;
} else if (
parent.className.indexOf('quickstart') > -1
) {
displayTab('guide', 'quickstart');
foundHash = true;
} else {
break;
}
break;
}
parent = parent.parentElement;
}
}
}
}
// Do the default if there is no matching hash
if (!foundHash) {
var isMac = navigator.platform === 'MacIntel';
var isWindows = navigator.platform === 'Win32';
displayTab('platform', isMac ? 'ios' : 'android');
displayTab(
'os',
isMac ? 'mac' : isWindows ? 'windows' : 'linux'
);
displayTab('guide', 'quickstart');
displayTab('language', 'objc');
}
}
convertBlocks();
guessPlatformAndOS();
</script>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="building-for-apple-tv.html">← Building For TV Devices</a><a class="docs-next button" href="upgrading.html">Upgrading to new React Native versions →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Learn the Basics</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/help.html">Community</a></h5><a href="/react-native/showcase.html">Who&#x27;s using React Native?</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Meetups</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/help.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="http://reactjs.org" target="_blank">React</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><div class="githubButton"><a class="github-button" href="https://github.com/facebook/react-native" data-icon="octicon-star" data-show-count="true" data-count-href="/facebook/react-native/stargazers" data-count-api="/repos/facebook/react-native#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star facebook/react-native on GitHub">Star</a></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.52-RC"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink