this repo has no description
kitten.sh
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-integration-with-existing-apps" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Integration with Existing Apps · React Native</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true property=og:url content=https://reactnative.dev/docs/integration-with-existing-apps><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true property=og:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true name=twitter:image content=https://reactnative.dev/img/logo-share.png><meta data-rh=true name=twitter:site content=@reactnative><meta data-rh=true name=docusaurus_version content=0.79><meta data-rh=true name=docusaurus_tag content=docs-default-0.79><meta data-rh=true name=docsearch:version content=0.79><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-0.79><meta data-rh=true property=og:title content="Integration with Existing Apps · React Native"><meta data-rh=true name=description content="React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc."><meta data-rh=true property=og:description content="React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/integration-with-existing-apps><link data-rh=true rel=alternate href=https://reactnative.dev/docs/integration-with-existing-apps hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/integration-with-existing-apps hreflang=x-default><link data-rh=true rel=preconnect href=https://8TDSE0OHGQ-dsn.algolia.net crossorigin=anonymous><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="React Native RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="React Native Atom Feed"><link rel=alternate type=application/json href=/blog/feed.json title="React Native JSON Feed"><link rel=preconnect href=https://www.google-analytics.com><script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script><script async src=https://www.google-analytics.com/analytics.js></script><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-58L13S6BDP"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-58L13S6BDP",{})</script><link rel=search type=application/opensearchdescription+xml title="React Native" href=/opensearch.xml><link rel=icon href=/img/pwa/manifest-icon-512.png><link rel=manifest href=/manifest.json><meta name=theme-color content=#20232a><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=#20232a><link rel=apple-touch-icon href=/img/pwa/manifest-icon-512.png><link rel=mask-icon href=/img/pwa/manifest-icon-512.png color=#06bcee><meta name=msapplication-TileImage href=/img/pwa/manifest-icon-512.png><meta name=msapplication-TileColor content=#20232a><script src=https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js defer></script><script src=https://widget.surveymonkey.com/collect/website/js/tRaiETqnLgj758hTBazgd8ryO5qrZo8Exadq9qmt1wtm4_2FdZGEAKHDFEt_2BBlwwM4.js defer></script><script src=https://snack.expo.dev/embed.js defer></script><script src=https://platform.twitter.com/widgets.js async></script><link rel=stylesheet href=/assets/css/styles.883cb042.css><script src=/assets/js/runtime~main.8ac1e6f0.js defer></script><script src=/assets/js/main.341783f5.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs>
2<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
3</defs></svg>
4<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_oPtH href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><div class="theme-announcement-bar announcementBar_zJRd" style=background-color:#20232a;color:#fff role=banner><div class="content_bSb_ announcementBarContent_t7IR">Join us for React Conf on Oct 7-8. <a target=_blank rel="noopener noreferrer" href=https://conf.react.dev>Learn more</a>.</div></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top navbar--dark"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--light_hHel"><img src=/img/header_logo.svg alt="React Native" class="themedComponent_siVc themedComponent--dark_yETr"></div><b class="navbar__title text--truncate">React Native</b></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/docs/integration-with-existing-apps>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/integration-with-existing-apps>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/integration-with-existing-apps>0.79</a><li><a class=dropdown__link href=/docs/0.78/integration-with-existing-apps>0.78</a><li><a class=dropdown__link href=/docs/0.77/integration-with-existing-apps>0.77</a><li><a class=dropdown__link href=/docs/0.76/integration-with-existing-apps>0.76</a><li><a class=dropdown__link href=/docs/0.75/integration-with-existing-apps>0.75</a><li><a class=dropdown__link href=/docs/0.74/integration-with-existing-apps>0.74</a><li><a class=dropdown__link href=/docs/0.73/integration-with-existing-apps>0.73</a><li><a class=dropdown__link href=/docs/0.72/integration-with-existing-apps>0.72</a><li><a class=dropdown__link href=/docs/0.71/integration-with-existing-apps>0.71</a><li><a class=dropdown__link href=/docs/0.70/integration-with-existing-apps>0.70</a><li><a class=dropdown__link href=/versions>All versions</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>Development</a><ul class=dropdown__menu><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/getting-started>Guides</a><li><a class=dropdown__link href=/docs/components-and-apis>Components</a><li><a class=dropdown__link href=/docs/accessibilityinfo>APIs</a><li><a class=dropdown__link href=/architecture/overview>Architecture</a></ul></div><a class="navbar__item navbar__link" href=/contributing/overview>Contributing</a><a class="navbar__item navbar__link" href=/community/overview>Community</a><a class="navbar__item navbar__link" href=/showcase>Showcase</a><a class="navbar__item navbar__link" href=/blog>Blog</a><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="toggle_ki11 colorModeToggle_Hewu"><button class="clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m darkNavbarColorModeToggle_m8pZ" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ lightToggleIcon_lgto"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ darkToggleIcon_U96C"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_k9hJ systemToggleIcon_E5c0"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_bzqh><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 20 20" aria-hidden=true><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke=currentColor fill=none fill-rule=evenodd stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_MB5r"><div class=docsWrapper__sE8><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_iEvu" type=button></button><div class=docRoot_DfVB><aside class="theme-doc-sidebar-container docSidebarContainer_c7NB"><div class=sidebarViewport_KYo0><div class=sidebar_CUen><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_jmj1 menuWithAnnouncementBar_YufC"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/getting-started>The Basics</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true href=/docs/environment-setup>Environment setup</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/environment-setup>Get Started with React Native</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/set-up-your-environment>Set Up Your Environment</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/integration-with-existing-apps>Integration with Existing Apps</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integration-with-android-fragment>Integration with an Android Fragment</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/building-for-tv>Building For TV Devices</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/out-of-tree-platforms>Out-of-Tree Platforms</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/running-on-device>Workflow</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/style>UI & Interaction</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/debugging>Debugging</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/testing-overview>Testing</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/performance>Performance</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/javascript-environment>JavaScript Runtime</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/the-new-architecture/what-is-codegen>Codegen</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/native-platform>Native Development</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/headless-js-android>Android and iOS guides</a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false href=/docs/legacy/native-modules-intro>Legacy Architecture</a></div></ul></nav></div></div></aside><main class=docMainContainer_a9sJ><div class="container padding-top--md padding-bottom--lg"><div class=row><div class=col><div class=docItemContainer_tjFy><article><div class="theme-doc-markdown markdown"><header><h1>Integration with Existing Apps</h1></header><p>React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.</p>
5<p>The specific steps are different depending on what platform you're targeting.</p>
6<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Android (Java & Kotlin)<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">iOS (Objective-C and Swift)</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><h2 class="anchor anchorWithStickyNavbar_JmGV" id=key-concepts>Key Concepts<a href=#key-concepts class=hash-link aria-label="Direct link to Key Concepts" title="Direct link to Key Concepts"></a></h2>
7<p>The keys to integrating React Native components into your Android application are to:</p>
8<ol>
9<li>Set up the correct directory structure.</li>
10<li>Install the necessary NPM dependencies.</li>
11<li>Adding React Native to your Gradle configuration.</li>
12<li>Writing the TypeScript code for your first React Native screen.</li>
13<li>Integrate React Native with your Android code using a ReactActivity.</li>
14<li>Testing your integration by running the bundler and seeing your app in action.</li>
15</ol>
16<h2 class="anchor anchorWithStickyNavbar_JmGV" id=using-the-community-template>Using the Community Template<a href=#using-the-community-template class=hash-link aria-label="Direct link to Using the Community Template" title="Direct link to Using the Community Template"></a></h2>
17<p>While you follow this guide, we suggest you to use the <a href=https://github.com/react-native-community/template/ target=_blank rel="noopener noreferrer">React Native Community Template</a> as reference. The template contains a <strong>minimal Android app</strong> and will help you understanding how to integrate React Native into an existing Android app.</p>
18<h2 class="anchor anchorWithStickyNavbar_JmGV" id=prerequisites>Prerequisites<a href=#prerequisites class=hash-link aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites"></a></h2>
19<p>Follow the guide on <a href=/docs/set-up-your-environment>setting up your development environment</a> and using <a href=/docs/getting-started-without-a-framework>React Native without a framework</a> to configure your development environment for building React Native apps for Android.
20This guide also assumes you're familiar with the basics of Android development such as creating Activities and editing the <code>AndroidManifest.xml</code> file.</p>
21<h2 class="anchor anchorWithStickyNavbar_JmGV" id=1-set-up-directory-structure>1. Set up directory structure<a href=#1-set-up-directory-structure class=hash-link aria-label="Direct link to 1. Set up directory structure" title="Direct link to 1. Set up directory structure"></a></h2>
22<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then <strong>move your existing Android project</strong> to the <code>/android</code> subfolder.</p>
23<h2 class="anchor anchorWithStickyNavbar_JmGV" id=2-install-npm-dependencies>2. Install NPM dependencies<a href=#2-install-npm-dependencies class=hash-link aria-label="Direct link to 2. Install NPM dependencies" title="Direct link to 2. Install NPM dependencies"></a></h2>
24<p>Go to the root directory and run the following command:</p>
25<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>curl</span><span class="token plain"> </span><span class="token parameter variable" style=color:#cb4b16>-O</span><span class="token plain"> https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.75-stable/template/package.json</span><br></span></code></pre></div></div>
26<p>This will copy the <code>package.json</code> <a href=https://github.com/react-native-community/template/blob/0.75-stable/template/package.json target=_blank rel="noopener noreferrer">file from the Community template</a> to your project.</p>
27<p>Next, install the NPM packages by running:</p>
28<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>install</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>install</span><br></span></code></pre></div></div></div></div></div>
29<p>Installation process has created a new <code>node_modules</code> folder. This folder stores all the JavaScript dependencies required to build your project.</p>
30<p>Add <code>node_modules/</code> to your <code>.gitignore</code> file (here the <a href=https://github.com/react-native-community/template/blob/0.75-stable/template/_gitignore target=_blank rel="noopener noreferrer">Community default one</a>).</p>
31<h2 class="anchor anchorWithStickyNavbar_JmGV" id=3-adding-react-native-to-your-app>3. Adding React Native to your app<a href=#3-adding-react-native-to-your-app class=hash-link aria-label="Direct link to 3. Adding React Native to your app" title="Direct link to 3. Adding React Native to your app"></a></h2>
32<h3 class="anchor anchorWithStickyNavbar_JmGV" id=configuring-gradle>Configuring Gradle<a href=#configuring-gradle class=hash-link aria-label="Direct link to Configuring Gradle" title="Direct link to Configuring Gradle"></a></h3>
33<p>React Native uses the React Native Gradle Plugin to configure your dependencies and project setup.</p>
34<p>First, let's edit your <code>settings.gradle</code> file by adding those lines (as suggested from the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/settings.gradle target=_blank rel="noopener noreferrer">Community template</a>):</p>
35<div class="language-groovy codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>groovy</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-groovy codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1>// Configures the React Native Gradle Settings plugin used for autolinking</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">pluginManagement </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>includeBuild</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"../node_modules/@react-native/gradle-plugin"</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">plugins </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>id</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"com.facebook.react.settings"</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">extensions</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>configure</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactSettingsExtension</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"> ex </span><span class="token operator" style=color:#fc929e>-></span><span class="token plain"> ex</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>autolinkLibrariesFromCommand</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// If using .gradle.kts files:</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// extensions.configure<com.facebook.react.ReactSettingsExtension> { autolinkLibrariesFromCommand() }</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token function" style=color:#79b6f2>includeBuild</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"../node_modules/@react-native/gradle-plugin"</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// Include your existing Gradle modules here.</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// include(":app")</span><br></span></code></pre></div></div>
36<p>Then you need to open your top level <code>build.gradle</code> and include this line (as suggested from the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/build.gradle target=_blank rel="noopener noreferrer">Community template</a>):</p>
37<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">buildscript {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> repositories {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> google()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> mavenCentral()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> dependencies {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> classpath("com.android.tools.build:gradle:7.3.1")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> classpath("com.facebook.react:react-native-gradle-plugin")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span></code></pre></div></div>
38<p>This makes sure the React Native Gradle Plugin (RNGP) is available inside your project.
39Finally, add those lines inside your Applications's <code>build.gradle</code> file (it's a different <code>build.gradle</code> file usually inside your <code>app</code> folder - you can use the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/build.gradle target=_blank rel="noopener noreferrer">Community template file as reference</a>):</p>
40<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">apply plugin: "com.android.application"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>apply plugin: "com.facebook.react"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">repositories {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> mavenCentral()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">dependencies {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> // Other dependencies here</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> // Note: we intentionally don't specify the version number here as RNGP will take care of it.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> // If you don't use the RNGP, you'll have to specify version manually.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> implementation("com.facebook.react:react-android")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> implementation("com.facebook.react:hermes-android")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain">}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>react {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> // Needed to enable Autolinking - https://github.com/react-native-community/cli/blob/master/docs/autolinking.md</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> autolinkLibrariesWithApp()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>}</span><br></span></code></pre></div></div>
41<p>Finally, open your application <code>gradle.properties</code> files and add the following line (here the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/gradle.properties target=_blank rel="noopener noreferrer">Community template file as reference</a>):</p>
42<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>newArchEnabled=true</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>hermesEnabled=true</span><br></span></code></pre></div></div>
43<h3 class="anchor anchorWithStickyNavbar_JmGV" id=configuring-your-manifest>Configuring your manifest<a href=#configuring-your-manifest class=hash-link aria-label="Direct link to Configuring your manifest" title="Direct link to Configuring your manifest"></a></h3>
44<p>First, make sure you have the Internet permission in your <code>AndroidManifest.xml</code>:</p>
45<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token deleted-arrow deleted prefix deleted" style=color:#cb4b16><</span><span class="token deleted-arrow deleted line" style=color:#cb4b16>manifest xmlns:android="http://schemas.android.com/apk/res/android"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-arrow deleted line" style=color:#cb4b16></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> <uses-permission android:name="android.permission.INTERNET" /></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <application</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> android:name=".MainApplication"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> </application></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token deleted-arrow deleted prefix deleted" style=color:#cb4b16><</span><span class="token deleted-arrow deleted line" style=color:#cb4b16>/manifest></span><br></span></code></pre></div></div>
46<p>Then you need to enable <a href=https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted target=_blank rel="noopener noreferrer">cleartext traffic</a> in your <strong>debug</strong> <code>AndroidManifest.xml</code>:</p>
47<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token deleted-arrow deleted prefix deleted" style=color:#cb4b16><</span><span class="token deleted-arrow deleted line" style=color:#cb4b16>?xml version="1.0" encoding="utf-8"?></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-arrow deleted line" style=color:#cb4b16></span><span class="token deleted-arrow deleted prefix deleted" style=color:#cb4b16><</span><span class="token deleted-arrow deleted line" style=color:#cb4b16>manifest xmlns:android="http://schemas.android.com/apk/res/android"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-arrow deleted line" style=color:#cb4b16></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> xmlns:tools="http://schemas.android.com/tools"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <application</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> android:usesCleartextTraffic="true"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> tools:targetApi="28"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> /></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token deleted-arrow deleted prefix deleted" style=color:#cb4b16><</span><span class="token deleted-arrow deleted line" style=color:#cb4b16>/manifest></span><br></span></code></pre></div></div>
48<p>As usual, here the AndroidManifest.xml file from the Community template to use as a reference: <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/AndroidManifest.xml target=_blank rel="noopener noreferrer">main</a> and <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/debug/AndroidManifest.xml target=_blank rel="noopener noreferrer">debug</a></p>
49<p>This is needed as your application will communicate with your local bundler, [Metro][<a href=https://metrobundler.dev/ target=_blank rel="noopener noreferrer">https://metrobundler.dev/</a>],<!-- --> via HTTP.</p>
50<p>Make sure you add this only to your <strong>debug</strong> manifest.</p>
51<h2 class="anchor anchorWithStickyNavbar_JmGV" id=4-writing-the-typescript-code>4. Writing the TypeScript Code<a href=#4-writing-the-typescript-code class=hash-link aria-label="Direct link to 4. Writing the TypeScript Code" title="Direct link to 4. Writing the TypeScript Code"></a></h2>
52<p>Now we will actually modify the native Android application to integrate React Native.</p>
53<p>The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.</p>
54<h3 class="anchor anchorWithStickyNavbar_JmGV" id=create-a-indexjs-file>Create a <code>index.js</code> file<a href=#create-a-indexjs-file class=hash-link aria-label="Direct link to create-a-indexjs-file" title="Direct link to create-a-indexjs-file"></a></h3>
55<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
56<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>import</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.</p>
57<p>Our index.js should look as follows (here the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/index.js target=_blank rel="noopener noreferrer">Community template file as reference</a>):</p>
58<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">AppRegistry</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">App</span><span class="token plain"> </span><span class="token keyword module" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'./App'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token maybe-class-name">AppRegistry</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>registerComponent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'HelloWorld'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token maybe-class-name">App</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
59<h3 class="anchor anchorWithStickyNavbar_JmGV" id=create-a-apptsx-file>Create a <code>App.tsx</code> file<a href=#create-a-apptsx-file class=hash-link aria-label="Direct link to create-a-apptsx-file" title="Direct link to create-a-apptsx-file"></a></h3>
60<p>Let's create an <code>App.tsx</code> file. This is a <a href=https://www.typescriptlang.org/ target=_blank rel="noopener noreferrer">TypeScript</a> file that can have <a href=https://en.wikipedia.org/wiki/JSX_(JavaScript) target=_blank rel="noopener noreferrer">JSX</a> expressions. It contains the root React Native component that we will integrate into our Android application (<a href=https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx target=_blank rel="noopener noreferrer">link</a>):</p>
61<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">SafeAreaView</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">ScrollView</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">StatusBar</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">StyleSheet</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">Text</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> useColorScheme</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">View</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"></span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">Colors</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">DebugInstructions</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">Header</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">ReloadInstructions</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"></span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native/Libraries/NewAppScreen'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>App</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>JSX</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access maybe-class-name">Element</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> isDarkMode </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useColorScheme</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>===</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'dark'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> backgroundStyle </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> backgroundColor</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> isDarkMode </span><span class="token operator" style=color:#fc929e>?</span><span class="token plain"> </span><span class="token maybe-class-name">Colors</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">darker</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">Colors</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">lighter</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>SafeAreaView</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>backgroundStyle</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>StatusBar</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>barStyle</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>isDarkMode </span><span class="token tag script language-javascript operator" style=color:#fc929e>?</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'light-content'</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'dark-content'</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>backgroundColor</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>backgroundStyle</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>backgroundColor</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>ScrollView</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>contentInsetAdjustmentBehavior</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>automatic</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>backgroundStyle</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Header</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> backgroundColor</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> isDarkMode</span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>?</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Colors</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>black</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Colors</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>white</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> padding</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>24</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Step One</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> Edit </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>bold</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">App.tsx</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"> to</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> change this screen and see your edits.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">See your changes</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>ReloadInstructions</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Debug</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>DebugInstructions</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>ScrollView</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>SafeAreaView</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> styles </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>create</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> title</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fontSize</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>24</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fontWeight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'600'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> bold</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fontWeight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'700'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token maybe-class-name">App</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
62<p>Here the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx target=_blank rel="noopener noreferrer">Community template file as reference</a></p>
63<h2 class="anchor anchorWithStickyNavbar_JmGV" id=5-integrating-with-your-android-code>5. Integrating with your Android code<a href=#5-integrating-with-your-android-code class=hash-link aria-label="Direct link to 5. Integrating with your Android code" title="Direct link to 5. Integrating with your Android code"></a></h2>
64<p>We now need to add some native code in order to start the React Native runtime and tell it to render our React components.</p>
65<h3 class="anchor anchorWithStickyNavbar_JmGV" id=updating-your-application-class>Updating your Application class<a href=#updating-your-application-class class=hash-link aria-label="Direct link to Updating your Application class" title="Direct link to Updating your Application class"></a></h3>
66<p>First, we need to update your <code>Application</code> class to properly initialize React Native as follows:</p>
67<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Java<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Kotlin</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">package <your-package-here>;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">import android.app.Application;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.PackageList;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactApplication;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactHost;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactNativeHost;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactPackage;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.defaults.DefaultReactHost;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.defaults.DefaultReactNativeHost;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.soloader.SoLoader;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.soloader.OpenSourceMergedSoMapping</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import java.util.List;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16>class MainApplication extends Application {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>class MainApplication extends Application implements ReactApplication {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> public ReactNativeHost getReactNativeHost() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> return new DefaultReactNativeHost(this) {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> protected List<ReactPackage> getPackages() { return new PackageList(this).getPackages(); }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> protected String getJSMainModuleName() { return "index"; }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> protected boolean isNewArchEnabled() { return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> protected Boolean isHermesEnabled() { return BuildConfig.IS_HERMES_ENABLED; }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> };</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> public ReactHost getReactHost() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> return DefaultReactHost.getDefaultReactHost(getApplicationContext(), getReactNativeHost());</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> @Override</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> public void onCreate() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> super.onCreate();</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> SoLoader.init(this, OpenSourceMergedSoMapping);</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> DefaultNewArchitectureEntryPoint.load();</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">// package <your-package-here></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">import android.app.Application</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.PackageList</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactApplication</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactNativeHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.ReactPackage</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.defaults.DefaultReactNativeHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.soloader.SoLoader</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import com.facebook.react.soloader.OpenSourceMergedSoMapping</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16>class MainApplication : Application() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>class MainApplication : Application(), ReactApplication {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override val reactNativeHost: ReactNativeHost =</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> object : DefaultReactNativeHost(this) {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override fun getPackages(): List<ReactPackage> = PackageList(this).packages</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override fun getJSMainModuleName(): String = "index"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override val reactHost: ReactHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> get() = getDefaultReactHost(applicationContext, reactNativeHost)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> override fun onCreate() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> super.onCreate()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> SoLoader.init(this, OpenSourceMergedSoMapping)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> load()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span></code></pre></div></div></div></div></div>
68<p>As usual, here the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt target=_blank rel="noopener noreferrer">MainApplication.kt Community template file as reference</a></p>
69<h4 class="anchor anchorWithStickyNavbar_JmGV" id=creating-a-reactactivity>Creating a <code>ReactActivity</code><a href=#creating-a-reactactivity class=hash-link aria-label="Direct link to creating-a-reactactivity" title="Direct link to creating-a-reactactivity"></a></h4>
70<p>Finally, we need to create a new <code>Activity</code> that will extend <code>ReactActivity</code> and host the React Native code. This activity will be responsible for starting the React Native runtime and rendering the React component.</p>
71<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Java<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Kotlin</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-java codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>java</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-java codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1>// package <your-package-here>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactActivity</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactActivityDelegate</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>defaults</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>DefaultNewArchitectureEntryPoint</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>defaults</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>DefaultReactActivityDelegate</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>class</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>MyReactActivity</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>extends</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactActivity</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>protected</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getMainComponentName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"HelloWorld"</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>protected</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactActivityDelegate</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>createReactActivityDelegate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>DefaultReactActivityDelegate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getMainComponentName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>DefaultNewArchitectureEntryPoint</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getFabricEnabled</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-kotlin codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>kotlin</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-kotlin codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1>// package <your-package-here></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactActivity</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactActivityDelegate</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">defaults</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">DefaultNewArchitectureEntryPoint</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">fabricEnabled</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">defaults</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">DefaultReactActivityDelegate</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>class</span><span class="token plain"> MyReactActivity </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>ReactActivity</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getMainComponentName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string-literal singleline string" style=color:#8dc891>"HelloWorld"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>createReactActivityDelegate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ReactActivityDelegate </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token function" style=color:#79b6f2>DefaultReactActivityDelegate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> mainComponentName</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> fabricEnabled</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div></div></div>
72<p>As usual, here the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/android/app/src/main/java/com/helloworld/MainApplication.kt target=_blank rel="noopener noreferrer">MainActivity.kt Community template file as reference</a></p>
73<p>Whenever you create a new Activity, you need to add it to your <code>AndroidManifest.xml</code> file. You also need set the theme of <code>MyReactActivity</code> to <code>Theme.AppCompat.Light.NoActionBar</code> (or to any non-ActionBar theme) as otherwise your application will render an ActionBar on top of your React Native screen:</p>
74<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token deleted-arrow deleted prefix deleted" style=color:#cb4b16><</span><span class="token deleted-arrow deleted line" style=color:#cb4b16>manifest xmlns:android="http://schemas.android.com/apk/res/android"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-arrow deleted line" style=color:#cb4b16></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <uses-permission android:name="android.permission.INTERNET" /></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <application</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> android:name=".MainApplication"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> <activity</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> android:name=".MyReactActivity"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> android:label="@string/app_name"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> android:theme="@style/Theme.AppCompat.Light.NoActionBar"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> </activity></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> </application></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token deleted-arrow deleted prefix deleted" style=color:#cb4b16><</span><span class="token deleted-arrow deleted line" style=color:#cb4b16>/manifest></span><br></span></code></pre></div></div>
75<p>Now your activity is ready to run some JavaScript code.</p>
76<h2 class="anchor anchorWithStickyNavbar_JmGV" id=6-test-your-integration>6. Test your integration<a href=#6-test-your-integration class=hash-link aria-label="Direct link to 6. Test your integration" title="Direct link to 6. Test your integration"></a></h2>
77<p>You have completed all the basic steps to integrate React Native with your application. Now we will start the <a href=https://metrobundler.dev/ target=_blank rel="noopener noreferrer">Metro bundler</a> to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from <code>localhost</code> on your developer environment to a simulator or device. This allows for <a href=https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading target=_blank rel="noopener noreferrer">hot reloading</a>.</p>
78<p>First, you need to create a <code>metro.config.js</code> file in the root of your project as follows:</p>
79<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">getDefaultConfig</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>require</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'@react-native/metro-config'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">module</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getDefaultConfig</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">__dirname</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
80<p>You can checkout the <a href=https://github.com/react-native-community/template/blob/0.77-stable/template/metro.config.js target=_blank rel="noopener noreferrer">metro.config.js file</a> from the Community template file as reference.</p>
81<p>Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:</p>
82<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> start</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> start</span><br></span></code></pre></div></div></div></div></div>
83<p>Now build and run your Android app as normal.</p>
84<p>Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:</p>
85<center><img src=/docs/assets/EmbeddedAppAndroidVideo.gif width=300></center>
86<h3 class="anchor anchorWithStickyNavbar_JmGV" id=creating-a-release-build-in-android-studio>Creating a release build in Android Studio<a href=#creating-a-release-build-in-android-studio class=hash-link aria-label="Direct link to Creating a release build in Android Studio" title="Direct link to Creating a release build in Android Studio"></a></h3>
87<p>You can use Android Studio to create your release builds too! It’s as quick as creating release builds of your previously-existing native Android app.</p>
88<p>The React Native Gradle Plugin will take care of bundling the JS code inside your APK/App Bundle.</p>
89<p>If you're not using Android Studio, you can create a release build with:</p>
90<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">cd android</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"># </span><span class="token maybe-class-name">For</span><span class="token plain"> a </span><span class="token maybe-class-name">Release</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>APK</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>.</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">gradlew </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain">app</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain">assembleRelease</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"># </span><span class="token maybe-class-name">For</span><span class="token plain"> a </span><span class="token maybe-class-name">Release</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>AAB</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>.</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">gradlew </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain">app</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain">bundleRelease</span><br></span></code></pre></div></div>
91<h3 class="anchor anchorWithStickyNavbar_JmGV" id=now-what>Now what?<a href=#now-what class=hash-link aria-label="Direct link to Now what?" title="Direct link to Now what?"></a></h3>
92<p>At this point you can continue developing your app as usual. Refer to our <a href=/docs/debugging>debugging</a> and <a href=/docs/running-on-device>deployment</a> docs to learn more about working with React Native.</div><div role=tabpanel class=tabItem_wHwb hidden><h2 class="anchor anchorWithStickyNavbar_JmGV" id=key-concepts>Key Concepts<a href=#key-concepts class=hash-link aria-label="Direct link to Key Concepts" title="Direct link to Key Concepts"></a></h2>
93<p>The keys to integrating React Native components into your iOS application are to:</p>
94<ol>
95<li>Set up the correct directory structure.</li>
96<li>Install the necessary NPM dependencies.</li>
97<li>Adding React Native to your Podfile configuration.</li>
98<li>Writing the TypeScript code for your first React Native screen.</li>
99<li>Integrate React Native with your iOS code using a <code>RCTRootView</code>.</li>
100<li>Testing your integration by running the bundler and seeing your app in action.</li>
101</ol>
102<h2 class="anchor anchorWithStickyNavbar_JmGV" id=using-the-community-template>Using the Community Template<a href=#using-the-community-template class=hash-link aria-label="Direct link to Using the Community Template" title="Direct link to Using the Community Template"></a></h2>
103<p>While you follow this guide, we suggest you to use the <a href=https://github.com/react-native-community/template/ target=_blank rel="noopener noreferrer">React Native Community Template</a> as reference. The template contains a <strong>minimal iOS app</strong> and will help you understanding how to integrate React Native into an existing iOS app.</p>
104<h2 class="anchor anchorWithStickyNavbar_JmGV" id=prerequisites>Prerequisites<a href=#prerequisites class=hash-link aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites"></a></h2>
105<p>Follow the guide on <a href=/docs/set-up-your-environment>setting up your development environment</a> and using <a href=/docs/getting-started-without-a-framework>React Native without a framework</a> to configure your development environment for building React Native apps for iOS.
106This guide also assumes you're familiar with the basics of iOS development such as creating a <code>UIViewController</code> and editing the <code>Podfile</code> file.</p>
107<h3 class="anchor anchorWithStickyNavbar_JmGV" id=1-set-up-directory-structure>1. Set up directory structure<a href=#1-set-up-directory-structure class=hash-link aria-label="Direct link to 1. Set up directory structure" title="Direct link to 1. Set up directory structure"></a></h3>
108<p>To ensure a smooth experience, create a new folder for your integrated React Native project, then <strong>move your existing iOS project</strong> to the <code>/ios</code> subfolder.</p>
109<h2 class="anchor anchorWithStickyNavbar_JmGV" id=2-install-npm-dependencies>2. Install NPM dependencies<a href=#2-install-npm-dependencies class=hash-link aria-label="Direct link to 2. Install NPM dependencies" title="Direct link to 2. Install NPM dependencies"></a></h2>
110<p>Go to the root directory and run the following command:</p>
111<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>curl</span><span class="token plain"> </span><span class="token parameter variable" style=color:#cb4b16>-O</span><span class="token plain"> https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/package.json</span><br></span></code></pre></div></div>
112<p>This will copy the <code>package.json</code> <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/package.json target=_blank rel="noopener noreferrer">file from the Community template</a> to your project.</p>
113<p>Next, install the NPM packages by running:</p>
114<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>install</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>install</span><br></span></code></pre></div></div></div></div></div>
115<p>Installation process has created a new <code>node_modules</code> folder. This folder stores all the JavaScript dependencies required to build your project.</p>
116<p>Add <code>node_modules/</code> to your <code>.gitignore</code> file (here the <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/_gitignore target=_blank rel="noopener noreferrer">Community default one</a>).</p>
117<h3 class="anchor anchorWithStickyNavbar_JmGV" id=3-install-development-tools>3. Install Development tools<a href=#3-install-development-tools class=hash-link aria-label="Direct link to 3. Install Development tools" title="Direct link to 3. Install Development tools"></a></h3>
118<h3 class="anchor anchorWithStickyNavbar_JmGV" id=command-line-tools-for-xcode>Command Line Tools for Xcode<a href=#command-line-tools-for-xcode class=hash-link aria-label="Direct link to Command Line Tools for Xcode" title="Direct link to Command Line Tools for Xcode"></a></h3>
119<p>Install the Command Line Tools. Choose <strong>Settings... (or Preferences...)</strong> in the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.</p>
120<p><img decoding=async loading=lazy alt="Xcode Command Line Tools" src=/assets/images/GettingStartedXcodeCommandLineTools-7ddc121ba824227ca88a078b9ad9105e.png width=1884 height=1324 class=img_SS3x></p>
121<h3 class="anchor anchorWithStickyNavbar_JmGV" id=cocoapods>CocoaPods<a href=#cocoapods class=hash-link aria-label="Direct link to CocoaPods" title="Direct link to CocoaPods"></a></h3>
122<p><a href=https://cocoapods.org target=_blank rel="noopener noreferrer">CocoaPods</a> is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.</p>
123<p>We recommend installing CocoaPods using <a href=https://brew.sh/ target=_blank rel="noopener noreferrer">Homebrew</a>:</p>
124<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">brew </span><span class="token function" style=color:#79b6f2>install</span><span class="token plain"> cocoapods</span><br></span></code></pre></div></div>
125<h2 class="anchor anchorWithStickyNavbar_JmGV" id=4-adding-react-native-to-your-app>4. Adding React Native to your app<a href=#4-adding-react-native-to-your-app class=hash-link aria-label="Direct link to 4. Adding React Native to your app" title="Direct link to 4. Adding React Native to your app"></a></h2>
126<h3 class="anchor anchorWithStickyNavbar_JmGV" id=configuring-cocoapods>Configuring CocoaPods<a href=#configuring-cocoapods class=hash-link aria-label="Direct link to Configuring CocoaPods" title="Direct link to Configuring CocoaPods"></a></h3>
127<p>To configure CocoaPods, we need two files:</p>
128<ul>
129<li>A <strong>Gemfile</strong> that defines which Ruby dependencies we need.</li>
130<li>A <strong>Podfile</strong> that defines how to properly install our dependencies.</li>
131</ul>
132<p>For the <strong>Gemfile</strong>, go to the root directory of your project and run this command</p>
133<div class="language-sh codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>sh</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-sh codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>curl</span><span class="token plain"> </span><span class="token parameter variable" style=color:#cb4b16>-O</span><span class="token plain"> https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/Gemfile</span><br></span></code></pre></div></div>
134<p>This will download the Gemfile from the template.</p>
135<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p>If you created your project with Xcode 16, you need to update the Gemfile as it follows:<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>diff</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16>gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>gem 'cocoapods', '1.16.2'</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain">gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16>gem 'xcodeproj', '< 1.26.0'</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>gem 'xcodeproj', '1.27.0'</span><br></span></code></pre></div></div><p>Xcode 16 generates a project in a slightly different ways from previous versions of Xcode, and you need the latest CocoaPods and Xcodeproj gems to make it work properly.</div></div>
136<p>Similarly, for the <strong>Podfile</strong>, go to the <code>ios</code> folder of your project and run</p>
137<div class="language-sh codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>sh</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-sh codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>curl</span><span class="token plain"> </span><span class="token parameter variable" style=color:#cb4b16>-O</span><span class="token plain"> https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.78-stable/template/ios/Podfile</span><br></span></code></pre></div></div>
138<p>Please use the Community Template as a reference point for the <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/Gemfile target=_blank rel="noopener noreferrer">Gemfile</a> and for the <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile target=_blank rel="noopener noreferrer">Podfile</a>.</p>
139<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p>Remember to change <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/ios/Podfile#L17 target=_blank rel="noopener noreferrer">this line</a>.</div></div>
140<p>Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
141Navigate to the <code>ios</code> folder and run the following commands:</p>
142<div class="language-sh codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>sh</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-sh codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">bundle </span><span class="token function" style=color:#79b6f2>install</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">bundle </span><span class="token builtin class-name" style=color:#fac863>exec</span><span class="token plain"> pod </span><span class="token function" style=color:#79b6f2>install</span><br></span></code></pre></div></div>
143<p>The first command will install the Ruby dependencies and the second command will actually integrate the React Native code in your application so that your iOS files can import the React Native headers.</p>
144<h2 class="anchor anchorWithStickyNavbar_JmGV" id=5-writing-the-typescript-code>5. Writing the TypeScript Code<a href=#5-writing-the-typescript-code class=hash-link aria-label="Direct link to 5. Writing the TypeScript Code" title="Direct link to 5. Writing the TypeScript Code"></a></h2>
145<p>Now we will actually modify the native iOS application to integrate React Native.</p>
146<p>The first bit of code we will write is the actual React Native code for the new screen that will be integrated into our application.</p>
147<h3 class="anchor anchorWithStickyNavbar_JmGV" id=create-a-indexjs-file>Create a <code>index.js</code> file<a href=#create-a-indexjs-file class=hash-link aria-label="Direct link to create-a-indexjs-file" title="Direct link to create-a-indexjs-file"></a></h3>
148<p>First, create an empty <code>index.js</code> file in the root of your React Native project.</p>
149<p><code>index.js</code> is the starting point for React Native applications, and it is always required. It can be a small file that <code>import</code>s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.</p>
150<p>Our <code>index.js</code> should look as follows (here the <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/index.js target=_blank rel="noopener noreferrer">Community template file as reference</a>):</p>
151<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">AppRegistry</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">App</span><span class="token plain"> </span><span class="token keyword module" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'./App'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token maybe-class-name">AppRegistry</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>registerComponent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'HelloWorld'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token maybe-class-name">App</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
152<h3 class="anchor anchorWithStickyNavbar_JmGV" id=create-a-apptsx-file>Create a <code>App.tsx</code> file<a href=#create-a-apptsx-file class=hash-link aria-label="Direct link to create-a-apptsx-file" title="Direct link to create-a-apptsx-file"></a></h3>
153<p>Let's create an <code>App.tsx</code> file. This is a <a href=https://www.typescriptlang.org/ target=_blank rel="noopener noreferrer">TypeScript</a> file that can have <a href=https://en.wikipedia.org/wiki/JSX_(JavaScript) target=_blank rel="noopener noreferrer">JSX</a> expressions. It contains the root React Native component that we will integrate into our iOS application (<a href=https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx target=_blank rel="noopener noreferrer">link</a>):</p>
154<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">SafeAreaView</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">ScrollView</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">StatusBar</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">StyleSheet</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">Text</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> useColorScheme</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">View</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"></span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">Colors</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">DebugInstructions</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">Header</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"> </span><span class="token imports maybe-class-name">ReloadInstructions</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"></span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native/Libraries/NewAppScreen'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>App</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>JSX</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access maybe-class-name">Element</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> isDarkMode </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>useColorScheme</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>===</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'dark'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> backgroundStyle </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> backgroundColor</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> isDarkMode </span><span class="token operator" style=color:#fc929e>?</span><span class="token plain"> </span><span class="token maybe-class-name">Colors</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">darker</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">Colors</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">lighter</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>SafeAreaView</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>backgroundStyle</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>StatusBar</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>barStyle</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>isDarkMode </span><span class="token tag script language-javascript operator" style=color:#fc929e>?</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'light-content'</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript string" style=color:#8dc891>'dark-content'</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>backgroundColor</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>backgroundStyle</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>backgroundColor</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>ScrollView</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>contentInsetAdjustmentBehavior</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>automatic</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>backgroundStyle</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Header</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> backgroundColor</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> isDarkMode</span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>?</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Colors</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>black</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript maybe-class-name" style=color:#fc929e>Colors</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>white</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> padding</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>24</span><span class="token tag script language-javascript punctuation" style=color:#657b83>,</span><span class="token tag script language-javascript" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Step One</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> Edit </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>bold</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">App.tsx</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"> to</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> change this screen and see your edits.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">See your changes</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>ReloadInstructions</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Debug</span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>DebugInstructions</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>ScrollView</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>SafeAreaView</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> styles </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>create</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> title</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fontSize</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>24</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fontWeight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'600'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> bold</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> fontWeight</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'700'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token maybe-class-name">App</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
155<p>Here the <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/App.tsx target=_blank rel="noopener noreferrer">Community template file as reference</a></p>
156<h2 class="anchor anchorWithStickyNavbar_JmGV" id=5-integrating-with-your-ios-code>5. Integrating with your iOS code<a href=#5-integrating-with-your-ios-code class=hash-link aria-label="Direct link to 5. Integrating with your iOS code" title="Direct link to 5. Integrating with your iOS code"></a></h2>
157<p>We now need to add some native code in order to start the React Native runtime and tell it to render our React components.</p>
158<h3 class="anchor anchorWithStickyNavbar_JmGV" id=requirements>Requirements<a href=#requirements class=hash-link aria-label="Direct link to Requirements" title="Direct link to Requirements"></a></h3>
159<p>React Native intialization is now unbound to any specific part of an iOS app.</p>
160<p>React Native can be initialized using a class called <code>RCTReactNativeFactory</code>, that takes care of handling the React Native lifecycle for you.</p>
161<p>Once the class is initialized, you can either start a React Native view providing a <code>UIWindow</code> object, or you can ask for the factory to generate a <code>UIView</code> that you can load in any <code>UIViewController.</code></p>
162<p>In the following example, we will create a ViewController that can load a React Native view as it's <code>view</code>.</p>
163<h4 class="anchor anchorWithStickyNavbar_JmGV" id=create-the-reactviewcontroller>Create the ReactViewController<a href=#create-the-reactviewcontroller class=hash-link aria-label="Direct link to Create the ReactViewController" title="Direct link to Create the ReactViewController"></a></h4>
164<p>Create a new file from template (<kbd>⌘</kbd>+<kbd>N</kbd>) and choose the Cocoa Touch Class template.</p>
165<p>Make sure to select <code>UIViewController</code> as the "Subclass of" field.</p>
166<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">ObjectiveC<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Swift</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><p>Now open the <code>ReactViewController.m</code> file and apply the following changes<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>ReactViewController.m</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">#import "ReactViewController.h"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#import <React/RCTBundleURLProvider.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#import <RCTReactNativeFactory.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#import <RCTDefaultReactNativeFactoryDelegate.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#import <RCTAppDependencyProvider.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">@interface ReactViewController ()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">@end</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>@interface ReactNativeFactoryDelegate: RCTDefaultReactNativeFactoryDelegate</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>@end</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16>@implementation ReactViewController</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>@implementation ReactViewController {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> RCTReactNativeFactory *_factory;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> id<RCTReactNativeFactoryDelegate> _factoryDelegate;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line">- (void)viewDidLoad {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> [super viewDidLoad];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> // Do any additional setup after loading the view.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> _factoryDelegate = [ReactNativeFactoryDelegate new];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line">}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">@end</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>@implementation ReactNativeFactoryDelegate</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>{</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> return [self bundleURL];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>- (NSURL *)bundleURL</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>{</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#if DEBUG</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> return [RCTBundleURLProvider.sharedSettings jsBundleURLForBundleRoot:@"index"];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#else</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> return [NSBundle.mainBundle URLForResource:@"main" withExtension:@"jsbundle"];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#endif</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">@end</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><p>Now open the <code>ReactViewController.swift</code> file and apply the following changes<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>ReactViewController.swift</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">import UIKit</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import React</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import React_RCTAppDelegate</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>import ReactAppDependencyProvider</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">class ReactViewController: UIViewController {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> var reactNativeFactory: RCTReactNativeFactory?</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> var reactNativeFactoryDelegate: RCTReactNativeFactoryDelegate?</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> override func viewDidLoad() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> super.viewDidLoad()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> reactNativeFactoryDelegate = ReactNativeDelegate()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override func sourceURL(for bridge: RCTBridge) -> URL? {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> self.bundleURL()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> override func bundleURL() -> URL? {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> #if DEBUG</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> #else</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> Bundle.main.url(forResource: "main", withExtension: "jsbundle")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> #endif</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>}</span><br></span></code></pre></div></div></div></div></div>
167<h4 class="anchor anchorWithStickyNavbar_JmGV" id=presenting-a-react-native-view-in-a-rootviewcontroller>Presenting a React Native view in a rootViewController<a href=#presenting-a-react-native-view-in-a-rootviewcontroller class=hash-link aria-label="Direct link to Presenting a React Native view in a rootViewController" title="Direct link to Presenting a React Native view in a rootViewController"></a></h4>
168<p>Finally, we can present our React Native view. To do so, we need a new View Controller that can host a view in which we can load the JS content.
169We already have the initial <code>ViewController</code>, and we can make it present the <code>ReactViewController</code>. There are several ways to do so, depending on your app. For this example, we assume that you have a button that presents React Native modally.</p>
170<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">ObjectiveC<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Swift</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>ViewController.m</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">#import "ViewController.h"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>#import "ReactViewController.h"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">@interface ViewController ()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">@end</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> @implementation ViewController</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>@implementation ViewController {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> ReactViewController *reactViewController;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line">- (void)viewDidLoad {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> [super viewDidLoad];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> // Do any additional setup after loading the view.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> self.view.backgroundColor = UIColor.systemBackgroundColor;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> UIButton *button = [UIButton new];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button setTitle:@"Open React Native" forState:UIControlStateNormal];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button setTitleColor:UIColor.systemBlueColor forState:UIControlStateNormal];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button setTitleColor:UIColor.blueColor forState:UIControlStateHighlighted];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button addTarget:self action:@selector(presentReactNative) forControlEvents:UIControlEventTouchUpInside];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [self.view addSubview:button];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.translatesAutoresizingMaskIntoConstraints = NO;</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [NSLayoutConstraint activateConstraints:@[</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor],</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [button.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> ]];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line">}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>- (void)presentReactNative</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>{</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> if (reactViewController == NULL) {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> reactViewController = [ReactViewController new];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> [self presentViewController:reactViewController animated:YES];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">@end</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>ViewController.swift</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">import UIKit</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">class ViewController: UIViewController {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> var reactViewController: ReactViewController?</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> override func viewDidLoad() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> super.viewDidLoad()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> // Do any additional setup after loading the view.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> self.view.backgroundColor = .systemBackground</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> let button = UIButton()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.setTitle("Open React Native", for: .normal)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.setTitleColor(.systemBlue, for: .normal)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.setTitleColor(.blue, for: .highlighted)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.addAction(UIAction { [weak self] _ in</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> guard let self else { return }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> if reactViewController == nil {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> reactViewController = ReactViewController()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> present(reactViewController!, animated: true)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }, for: .touchUpInside)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> self.view.addSubview(button)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.translatesAutoresizingMaskIntoConstraints = false</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> NSLayoutConstraint.activate([</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> ])</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span></code></pre></div></div></div></div></div>
171<p>Make sure to disable the Sandbox scripting. To achieve this, in Xcode, click on your app, then on build settings. Filter for script and set the <code>User Script Sandboxing</code> to <code>NO</code>. This step is needed to properly switch between the Debug and Release version of the <a href=https://github.com/facebook/hermes/blob/main/README.md target=_blank rel="noopener noreferrer">Hermes engine</a> that we ship with React Native.</p>
172<p><img decoding=async loading=lazy alt="Disable Sandboxing" src=/assets/images/disable-sandboxing-837fd639c3510f4bf9b0ea67e3bbe142.png width=2086 height=720 class=img_SS3x></p>
173<p>Finally, make sure to add the <code>UIViewControllerBasedStatusBarAppearance</code> key into your <code>Info.plist</code> file, with value of <code>NO</code>.</p>
174<p><img decoding=async loading=lazy alt="Disable UIViewControllerBasedStatusBarAppearance" src=/assets/images/disable-UIViewControllerBasedStatusBarAppearance-54a3f3ba9efde1694f7d7bfbfa0adbe1.png width=2068 height=792 class=img_SS3x></p>
175<h2 class="anchor anchorWithStickyNavbar_JmGV" id=6-test-your-integration>6. Test your integration<a href=#6-test-your-integration class=hash-link aria-label="Direct link to 6. Test your integration" title="Direct link to 6. Test your integration"></a></h2>
176<p>You have completed all the basic steps to integrate React Native with your application. Now we will start the <a href=https://metrobundler.dev/ target=_blank rel="noopener noreferrer">Metro bundler</a> to build your TypeScript application code into a bundle. Metro's HTTP server shares the bundle from <code>localhost</code> on your developer environment to a simulator or device. This allows for <a href=https://reactnative.dev/blog/2016/03/24/introducing-hot-reloading target=_blank rel="noopener noreferrer">hot reloading</a>.</p>
177<p>First, you need to create a <code>metro.config.js</code> file in the root of your project as follows:</p>
178<div class="language-js codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-js codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">getDefaultConfig</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>require</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'@react-native/metro-config'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">module</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getDefaultConfig</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">__dirname</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
179<p>You can checkout the <a href=https://github.com/react-native-community/template/blob/0.78-stable/template/metro.config.js target=_blank rel="noopener noreferrer">metro.config.js file</a> from the Community template file as reference.</p>
180<p>Then, you need to create a <code>.watchmanconfig</code> file in the root of your project. The file must contain an empty json object:</p>
181<div class="language-sh codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>sh</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-sh codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token builtin class-name" style=color:#fac863>echo</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>></span><span class="token plain"> .watchmanconfig</span><br></span></code></pre></div></div>
182<p>Once you have the configurations file in place, you can run the bundler. Run the following command in the root directory of your project:</p>
183<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> start</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shell</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-shell codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> start</span><br></span></code></pre></div></div></div></div></div>
184<p>Now build and run your iOS app as normal.</p>
185<p>Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:</p>
186<center><img src=/docs/assets/EmbeddedAppIOS078.gif width=300></center>
187<h3 class="anchor anchorWithStickyNavbar_JmGV" id=creating-a-release-build-in-xcode>Creating a release build in Xcode<a href=#creating-a-release-build-in-xcode class=hash-link aria-label="Direct link to Creating a release build in Xcode" title="Direct link to Creating a release build in Xcode"></a></h3>
188<p>You can use Xcode to create your release builds too! The only additional step is to add a script that is executed when the app is built to package your JS and images into the iOS application.</p>
189<ol>
190<li>In Xcode, select your application</li>
191<li>Click on <code>Build Phases</code></li>
192<li>Click on the <code>+</code> in the top left corner and select <code>New Run Script Phase</code></li>
193<li>Click on the <code>Run Script</code> line and rename the Script to <code>Bundle React Native code and images</code></li>
194<li>Paste in the text box the following script</li>
195</ol>
196<div class="language-sh codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Build React Native code and image</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-sh codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token builtin class-name" style=color:#fac863>set</span><span class="token plain"> </span><span class="token parameter variable" style=color:#cb4b16>-e</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token assign-left variable" style=color:#cb4b16>WITH_ENVIRONMENT</span><span class="token operator" style=color:#fc929e>=</span><span class="token string" style=color:#8dc891>"</span><span class="token string variable" style=color:#cb4b16>$REACT_NATIVE_PATH</span><span class="token string" style=color:#8dc891>/scripts/xcode/with-environment.sh"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token assign-left variable" style=color:#cb4b16>REACT_NATIVE_XCODE</span><span class="token operator" style=color:#fc929e>=</span><span class="token string" style=color:#8dc891>"</span><span class="token string variable" style=color:#cb4b16>$REACT_NATIVE_PATH</span><span class="token string" style=color:#8dc891>/scripts/react-native-xcode.sh"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">/bin/sh </span><span class="token parameter variable" style=color:#cb4b16>-c</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"</span><span class="token string variable" style=color:#cb4b16>$WITH_ENVIRONMENT</span><span class="token string" style=color:#8dc891> </span><span class="token string variable" style=color:#cb4b16>$REACT_NATIVE_XCODE</span><span class="token string" style=color:#8dc891>"</span><br></span></code></pre></div></div>
197<ol start=6>
198<li>Drag and drop the script before the one called <code>[CP] Embed Pods Frameworks</code>.</li>
199</ol>
200<p>Now, if you build your app for Release, it will work as expected.</p>
201<h2 class="anchor anchorWithStickyNavbar_JmGV" id=7-passing-initial-props-to-the-react-native-view>7. Passing initial props to the React Native view<a href=#7-passing-initial-props-to-the-react-native-view class=hash-link aria-label="Direct link to 7. Passing initial props to the React Native view" title="Direct link to 7. Passing initial props to the React Native view"></a></h2>
202<p>In some case, you'd like to pass some information from the Native app to JavaScript. For example, you might want to pass the user id of the currently logged user to React Native, together with a token that can be used to retrieve information from a database.</p>
203<p>This is possible by using the <code>initialProperties</code> parameter of the <code>view(withModuleName:initialProperty)</code> overload of the <code>RCTReactNativeFactory</code> class. The following steps shows you how to do it.</p>
204<h3 class="anchor anchorWithStickyNavbar_JmGV" id=update-the-apptsx-file-to-read-the-initial-properties>Update the App.tsx file to read the initial properties.<a href=#update-the-apptsx-file-to-read-the-initial-properties class=hash-link aria-label="Direct link to Update the App.tsx file to read the initial properties." title="Direct link to Update the App.tsx file to read the initial properties."></a></h3>
205<p>Open the <code>App.tsx</code> file and add the following code:</p>
206<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>App.tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain">import {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> Colors,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> DebugInstructions,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> Header,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> ReloadInstructions,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">} from 'react-native/Libraries/NewAppScreen';</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16>function App(): React.JSX.Element {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>function App(props): React.JSX.Element {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> const isDarkMode = useColorScheme() === 'dark';</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> const backgroundStyle = {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> };</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> return (</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <SafeAreaView style={backgroundStyle}></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <StatusBar</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> barStyle={isDarkMode ? 'light-content' : 'dark-content'}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> backgroundColor={backgroundStyle.backgroundColor}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> /></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <ScrollView</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> contentInsetAdjustmentBehavior="automatic"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> style={backgroundStyle}></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> <Header /></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> <View</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> style={{</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> backgroundColor: isDarkMode</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> ? Colors.black</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> : Colors.white,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> padding: 24,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> }}></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> <Text style={styles.title}>Step One</Text></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> <Text></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> Edit <Text style={styles.bold}>App.tsx</Text> to</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> change this screen and see your edits.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> </Text></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> <Text style={styles.title}>See your changes</Text></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> <ReloadInstructions /></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> <Text style={styles.title}>Debug</Text></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> <DebugInstructions /></span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> <Text style={styles.title}>UserID: {props.userID}</Text></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> <Text style={styles.title}>Token: {props.token}</Text></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> </View></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> </ScrollView></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> </SafeAreaView></span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> );</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">const styles = StyleSheet.create({</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> title: {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> fontSize: 24,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> fontWeight: '600',</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> marginLeft: 20,</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> },</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> bold: {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> fontWeight: '700',</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> },</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">});</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">export default App;</span><br></span></code></pre></div></div>
207<p>These changes will tell React Native that your App component is now accepting some properties. The <code>RCTreactNativeFactory</code> will take care of passing them to the component when it's rendered.</p>
208<h3 class="anchor anchorWithStickyNavbar_JmGV" id=update-the-native-code-to-pass-the-initial-properties-to-javascript>Update the Native code to pass the initial properties to JavaScript.<a href=#update-the-native-code-to-pass-the-initial-properties-to-javascript class=hash-link aria-label="Direct link to Update the Native code to pass the initial properties to JavaScript." title="Direct link to Update the Native code to pass the initial properties to JavaScript."></a></h3>
209<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">ObjectiveC<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Swift</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><p>Modify the <code>ReactViewController.mm</code> to pass the initial properties to JavaScript.<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>ReactViewController.mm</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line">- (void)viewDidLoad {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> [super viewDidLoad];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> // Do any additional setup after loading the view.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> _factoryDelegate = [ReactNativeFactoryDelegate new];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> _factoryDelegate.dependencyProvider = [RCTAppDependencyProvider new];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> _factory = [[RCTReactNativeFactory alloc] initWithDelegate:_factoryDelegate];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld"];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> self.view = [_factory.rootViewFactory viewWithModuleName:@"HelloWorld" initialProperties:@{</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @"userID": @"12345678",</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> @"token": @"secretToken"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> }];</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain">}</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><p>Modify the <code>ReactViewController.swift</code> to pass the initial properties to the React Native view.<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>ReactViewController.swift</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> override func viewDidLoad() {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> super.viewDidLoad()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> reactNativeFactoryDelegate = ReactNativeDelegate()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> reactNativeFactoryDelegate!.dependencyProvider = RCTAppDependencyProvider()</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeFactoryDelegate!)</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token deleted-sign deleted prefix deleted" style=color:#cb4b16>-</span><span class="token deleted-sign deleted line" style=color:#cb4b16> view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld")</span><br></span><span class=token-line style=color:#FFFFFF><span class="token deleted-sign deleted line" style=color:#cb4b16></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> view = reactNativeFactory!.rootViewFactory.view(withModuleName: "HelloWorld" initialProperties: [</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> "userID": "12345678",</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> "token": "secretToken"</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>])</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span></code></pre></div></div></div></div></div>
210<ol start=3>
211<li>Run your app once again. You should see the following screen after you present the <code>ReactViewController</code>:</li>
212</ol>
213<center><img src=/docs/assets/brownfield-with-initial-props.png width=30% height=30%></center>
214<h2 class="anchor anchorWithStickyNavbar_JmGV" id=now-what>Now what?<a href=#now-what class=hash-link aria-label="Direct link to Now what?" title="Direct link to Now what?"></a></h2>
215<p>At this point you can continue developing your app as usual. Refer to our <a href=/docs/debugging>debugging</a> and <a href=/docs/running-on-device>deployment</a> docs to learn more about working with React Native.</div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/integration-with-existing-apps.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for next release</a><a href=https://github.com/facebook/react-native-website/edit/main/website/versioned_docs/version-0.79/integration-with-existing-apps.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_bHB7 aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit page for current release</a></div><div class=lastUpdated_VsjB><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2025-04-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/set-up-your-environment><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Set Up Your Environment</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/integration-with-android-fragment><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Integration with an Android Fragment</div></a></nav></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>