mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
45 lines
45 KiB
HTML
45 lines
45 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.0.2/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Upgrading to new React Native versions · 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="Upgrading to new React Native versions · React Native"><meta data-react-helmet="true" name="description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you."><meta data-react-helmet="true" property="og:description" content="Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/upgrading"><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/upgrading"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.81698b96.css">
|
|
<link rel="preload" href="/styles.73cf9778.js" as="script">
|
|
<link rel="preload" href="/runtime~main.247cada2.js" as="script">
|
|
<link rel="preload" href="/main.3b1f3498.js" as="script">
|
|
<link rel="preload" href="/1.17a0cf36.js" as="script">
|
|
<link rel="preload" href="/2.37a050b1.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.c148b120.js" as="script">
|
|
<link rel="preload" href="/939.41ec4d67.js" as="script">
|
|
<link rel="preload" href="/ee5b3385.90d27433.js" as="script">
|
|
<link rel="preload" href="/17896441.7d7633c0.js" as="script">
|
|
<link rel="preload" href="/0ed30eb7.c67e5e58.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/upgrading">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/upgrading">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/upgrading">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/upgrading">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/upgrading">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/upgrading">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/upgrading">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/upgrading">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/upgrading">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/upgrading">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 class="menu__link" 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 aria-current="page" class="menu__link menu__link--active active" 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 Components and Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules Setup</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/native-modules-android">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-android">Native UI Components</a></li><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/native-modules-ios">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">Native UI Components</a></li><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 docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Upgrading to new React Native versions</h1></header><div class="markdown"><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="expo-projects"></a>Expo projects<a aria-hidden="true" tabindex="-1" class="hash-link" href="#expo-projects" title="Direct link to heading">#</a></h2><p>Upgrading your Expo project to a new version of React Native requires updating the <code>react-native</code>, <code>react</code>, and <code>expo</code> package versions in your <code>package.json</code> file. Please refer to <a href="https://docs.expo.io/versions/latest/sdk/#sdk-version" target="_blank" rel="noopener noreferrer">this list</a> to find out what versions are supported. You will also need to set the correct <code>sdkVersion</code> in your <code>app.json</code> file.</p><p>See the <a href="https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough" target="_blank" rel="noopener noreferrer">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="react-native-projects"></a>React Native projects<a aria-hidden="true" tabindex="-1" class="hash-link" href="#react-native-projects" title="Direct link to heading">#</a></h2><p>Because typical React Native projects are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. There's currently two ways for upgrading your React Native project: by using <a href="https://github.com/react-native-community/cli" target="_blank" rel="noopener noreferrer">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper" target="_blank" rel="noopener noreferrer">Upgrade Helper</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="react-native-cli"></a>React Native CLI<a aria-hidden="true" tabindex="-1" class="hash-link" href="#react-native-cli" title="Direct link to heading">#</a></h3><p>The <a href="https://github.com/react-native-community/cli" target="_blank" rel="noopener noreferrer">React Native CLI</a> comes with <code>upgrade</code> command that provides a one-step operation to upgrade the source files with a minimum of conflicts, it internally uses <a href="https://github.com/react-native-community/rn-diff-purge" target="_blank" rel="noopener noreferrer">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="1-run-the-upgrade-command"></a>1. Run the <code>upgrade</code> command<a aria-hidden="true" tabindex="-1" class="hash-link" href="#1-run-the-upgrade-command" title="Direct link to heading">#</a></h4><blockquote><p>The <code>upgrade</code> command works on top of Git by using <code>git apply</code> with 3-way merge, therefore it's required to use Git in order for this to work, if you don't use Git but still want to use this solution then you can check out how to do it in the <a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git">Troubleshooting</a> section.</p></blockquote><p>Run the following command to start the process of upgrading to the latest version:</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 upgrade</span></div></div></div></div></div><p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.61.0-rc.0</code> run:</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 upgrade </span><span class="token number" style="color:#5a9bcf">0.61</span><span class="token plain">.0-rc.0</span></div></div></div></div></div><p>The project is upgraded using <code>git apply</code> with 3-way merge, it may happen that you'll need to resolve a few conflicts after it's finished.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="2-resolve-the-conflicts"></a>2. Resolve the conflicts<a aria-hidden="true" tabindex="-1" class="hash-link" href="#2-resolve-the-conflicts" title="Direct link to heading">#</a></h4><p>Conflicted files include delimiters which make very clear where the changes come from. For example:</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-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token number" style="color:#5a9bcf">13</span><span class="token plain">B07F951A680F5B00A75B9A </span><span class="token comment" style="color:#93a1a1">/* Release */</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> isa </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> XCBuildConfiguration</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> buildSettings </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">ASSETCATALOG_COMPILER_APPICON_NAME</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> AppIcon</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e"><<</span><span class="token operator" style="color:#fc929e"><<</span><span class="token operator" style="color:#fc929e"><<</span><span class="token operator" style="color:#fc929e"><</span><span class="token plain"> ours</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">CODE_SIGN_IDENTITY</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"iPhone Developer"</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">FRAMEWORK_SEARCH_PATHS</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"$(inherited)"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"$(PROJECT_DIR)/HockeySDK.embeddedframework"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">===</span><span class="token operator" style="color:#fc929e">===</span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">CURRENT_PROJECT_VERSION</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">>>></span><span class="token operator" style="color:#fc929e">>>></span><span class="token operator" style="color:#fc929e">></span><span class="token plain"> theirs</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">HEADER_SEARCH_PATHS</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"$(inherited)"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Applications</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Xcode</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">app</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Contents</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Developer</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">Toolchains</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">XcodeDefault</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">xctoolchain</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">usr</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">include</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"$(SRCROOT)/../node_modules/react-native/React/**"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="upgrade-helper"></a>Upgrade Helper<a aria-hidden="true" tabindex="-1" class="hash-link" href="#upgrade-helper" title="Direct link to heading">#</a></h3><p>The <a href="https://react-native-community.github.io/upgrade-helper/" target="_blank" rel="noopener noreferrer">Upgrade Helper</a> is a web tool to help you out when upgrading your apps by providing the full set of changes happening between any two versions. It also shows comments on specific files to help understanding why that change is needed.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="1-select-the-versions"></a>1. Select the versions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#1-select-the-versions" title="Direct link to heading">#</a></h4><p>You first need to select from and to which version you wish to upgrade, by default the latest major versions are selected. After selecting you can click the button "Show me how to upgrade".</p><p>💡 Major updates will show an "useful content" section on the top with links to help you out when upgrading.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="2-upgrade-dependencies"></a>2. Upgrade dependencies<a aria-hidden="true" tabindex="-1" class="hash-link" href="#2-upgrade-dependencies" title="Direct link to heading">#</a></h4><p>The first file that is shown is the <code>package.json</code>, it's good to update the dependencies that are showing in there. For example, if <code>react-native</code> and <code>react</code> appears as changes then you can install it in your project by running <code>yarn add</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 comment" style="color:#93a1a1"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function" style="color:#79b6f2">yarn</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">add</span><span class="token plain"> react-native@</span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">VERSION</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function" style="color:#79b6f2">yarn</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">add</span><span class="token plain"> react@</span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">REACT_VERSION</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="3-upgrade-your-project-files"></a>3. Upgrade your project files<a aria-hidden="true" tabindex="-1" class="hash-link" href="#3-upgrade-your-project-files" title="Direct link to heading">#</a></h4><p>The new release may contain updates to other files that are generated when you run <code>npx react-native init</code>, those files are listed after the <code>package.json</code> in the Upgrade Helper page. If there aren't other changes then you only need to rebuild the project to continue developing.</p><p>In case there are changes then you can either update them manually by copying and pasting from the changes in the page or you can do it with the React Native CLI upgrade command by 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 plain">npx react-native upgrade</span></div></div></div></div></div><p>This will check your files against the latest template and perform the following:</p><ul><li>If there is a new file in the template, it is created.</li><li>If a file in the template is identical to your file, it is skipped.</li><li>If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.</li></ul><blockquote><p>Some upgrades won't be done automatically with the React Native CLI and require manual work, e.g. <code>0.28</code> to <code>0.29</code>, or <code>0.56</code> to <code>0.57</code>. Make sure to check the <a href="https://github.com/facebook/react-native/releases" target="_blank" rel="noopener noreferrer">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="troubleshooting"></a>Troubleshooting<a aria-hidden="true" tabindex="-1" class="hash-link" href="#troubleshooting" title="Direct link to heading">#</a></h3><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="i-want-to-upgrade-with-react-native-cli-but-i-dont-use-git"></a>I want to upgrade with React Native CLI but I don't use Git<a aria-hidden="true" tabindex="-1" class="hash-link" href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-use-git" title="Direct link to heading">#</a></h4><p>While your project does not have to be handled by the Git versioning system -- you can use Mercurial, SVN, or nothing -- you will still need to <a href="https://git-scm.com/downloads" target="_blank" rel="noopener noreferrer">install Git</a> on your system in order to use <code>npx react-native upgrade</code>. Git will also need to be available in the <code>PATH</code>. If your project doesn't use Git, initialize it and commit:</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 function" style="color:#79b6f2">git</span><span class="token plain"> init </span><span class="token comment" style="color:#93a1a1"># Initialize a Git repository</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function" style="color:#79b6f2">git</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">add</span><span class="token plain"> </span><span class="token builtin class-name" style="color:#fac863">.</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1"># Stage all the current files</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token function" style="color:#79b6f2">git</span><span class="token plain"> commit -m </span><span class="token string" style="color:#8dc891">"Upgrade react-native"</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1"># Save the current files in a commit</span></div></div></div></div></div><p>After you finish upgrading you may remove the <code>.git</code> directory.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a>I have done all the changes but my app is still using an old version<a aria-hidden="true" tabindex="-1" class="hash-link" href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" title="Direct link to heading">#</a></h4><p>These sort of errors are usually related to caching, it's recommended to install <a href="https://github.com/pmadruga/react-native-clean-project" target="_blank" rel="noopener noreferrer">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p></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/upgrading.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-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/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/typescript"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Using TypeScript</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/style"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Style »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#expo-projects" class="table-of-contents__link">Expo projects</a></li><li><a href="#react-native-projects" class="table-of-contents__link">React Native projects</a><ul><li><a href="#react-native-cli" class="table-of-contents__link">React Native CLI</a></li><li><a href="#upgrade-helper" class="table-of-contents__link">Upgrade Helper</a></li><li><a href="#troubleshooting" class="table-of-contents__link">Troubleshooting</a></li></ul></li></ul></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.73cf9778.js"></script>
|
|
<script src="/runtime~main.247cada2.js"></script>
|
|
<script src="/main.3b1f3498.js"></script>
|
|
<script src="/1.17a0cf36.js"></script>
|
|
<script src="/2.37a050b1.js"></script>
|
|
<script src="/1f391b9e.c148b120.js"></script>
|
|
<script src="/939.41ec4d67.js"></script>
|
|
<script src="/ee5b3385.90d27433.js"></script>
|
|
<script src="/17896441.7d7633c0.js"></script>
|
|
<script src="/0ed30eb7.c67e5e58.js"></script>
|
|
</body>
|
|
</html> |