Deploy website

Deploy website version based on 02023d54ab92f96c1cf3c7dba9c11f11cb39dabe
2025-11-01 09:14:26 +00:00 · 2020-03-20 13:51:26 +00:00
parent 29bd79b61e
commit ead287d472
725 changed files with 3100 additions and 3080 deletions
@@ -90,7 +90,7 @@
 <p>Button is meant to work great and look native on every platform, so it won't support all the bells and whistles that custom buttons do. It is a great starting point, but is not meant to replace all your existing buttons. To learn more, check out the <a href="/docs/button">new Button documentation</a>, complete with a runnable example!</p>
 <h2><a class="anchor" aria-hidden="true" id="speed-up-react-native-init-using-yarn"></a><a href="#speed-up-react-native-init-using-yarn" 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>Speed up <code>react-native init</code> using Yarn</h2>
 <p>You can now use <a href="https://yarnpkg.com/">Yarn</a>, the new package manager for JavaScript, to speed up <code>react-native init</code> significantly. To see the speedup please <a href="https://yarnpkg.com/en/docs/install">install yarn</a> and upgrade your <code>react-native-cli</code> to 1.2.0:</p>
-<pre><code class="hljs">$ <span class="hljs-built_in">npm</span> install -g react-<span class="hljs-keyword">native</span>-cli
+<pre><code class="hljs css language-sh">$ <span class="token function">npm</span> <span class="token function">install</span> -g react-native-cli
 </code></pre>
 <p>You should now see “Using yarn” when setting up new apps:</p>
 <p><img src="/blog/assets/yarn-rncli.png" alt="Using yarn"></p>
@@ -90,7 +90,7 @@
 <p>Button is meant to work great and look native on every platform, so it won't support all the bells and whistles that custom buttons do. It is a great starting point, but is not meant to replace all your existing buttons. To learn more, check out the <a href="/docs/button">new Button documentation</a>, complete with a runnable example!</p>
 <h2><a class="anchor" aria-hidden="true" id="speed-up-react-native-init-using-yarn"></a><a href="#speed-up-react-native-init-using-yarn" 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>Speed up <code>react-native init</code> using Yarn</h2>
 <p>You can now use <a href="https://yarnpkg.com/">Yarn</a>, the new package manager for JavaScript, to speed up <code>react-native init</code> significantly. To see the speedup please <a href="https://yarnpkg.com/en/docs/install">install yarn</a> and upgrade your <code>react-native-cli</code> to 1.2.0:</p>
-<pre><code class="hljs">$ <span class="hljs-built_in">npm</span> install -g react-<span class="hljs-keyword">native</span>-cli
+<pre><code class="hljs css language-sh">$ <span class="token function">npm</span> <span class="token function">install</span> -g react-native-cli
 </code></pre>
 <p>You should now see “Using yarn” when setting up new apps:</p>
 <p><img src="/blog/assets/yarn-rncli.png" alt="Using yarn"></p>
@@ -71,11 +71,11 @@
        </script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/blog/2017/03/13/introducing-create-react-native-app">Introducing Create React Native App</a></h1><p class="post-meta">March 13, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/dikaiosune" target="_blank" rel="noreferrer noopener">Adam Perry</a>Software Engineer at Expo</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/dikaiosune" target="_blank" rel="noreferrer noopener"><img src="https://avatars2.githubusercontent.com/u/6812281" alt="Adam Perry"/></a></div></div></header><div><span><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> and <a href="https://expo.io">Expo</a> (formerly Exponent).</p>
 <p>Many developers struggle with installing and configuring React Native’s current native build dependencies, especially for Android. With Create React Native App, there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.</p>
 <p>Try creating a new project (replace with suitable yarn commands if you have it installed):</p>
-<pre><code class="hljs">$ <span class="hljs-string">npm </span>i -g <span class="hljs-built_in">create-react-native-app</span>
-$ <span class="hljs-built_in">create-react-native-app</span> <span class="hljs-string">my-project
-</span>$ <span class="hljs-string">cd </span><span class="hljs-string">my-project
-</span>$ <span class="hljs-string">npm </span><span class="hljs-string">start
-</span></code></pre>
+<pre><code class="hljs css language-sh">$ <span class="token function">npm</span> i -g create-react-native-app
+$ create-react-native-app my-project
+$ <span class="token builtin class-name">cd</span> my-project
+$ <span class="token function">npm</span> start
+</code></pre>
 <p>This will start the React Native packager and print a QR code. Open it in the <a href="https://expo.io">Expo app</a> to load your JavaScript. Calls to <code>console.log</code> are forwarded to your terminal. You can make use of any standard React Native APIs as well as the <a href="https://docs.expo.io/versions/latest/sdk/index.html">Expo SDK</a>.</p>
 <h2><a class="anchor" aria-hidden="true" id="what-about-native-code"></a><a href="#what-about-native-code" 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>What about native code?</h2>
 <p>Many React Native projects have Java or Objective-C/Swift dependencies that need to be compiled. The Expo app does include APIs for camera, video, contacts, and more, and bundles popular libraries like <a href="https://docs.expo.io/versions/v14.0.0/sdk/map-view.html">Airbnb’s react-native-maps</a>, or <a href="https://docs.expo.io/versions/latest/sdk/facebook.html">Facebook authentication</a>. However if you need a native code dependency that Expo doesn’t bundle then you’ll probably need to have your own build configuration for it. Just like Create React App, “ejecting” is supported by CRNA.</p>
@@ -71,11 +71,11 @@
        </script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/blog/2017/03/13/introducing-create-react-native-app">Introducing Create React Native App</a></h1><p class="post-meta">March 13, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/dikaiosune" target="_blank" rel="noreferrer noopener">Adam Perry</a>Software Engineer at Expo</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/dikaiosune" target="_blank" rel="noreferrer noopener"><img src="https://avatars2.githubusercontent.com/u/6812281" alt="Adam Perry"/></a></div></div></header><div><span><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> and <a href="https://expo.io">Expo</a> (formerly Exponent).</p>
 <p>Many developers struggle with installing and configuring React Native’s current native build dependencies, especially for Android. With Create React Native App, there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.</p>
 <p>Try creating a new project (replace with suitable yarn commands if you have it installed):</p>
-<pre><code class="hljs">$ <span class="hljs-string">npm </span>i -g <span class="hljs-built_in">create-react-native-app</span>
-$ <span class="hljs-built_in">create-react-native-app</span> <span class="hljs-string">my-project
-</span>$ <span class="hljs-string">cd </span><span class="hljs-string">my-project
-</span>$ <span class="hljs-string">npm </span><span class="hljs-string">start
-</span></code></pre>
+<pre><code class="hljs css language-sh">$ <span class="token function">npm</span> i -g create-react-native-app
+$ create-react-native-app my-project
+$ <span class="token builtin class-name">cd</span> my-project
+$ <span class="token function">npm</span> start
+</code></pre>
 <p>This will start the React Native packager and print a QR code. Open it in the <a href="https://expo.io">Expo app</a> to load your JavaScript. Calls to <code>console.log</code> are forwarded to your terminal. You can make use of any standard React Native APIs as well as the <a href="https://docs.expo.io/versions/latest/sdk/index.html">Expo SDK</a>.</p>
 <h2><a class="anchor" aria-hidden="true" id="what-about-native-code"></a><a href="#what-about-native-code" 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>What about native code?</h2>
 <p>Many React Native projects have Java or Objective-C/Swift dependencies that need to be compiled. The Expo app does include APIs for camera, video, contacts, and more, and bundles popular libraries like <a href="https://docs.expo.io/versions/v14.0.0/sdk/map-view.html">Airbnb’s react-native-maps</a>, or <a href="https://docs.expo.io/versions/latest/sdk/facebook.html">Facebook authentication</a>. However if you need a native code dependency that Expo doesn’t bundle then you’ll probably need to have your own build configuration for it. Just like Create React App, “ejecting” is supported by CRNA.</p>
@@ -81,7 +81,7 @@
 <h2><a class="anchor" aria-hidden="true" id="initializing"></a><a href="#initializing" 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>Initializing</h2>
 <p>Once you've tried scaffolding out an ordinary React Native project, you'll be ready to start adding TypeScript. Let's go ahead and do that.</p>
 <pre><code class="hljs css language-sh">react-native init MyAwesomeProject
-<span class="hljs-built_in">cd</span> MyAwesomeProject
+<span class="token builtin class-name">cd</span> MyAwesomeProject
 </code></pre>
 <h2><a class="anchor" aria-hidden="true" id="adding-typescript"></a><a href="#adding-typescript" 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>Adding TypeScript</h2>
 <p>The next step is to add TypeScript to your project. The following commands will:</p>
@@ -93,11 +93,11 @@
 <li>adds <a href="https://github.com/DefinitelyTyped/DefinitelyTyped">typings</a> for React and React Native</li>
 </ul>
 <p>Okay, let's go ahead and run these.</p>
-<pre><code class="hljs css language-sh">yarn add --dev typescript
-yarn add --dev react-native-typescript-transformer
-yarn tsc --init --pretty --jsx react
-touch rn-cli.config.js
-yarn add --dev @types/react @types/react-native
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev typescript
+<span class="token function">yarn</span> <span class="token function">add</span> --dev react-native-typescript-transformer
+<span class="token function">yarn</span> tsc --init --pretty --jsx react
+<span class="token function">touch</span> rn-cli.config.js
+<span class="token function">yarn</span> <span class="token function">add</span> --dev @types/react @types/react-native
 </code></pre>
 <p>The <code>tsconfig.json</code> file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:</p>
 <pre><code class="hljs css language-js"><span class="token punctuation">{</span>
@@ -126,7 +126,7 @@ yarn add --dev @types/react @types/react-native
 <p>At this point, you should be able to run the React Native app.</p>
 <h2><a class="anchor" aria-hidden="true" id="adding-typescript-testing-infrastructure"></a><a href="#adding-typescript-testing-infrastructure" 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>Adding TypeScript Testing Infrastructure</h2>
 <p>React Native ships with <a href="https://github.com/facebook/jest">Jest</a>, so for testing a React Native app with TypeScript, we'll want to add <a href="https://www.npmjs.com/package/ts-jest">ts-jest</a> to our <code>devDependencies</code>.</p>
-<pre><code class="hljs css language-sh">yarn add --dev ts-jest
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev ts-jest
 </code></pre>
 <p>Then, we'll open up our <code>package.json</code> and replace the <code>jest</code> field with the following:</p>
 <pre><code class="hljs css language-js"><span class="token punctuation">{</span>
@@ -165,10 +165,10 @@ yarn add --dev @types/react @types/react-native
 .jest/
 </code></pre>
 <p>As a checkpoint, consider committing your files into version control.</p>
-<pre><code class="hljs css language-sh">git init
-git add .gitignore <span class="hljs-comment"># import to do this first, to ignore our files</span>
-git add .
-git commit -am <span class="hljs-string">"Initial commit."</span>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init
+<span class="token function">git</span> <span class="token function">add</span> .gitignore <span class="token comment"># import to do this first, to ignore our files</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
+<span class="token function">git</span> commit -am <span class="token string">"Initial commit."</span>
 </code></pre>
 <h2><a class="anchor" aria-hidden="true" id="adding-a-component"></a><a href="#adding-a-component" 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>Adding a Component</h2>
 <p>Let's add a component to our app. Let's go ahead and create a <code>Hello.tsx</code> component. It's a pedagogical component, not something that you'd actually write in an app, but something nontrivial that shows off how to use TypeScript in React Native.</p>
@@ -269,7 +269,7 @@ const styles = StyleSheet.create({
 <h2><a class="anchor" aria-hidden="true" id="adding-a-component-test"></a><a href="#adding-a-component-test" 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>Adding a Component Test</h2>
 <p>Now that we've got a component, let's try testing it.</p>
 <p>We already have Jest installed as a test runner. We're going to write snapshot tests for our components, let's add the required add-on for snapshot tests:</p>
-<pre><code class="hljs css language-sh">yarn add --dev react-addons-test-utils
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev react-addons-test-utils
 </code></pre>
 <p>Now let's create a <code>__tests__</code> folder in the <code>components</code> directory and add a test for <code>Hello.tsx</code>:</p>
 <pre><code class="hljs css language-ts"><span class="hljs-comment">// components/__tests__/Hello.tsx</span>
@@ -81,7 +81,7 @@
 <h2><a class="anchor" aria-hidden="true" id="initializing"></a><a href="#initializing" 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>Initializing</h2>
 <p>Once you've tried scaffolding out an ordinary React Native project, you'll be ready to start adding TypeScript. Let's go ahead and do that.</p>
 <pre><code class="hljs css language-sh">react-native init MyAwesomeProject
-<span class="hljs-built_in">cd</span> MyAwesomeProject
+<span class="token builtin class-name">cd</span> MyAwesomeProject
 </code></pre>
 <h2><a class="anchor" aria-hidden="true" id="adding-typescript"></a><a href="#adding-typescript" 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>Adding TypeScript</h2>
 <p>The next step is to add TypeScript to your project. The following commands will:</p>
@@ -93,11 +93,11 @@
 <li>adds <a href="https://github.com/DefinitelyTyped/DefinitelyTyped">typings</a> for React and React Native</li>
 </ul>
 <p>Okay, let's go ahead and run these.</p>
-<pre><code class="hljs css language-sh">yarn add --dev typescript
-yarn add --dev react-native-typescript-transformer
-yarn tsc --init --pretty --jsx react
-touch rn-cli.config.js
-yarn add --dev @types/react @types/react-native
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev typescript
+<span class="token function">yarn</span> <span class="token function">add</span> --dev react-native-typescript-transformer
+<span class="token function">yarn</span> tsc --init --pretty --jsx react
+<span class="token function">touch</span> rn-cli.config.js
+<span class="token function">yarn</span> <span class="token function">add</span> --dev @types/react @types/react-native
 </code></pre>
 <p>The <code>tsconfig.json</code> file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:</p>
 <pre><code class="hljs css language-js"><span class="token punctuation">{</span>
@@ -126,7 +126,7 @@ yarn add --dev @types/react @types/react-native
 <p>At this point, you should be able to run the React Native app.</p>
 <h2><a class="anchor" aria-hidden="true" id="adding-typescript-testing-infrastructure"></a><a href="#adding-typescript-testing-infrastructure" 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>Adding TypeScript Testing Infrastructure</h2>
 <p>React Native ships with <a href="https://github.com/facebook/jest">Jest</a>, so for testing a React Native app with TypeScript, we'll want to add <a href="https://www.npmjs.com/package/ts-jest">ts-jest</a> to our <code>devDependencies</code>.</p>
-<pre><code class="hljs css language-sh">yarn add --dev ts-jest
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev ts-jest
 </code></pre>
 <p>Then, we'll open up our <code>package.json</code> and replace the <code>jest</code> field with the following:</p>
 <pre><code class="hljs css language-js"><span class="token punctuation">{</span>
@@ -165,10 +165,10 @@ yarn add --dev @types/react @types/react-native
 .jest/
 </code></pre>
 <p>As a checkpoint, consider committing your files into version control.</p>
-<pre><code class="hljs css language-sh">git init
-git add .gitignore <span class="hljs-comment"># import to do this first, to ignore our files</span>
-git add .
-git commit -am <span class="hljs-string">"Initial commit."</span>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init
+<span class="token function">git</span> <span class="token function">add</span> .gitignore <span class="token comment"># import to do this first, to ignore our files</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
+<span class="token function">git</span> commit -am <span class="token string">"Initial commit."</span>
 </code></pre>
 <h2><a class="anchor" aria-hidden="true" id="adding-a-component"></a><a href="#adding-a-component" 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>Adding a Component</h2>
 <p>Let's add a component to our app. Let's go ahead and create a <code>Hello.tsx</code> component. It's a pedagogical component, not something that you'd actually write in an app, but something nontrivial that shows off how to use TypeScript in React Native.</p>
@@ -269,7 +269,7 @@ const styles = StyleSheet.create({
 <h2><a class="anchor" aria-hidden="true" id="adding-a-component-test"></a><a href="#adding-a-component-test" 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>Adding a Component Test</h2>
 <p>Now that we've got a component, let's try testing it.</p>
 <p>We already have Jest installed as a test runner. We're going to write snapshot tests for our components, let's add the required add-on for snapshot tests:</p>
-<pre><code class="hljs css language-sh">yarn add --dev react-addons-test-utils
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev react-addons-test-utils
 </code></pre>
 <p>Now let's create a <code>__tests__</code> folder in the <code>components</code> directory and add a test for <code>Hello.tsx</code>:</p>
 <pre><code class="hljs css language-ts"><span class="hljs-comment">// components/__tests__/Hello.tsx</span>
@@ -225,7 +225,7 @@ accessibilityStates={[“selected”]}
 <h2><a class="anchor" aria-hidden="true" id="initializing"></a><a href="#initializing" 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>Initializing</h2>
 <p>Once you've tried scaffolding out an ordinary React Native project, you'll be ready to start adding TypeScript. Let's go ahead and do that.</p>
 <pre><code class="hljs css language-sh">react-native init MyAwesomeProject
-<span class="hljs-built_in">cd</span> MyAwesomeProject
+<span class="token builtin class-name">cd</span> MyAwesomeProject
 </code></pre>
 <h2><a class="anchor" aria-hidden="true" id="adding-typescript"></a><a href="#adding-typescript" 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>Adding TypeScript</h2>
 <p>The next step is to add TypeScript to your project. The following commands will:</p>
@@ -237,11 +237,11 @@ accessibilityStates={[“selected”]}
 <li>adds <a href="https://github.com/DefinitelyTyped/DefinitelyTyped">typings</a> for React and React Native</li>
 </ul>
 <p>Okay, let's go ahead and run these.</p>
-<pre><code class="hljs css language-sh">yarn add --dev typescript
-yarn add --dev react-native-typescript-transformer
-yarn tsc --init --pretty --jsx react
-touch rn-cli.config.js
-yarn add --dev @types/react @types/react-native
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev typescript
+<span class="token function">yarn</span> <span class="token function">add</span> --dev react-native-typescript-transformer
+<span class="token function">yarn</span> tsc --init --pretty --jsx react
+<span class="token function">touch</span> rn-cli.config.js
+<span class="token function">yarn</span> <span class="token function">add</span> --dev @types/react @types/react-native
 </code></pre>
 <p>The <code>tsconfig.json</code> file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:</p>
 <pre><code class="hljs css language-js"><span class="token punctuation">{</span>
@@ -270,7 +270,7 @@ yarn add --dev @types/react @types/react-native
 <p>At this point, you should be able to run the React Native app.</p>
 <h2><a class="anchor" aria-hidden="true" id="adding-typescript-testing-infrastructure"></a><a href="#adding-typescript-testing-infrastructure" 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>Adding TypeScript Testing Infrastructure</h2>
 <p>React Native ships with <a href="https://github.com/facebook/jest">Jest</a>, so for testing a React Native app with TypeScript, we'll want to add <a href="https://www.npmjs.com/package/ts-jest">ts-jest</a> to our <code>devDependencies</code>.</p>
-<pre><code class="hljs css language-sh">yarn add --dev ts-jest
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev ts-jest
 </code></pre>
 <p>Then, we'll open up our <code>package.json</code> and replace the <code>jest</code> field with the following:</p>
 <pre><code class="hljs css language-js"><span class="token punctuation">{</span>
@@ -309,10 +309,10 @@ yarn add --dev @types/react @types/react-native
 .jest/
 </code></pre>
 <p>As a checkpoint, consider committing your files into version control.</p>
-<pre><code class="hljs css language-sh">git init
-git add .gitignore <span class="hljs-comment"># import to do this first, to ignore our files</span>
-git add .
-git commit -am <span class="hljs-string">"Initial commit."</span>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init
+<span class="token function">git</span> <span class="token function">add</span> .gitignore <span class="token comment"># import to do this first, to ignore our files</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
+<span class="token function">git</span> commit -am <span class="token string">"Initial commit."</span>
 </code></pre>
 <h2><a class="anchor" aria-hidden="true" id="adding-a-component"></a><a href="#adding-a-component" 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>Adding a Component</h2>
 <p>Let's add a component to our app. Let's go ahead and create a <code>Hello.tsx</code> component. It's a pedagogical component, not something that you'd actually write in an app, but something nontrivial that shows off how to use TypeScript in React Native.</p>
@@ -413,7 +413,7 @@ const styles = StyleSheet.create({
 <h2><a class="anchor" aria-hidden="true" id="adding-a-component-test"></a><a href="#adding-a-component-test" 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>Adding a Component Test</h2>
 <p>Now that we've got a component, let's try testing it.</p>
 <p>We already have Jest installed as a test runner. We're going to write snapshot tests for our components, let's add the required add-on for snapshot tests:</p>
-<pre><code class="hljs css language-sh">yarn add --dev react-addons-test-utils
+<pre><code class="hljs css language-sh"><span class="token function">yarn</span> <span class="token function">add</span> --dev react-addons-test-utils
 </code></pre>
 <p>Now let's create a <code>__tests__</code> folder in the <code>components</code> directory and add a test for <code>Hello.tsx</code>:</p>
 <pre><code class="hljs css language-ts"><span class="hljs-comment">// components/__tests__/Hello.tsx</span>
@@ -409,11 +409,11 @@
 </span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/blog/2017/03/13/introducing-create-react-native-app">Introducing Create React Native App</a></h1><p class="post-meta">March 13, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/dikaiosune" target="_blank" rel="noreferrer noopener">Adam Perry</a>Software Engineer at Expo</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/dikaiosune" target="_blank" rel="noreferrer noopener"><img src="https://avatars2.githubusercontent.com/u/6812281" alt="Adam Perry"/></a></div></div></header><article class="post-content"><div><span><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> and <a href="https://expo.io">Expo</a> (formerly Exponent).</p>
 <p>Many developers struggle with installing and configuring React Native’s current native build dependencies, especially for Android. With Create React Native App, there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.</p>
 <p>Try creating a new project (replace with suitable yarn commands if you have it installed):</p>
-<pre><code class="hljs">$ <span class="hljs-string">npm </span>i -g <span class="hljs-built_in">create-react-native-app</span>
-$ <span class="hljs-built_in">create-react-native-app</span> <span class="hljs-string">my-project
-</span>$ <span class="hljs-string">cd </span><span class="hljs-string">my-project
-</span>$ <span class="hljs-string">npm </span><span class="hljs-string">start
-</span></code></pre>
+<pre><code class="hljs css language-sh">$ <span class="token function">npm</span> i -g create-react-native-app
+$ create-react-native-app my-project
+$ <span class="token builtin class-name">cd</span> my-project
+$ <span class="token function">npm</span> start
+</code></pre>
 <p>This will start the React Native packager and print a QR code. Open it in the <a href="https://expo.io">Expo app</a> to load your JavaScript. Calls to <code>console.log</code> are forwarded to your terminal. You can make use of any standard React Native APIs as well as the <a href="https://docs.expo.io/versions/latest/sdk/index.html">Expo SDK</a>.</p>
 <h2><a class="anchor" aria-hidden="true" id="what-about-native-code"></a><a href="#what-about-native-code" 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>What about native code?</h2>
 <p>Many React Native projects have Java or Objective-C/Swift dependencies that need to be compiled. The Expo app does include APIs for camera, video, contacts, and more, and bundles popular libraries like <a href="https://docs.expo.io/versions/v14.0.0/sdk/map-view.html">Airbnb’s react-native-maps</a>, or <a href="https://docs.expo.io/versions/latest/sdk/facebook.html">Facebook authentication</a>. However if you need a native code dependency that Expo doesn’t bundle then you’ll probably need to have your own build configuration for it. Just like Create React App, “ejecting” is supported by CRNA.</p>
@@ -182,7 +182,7 @@ index e98ebb0.<span class="hljs-number">.2</span>fb6a11 <span class="hljs-number
 <p>Button is meant to work great and look native on every platform, so it won't support all the bells and whistles that custom buttons do. It is a great starting point, but is not meant to replace all your existing buttons. To learn more, check out the <a href="/docs/button">new Button documentation</a>, complete with a runnable example!</p>
 <h2><a class="anchor" aria-hidden="true" id="speed-up-react-native-init-using-yarn"></a><a href="#speed-up-react-native-init-using-yarn" 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>Speed up <code>react-native init</code> using Yarn</h2>
 <p>You can now use <a href="https://yarnpkg.com/">Yarn</a>, the new package manager for JavaScript, to speed up <code>react-native init</code> significantly. To see the speedup please <a href="https://yarnpkg.com/en/docs/install">install yarn</a> and upgrade your <code>react-native-cli</code> to 1.2.0:</p>
-<pre><code class="hljs">$ <span class="hljs-built_in">npm</span> install -g react-<span class="hljs-keyword">native</span>-cli
+<pre><code class="hljs css language-sh">$ <span class="token function">npm</span> <span class="token function">install</span> -g react-native-cli
 </code></pre>
 <p>You should now see “Using yarn” when setting up new apps:</p>
 <p><img src="/blog/assets/yarn-rncli.png" alt="Using yarn"></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -124,7 +124,7 @@ android {
 </code></pre>
 <h3><a class="anchor" aria-hidden="true" id="generating-the-release-apk"></a><a href="#generating-the-release-apk" 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>Generating the release APK</h3>
 <p>Run the following in a terminal:</p>
-<pre><code class="hljs css language-sh">$ <span class="hljs-built_in">cd</span> android
+<pre><code class="hljs css language-sh">$ <span class="token builtin class-name">cd</span> android
 $ ./gradlew bundleRelease
 </code></pre>
 <p>Gradle's <code>bundleRelease</code> will bundle all the JavaScript needed to run your app into the AAB (<a href="https://developer.android.com/guide/app-bundle">Android App Bundle</a>). If you need to change the way the JavaScript bundle and/or drawable resources are bundled (e.g. if you changed the default file/folder names or the general structure of the project), have a look at <code>android/app/build.gradle</code> to see how you can update it to reflect these changes.</p>
@@ -135,7 +135,7 @@ $ ./gradlew bundleRelease
 <p><em>Note: In order for Google Play to accept AAB format the App Signing by Google Play needs to be configured for your application on the Google Play Console. If you are updating an existing app that doesn't use App Signing by Google Play, please check our <a href="#migrating-old-android-react-native-apps-to-use-app-signing-by-google-play">migration section</a> to learn how to perform that configuration change.</em></p>
 <h3><a class="anchor" aria-hidden="true" id="testing-the-release-build-of-your-app"></a><a href="#testing-the-release-build-of-your-app" 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>Testing the release build of your app</h3>
 <p>Before uploading the release build to the Play Store, make sure you test it thoroughly. First uninstall any previous version of the app you already have installed. Install it on the device using:</p>
-<pre><code class="hljs css language-sh">$ react-native run-android --variant=release
+<pre><code class="hljs css language-sh">$ react-native run-android --variant<span class="token operator">=</span>release
 </code></pre>
 <p>Note that <code>--variant=release</code> is only available if you've set up signing as described above.</p>
 <p>You can kill any running packager instances, since all your framework and JavaScript code is bundled in the APK's assets.</p>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -84,7 +84,7 @@
 <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.61.0-rc.0</code> run:</p>
-<pre><code class="hljs css language-sh">react-native upgrade 0.61.0-rc.0
+<pre><code class="hljs css language-sh">react-native upgrade <span class="token number">0.61</span>.0-rc.0
 </code></pre>
 <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>
@@ -118,9 +118,9 @@
 <p>💡 Major updates will show an &quot;useful content&quot; 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}}
+<pre><code class="hljs css language-sh"><span class="token comment"># {{VERSION}} and {{REACT_VERSION}} are the release versions showing in the diff</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react-native@<span class="token punctuation">{</span><span class="token punctuation">{</span>VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
+<span class="token function">yarn</span> <span class="token function">add</span> react@<span class="token punctuation">{</span><span class="token punctuation">{</span>REACT_VERSION<span class="token punctuation">}</span><span class="token punctuation">}</span>
 </code></pre>
 <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 rebuild the project and continue developing.</p>
@@ -139,9 +139,9 @@ yarn add react@{{REACT_VERSION}}
 <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-dont-use-git"></a><a href="#i-want-to-upgrade-with-react-native-cli-but-i-dont-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>
+<pre><code class="hljs css language-sh"><span class="token function">git</span> init <span class="token comment"># Initialize a Git repository</span>
+<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span> <span class="token comment"># Stage all the current files</span>
+<span class="token function">git</span> commit -m <span class="token string">"Upgrade react-native"</span> <span class="token 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>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -83,13 +83,13 @@
 </div>
 <p><block class="quickstart mac windows linux ios android" /></p>
 <p>Assuming that you have <a href="https://nodejs.org/en/download/">Node 10 LTS</a> or greater installed, you can use npm to install the Expo CLI command line utility:</p>
-<pre><code class="hljs css language-sh">npm install -g expo-cli
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> -g expo-cli
 </code></pre>
 <p>Then run the following commands to create a new React Native project called &quot;AwesomeProject&quot;:</p>
 <pre><code class="hljs css language-sh">expo init AwesomeProject

-<span class="hljs-built_in">cd</span> AwesomeProject
-npm start <span class="hljs-comment"># you can also use: expo start</span>
+<span class="token builtin class-name">cd</span> AwesomeProject
+<span class="token function">npm</span> start <span class="token comment"># you can also use: expo start</span>
 </code></pre>
 <p>This will start a development server for you.</p>
 <p><h2>Running your React Native application</h2></p>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -75,20 +75,20 @@
 <p>The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.</p>
 <h3><a class="anchor" aria-hidden="true" id="installation-and-setup"></a><a href="#installation-and-setup" 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>Installation and setup</h3>
 <p>First, you need to install them in your project:</p>
-<pre><code class="hljs css language-sh">npm install @react-navigation/native @react-navigation/stack
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> @react-navigation/native @react-navigation/stack
 </code></pre>
 <p>The second step is to install the required peer dependencies. You need to run different commands depending on whether your projects is an Expo managed project or a bare React Native project.</p>
 <ul>
 <li><p>If you have an Expo managed project, install the dependencies with <code>expo</code>:</p>
-<pre><code class="hljs css language-sh">expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh">expo <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre></li>
 <li><p>If you have an bare React Native project, install the dependencies with <code>npm</code>:</p>
-<pre><code class="hljs css language-sh">npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
+<pre><code class="hljs css language-sh"><span class="token function">npm</span> <span class="token function">install</span> react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
 </code></pre>
 <p>For iOS with bare React Native project, make sure you have <a href="https://cocoapods.org/">Cocoapods</a> installed. Then install the pods to complete the installation:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">cd</span> ios
-pod install
-<span class="hljs-built_in">cd</span> ..
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">cd</span> ios
+pod <span class="token function">install</span>
+<span class="token builtin class-name">cd</span> <span class="token punctuation">..</span>
 </code></pre></li>
 </ul>
 <blockquote>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -140,8 +140,8 @@ BigButton.android.js
 <h2><a class="anchor" aria-hidden="true" id="native-specific-extensions-ie-sharing-code-with-nodejs-and-web"></a><a href="#native-specific-extensions-ie-sharing-code-with-nodejs-and-web" 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>Native-specific extensions (i.e. sharing code with NodeJS and Web)</h2>
 <p>You can also use the <code>.native.js</code> extension when a module needs to be shared between NodeJS/Web and React Native but it has no Android/iOS differences. This is specially useful for projects that has common code shared among React Native and ReactJS.</p>
 <p>For example, say you have the following files in your project:</p>
-<pre><code class="hljs css language-sh">Container.js <span class="hljs-comment"># picked up by Webpack, Rollup or any other Web bundler</span>
-Container.native.js <span class="hljs-comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
+<pre><code class="hljs css language-sh">Container.js <span class="token comment"># picked up by Webpack, Rollup or any other Web bundler</span>
+Container.native.js <span class="token comment"># picked up by the React Native bundler for both Android and iOS (Metro)</span>
 </code></pre>
 <p>You can still require it without the <code>.native</code> extension, as follows:</p>
 <pre><code class="hljs css language-jsx"><span class="token keyword">import</span> Container <span class="token keyword">from</span> <span class="token string">'./Container'</span><span class="token punctuation">;</span>
@@ -143,7 +143,7 @@ Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
 <p><code>22b8:2e76</code></p>
 <p>In this case, it's <code>22b8</code>. That's the identifier for Motorola.</p>
 <p>You'll need to input this into your udev rules in order to get up and running:</p>
-<pre><code class="hljs css language-sh"><span class="hljs-built_in">echo</span> <span class="hljs-string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> | sudo tee /etc/udev/rules.d/51-android-usb.rules
+<pre><code class="hljs css language-sh"><span class="token builtin class-name">echo</span> <span class="token string">'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"'</span> <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token function">tee</span> /etc/udev/rules.d/51-android-usb.rules
 </code></pre>
 <p>Make sure that you replace <code>22b8</code> with the identifier you get in the above command.</p>
 <p><block class="mac windows linux android" /></p>
--- a/Show More
+++ b/Show More