this repo has no description
at main 54 kB view raw
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-react-native-gradle-plugin" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>React Native Gradle Plugin · 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/react-native-gradle-plugin><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="React Native Gradle Plugin · React Native"><meta data-rh=true name=description content="This guide describes how to configure the React Native Gradle Plugin (often referred as RNGP), when building your React Native application for Android."><meta data-rh=true property=og:description content="This guide describes how to configure the React Native Gradle Plugin (often referred as RNGP), when building your React Native application for Android."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/react-native-gradle-plugin><link data-rh=true rel=alternate href=https://reactnative.dev/docs/react-native-gradle-plugin hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/react-native-gradle-plugin 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/react-native-gradle-plugin>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/react-native-gradle-plugin>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/react-native-gradle-plugin>0.79</a><li><a class=dropdown__link href=/docs/0.78/react-native-gradle-plugin>0.78</a><li><a class=dropdown__link href=/docs/0.77/react-native-gradle-plugin>0.77</a><li><a class=dropdown__link href=/docs/0.76/react-native-gradle-plugin>0.76</a><li><a class=dropdown__link href=/docs/0.75/react-native-gradle-plugin>0.75</a><li><a class=dropdown__link href=/docs/0.74/react-native-gradle-plugin>0.74</a><li><a class=dropdown__link href=/docs/0.73/react-native-gradle-plugin>0.73</a><li><a class=dropdown__link href=/docs/0.72/react-native-gradle-plugin>0.72</a><li><a class=dropdown__link href=/docs/0.71/react-native-gradle-plugin>0.71</a><li><a class=dropdown__link href=/docs/0.70/getting-started>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 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/environment-setup>Environment setup</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/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"><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/headless-js-android>Android and iOS guides</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" tabindex=0>Android</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/headless-js-android>Headless JS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/signed-apk-android>Publishing to Google Play Store</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/communication-android>Communication between native and React Native</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/react-native-gradle-plugin>React Native Gradle Plugin</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class=menu__link tabindex=0>iOS</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/linking-libraries-ios>Linking Libraries</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/running-on-simulator-ios>Running On Simulator</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/communication-ios>Communication between native and React Native</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/app-extensions>App Extensions</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/publishing-to-app-store>Publishing to Apple App Store</a></ul></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/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 docItemCol_Qr34"><div class=docItemContainer_tjFy><article><div class="tocCollapsible_wXna theme-doc-toc-mobile tocMobile_Ojys"><button type=button class="clean-btn tocCollapsibleButton_iI2p">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>React Native Gradle Plugin</h1></header><p>This guide describes how to configure the <strong>React Native Gradle Plugin</strong> (often referred as RNGP), when building your React Native application for Android.</p> 5<h2 class="anchor anchorWithStickyNavbar_JmGV" id=using-the-plugin>Using the plugin<a href=#using-the-plugin class=hash-link aria-label="Direct link to Using the plugin" title="Direct link to Using the plugin"></a></h2> 6<p>The React Native Gradle Plugin is distributed as a separate NPM package which is installed automatically with <code>react-native</code>.</p> 7<p>The plugin is <strong>already configured</strong> for new projects created using <code>npx react-native init</code>. You don't need to do any extra steps to install it if you created your app with this command.</p> 8<p>If you're integrating React Native into an existing project, please refer to <a href=/docs/next/integration-with-existing-apps#configuring-gradle>the corresponding page</a>: it contains specific instructions on how to install the plugin.</p> 9<h2 class="anchor anchorWithStickyNavbar_JmGV" id=configuring-the-plugin>Configuring the plugin<a href=#configuring-the-plugin class=hash-link aria-label="Direct link to Configuring the plugin" title="Direct link to Configuring the plugin"></a></h2> 10<p>By default, the plugin will work <strong>out of the box</strong> with sensible defaults. You should refer to this guide and customize the behavior only if you need it.</p> 11<p>To configure the plugin you can modify the <code>react</code> block, inside your <code>android/app/build.gradle</code>:</p> 12<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 plain">apply plugin</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"> </span><span class="token interpolation-string string" style=color:#8dc891>"com.facebook.react"</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>/**</span><br></span><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1> * This is the configuration block to customize your React Native Android app.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1> * By default you don't need to apply any configuration, just uncomment the lines you need.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1> */</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">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 comment" style=color:#93a1a1>// Custom configuration goes here.</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> 13<p>Each configuration key is described below:</p> 14<h3 class="anchor anchorWithStickyNavbar_JmGV" id=root><code>root</code><a href=#root class=hash-link aria-label="Direct link to root" title="Direct link to root"></a></h3> 15<p>This is the root folder of your React Native project, i.e. where the <code>package.json</code> file lives. Default is <code>..</code>. You can customize it as follows:</p> 16<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 plain">root </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>file</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"../"</span><span class="token punctuation" style=color:#657b83>)</span><br></span></code></pre></div></div> 17<h3 class="anchor anchorWithStickyNavbar_JmGV" id=reactnativedir><code>reactNativeDir</code><a href=#reactnativedir class=hash-link aria-label="Direct link to reactnativedir" title="Direct link to reactnativedir"></a></h3> 18<p>This is the folder where the <code>react-native</code> package lives. Default is <code>../node_modules/react-native</code>. 19If you're in a monorepo or using a different package manager, you can use adjust <code>reactNativeDir</code> to your setup.</p> 20<p>You can customize it as follows:</p> 21<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 plain">reactNativeDir </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>file</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"../node_modules/react-native"</span><span class="token punctuation" style=color:#657b83>)</span><br></span></code></pre></div></div> 22<h3 class="anchor anchorWithStickyNavbar_JmGV" id=codegendir><code>codegenDir</code><a href=#codegendir class=hash-link aria-label="Direct link to codegendir" title="Direct link to codegendir"></a></h3> 23<p>This is the folder where the <code>react-native-codegen</code> package lives. Default is <code>../node_modules/react-native-codegen</code>. 24If you're in a monorepo or using a different package manager, you can adjust <code>codegenDir</code> to your setup.</p> 25<p>You can customize it as follows:</p> 26<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 plain">codegenDir </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>file</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"../node_modules/@react-native/codegen"</span><span class="token punctuation" style=color:#657b83>)</span><br></span></code></pre></div></div> 27<h3 class="anchor anchorWithStickyNavbar_JmGV" id=clifile><code>cliFile</code><a href=#clifile class=hash-link aria-label="Direct link to clifile" title="Direct link to clifile"></a></h3> 28<p>This is the entrypoint file for the React Native CLI. Default is <code>../node_modules/react-native/cli.js</code>. 29The entrypoint file is needed as the plugin needs to invoke the CLI for bundling and creating your app.</p> 30<p>If you're in a monorepo or using a different package manager, you can adjust <code>cliFile</code> to your setup. 31You can customize it as follows:</p> 32<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 plain">cliFile </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>file</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"../node_modules/react-native/cli.js"</span><span class="token punctuation" style=color:#657b83>)</span><br></span></code></pre></div></div> 33<h3 class="anchor anchorWithStickyNavbar_JmGV" id=debuggablevariants><code>debuggableVariants</code><a href=#debuggablevariants class=hash-link aria-label="Direct link to debuggablevariants" title="Direct link to debuggablevariants"></a></h3> 34<p>This is the list of variants that are debuggable (see <a href=#using-variants>using variants</a> for more context on variants).</p> 35<p>By default the plugin is considering as <code>debuggableVariants</code> only <code>debug</code>, while <code>release</code> is not. If you have other 36variants (like <code>staging</code>, <code>lite</code>, etc.) you'll need to adjust this accordingly.</p> 37<p>Variants that are listed as <code>debuggableVariants</code> will not come with a shipped bundle, so you'll need Metro to run them.</p> 38<p>You can customize it as follows:</p> 39<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 plain">debuggableVariants </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 interpolation-string string" style=color:#8dc891>"liteDebug"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token interpolation-string string" style=color:#8dc891>"prodDebug"</span><span class="token punctuation" style=color:#657b83>]</span><br></span></code></pre></div></div> 40<h3 class="anchor anchorWithStickyNavbar_JmGV" id=nodeexecutableandargs><code>nodeExecutableAndArgs</code><a href=#nodeexecutableandargs class=hash-link aria-label="Direct link to nodeexecutableandargs" title="Direct link to nodeexecutableandargs"></a></h3> 41<p>This is the list of node command and arguments that should be invoked for all the scripts. By default is <code>[node]</code> but can be customized to add extra flags as follows:</p> 42<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 plain">nodeExecutableAndArgs </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 interpolation-string string" style=color:#8dc891>"node"</span><span class="token punctuation" style=color:#657b83>]</span><br></span></code></pre></div></div> 43<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bundlecommand><code>bundleCommand</code><a href=#bundlecommand class=hash-link aria-label="Direct link to bundlecommand" title="Direct link to bundlecommand"></a></h3> 44<p>This is the name of the <code>bundle</code> command to be invoked when creating the bundle for your app. That's useful if you're using <a href=https://reactnative.dev/docs/0.74/ram-bundles-inline-requires target=_blank rel="noopener noreferrer">RAM Bundles</a>. By default is <code>bundle</code> but can be customized to add extra flags as follows:</p> 45<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 plain">bundleCommand </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token interpolation-string string" style=color:#8dc891>"ram-bundle"</span><br></span></code></pre></div></div> 46<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bundleconfig><code>bundleConfig</code><a href=#bundleconfig class=hash-link aria-label="Direct link to bundleconfig" title="Direct link to bundleconfig"></a></h3> 47<p>This is the path to a configuration file that will be passed to <code>bundle --config &lt;file></code> if provided. Default is empty (no config file will be probided). More information on bundling config files can be found <a href=https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle target=_blank rel="noopener noreferrer">on the CLI documentation</a>. Can be customized as follow:</p> 48<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 plain">bundleConfig </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>file</span><span class="token punctuation" style=color:#657b83>(</span><span class="token operator" style=color:#fc929e>..</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">rn</span><span class="token operator" style=color:#fc929e>-</span><span class="token plain">cli</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">config</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">js</span><span class="token punctuation" style=color:#657b83>)</span><br></span></code></pre></div></div> 49<h3 class="anchor anchorWithStickyNavbar_JmGV" id=bundleassetname><code>bundleAssetName</code><a href=#bundleassetname class=hash-link aria-label="Direct link to bundleassetname" title="Direct link to bundleassetname"></a></h3> 50<p>This is the name of the bundle file that should be generated. Default is <code>index.android.bundle</code>. Can be customized as follow:</p> 51<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 plain">bundleAssetName </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token interpolation-string string" style=color:#8dc891>"MyApplication.android.bundle"</span><br></span></code></pre></div></div> 52<h3 class="anchor anchorWithStickyNavbar_JmGV" id=entryfile><code>entryFile</code><a href=#entryfile class=hash-link aria-label="Direct link to entryfile" title="Direct link to entryfile"></a></h3> 53<p>The entry file used for bundle generation. The default is to search for <code>index.android.js</code> or <code>index.js</code>. Can be customized as follow:</p> 54<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 plain">entryFile </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>file</span><span class="token punctuation" style=color:#657b83>(</span><span class="token interpolation-string string" style=color:#8dc891>"../js/MyApplication.android.js"</span><span class="token punctuation" style=color:#657b83>)</span><br></span></code></pre></div></div> 55<h3 class="anchor anchorWithStickyNavbar_JmGV" id=extrapackagerargs><code>extraPackagerArgs</code><a href=#extrapackagerargs class=hash-link aria-label="Direct link to extrapackagerargs" title="Direct link to extrapackagerargs"></a></h3> 56<p>A list of extra flags that will be passed to the <code>bundle</code> command. The list of available flags is in <a href=https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle target=_blank rel="noopener noreferrer">the CLI documentation</a>. Default is empty. Can be customized as follows:</p> 57<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 plain">extraPackagerArgs </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 punctuation" style=color:#657b83>]</span><br></span></code></pre></div></div> 58<h3 class="anchor anchorWithStickyNavbar_JmGV" id=hermescommand><code>hermesCommand</code><a href=#hermescommand class=hash-link aria-label="Direct link to hermescommand" title="Direct link to hermescommand"></a></h3> 59<p>The path to the <code>hermesc</code> command (the Hermes Compiler). React Native comes with a version of the Hermes compiler bundled with it, so you generally won't be needing to customize this. The plugin will use the correct compiler for your system by default.</p> 60<h3 class="anchor anchorWithStickyNavbar_JmGV" id=hermesflags><code>hermesFlags</code><a href=#hermesflags class=hash-link aria-label="Direct link to hermesflags" title="Direct link to hermesflags"></a></h3> 61<p>The list of flags to pass to <code>hermesc</code>. By default is <code>["-O", "-output-source-map"]</code>. You can customize it as follows</p> 62<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 plain">hermesFlags </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 interpolation-string string" style=color:#8dc891>"-O"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token interpolation-string string" style=color:#8dc891>"-output-source-map"</span><span class="token punctuation" style=color:#657b83>]</span><br></span></code></pre></div></div> 63<h3 class="anchor anchorWithStickyNavbar_JmGV" id=enablebundlecompression><code>enableBundleCompression</code><a href=#enablebundlecompression class=hash-link aria-label="Direct link to enablebundlecompression" title="Direct link to enablebundlecompression"></a></h3> 64<p>Whether the Bundle Asset should be compressed when packaged into a <code>.apk</code>, or not.</p> 65<p>Disabling compression for the <code>.bundle</code> allows it to be directly memory-mapped to RAM, hence improving startup time - at the cost of a larger resulting app size on disk. Please note that the <code>.apk</code> download size will be mostly unaffected as the <code>.apk</code> files are compressed before downloading</p> 66<p>By default this is disabled, and you should not turn it on, unless you're really concerned about disk space for your application.</p> 67<h2 class="anchor anchorWithStickyNavbar_JmGV" id=using-flavors--build-variants>Using Flavors & Build Variants<a href=#using-flavors--build-variants class=hash-link aria-label="Direct link to Using Flavors & Build Variants" title="Direct link to Using Flavors & Build Variants"></a></h2> 68<p>When building Android apps, you might want to use <a href=https://developer.android.com/studio/build/build-variants#product-flavors target=_blank rel="noopener noreferrer">custom flavors</a> to have different versions of your app starting from the same project.</p> 69<p>Please refer to the <a href=https://developer.android.com/studio/build/build-variants target=_blank rel="noopener noreferrer">official Android guide</a> to configure custom build types (like <code>staging</code>) or custom flavors (like <code>full</code>, <code>lite</code>, etc.). 70By default new apps are created with two build types (<code>debug</code> and <code>release</code>) and no custom flavors.</p> 71<p>The combination of all the build types and all the flavors generates a set of <strong>build variants</strong>. For instance for <code>debug</code>/<code>staging</code>/<code>release</code> build types and <code>full</code>/<code>lite</code> you will have 6 build variants: <code>fullDebug</code>, <code>fullStaging</code>, <code>fullRelease</code> and so on.</p> 72<p>If you're using custom variants beyond <code>debug</code> and <code>release</code>, you need to instruct the React Native Gradle Plugin specifying which of your variants are <strong>debuggable</strong> using the <a href=#debuggablevariants><code>debuggableVariants</code></a> configuration as follows:</p> 73<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.facebook.react"</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">react {</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> debuggableVariants = ["fullStaging", "fullDebug"]</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> 74<p>This is necessary because the plugin will skip the JS bundling for all the <code>debuggableVariants</code>: you'll need Metro to run them. For example, if you list <code>fullStaging</code> in the <code>debuggableVariants</code>, you won't be able to publish it to a store as it will be missing the bundle.</p> 75<h2 class="anchor anchorWithStickyNavbar_JmGV" id=what-is-the-plugin-doing-under-the-hood>What is the plugin doing under the hood?<a href=#what-is-the-plugin-doing-under-the-hood class=hash-link aria-label="Direct link to What is the plugin doing under the hood?" title="Direct link to What is the plugin doing under the hood?"></a></h2> 76<p>The React Native Gradle Plugin is responsible for configuring your Application build to ship React Native applications to production. 77The plugin is also used inside 3rd party libraries, to run the <a href=https://github.com/reactwg/react-native-new-architecture/blob/main/docs/codegen.md target=_blank rel="noopener noreferrer">Codegen</a> used for the New Architecture.</p> 78<p>Here is a summary of the plugin responsibilities:</p> 79<ul> 80<li>Add a <code>createBundle&lt;Variant>JsAndAssets</code> task for every non debuggable variant, that is responsible of invoking the <code>bundle</code>, <code>hermesc</code> and <code>compose-source-map</code> commands.</li> 81<li>Setting up the proper version of the <code>com.facebook.react:react-android</code> and <code>com.facebook.react:hermes-android</code> dependency, reading the React Native version from the <code>package.json</code> of <code>react-native</code>.</li> 82<li>Setting up the proper Maven repositories (Maven Central, Google Maven Repo, JSC local Maven repo, etc.) needed to consume all the necessary Maven Dependencies.</li> 83<li>Setting up the NDK to let you build apps that are using the New Architecture.</li> 84<li>Setting up the <code>buildConfigFields</code> so that you can know at runtime if Hermes or the New Architecture are enabled.</li> 85<li>Setting up the Metro DevServer Port as an Android resource so the app knows on which port to connect.</li> 86<li>Invoking the <a href=https://github.com/reactwg/react-native-new-architecture/blob/main/docs/codegen.md target=_blank rel="noopener noreferrer">React Native Codegen</a> if a library or app is using the Codegen for the New Architecture.</li> 87</ul></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/react-native-gradle-plugin.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/react-native-gradle-plugin.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/communication-android><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Communication between native and React Native</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/linking-libraries-ios><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Linking Libraries</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#using-the-plugin class="table-of-contents__link toc-highlight">Using the plugin</a><li><a href=#configuring-the-plugin class="table-of-contents__link toc-highlight">Configuring the plugin</a><ul><li><a href=#root class="table-of-contents__link toc-highlight"><code>root</code></a><li><a href=#reactnativedir class="table-of-contents__link toc-highlight"><code>reactNativeDir</code></a><li><a href=#codegendir class="table-of-contents__link toc-highlight"><code>codegenDir</code></a><li><a href=#clifile class="table-of-contents__link toc-highlight"><code>cliFile</code></a><li><a href=#debuggablevariants class="table-of-contents__link toc-highlight"><code>debuggableVariants</code></a><li><a href=#nodeexecutableandargs class="table-of-contents__link toc-highlight"><code>nodeExecutableAndArgs</code></a><li><a href=#bundlecommand class="table-of-contents__link toc-highlight"><code>bundleCommand</code></a><li><a href=#bundleconfig class="table-of-contents__link toc-highlight"><code>bundleConfig</code></a><li><a href=#bundleassetname class="table-of-contents__link toc-highlight"><code>bundleAssetName</code></a><li><a href=#entryfile class="table-of-contents__link toc-highlight"><code>entryFile</code></a><li><a href=#extrapackagerargs class="table-of-contents__link toc-highlight"><code>extraPackagerArgs</code></a><li><a href=#hermescommand class="table-of-contents__link toc-highlight"><code>hermesCommand</code></a><li><a href=#hermesflags class="table-of-contents__link toc-highlight"><code>hermesFlags</code></a><li><a href=#enablebundlecompression class="table-of-contents__link toc-highlight"><code>enableBundleCompression</code></a></ul><li><a href=#using-flavors--build-variants class="table-of-contents__link toc-highlight">Using Flavors & Build Variants</a><li><a href=#what-is-the-plugin-doing-under-the-hood class="table-of-contents__link toc-highlight">What is the plugin doing under the hood?</a></ul></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>