mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
1 parent
b9207d28ac
commit
4081c2bcc5
6 files changed
+40
-33
No files matched your search
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><title>Debugging</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Debugging"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="active" href="docsLine truncated
|
||||
<!DOCTYPE html><html><head><title>Debugging</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Debugging"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="active" href="docsLine truncated
|
||||
|
||||
</span><h1><a class="anchor" name="debugging-in-ejected-apps"></a>Debugging in Ejected Apps <a class="hash-link" href="docs/debugging.html#debugging-in-ejected-apps">#</a></h1><span><div class="banner-crna-ejected" style="margin-top:25px">
|
||||
<h3>Projects with Native Code Only</h3>
|
||||
@@ -11,8 +11,8 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</span><h2><a class="anchor" name="accessing-console-logs"></a>Accessing console logs <a class="hash-link" href="docs/debugging.html#accessing-console-logs">#</a></h2><p>Note: if you're using Create React Native App, these already appear in the same terminal output as the packager.</p><p>You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native log<span class="token operator">-</span>ios
|
||||
$ react<span class="token operator">-</span>native log<span class="token operator">-</span>android</div><p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p><h2><a class="anchor" name="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#debugging-on-a-device-with-chrome-developer-tools">#</a></h2><p>Note: if you're using Create React Native App, this is configured for you already.</p><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p><p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html" target="_blank"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p><p><code>adb reverse tcp:8081 tcp:8081</code></p><p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p><blockquote><p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p></blockquote><h3><a class="anchor" name="debugging-with-stetho-http-facebook-github-io-stetho-on-android"></a>Debugging with <a href="http://facebook.github.io/stetho/" target="_blank">Stetho</a> on Android <a class="hash-link" href="docs/debugging.html#debugging-with-stetho-http-facebook-github-io-stetho-on-android">#</a></h3><ol><li><p>In <code>android/app/build.gradle</code>, add these lines in the <code>dependencies</code> section:</p><div class="prism language-javascript">compile <span class="token string">'com.facebook.stetho:stetho:1.3.1'</span>
|
||||
</span><h2><a class="anchor" name="accessing-console-logs"></a>Accessing console logs <a class="hash-link" href="docs/debugging.html#accessing-console-logs">#</a></h2><p>You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native log<span class="token operator">-</span>ios
|
||||
$ react<span class="token operator">-</span>native log<span class="token operator">-</span>android</div><p>You may also access these through <code>Debug → Open System Log...</code> in the iOS Simulator or by running <code>adb logcat *:S ReactNative:V ReactNativeJS:V</code> in a terminal while an Android app is running on a device or emulator.</p><blockquote><p>If you're using Create React Native App, console logs already appear in the same terminal output as the packager.</p></blockquote><h2><a class="anchor" name="debugging-on-a-device-with-chrome-developer-tools"></a>Debugging on a device with Chrome Developer Tools <a class="hash-link" href="docs/debugging.html#debugging-on-a-device-with-chrome-developer-tools">#</a></h2><blockquote><p>If you're using Create React Native App, this is configured for you already.</p></blockquote><p>On iOS devices, open the file <a href="https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m" target="_blank"><code>RCTWebSocketExecutor.m</code></a> and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.</p><p>On Android 5.0+ devices connected via USB, you can use the <a href="http://developer.android.com/tools/help/adb.html" target="_blank"><code>adb</code> command line tool</a> to setup port forwarding from the device to your computer:</p><p><code>adb reverse tcp:8081 tcp:8081</code></p><p>Alternatively, select "Dev Settings" from the Developer Menu, then update the "Debug server host for device" setting to match the IP address of your computer.</p><blockquote><p>If you run into any issues, it may be possible that one of your Chrome extensions is interacting in unexpected ways with the debugger. Try disabling all of your extensions and re-enabling them one-by-one until you find the problematic extension.</p></blockquote><h3><a class="anchor" name="debugging-with-stetho-http-facebook-github-io-stetho-on-android"></a>Debugging with <a href="http://facebook.github.io/stetho/" target="_blank">Stetho</a> on Android <a class="hash-link" href="docs/debugging.html#debugging-with-stetho-http-facebook-github-io-stetho-on-android">#</a></h3><ol><li><p>In <code>android/app/build.gradle</code>, add these lines in the <code>dependencies</code> section:</p><div class="prism language-javascript">compile <span class="token string">'com.facebook.stetho:stetho:1.3.1'</span>
|
||||
compile <span class="token string">'com.facebook.stetho:stetho-okhttp3:1.3.1'</span></div></li><li><p>In <code>android/app/src/main/java/com/{yourAppName}/MainApplication.java</code>, add the following imports:</p><div class="prism language-javascript">import com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>network<span class="token punctuation">.</span>ReactCookieJarContainer<span class="token punctuation">;</span>
|
||||
import com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>stetho<span class="token punctuation">.</span>Stetho<span class="token punctuation">;</span>
|
||||
import okhttp3<span class="token punctuation">.</span>OkHttpClient<span class="token punctuation">;</span>
|
||||
@@ -29,7 +29,7 @@ import java<span class="token punctuation">.</span>util<span class="token punctu
|
||||
<span class="token punctuation">.</span><span class="token function">addNetworkInterceptor<span class="token punctuation">(</span></span><span class="token keyword">new</span> <span class="token class-name">StethoInterceptor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">build<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
OkHttpClientProvider<span class="token punctuation">.</span><span class="token function">replaceOkHttpClient<span class="token punctuation">(</span></span>client<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div></li><li><p>Run <code>react-native run-android</code></p></li><li><p>In a new chrome tab, open : <code>chrome://inspect</code>, click on 'Inspect device' (the one followed by "Powered by Stetho")</p></li></ol><h2><a class="anchor" name="debugging-native-code"></a>Debugging native code <a class="hash-link" href="docs/debugging.html#debugging-native-code">#</a></h2><p>When working with native code (e.g. when writing native modules) you can launch the app from Android Studio or Xcode and take advantage of the debugging features (setup breakpoints, etc.) as you would in case of building a standard native app.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/platform-specific-code.html#content">← Prev</a><a class="docs-next" href="docs/accessibility.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Debugging.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</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/support.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="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
|
||||
<span class="token punctuation">}</span></div></li><li><p>Run <code>react-native run-android</code></p></li><li><p>In a new Chrome tab, open: <code>chrome://inspect</code>, then click on 'Inspect device' (the one followed by "Powered by Stetho").</p></li></ol><h2><a class="anchor" name="debugging-native-code"></a>Debugging native code <a class="hash-link" href="docs/debugging.html#debugging-native-code">#</a></h2><p>When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.</p></div><div class="docs-prevnext"><a class="docs-prev" href="docs/platform-specific-code.html#content">← Prev</a><a class="docs-next" href="docs/accessibility.html#content">Next →</a></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Debugging.md">edit the content above on GitHub</a> and send us a pull request!</p></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</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/support.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="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></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)
|
||||
|
||||
@@ -92,8 +92,8 @@
|
||||
cd AwesomeProject
|
||||
npm start</div><p>This will start a development server for you, and print a QR code in your terminal.</p><h2><a class="anchor" name="running-your-react-native-application"></a>Running your React Native application <a class="hash-link" href="docs/getting-started.html#running-your-react-native-application">#</a></h2><p>Install the <a href="https://expo.io" target="_blank">Expo</a> client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.</p><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it. Open <code>App.js</code> in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.</p><h3><a class="anchor" name="that-s-it"></a>That's it! <a class="hash-link" href="docs/getting-started.html#that-s-it">#</a></h3><p>Congratulations! You've successfully run and modified your first React Native app.</p><span><center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
|
||||
</span><h2><a class="anchor" name="now-what"></a>Now what? <a class="hash-link" href="docs/getting-started.html#now-what">#</a></h2><ul><li><p>If you're curious to learn more about React Native, continue on
|
||||
to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p></li><li><p>Create React Native App also has a <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md" target="_blank">user guide</a> you can reference if you have questions specific to the tool.</p></li><li><p>If you can't get this to work, see the <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#troubleshooting" target="_blank">Troubleshooting</a> section in the README for Create React Native App.</p></li></ul><h3><a class="anchor" name="caveats"></a>Caveats <a class="hash-link" href="docs/getting-started.html#caveats">#</a></h3><p>Because you don't build any native code when using Create React Native App to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.</p><p>If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "<a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app" target="_blank">eject</a>" eventually to create your own native builds. If you do eject, the "Building Projects with Native Code" instructions will be required to continue working on your project.</p><p>Create React Native App configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check <a href="https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md" target="_blank">this document</a> to find out what versions are supported.</p><p>If you're integrating React Native into an existing project, you'll want to skip Create React Native App and go directly to setting up the native build environment. Select "Building Projects with Native Code" above for instructions on configuring a native build environment for React Native.</p><span><block class="native mac windows linux ios android" />
|
||||
</span><h2><a class="anchor" name="now-what"></a>Now what? <a class="hash-link" href="docs/getting-started.html#now-what">#</a></h2><ul><li><p>Create React Native App also has a <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md" target="_blank">user guide</a> you can reference if you have questions specific to the tool.</p></li><li><p>If you can't get this to work, see the <a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#troubleshooting" target="_blank">Troubleshooting</a> section in the README for Create React Native App.</p></li></ul><p>If you're curious to learn more about React Native, continue on
|
||||
to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p><h3><a class="anchor" name="running-your-app-on-a-simulator-or-virtual-device"></a>Running your app on a simulator or virtual device <a class="hash-link" href="docs/getting-started.html#running-your-app-on-a-simulator-or-virtual-device">#</a></h3><p>Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.</p><p>Once you've set these up, you can launch your app on on an Android Virtual Device by running <code>npm run android</code>, or on the iOS Simulator by running <code>npm run ios</code> (macOS only).</p><h3><a class="anchor" name="caveats"></a>Caveats <a class="hash-link" href="docs/getting-started.html#caveats">#</a></h3><p>Because you don't build any native code when using Create React Native App to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.</p><p>If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "<a href="https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app" target="_blank">eject</a>" eventually to create your own native builds. If you do eject, the "Building Projects with Native Code" instructions will be required to continue working on your project.</p><p>Create React Native App configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check <a href="https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md" target="_blank">this document</a> to find out what versions are supported.</p><p>If you're integrating React Native into an existing project, you'll want to skip Create React Native App and go directly to setting up the native build environment. Select "Building Projects with Native Code" above for instructions on configuring a native build environment for React Native.</p><span><block class="native mac windows linux ios android" />
|
||||
|
||||
</span><span><p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="docs/getting-started.html" onclick="display('guide', 'quickstart')">Create React Native App</a>, you'll need this section.</p>
|
||||
|
||||
@@ -173,15 +173,19 @@ choco install jdk8</div><p>If you have already installed Node on your system, ma
|
||||
|
||||
</span><p><img src="img/AndroidSDKManagerInstallsWindows.png" alt="Android SDK Manager - Installs"></p><span><block class="native mac windows linux android" />
|
||||
|
||||
</span><h4><a class="anchor" name="3-set-up-the-android-home-environment-variable"></a>3. Set up the ANDROID_HOME environment variable <a class="hash-link" href="docs/getting-started.html#3-set-up-the-android-home-environment-variable">#</a></h4><p>The React Native tools require some environment variables to be set up in order to build apps with native code.</p><span><block class="native mac android" />
|
||||
</span><h4><a class="anchor" name="3-configure-the-android-home-environment-variable"></a>3. Configure the ANDROID_HOME environment variable <a class="hash-link" href="docs/getting-started.html#3-configure-the-android-home-environment-variable">#</a></h4><p>The React Native tools require some environment variables to be set up in order to build apps with native code.</p><span><block class="native mac linux android" />
|
||||
|
||||
</span><p>Add the following lines to your <code>~/.profile</code> (or equivalent) config file:</p><div class="prism language-javascript">export ANDROID_HOME<span class="token operator">=</span>$<span class="token punctuation">{</span>HOME<span class="token punctuation">}</span><span class="token operator">/</span>Library<span class="token operator">/</span>Android<span class="token operator">/</span>sdk
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>tools
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><p>Type <code>source ~/.profile</code> to load the config into your current shell.</p><blockquote><p>Please make sure you export the correct path for <code>ANDROID_HOME</code>. If you installed the Android SDK using Homebrew, it would be located at <code>/usr/local/opt/android-sdk</code>. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p></blockquote><span><block class="native linux android" />
|
||||
</span><p>Add the following lines to your <code>$HOME/.bash_profile</code> config file:</p><span><block class="native mac android" />
|
||||
|
||||
</span><p>Add the following lines to your <code>~/.profile</code> (or equivalent) config file:</p><div class="prism language-javascript">export ANDROID_HOME<span class="token operator">=</span>$<span class="token punctuation">{</span>HOME<span class="token punctuation">}</span><span class="token operator">/</span>Android<span class="token operator">/</span>Sdk
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>tools
|
||||
export PATH<span class="token operator">=</span>$<span class="token punctuation">{</span>PATH<span class="token punctuation">}</span><span class="token punctuation">:</span>$<span class="token punctuation">{</span>ANDROID_HOME<span class="token punctuation">}</span><span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><p>Type <code>. ~/.profile</code> to load the config into your current shell.</p><blockquote><p>Please make sure you export the correct path for <code>ANDROID_HOME</code> if you did not install the Android SDK using Android Studio. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p></blockquote><span><block class="native windows android" />
|
||||
</span><div class="prism language-javascript">export ANDROID_HOME<span class="token operator">=</span>$HOME<span class="token operator">/</span>Library<span class="token operator">/</span>Android<span class="token operator">/</span>sdk
|
||||
export PATH<span class="token operator">=</span>$PATH<span class="token punctuation">:</span>$ANDROID_HOME<span class="token operator">/</span>tools
|
||||
export PATH<span class="token operator">=</span>$PATH<span class="token punctuation">:</span>$ANDROID_HOME<span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><span><block class="native linux android" />
|
||||
|
||||
</span><div class="prism language-javascript">export ANDROID_HOME<span class="token operator">=</span>$HOME<span class="token operator">/</span>Android<span class="token operator">/</span>Sdk
|
||||
export PATH<span class="token operator">=</span>$PATH<span class="token punctuation">:</span>$ANDROID_HOME<span class="token operator">/</span>tools
|
||||
export PATH<span class="token operator">=</span>$PATH<span class="token punctuation">:</span>$ANDROID_HOME<span class="token operator">/</span>platform<span class="token operator">-</span>tools</div><span><block class="native mac linux android" />
|
||||
|
||||
</span><blockquote><p><code>.bash_profile</code> is specific to <code>bash</code>. If you're using another shell, you will need to edit the appropriate shell-specific config file.</p></blockquote><p>Type <code>source $HOME/.bash_profile</code> to load the config into your current shell. Verify that ANDROID_HOME has been added to your path by running <code>echo $PATH</code>.</p><blockquote><p>Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p></blockquote><span><block class="native windows android" />
|
||||
|
||||
</span><p>Open the System pane under <strong>System and Security</strong> in the Control Panel, then click on <strong>Change settings...</strong>. Open the <strong>Advanced</strong> tab and click on <strong>Environment Variables...</strong>. Click on <strong>New...</strong> to create a new <code>ANDROID_HOME</code> user variable that points to the path to your Android SDK:</p><p><img src="img/AndroidEnvironmentVariableANDROID_HOME.png" alt="ANDROID_HOME Environment Variable"></p><p>The SDK is installed, by default, at the following location:</p><div class="prism language-javascript">c<span class="token punctuation">:</span>\Users\YOUR_USERNAME\AppData\Local\Android\Sdk</div><p>You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong>.</p><p>Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.</p><span><block class="native linux android" />
|
||||
|
||||
@@ -192,7 +196,7 @@ changes in the filesystem. It is highly recommended you install it for better pe
|
||||
|
||||
</span><h2><a class="anchor" name="creating-a-new-application"></a>Creating a new application <a class="hash-link" href="docs/getting-started.html#creating-a-new-application">#</a></h2><p>Use the React Native command line interface to generate a new React Native project called "AwesomeProject":</p><div class="prism language-javascript">react<span class="token operator">-</span>native init AwesomeProject</div><p>This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see <a href="docs/platform-specific-code.html" target="_blank">Platform Specific Code</a>).</p><span><block class="native mac windows linux android" />
|
||||
|
||||
</span><h2><a class="anchor" name="preparing-the-android-device"></a>Preparing the Android device <a class="hash-link" href="docs/getting-started.html#preparing-the-android-device">#</a></h2><p>You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.</p><p>Either way, you will need to prepare the device to run Android apps for development.</p><h3><a class="anchor" name="using-a-physical-device"></a>Using a physical device <a class="hash-link" href="docs/getting-started.html#using-a-physical-device">#</a></h3><p>If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and <a href="https://developer.android.com/training/basics/firstapp/running-app.html" target="_blank">enabling USB debugging</a>. You can then proceed to the next step.</p><h3><a class="anchor" name="using-a-virtual-device"></a>Using a virtual device <a class="hash-link" href="docs/getting-started.html#using-a-virtual-device">#</a></h3><p>You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p><p><img src="img/react-native-tools-avd.png" alt="Android Studio AVD Manager"></p><p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html" target="_blank">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".</p><span><block class="native windows android" />
|
||||
</span><h2><a class="anchor" name="preparing-the-android-device"></a>Preparing the Android device <a class="hash-link" href="docs/getting-started.html#preparing-the-android-device">#</a></h2><p>You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.</p><p>Either way, you will need to prepare the device to run Android apps for development.</p><h3><a class="anchor" name="using-a-physical-device"></a>Using a physical device <a class="hash-link" href="docs/getting-started.html#using-a-physical-device">#</a></h3><p>If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions <a href="docs/running-on-device.html" target="_blank">here</a>.</p><h3><a class="anchor" name="using-a-virtual-device"></a>Using a virtual device <a class="hash-link" href="docs/getting-started.html#using-a-virtual-device">#</a></h3><p>You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:</p><p><img src="img/react-native-tools-avd.png" alt="Android Studio AVD Manager"></p><p>If you have just installed Android Studio, you will likely need to <a href="https://developer.android.com/studio/run/managing-avds.html" target="_blank">create a new AVD</a>. Select "Create Virtual Device...", then pick any Phone from the list and click "Next".</p><span><block class="native windows android" />
|
||||
|
||||
</span><p><img src="img/CreateAVDWindows.png" alt="Android Studio AVD Manager"></p><span><block class="native mac android" />
|
||||
|
||||
@@ -209,7 +213,7 @@ changes in the filesystem. It is highly recommended you install it for better pe
|
||||
</span><p>Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.</p><span><block class="native mac ios" />
|
||||
|
||||
</span><h2><a class="anchor" name="running-your-react-native-application"></a>Running your React Native application <a class="hash-link" href="docs/getting-started.html#running-your-react-native-application">#</a></h2><p>Run <code>react-native run-ios</code> inside your React Native project folder:</p><div class="prism language-javascript">cd AwesomeProject
|
||||
react<span class="token operator">-</span>native run<span class="token operator">-</span>ios</div><p>You should see your new app running in the iOS Simulator shortly.</p><p><img src="img/iOSSuccess.png" alt="AwesomeProject on iOS"></p><p><code>react-native run-ios</code> is just one way to run your app. You can also run it directly from within Xcode or <a href="https://nuclide.io/" target="_blank">Nuclide</a>.</p><span><block class="native mac windows linux android" />
|
||||
react<span class="token operator">-</span>native run<span class="token operator">-</span>ios</div><p>You should see your new app running in the iOS Simulator shortly.</p><p><img src="img/iOSSuccess.png" alt="AwesomeProject on iOS"></p><p><code>react-native run-ios</code> is just one way to run your app. You can also run it directly from within Xcode or <a href="https://nuclide.io/" target="_blank">Nuclide</a>.</p><blockquote><p>If you can't get this to work, see the <a href="docs/troubleshooting.html#content" target="_blank">Troubleshooting</a> page.</p></blockquote><h3><a class="anchor" name="running-on-a-device"></a>Running on a device <a class="hash-link" href="docs/getting-started.html#running-on-a-device">#</a></h3><p>The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions <a href="docs/running-on-device.html" target="_blank">here</a>.</p><span><block class="native mac windows linux android" />
|
||||
|
||||
</span><h2><a class="anchor" name="running-your-react-native-application"></a>Running your React Native application <a class="hash-link" href="docs/getting-started.html#running-your-react-native-application">#</a></h2><p>Run <code>react-native run-android</code> inside your React Native project folder:</p><div class="prism language-javascript">cd AwesomeProject
|
||||
react<span class="token operator">-</span>native run<span class="token operator">-</span>android</div><p>If everything is set up correctly, you should see your new app running in your Android emulator shortly.</p><span><block class="native mac android" />
|
||||
@@ -218,29 +222,29 @@ react<span class="token operator">-</span>native run<span class="token operator"
|
||||
|
||||
</span><p><img src="img/AndroidSuccessWindows.png" alt="AwesomeProject on Android"></p><span><block class="native mac windows linux android" />
|
||||
|
||||
</span><p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio or <a href="https://nuclide.io/" target="_blank">Nuclide</a>.</p><span><block class="native mac ios android" />
|
||||
</span><p><code>react-native run-android</code> is just one way to run your app - you can also run it directly from within Android Studio or <a href="https://nuclide.io/" target="_blank">Nuclide</a>.</p><blockquote><p>If you can't get this to work, see the <a href="docs/troubleshooting.html#content" target="_blank">Troubleshooting</a> page.</p></blockquote><span><block class="native mac ios android" />
|
||||
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><span><block class="native mac ios" />
|
||||
|
||||
</span><ul><li>Open <code>index.ios.js</code> in your text editor of choice and edit some lines.</li><li>Hit <code>Command⌘ + R</code> in your iOS Simulator to reload the app and see your changes!</li></ul><span><block class="native mac android" />
|
||||
</span><ul><li>Open <code>index.ios.js</code> in your text editor of choice and edit some lines.</li><li>Hit <code>⌘R</code> in your iOS Simulator to reload the app and see your changes!</li></ul><span><block class="native mac android" />
|
||||
|
||||
</span><ul><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu to see your changes!</li></ul><span><block class="native windows linux android" />
|
||||
</span><ul><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to see your changes!</li></ul><span><block class="native windows linux android" />
|
||||
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><ul><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu to see your changes!</li></ul><span><block class="native mac ios android" />
|
||||
</span><h3><a class="anchor" name="modifying-your-app"></a>Modifying your app <a class="hash-link" href="docs/getting-started.html#modifying-your-app">#</a></h3><p>Now that you have successfully run the app, let's modify it.</p><ul><li>Open <code>index.android.js</code> in your text editor of choice and edit some lines.</li><li>Press the <code>R</code> key twice or select <code>Reload</code> from the Developer Menu (<code>⌘M</code>) to see your changes!</li></ul><span><block class="native mac ios android" />
|
||||
|
||||
</span><h3><a class="anchor" name="that-s-it"></a>That's it! <a class="hash-link" href="docs/getting-started.html#that-s-it">#</a></h3><p>Congratulations! You've successfully run and modified your first React Native app.</p><span><center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
|
||||
</span><span><block class="native windows linux android" />
|
||||
|
||||
</span><h3><a class="anchor" name="that-s-it"></a>That's it! <a class="hash-link" href="docs/getting-started.html#that-s-it">#</a></h3><p>Congratulations! You've successfully run and modified a React Native app.</p><span><center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
</span><h3><a class="anchor" name="that-s-it"></a>That's it! <a class="hash-link" href="docs/getting-started.html#that-s-it">#</a></h3><p>Congratulations! You've successfully run and modified your first React Native app.</p><span><center><img src="img/react-native-congratulations.png" width="150"></img></center>
|
||||
|
||||
</span><span><block class="native mac ios" />
|
||||
|
||||
</span><h2><a class="anchor" name="now-what"></a>Now What? <a class="hash-link" href="docs/getting-started.html#now-what">#</a></h2><ul><li><p>If you're curious to learn more about React Native, continue on
|
||||
to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p></li><li><p>If you can't get this to work, see the <a href="docs/troubleshooting.html#content" target="_blank">Troubleshooting</a> page.</p></li><li><p>If you want to add this new React Native code to an existing application, check out the <a href="docs/integration-with-existing-apps.html" target="_blank">Integration guide</a>.</p></li></ul><span><block class="native windows linux mac android" />
|
||||
</span><h2><a class="anchor" name="now-what"></a>Now what? <a class="hash-link" href="docs/getting-started.html#now-what">#</a></h2><ul><li><p>Turn on <a href="docs/debugging.html#reloading-javascript" target="_blank">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li><li><p>If you want to add this new React Native code to an existing application, check out the <a href="docs/integration-with-existing-apps.html" target="_blank">Integration guide</a>.</p></li></ul><p>If you're curious to learn more about React Native, continue on
|
||||
to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p><span><block class="native windows linux mac android" />
|
||||
|
||||
</span><h2><a class="anchor" name="now-what"></a>Now What? <a class="hash-link" href="docs/getting-started.html#now-what">#</a></h2><ul><li><p>If you're curious to learn more about React Native, continue on
|
||||
to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p></li><li><p>If you can't get this to work, see the <a href="docs/troubleshooting.html#content" target="_blank">Troubleshooting</a> page.</p></li><li><p>If you want to add this new React Native code to an existing application, check out the <a href="docs/integration-with-existing-apps.html" target="_blank">Integration guide</a>.</p></li></ul><span><script>
|
||||
</span><h2><a class="anchor" name="now-what"></a>Now what? <a class="hash-link" href="docs/getting-started.html#now-what">#</a></h2><ul><li><p>Turn on <a href="docs/debugging.html#reloading-javascript" target="_blank">Live Reload</a> in the Developer Menu. Your app will now reload automatically whenever you save any changes!</p></li><li><p>If you want to add this new React Native code to an existing application, check out the <a href="docs/integration-with-existing-apps.html" target="_blank">Integration guide</a>.</p></li></ul><p>If you're curious to learn more about React Native, continue on
|
||||
to the <a href="docs/tutorial.html" target="_blank">Tutorial</a>.</p><span><script>
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.getElementsByTagName('block');
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><title>Running On Device</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Running On Device"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" Line truncated
|
||||
<!DOCTYPE html><html><head><title>Running On Device</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Running On Device"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" Line truncated
|
||||
<style>
|
||||
.toggler a {
|
||||
display: inline-block;
|
||||
@@ -26,20 +26,21 @@
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<span>Mobile OS:</span>
|
||||
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
|
||||
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
|
||||
<span>Development OS:</span>
|
||||
<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
|
||||
<a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
|
||||
<a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
|
||||
<span>Target OS:</span>
|
||||
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
|
||||
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
|
||||
|
||||
</div>
|
||||
|
||||
</span><span><block class="linux windows ios" />
|
||||
|
||||
</span><p>A Mac is required in order to build your app for iOS devices.</p><span><block class="mac ios" />
|
||||
</span><h2><a class="anchor" name="running-your-app-on-ios-devices"></a>Running your app on iOS devices <a class="hash-link" href="docs/running-on-device.html#running-your-app-on-ios-devices">#</a></h2><p>A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the <a href="docs/getting-started.html" target="_blank">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><span><block class="mac ios" />
|
||||
|
||||
</span><h2><a class="anchor" name="running-your-app-on-ios-devices"></a>Running your app on iOS devices <a class="hash-link" href="docs/running-on-device.html#running-your-app-on-ios-devices">#</a></h2><p>Register for a <a href="https://developer.apple.com/" target="_blank">Apple developer account</a> if you don't have one yet.</p><p>Connect your 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>Select your app in the Project Navigator and look for the "General" tab. Go to "Signing" and make sure your Apple developer account is selected.</p><p>Open the "Product" menu from Xcode's menubar, then go to "Destination". Look for and select your device from the list. Xcode will then register your device for development.</p><p>If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar. You can now press the <strong>Build and run</strong> button or select "Run" from the "Product" menu. Your app will launch on your device shortly.</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" target="_blank">Launching Your App on a Device</a> docs.</p></blockquote><span><block class="mac windows linux android" />
|
||||
</span><h2><a class="anchor" name="running-your-app-on-ios-devices"></a>Running your app on iOS devices <a class="hash-link" href="docs/running-on-device.html#running-your-app-on-ios-devices">#</a></h2><p>Register for a <a href="https://developer.apple.com/" target="_blank">Apple developer account</a> if you don't have one yet.</p><h3><a class="anchor" name="1-plug-in-your-device-via-usb"></a>1. Plug in your device via USB <a class="hash-link" href="docs/running-on-device.html#1-plug-in-your-device-via-usb">#</a></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" name="2-configure-code-signing"></a>2. Configure code signing <a class="hash-link" href="docs/running-on-device.html#2-configure-code-signing">#</a></h3><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 "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.</p><p><img src="img/RunningOnDeviceCodeSigning.png" alt=""></p><p>Repeat this step for the Tests target in your project.</p><h3><a class="anchor" name="3-build-and-run-your-app"></a>3. Build and Run your app <a class="hash-link" href="docs/running-on-device.html#3-build-and-run-your-app">#</a></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="img/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" target="_blank">Launching Your App on a Device</a> docs.</p></blockquote><span><block class="mac windows linux android" />
|
||||
|
||||
</span><h2><a class="anchor" name="running-your-app-on-android-devices"></a>Running your app on Android devices <a class="hash-link" href="docs/running-on-device.html#running-your-app-on-android-devices">#</a></h2><h3><a class="anchor" name="1-enable-debugging-over-usb"></a>1. Enable Debugging over USB <a class="hash-link" href="docs/running-on-device.html#1-enable-debugging-over-usb">#</a></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 "Developer options" 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 "USB debugging".</p><h3><a class="anchor" name="2-plug-in-your-device-via-usb"></a>2. Plug in your device via USB <a class="hash-link" href="docs/running-on-device.html#2-plug-in-your-device-via-usb">#</a></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><span><block class="linux android" />
|
||||
|
||||
@@ -65,11 +66,11 @@ emulator<span class="token number">-5554</span> offline # Google emulator
|
||||
|
||||
</span><span><block class="mac ios" />
|
||||
|
||||
</span><h2><a class="anchor" name="connecting-to-the-development-server"></a>Connecting to the development server <a class="hash-link" href="docs/running-on-device.html#connecting-to-the-development-server">#</a></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. Enable Live reloading from the <a href="docs/debugging.html#accessing-the-in-app-developer-menu" target="_blank">Developer menu</a> and your app will reload whenever your JavaScript code has changed.</p><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><span><block class="mac windows linux android" />
|
||||
</span><h2><a class="anchor" name="connecting-to-the-development-server"></a>Connecting to the development server <a class="hash-link" href="docs/running-on-device.html#connecting-to-the-development-server">#</a></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="docs/debugging.html#accessing-the-in-app-developer-menu" target="_blank">Developer menu</a>, then enable Live Reload. Your app will reload whenever your JavaScript code has changed.</p><p><img src="img/DeveloperMenu.png" alt=""></p><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><span><block class="mac windows linux android" />
|
||||
|
||||
</span><h2><a class="anchor" name="connecting-to-the-development-server"></a>Connecting to the development server <a class="hash-link" href="docs/running-on-device.html#connecting-to-the-development-server">#</a></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" name="method-1-using-adb-reverse-recommended"></a>Method 1: Using adb reverse (recommended) <a class="hash-link" href="docs/running-on-device.html#method-1-using-adb-reverse-recommended">#</a></h3><span><block class="mac windows linux android" />
|
||||
|
||||
</span><p>You can use this method if your device is running Android 5.0 (Lollipop), it has USB debugging enabled, and it is connected via USB to your development machine.</p><span><block class="mac windows linux android" />
|
||||
</span><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><span><block class="mac windows linux android" />
|
||||
|
||||
</span><p>Run the following in a command prompt:</p><div class="prism language-javascript">$ adb reverse tcp<span class="token punctuation">:</span><span class="token number">8081</span> tcp<span class="token punctuation">:</span><span class="token number">8081</span></div><p>You can now enable Live reloading from the <a href="docs/debugging.html#accessing-the-in-app-developer-menu" target="_blank">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p><h3><a class="anchor" name="method-2-connect-via-wi-fi"></a>Method 2: Connect via Wi-Fi <a class="hash-link" href="docs/running-on-device.html#method-2-connect-via-wi-fi">#</a></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><span><block class="mac android" />
|
||||
|
||||
@@ -81,7 +82,9 @@ emulator<span class="token number">-5554</span> offline # Google emulator
|
||||
|
||||
</span><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="docs/debugging.html#in-app-errors-and-warnings" target="_blank">red screen with an error</a>. This is OK. The following steps will fix that.</li><li>Open the in-app <a href="docs/debugging.html#accessing-the-in-app-developer-menu" target="_blank">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="docs/debugging.html#accessing-the-in-app-developer-menu" target="_blank">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p><span><block class="mac ios" />
|
||||
|
||||
</span><h2><a class="anchor" name="building-your-app-for-production"></a>Building your app for production <a class="hash-link" href="docs/running-on-device.html#building-your-app-for-production">#</a></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><p>Building an app for distribution in the App Store requires using the <code>Release</code> scheme in Xcode. To do this, go to <strong>Product</strong> → <strong>Scheme</strong> → <strong>Edit Scheme (cmd + <)</strong>, make sure you're in the <strong>Run</strong> tab from the side, and set the Build Configuration dropdown to <code>Release</code>.</p><p>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 load the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.</p><blockquote><p>Hint</p><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>Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.</p><h3><a class="anchor" name="app-transport-security"></a>App Transport Security <a class="hash-link" href="docs/running-on-device.html#app-transport-security">#</a></h3><p>App Transport Security is a security feature, added 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.</p><p>ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the <code>NSAllowsArbitraryLoads</code> entry from your <code>Info.plist</code> file in the <code>ios/</code> folder.</p><p>To learn more about how to configure ATS on your own Xcode projects, see <a href="http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/" target="_blank">this post on ATS</a>.</p><span><script>
|
||||
</span><h2><a class="anchor" name="building-your-app-for-production"></a>Building your app for production <a class="hash-link" href="docs/running-on-device.html#building-your-app-for-production">#</a></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" name="1-enable-app-transport-security"></a>1. Enable App Transport Security <a class="hash-link" href="docs/running-on-device.html#1-enable-app-transport-security">#</a></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/" target="_blank">this post</a> to learn how to configure ATS on your project.</p></blockquote><h3><a class="anchor" name="2-configure-release-scheme"></a>2. Configure release scheme <a class="hash-link" href="docs/running-on-device.html#2-configure-release-scheme">#</a></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="img/ConfigureReleaseScheme.png" alt=""></p><h3><a class="anchor" name="3-build-app-for-release"></a>3. Build app for release <a class="hash-link" href="docs/running-on-device.html#3-build-app-for-release">#</a></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><span><block class="mac windows linux android" />
|
||||
|
||||
</span><h2><a class="anchor" name="building-your-app-for-production"></a>Building your app for production <a class="hash-link" href="docs/running-on-device.html#building-your-app-for-production">#</a></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="docs/signed-apk-android.html" target="_blank">generating a signed APK</a> to learn more.</p><span><script>
|
||||
// Convert <div>...<span><block /></span>...</div>
|
||||
// Into <div>...<block />...</div>
|
||||
var blocks = document.getElementsByTagName('block');
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Reference in new issue
Block a user