mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on cbb5083a78423a00b5a98dc314cd6218116bb035
This commit is contained in:
Website Deployment Script
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 377 KiB |
+25
-13
@@ -2,11 +2,23 @@
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<id>https://facebook.github.io/react-native/blog</id>
|
||||
<title>React Native Blog</title>
|
||||
<updated>2019-06-12T06:00:00Z</updated>
|
||||
<updated>2019-07-03T06:00:00Z</updated>
|
||||
<generator>Feed for Node.js</generator>
|
||||
<link rel="alternate" href="https://facebook.github.io/react-native/blog"/>
|
||||
<subtitle>The best place to stay up-to-date with the latest React Native news and events.</subtitle>
|
||||
<logo>https://facebook.github.io/react-native/img/header_logo.png</logo>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Announcing React Native 0.60]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2019/07/03/version-60.html</id>
|
||||
<link href="https://facebook.github.io/react-native/blog/2019/07/03/version-60.html">
|
||||
</link>
|
||||
<updated>2019-07-03T06:00:00Z</updated>
|
||||
<summary type="html"><![CDATA[<p>After months of hard work from hundreds of contributors, the React Native Core team is proud to announce the release of version 0.60. This release handles significant migrations for both Android and iOS platforms, and many issues are resolved too. Th...</p>]]></summary>
|
||||
<author>
|
||||
<name>Ryan Turner</name>
|
||||
<uri>https://twitter.com/turnrye</uri>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[React Native Open Source Update June 2019]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2019/06/12/react-native-open-source-update.html</id>
|
||||
@@ -271,6 +283,18 @@
|
||||
<uri>https://github.com/tenodi</uri>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Introducing Create React Native App]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html</id>
|
||||
<link href="https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html">
|
||||
</link>
|
||||
<updated>2017-03-13T06:00:00Z</updated>
|
||||
<summary type="html"><![CDATA[<p>Today we’re announcing <a href="https://github.com/react-community/create-react-native-app">Create React Native App</a>: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of <a href="https://github.com/facebookincubator/create-react-app">Create React App</a> and is the product of a collaboration between <a href="https://code.facebook.com">Facebook</a> a...</p>]]></summary>
|
||||
<author>
|
||||
<name>Adam Perry</name>
|
||||
<uri>https://github.com/dikaiosune</uri>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[idx: The Existential Function]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html</id>
|
||||
@@ -295,18 +319,6 @@
|
||||
<uri>https://github.com/sahrens</uri>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Introducing Create React Native App]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html</id>
|
||||
<link href="https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html">
|
||||
</link>
|
||||
<updated>2017-03-13T06:00:00Z</updated>
|
||||
<summary type="html"><![CDATA[<p>Today we’re announcing <a href="https://github.com/react-community/create-react-native-app">Create React Native App</a>: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of <a href="https://github.com/facebookincubator/create-react-app">Create React App</a> and is the product of a collaboration between <a href="https://code.facebook.com">Facebook</a> a...</p>]]></summary>
|
||||
<author>
|
||||
<name>Adam Perry</name>
|
||||
<uri>https://github.com/dikaiosune</uri>
|
||||
</author>
|
||||
</entry>
|
||||
<entry>
|
||||
<title type="html"><![CDATA[Using Native Driver for Animated]]></title>
|
||||
<id>https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html</id>
|
||||
|
||||
+15
-8
@@ -4,7 +4,7 @@
|
||||
<title>React Native Blog</title>
|
||||
<link>https://facebook.github.io/react-native/blog</link>
|
||||
<description>The best place to stay up-to-date with the latest React Native news and events.</description>
|
||||
<lastBuildDate>Wed, 12 Jun 2019 06:00:00 GMT</lastBuildDate>
|
||||
<lastBuildDate>Wed, 03 Jul 2019 06:00:00 GMT</lastBuildDate>
|
||||
<docs>http://blogs.law.harvard.edu/tech/rss</docs>
|
||||
<generator>Feed for Node.js</generator>
|
||||
<image>
|
||||
@@ -12,6 +12,13 @@
|
||||
<url>https://facebook.github.io/react-native/img/header_logo.png</url>
|
||||
<link>https://facebook.github.io/react-native/blog</link>
|
||||
</image>
|
||||
<item>
|
||||
<title><![CDATA[Announcing React Native 0.60]]></title>
|
||||
<link>https://facebook.github.io/react-native/blog/2019/07/03/version-60.html</link>
|
||||
<guid>https://facebook.github.io/react-native/blog/2019/07/03/version-60.html</guid>
|
||||
<pubDate>Wed, 03 Jul 2019 06:00:00 GMT</pubDate>
|
||||
<description><![CDATA[<p>After months of hard work from hundreds of contributors, the React Native Core team is proud to announce the release of version 0.60. This release handles significant migrations for both Android and iOS platforms, and many issues are resolved too. Th...</p>]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[React Native Open Source Update June 2019]]></title>
|
||||
<link>https://facebook.github.io/react-native/blog/2019/06/12/react-native-open-source-update.html</link>
|
||||
@@ -166,6 +173,13 @@
|
||||
<pubDate>Wed, 21 Jun 2017 06:00:00 GMT</pubDate>
|
||||
<description><![CDATA[<p>At <a href="https://shoutem.github.io/">Shoutem</a>, we've been fortunate enough to work with React Native from its very beginnings. We decided we wanted to be part of the amazing community from day one. Soon enough, we realized it's almost impossible to keep up with the pace the community ...</p>]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[Introducing Create React Native App]]></title>
|
||||
<link>https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html</link>
|
||||
<guid>https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html</guid>
|
||||
<pubDate>Mon, 13 Mar 2017 06:00:00 GMT</pubDate>
|
||||
<description><![CDATA[<p>Today we’re announcing <a href="https://github.com/react-community/create-react-native-app">Create React Native App</a>: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of <a href="https://github.com/facebookincubator/create-react-app">Create React App</a> and is the product of a collaboration between <a href="https://code.facebook.com">Facebook</a> a...</p>]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[idx: The Existential Function]]></title>
|
||||
<link>https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html</link>
|
||||
@@ -180,13 +194,6 @@
|
||||
<pubDate>Mon, 13 Mar 2017 06:00:00 GMT</pubDate>
|
||||
<description><![CDATA[<p>Many of you have started playing with some of our new List components already after our <a href="https://www.facebook.com/groups/react.native.community/permalink/921378591331053">teaser announcement in the community group</a>, but we are officially announcing them today! No more <code>ListView</code>s or <code>DataSource</code>s, stale rows, ignored bugs, or excessive ...</p>]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[Introducing Create React Native App]]></title>
|
||||
<link>https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html</link>
|
||||
<guid>https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html</guid>
|
||||
<pubDate>Mon, 13 Mar 2017 06:00:00 GMT</pubDate>
|
||||
<description><![CDATA[<p>Today we’re announcing <a href="https://github.com/react-community/create-react-native-app">Create React Native App</a>: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of <a href="https://github.com/facebookincubator/create-react-app">Create React App</a> and is the product of a collaboration between <a href="https://code.facebook.com">Facebook</a> a...</p>]]></description>
|
||||
</item>
|
||||
<item>
|
||||
<title><![CDATA[Using Native Driver for Animated]]></title>
|
||||
<link>https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html</link>
|
||||
|
||||
+29
-18
File diff suppressed because one or more lines are too long
+18
-30
File diff suppressed because one or more lines are too long
+44
-64
File diff suppressed because one or more lines are too long
+51
-12
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+35
-34
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.10/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.10/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.10/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
+35
-34
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.11/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.11/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.11/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
+35
-34
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.12/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.12/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.12/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
+35
-34
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.13/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.13/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.13/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
+35
-34
@@ -75,28 +75,21 @@
|
||||
<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">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">Upgrading Expo SDK Walkthrough</a> for up-to-date information about upgrading your project.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="react-native-projects"></a><a href="#react-native-projects" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native projects</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. Here's what you need to do to upgrade from an older version of React Native.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-based-on-git"></a><a href="#upgrade-based-on-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade based on Git</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/react-native-cli">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, thanks to the <a href="https://github.com/react-native-community/rn-diff-purge">rn-diff-purge</a> project.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-make-sure-your-project-uses-git"></a><a href="#1-make-sure-your-project-uses-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Make sure your project uses Git</h4>
|
||||
<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">React Native CLI</a> or manually with <a href="https://github.com/react-native-community/upgrade-helper">Upgrade Helper</a>.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="react-native-cli"></a><a href="#react-native-cli" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>React Native CLI</h3>
|
||||
<p>The <a href="https://github.com/react-native-community/cli">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">rn-diff-purge</a> project to find out which files need to be created, removed or modified.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-run-the-upgrade-command"></a><a href="#1-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Run the <code>upgrade</code> command</h4>
|
||||
<blockquote>
|
||||
<p>This step applies only to projects that don't use Git. Skip it if yours use it.</p>
|
||||
<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>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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init
|
||||
git add .
|
||||
git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
</code></pre>
|
||||
<p>After the upgrade is done and conflicts resolved, you can remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-run-the-upgrade-command"></a><a href="#2-run-the-upgrade-command" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Run the <code>upgrade</code> command</h4>
|
||||
<p>Run the following command to start the process of upgrading to the latest version:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>You may specify a React Native version by passing an argument, e.g. to upgrade to <code>0.59.0-rc.0</code> run:</p>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade 0.59.0-rc.0
|
||||
</code></pre>
|
||||
<p>The project is upgraded using <code>git apply</code> with 3-way merge. That's why it may happen you'll need to resolve some conflicts.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="4-resolve-the-conflicts"></a><a href="#4-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>4. Resolve the conflicts</h4>
|
||||
<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 class="anchor" aria-hidden="true" id="2-resolve-the-conflicts"></a><a href="#2-resolve-the-conflicts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Resolve the conflicts</h4>
|
||||
<p>Conflicted files include delimiters which make very clear where the changes come from. For example:</p>
|
||||
<pre><code class="hljs"><span class="hljs-number">13</span>B07F951A680F5B00A75B9A <span class="hljs-comment">/* Release */</span> = {
|
||||
<span class="hljs-attr">isa</span> = XCBuildConfiguration;
|
||||
@@ -119,25 +112,22 @@ git commit -m <span class="hljs-string">"upgrade RN"</span>
|
||||
<span class="hljs-string">"$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**"</span>,
|
||||
);
|
||||
</code></pre>
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native dev team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="alternative"></a><a href="#alternative" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Alternative</h3>
|
||||
<p>Use this only in case the above didn't work.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="1-upgrade-the-react-native-dependency"></a><a href="#1-upgrade-the-react-native-dependency" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Upgrade the <code>react-native</code> dependency</h4>
|
||||
<p>Note the latest version of the <code>react-native</code> npm package <a href="https://www.npmjs.com/package/react-native">from here</a> (or use <code>npm info react-native</code> to check).</p>
|
||||
<p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react-native@X.Y
|
||||
<span class="hljs-comment"># where X.Y is the semantic version you are upgrading to</span>
|
||||
npm WARN peerDependencies The peer dependency react@~R included from react-native...
|
||||
<p>You can think of "ours" as "your team" and "theirs" as "the React Native development team".</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="upgrade-helper"></a><a href="#upgrade-helper" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Upgrade Helper</h3>
|
||||
<p>The <a href="https://react-native-community.github.io/upgrade-helper/">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 class="anchor" aria-hidden="true" id="1-select-the-versions"></a><a href="#1-select-the-versions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Select the versions</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 class="anchor" aria-hidden="true" id="2-upgrade-dependencies"></a><a href="#2-upgrade-dependencies" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade dependencies</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>
|
||||
<pre><code class="hljs css language-sh"><span class="hljs-comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
|
||||
yarn add react-native@{{VERSION}}
|
||||
yarn add react@{{REACT_VERSION}}
|
||||
</code></pre>
|
||||
<p>If you saw a warning about the peerDependency, also upgrade <code>react</code> by running:</p>
|
||||
<pre><code class="hljs css language-sh">$ npm install --save react@R
|
||||
<span class="hljs-comment"># where R is the new version of react from the peerDependency warning you saw</span>
|
||||
</code></pre>
|
||||
<h4><a class="anchor" aria-hidden="true" id="2-upgrade-your-project-templates"></a><a href="#2-upgrade-your-project-templates" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Upgrade your project templates</h4>
|
||||
<p>The new npm package may contain updates to the files that are normally generated when you run <code>react-native init</code>, like the iOS and the Android sub-projects.</p>
|
||||
<p>You may consult <a href="https://github.com/pvinis/rn-diff-purge">rn-diff-purge</a> to see if there were changes in the project template files. In case there weren't any, simply rebuild the project and continue developing. In case of minor changes, you may update your project manually and rebuild.</p>
|
||||
<p>If there were major changes, run this in a terminal to get these:</p>
|
||||
<pre><code class="hljs css language-sh">$ react-native upgrade
|
||||
<h4><a class="anchor" aria-hidden="true" id="3-upgrade-your-project-files"></a><a href="#3-upgrade-your-project-files" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Upgrade your project files</h4>
|
||||
<p>The new release may contain updates to other files that are generated when you run <code>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 can just rebuild the project and 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>
|
||||
<pre><code class="hljs css language-sh">react-native upgrade
|
||||
</code></pre>
|
||||
<p>This will check your files against the latest template and perform the following:</p>
|
||||
<ul>
|
||||
@@ -145,8 +135,19 @@ npm WARN peerDependencies The peer dependency react@~R included from react-nativ
|
||||
<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>
|
||||
<h2><a class="anchor" aria-hidden="true" id="manual-upgrades"></a><a href="#manual-upgrades" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Manual Upgrades</h2>
|
||||
<p>Some upgrades require manual steps, e.g. 0.28 to 0.29, or 0.56 to 0.57. Be sure to check the <a href="https://github.com/facebook/react-native/releases">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
<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">release notes</a> when upgrading so that you can identify any manual changes your particular project may require.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" aria-hidden="true" id="troubleshooting"></a><a href="#troubleshooting" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Troubleshooting</h3>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-don-t-use-git" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I want to upgrade with React Native CLI but I don't use Git</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">install Git</a> on your system in order to use <code>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>
|
||||
<pre><code class="hljs css language-sh">git init <span class="hljs-comment"># Initialize a Git repository</span>
|
||||
git add . <span class="hljs-comment"># Stage all the current files</span>
|
||||
git commit -m <span class="hljs-string">"Upgrade react-native"</span> <span class="hljs-comment"># Save the current files in a commit</span>
|
||||
</code></pre>
|
||||
<p>After you finish upgrading you may remove the <code>.git</code> directory.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version"></a><a href="#i-have-done-all-the-changes-but-my-app-is-still-using-an-old-version" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>I have done all the changes but my app is still using an old version</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">react-native-clean-project</a> to clear all your project's cache and then you can run it again.</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/react-native/docs/0.14/running-on-device"><span class="arrow-prev">← </span><span>Running On Device</span></a><a class="docs-next button" href="/react-native/docs/0.14/troubleshooting"><span>Troubleshooting</span><span class="arrow-next"> →</span></a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who's using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
document.addEventListener('keyup', function(e) {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user