mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
45 lines
39 KiB
HTML
45 lines
39 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
|
|
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
|
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
|
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Running On Device · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Running On Device · React Native"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/running-on-device"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/running-on-device"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.ca40cabd.css">
|
|
<link rel="preload" href="/styles.07d522c6.js" as="script">
|
|
<link rel="preload" href="/runtime~main.56c3f166.js" as="script">
|
|
<link rel="preload" href="/main.5a3c9855.js" as="script">
|
|
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
|
|
<link rel="preload" href="/2.58cb5d3d.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.a824c215.js" as="script">
|
|
<link rel="preload" href="/943.8b024446.js" as="script">
|
|
<link rel="preload" href="/ee5b3385.b4fff665.js" as="script">
|
|
<link rel="preload" href="/17896441.0c201679.js" as="script">
|
|
<link rel="preload" href="/ab23b990.ddbf89b6.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/running-on-device">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/running-on-device">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/running-on-device">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/running-on-device">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/running-on-device">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/running-on-device">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/running-on-device">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/running-on-device">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/running-on-device">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/running-on-device">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/upgrading">Upgrading to new React Native versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/profiling">Profiling</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/removing-default-permissions">Removing Default Permissions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/app-extensions">App Extensions</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Running On Device</h1></header><div class="markdown"><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 Expo CLI or 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—but 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="/docs/environment-setup">environment setup guide</a>.</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs pill-tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">Android</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">iOS</li></ul><div role="tabpanel" class="margin-vert--md"><div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="running-your-app-on-android-devices"></a>Running your app on Android devices<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-your-app-on-android-devices" title="Direct link to heading">#</a></h2><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="development-os"></a>Development OS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#development-os" title="Direct link to heading">#</a></h4><div><ul role="tablist" aria-orientation="horizontal" class="tabs pill-tabs"><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">macOS</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Windows</li><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">Linux</li></ul><div role="tabpanel" class="margin-vert--md"><div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="1-enable-debugging-over-usb-2"></a>1. Enable Debugging over USB<a aria-hidden="true" tabindex="-1" class="hash-link" href="#1-enable-debugging-over-usb-2" title="Direct link to heading">#</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> → <strong>Software information</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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="2-plug-in-your-device-via-usb-2"></a>2. Plug in your device via USB<a aria-hidden="true" tabindex="-1" class="hash-link" href="#2-plug-in-your-device-via-usb-2" title="Direct link to heading">#</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><p>Next, check the manufacturer code by using <code>lsusb</code> (on mac, you must first <a href="https://github.com/jlhonora/lsusb" target="_blank" rel="noopener noreferrer">install lsusb</a>). <code>lsusb</code> should output something like this:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-bash codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ lsusb</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 002 Device 002: ID </span><span class="token number" style="color:#5a9bcf">8087</span><span class="token plain">:0024 Intel Corp. Integrated Rate Matching Hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 002 Device 001: ID 1d6b:0002 Linux Foundation </span><span class="token number" style="color:#5a9bcf">2.0</span><span class="token plain"> root hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 001 Device 003: ID 22b8:2e76 Motorola PCS</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 001 Device 002: ID </span><span class="token number" style="color:#5a9bcf">8087</span><span class="token plain">:0024 Intel Corp. Integrated Rate Matching Hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 001 Device 001: ID 1d6b:0002 Linux Foundation </span><span class="token number" style="color:#5a9bcf">2.0</span><span class="token plain"> root hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 004 Device 001: ID 1d6b:0003 Linux Foundation </span><span class="token number" style="color:#5a9bcf">3.0</span><span class="token plain"> root hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 003 Device 001: ID 1d6b:0002 Linux Foundation </span><span class="token number" style="color:#5a9bcf">2.0</span><span class="token plain"> root hub</span></div></div></div></div></div><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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-bash codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ lsusb</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 002 Device 002: ID </span><span class="token number" style="color:#5a9bcf">8087</span><span class="token plain">:0024 Intel Corp. Integrated Rate Matching Hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 002 Device 001: ID 1d6b:0002 Linux Foundation </span><span class="token number" style="color:#5a9bcf">2.0</span><span class="token plain"> root hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 001 Device 002: ID </span><span class="token number" style="color:#5a9bcf">8087</span><span class="token plain">:0024 Intel Corp. Integrated Rate Matching Hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 001 Device 001: ID 1d6b:0002 Linux Foundation </span><span class="token number" style="color:#5a9bcf">2.0</span><span class="token plain"> root hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 004 Device 001: ID 1d6b:0003 Linux Foundation </span><span class="token number" style="color:#5a9bcf">3.0</span><span class="token plain"> root hub</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Bus 003 Device 001: ID 1d6b:0002 Linux Foundation </span><span class="token number" style="color:#5a9bcf">2.0</span><span class="token plain"> root hub</span></div></div></div></div></div><p>You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" 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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token builtin class-name" style="color:#fac863">echo</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">|</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">sudo</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">tee</span><span class="token plain"> /etc/udev/rules.d/51-android-usb.rules</span></div></div></div></div></div><p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p><p>Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running <code>adb devices</code>.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ adb devices</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">List of devices attached</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">emulator-5554 offline </span><span class="token comment" style="color:#93a1a1"># Google emulator</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">14ed2fcc device </span><span class="token comment" style="color:#93a1a1"># Physical device</span></div></div></div></div></div><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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="3-run-your-app-2"></a>3. Run your app<a aria-hidden="true" tabindex="-1" class="hash-link" href="#3-run-your-app-2" title="Direct link to heading">#</a></h3><p>Type the following in your command prompt to install and launch your app on the device:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ npx react-native run-android</span></div></div></div></div></div><blockquote><p>If you get a "bridge configuration isn't available" error, see <a href="/docs/running-on-device#method-1-using-adb-reverse-recommended">Using adb reverse</a>.</p></blockquote><blockquote><p>Hint: You can also use the <code>React Native CLI</code> to generate and run a <code>Release</code> build (e.g. <code>npx react-native run-android --variant=release</code>).</p></blockquote><h2>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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="method-1-using-adb-reverse-recommended-2"></a>Method 1: Using adb reverse (recommended)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#method-1-using-adb-reverse-recommended-2" title="Direct link to heading">#</a></h3><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>Run the following in a command prompt:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ adb -s </span><span class="token operator" style="color:#fc929e"><</span><span class="token plain">device name</span><span class="token operator" style="color:#fc929e">></span><span class="token plain"> reverse tcp:8081 tcp:8081</span></div></div></div></div></div><p>To find the device name, run the following adb command:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ adb devices</span></div></div></div></div></div><p>You can now enable Live reloading from the <a href="/docs/debugging#accessing-the-in-app-developer-menu">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="method-2-connect-via-wi-fi-2"></a>Method 2: Connect via Wi-Fi<a aria-hidden="true" tabindex="-1" class="hash-link" href="#method-2-connect-via-wi-fi-2" title="Direct link to heading">#</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><p>Open a terminal and type <code>/sbin/ifconfig</code> to find your machine's IP address.</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="/docs/debugging#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="/docs/debugging#accessing-the-in-app-developer-menu">Developer menu</a>.</li><li>Go to <strong>Dev Settings</strong> → <strong>Debug server host & port 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#accessing-the-in-app-developer-menu">Developer menu</a>. Your app will reload whenever your JavaScript code has changed.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="building-your-app-for-production-2"></a>Building your app for production<a aria-hidden="true" tabindex="-1" class="hash-link" href="#building-your-app-for-production-2" title="Direct link to heading">#</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">generating a signed APK</a> to learn more.</p></div></div></div></div></div></div></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.63/running-on-device.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-11-27T19:06:31.000Z" class="docLastUpdatedAt_1gIo">11/27/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/out-of-tree-platforms"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Out-of-Tree Platforms</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/fast-refresh"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Fast Refresh »</div></a></div></nav></div></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2020 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.07d522c6.js"></script>
|
|
<script src="/runtime~main.56c3f166.js"></script>
|
|
<script src="/main.5a3c9855.js"></script>
|
|
<script src="/1.ba9ce8bd.js"></script>
|
|
<script src="/2.58cb5d3d.js"></script>
|
|
<script src="/1f391b9e.a824c215.js"></script>
|
|
<script src="/943.8b024446.js"></script>
|
|
<script src="/ee5b3385.b4fff665.js"></script>
|
|
<script src="/17896441.0c201679.js"></script>
|
|
<script src="/ab23b990.ddbf89b6.js"></script>
|
|
</body>
|
|
</html> |