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-the-new-architecture/create-module-library" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Create a Library for Your Module · 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/the-new-architecture/create-module-library><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="Create a Library for Your Module · React Native"><meta data-rh=true name=description content="React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the reactnative.directory website, and this is a great resource to bookmark for every React Native developer."><meta data-rh=true property=og:description content="React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the reactnative.directory website, and this is a great resource to bookmark for every React Native developer."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/the-new-architecture/create-module-library><link data-rh=true rel=alternate href=https://reactnative.dev/docs/the-new-architecture/create-module-library hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/the-new-architecture/create-module-library 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/the-new-architecture/create-module-library>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/the-new-architecture/create-module-library>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/the-new-architecture/create-module-library>0.79</a><li><a class=dropdown__link href=/docs/0.78/the-new-architecture/create-module-library>0.78</a><li><a class=dropdown__link href=/docs/0.77/the-new-architecture/create-module-library>0.77</a><li><a class=dropdown__link href=/docs/0.76/the-new-architecture/create-module-library>0.76</a><li><a class=dropdown__link href=/docs/0.75/getting-started>0.75</a><li><a class=dropdown__link href=/docs/0.74/getting-started>0.74</a><li><a class=dropdown__link href=/docs/0.73/getting-started>0.73</a><li><a class=dropdown__link href=/docs/0.72/getting-started>0.72</a><li><a class=dropdown__link href=/docs/0.71/getting-started>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"><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/native-platform>Native Development</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/native-platform>Introduction</a><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>Modules</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/turbo-native-modules-introduction>Android and iOS</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/the-new-architecture/pure-cxx-modules>Cross-Platform with C++</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/the-new-architecture/advanced-topics-modules>Advanced Topics</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>Components</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/fabric-native-components-introduction>Android & iOS</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/the-new-architecture/advanced-topics-components>Advanced Topics</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 menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true tabindex=0 href=/docs/appendix>Miscellaneous</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/appendix>Appendix</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/the-new-architecture/create-module-library>Create a Library for Your Module</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/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 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>Create a Library for Your Module</h1></header>
5<p>React Native has a rich ecosystem of libraries to solve common problems. We collect React Native libraries in the <a href=https://reactnative.directory target=_blank rel="noopener noreferrer">reactnative.directory</a> website, and this is a great resource to bookmark for every React Native developer.</p>
6<p>Sometimes, you might be working on a module that is worth extracting in a separate library for code reuse. This can be a library that you want to reuse in all your apps, a library that you want to distribute to the ecosystem as an open source component, or even a library you'd like to sell.</p>
7<p>In this guide, you'll learn:</p>
8<ul>
9<li>how to extract a module into a library</li>
10<li>how to distribute the library using NPM</li>
11</ul>
12<h2 class="anchor anchorWithStickyNavbar_JmGV" id=extract-the-module-into-a-library>Extract the Module into a Library<a href=#extract-the-module-into-a-library class=hash-link aria-label="Direct link to Extract the Module into a Library" title="Direct link to Extract the Module into a Library"></a></h2>
13<p>You can use the <a href=https://callstack.github.io/react-native-builder-bob/create target=_blank rel="noopener noreferrer"><code>create-react-native-library</code></a> tool to create a new library. This tool sets up a new library with all the boilerplate code that is needed: all the configuration files and all files required by the various platforms. It also comes with a nice interactive menu to guide you through the creation of the library.</p>
14<p>To extract a module into a separate library, you can follow these steps:</p>
15<ol>
16<li>Create the new library</li>
17<li>Move the code from the App to the Library</li>
18<li>Update the code to reflect the new structure</li>
19<li>Publish it.</li>
20</ol>
21<h3 class="anchor anchorWithStickyNavbar_JmGV" id=1-create-a-library>1. Create a Library<a href=#1-create-a-library class=hash-link aria-label="Direct link to 1. Create a Library" title="Direct link to 1. Create a Library"></a></h3>
22<ol>
23<li>Start the creation process by running the command:</li>
24</ol>
25<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">npx create-react-native-library@latest </span><span class="token operator" style=color:#fc929e><</span><span class="token plain">Name of Your Library</span><span class="token operator" style=color:#fc929e>></span><br></span></code></pre></div></div>
26<ol start=2>
27<li>Add a name for your module. It must be a valid npm name, so it should be all lowercase. You can use <code>-</code> to separate words.</li>
28<li>Add a description for the package.</li>
29<li>Continue filling the form until you reach the question <em>"What type of library do you want to develop?"</em>
30<img decoding=async loading=lazy alt="What type of Library" src=/assets/images/what-library-fdc7531153bfcf553ec30e2ab205480e.png width=1744 height=304 class=img_SS3x></li>
31<li>For the sake of this guide, select the <em>Turbo module</em> option. Notice that you can create libraries for both New Architecture and Legacy Architecture.</li>
32<li>Then, you can choose whether you want a library that access the platform (Kotlin & Objective-C) or a shared C++ library (C++ for Android and iOS).</li>
33<li>Finally, select the <code>Test App</code> as last option. This option creates the library with a separate app already configured within the library folder.</li>
34</ol>
35<p>Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code:</p>
36<img class=half-size alt="Folder structure after initializing a new library." src=/docs/assets/turbo-native-modules/c++visualstudiocode.webp>
37<p>Feel free to explore the code that has been created for you. However, the most important parts:</p>
38<ul>
39<li>The <code>android</code> folder: this is where the Android code lives</li>
40<li>The <code>cpp</code> folder: this is where we the c++ code lives</li>
41<li>The <code>ios</code> folder: this is where we the iOS code lives</li>
42<li>The <code>src</code> folder: this is where the JS code lives.</li>
43</ul>
44<p>The <code>package.json</code> is already configured with all the information that we provided to the <code>create-react-native-library</code> tool, including the name and the description of the package. Notice that the <code>package.json</code> is also already configured to run Codegen.</p>
45<div class="language-json codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>json</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-json 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"> </span><span class="token property" style=color:#2aa198>"codegenConfig"</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"> </span><span class="token property" style=color:#2aa198>"name"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"RN<your module name>Spec"</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 property" style=color:#2aa198>"type"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"all"</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 property" style=color:#2aa198>"jsSrcsDir"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"src"</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 property" style=color:#2aa198>"outputDir"</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"> </span><span class="token property" style=color:#2aa198>"ios"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"ios/generated"</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 property" style=color:#2aa198>"android"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"android/generated"</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 property" style=color:#2aa198>"android"</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"> </span><span class="token property" style=color:#2aa198>"javaPackageName"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"com.<name-of-the-module>"</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><span class="token punctuation" style=color:#657b83>,</span><br></span></code></pre></div></div>
46<p>Finally, the library contains already all the infrastructure to let the library be linked with iOS and Android.</p>
47<h3 class="anchor anchorWithStickyNavbar_JmGV" id=2-copy-the-code-over-from-your-app>2. Copy the Code over from Your App<a href=#2-copy-the-code-over-from-your-app class=hash-link aria-label="Direct link to 2. Copy the Code over from Your App" title="Direct link to 2. Copy the Code over from Your App"></a></h3>
48<p>The rest of the guide assumes that you have a local Turbo Native Module in your app, created following the guidelines shown in the other guides in the website: platform specific Turbo Native Modules, or <a href=/docs/the-new-architecture/pure-cxx-modules>cross-platform Turbo Native Modules</a>. But it works also for Components and legacy architecture modules and components. You'll have to adapt the files you need to copy and update.</p>
49<ol>
50<li><strong>[Not required for legacy architecture modules and components]</strong> Move the code you have in the <code>specs</code> folder in your app into the <code>src</code> folder created by the <code>create-react-native-library</code> folder.</li>
51<li>Update the <code>index.ts</code> file to properly export the Turbo Native Module spec so that it is accessible from the library. For example:</li>
52</ol>
53<div class="language-ts codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>ts</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-ts 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"> NativeSampleModule </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'./NativeSampleModule'</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"> NativeSampleModule</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
54<ol start=3>
55<li>
56<p>Copy the native module over:</p>
57<ul>
58<li>Replace the code in the <code>android/src/main/java/com/<name-of-the-module></code> with the code you wrote in the app for your native module, if any.</li>
59<li>Replace the code in the <code>ios</code> folder with the code you wrote in your app for your native module, if any.</li>
60<li>Replace the code in the <code>cpp</code> folder with the code you wrote in your app for your native module, if any.</li>
61</ul>
62</li>
63<li>
64<p><strong>[Not required for legacy architecture modules and components]</strong> Update all the references from the previous spec name to the new spec name, the one that is defined in the <code>codegenConfig</code> field of the library's <code>package.json</code>. For example, if in the app <code>package.json</code> you set <code>AppSpecs</code> as <code>codegenConfig.name</code> and in the library it is called <code>RNNativeSampleModuleSpec</code>, you have to replace every occurrence of <code>AppSpecs</code> with <code>RNNativeSampleModuleSpec</code>.</p>
65</li>
66</ol>
67<p>That's it! You have moved all the required code out of your app and in a separate library.</p>
68<h2 class="anchor anchorWithStickyNavbar_JmGV" id=testing-your-library>Testing your Library<a href=#testing-your-library class=hash-link aria-label="Direct link to Testing your Library" title="Direct link to Testing your Library"></a></h2>
69<p>The <code>create-react-native-library</code> comes with a useful example application that is already configured to work properly with the library. This is a great way to test it!</p>
70<p>If you look at the <code>example</code> folder, you can find the same structure of a new React Native application that you can create from the <a href=https://github.com/react-native-community/template target=_blank rel="noopener noreferrer"><code>react-native-community/template</code></a>.</p>
71<p>To test your library:</p>
72<ol>
73<li>Navigate to the <code>example</code> folder.</li>
74<li>Run <code>yarn install</code> to install all the dependencies.</li>
75<li>For iOS only, you need to install CocoaPods: <code>cd ios && pod install</code>.</li>
76<li>Build and run Android with <code>yarn android</code> from the <code>example</code> folder.</li>
77<li>Build and run iOS with <code>yarn ios</code> from the <code>example</code> folder.</li>
78</ol>
79<h2 class="anchor anchorWithStickyNavbar_JmGV" id=use-your-library-as-a-local-module>Use your library as a Local Module<a href=#use-your-library-as-a-local-module class=hash-link aria-label="Direct link to Use your library as a Local Module" title="Direct link to Use your library as a Local Module"></a></h2>
80<p>There are some scenario where you might want to reuse your library as a local module for your applications, without publishing it to NPM.</p>
81<p>In this case, you might end up in a scenario where you have your library sitting as a sibling of your apps.</p>
82<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">Development</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">├── App</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">└── Library</span><br></span></code></pre></div></div>
83<p>You can use the library created with <code>create-react-native-library</code> also in this case.</p>
84<ol>
85<li>add you library to your app by navigating into the <code>App</code> folder and running <code>yarn add ../Library</code>.</li>
86<li>For iOS only, navigate in the <code>App/ios</code> folder and run <code>bundle exec pod install</code> to install your dependencies.</li>
87<li>Update the <code>App.tsx</code> code to import the code in your library. For example:</li>
88</ol>
89<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">NativeSampleModule</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>'../Library/src/index'</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
90<p>If you run your app right now, Metro would not find the JS files that it needs to serve to the app. That's because metro will be running starting from the <code>App</code> folder and it would not have access to the JS files located in the <code>Library</code> folder. To fix this, let's update the <code>metro.config.js</code> file as it follows</p>
91<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">const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');</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><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">* Metro configuration</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">* https://reactnative.dev/docs/metro</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">* @type {import('metro-config').MetroConfig}</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 inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> const path = require('path');</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> const config = {}</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> const config = {</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> // Make Metro able to resolve required external dependencies</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> watchFolders: [</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> path.resolve(__dirname, '../Library'),</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> resolver: {</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> extraNodeModules: {</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> 'react-native': path.resolve(__dirname, 'node_modules/react-native'),</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><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">module.exports = mergeConfig(getDefaultConfig(__dirname), config);</span><br></span></code></pre></div></div>
92<p>The <code>watchFolders</code> configs tells Metro to watch for files and changes in some additional paths, in this case to the <code>../Library</code> path, which contains the <code>src/index</code> file you need.
93The <code>resolver</code>property is required to feed to the library the React Native code used by the app. The library might refer and import code from React Native: without the additional resolver, the imports in the library will fail.</p>
94<p>At this point, you can build and run your app as usual:</p>
95<ul>
96<li>Build and run Android with <code>yarn android</code> from the <code>example</code> folder.</li>
97<li>Build and run iOS with <code>yarn ios</code> from the <code>example</code> folder.</li>
98</ul>
99<h2 class="anchor anchorWithStickyNavbar_JmGV" id=publish-the-library-on-npm>Publish the Library on NPM<a href=#publish-the-library-on-npm class=hash-link aria-label="Direct link to Publish the Library on NPM" title="Direct link to Publish the Library on NPM"></a></h2>
100<p>The setup to publish everything on NPM is already in place, thanks to <code>create-react-native-library</code>.</p>
101<ol>
102<li>Install the dependencies in your module <code>yarn install</code>.</li>
103<li>Build the library running <code>yarn prepare</code>.</li>
104<li>Release it with <code>yarn release</code>.</li>
105</ol>
106<p>After a while, you'll find your library on NPM. To verify that, run:</p>
107<div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>bash</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-bash 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"> view </span><span class="token operator" style=color:#fc929e><</span><span class="token plain">package.name</span><span class="token operator" style=color:#fc929e>></span><br></span></code></pre></div></div>
108<p>where <code>package.name</code> is the <code>name</code> you set up in the <code>package.json</code> file during the initialization of the library.</p>
109<p>Now, you can install the library in your application by running:</p>
110<div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>bash</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-bash 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>add</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e><</span><span class="token plain">package.name</span><span class="token operator" style=color:#fc929e>></span><br></span></code></pre></div></div>
111<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>For iOS only, whenever you install a new module with some native code, you have to reinstall CocoaPods, by running <code>bundle exec pod install</code> (recommended) or <code>pod install</code> if you are not using Ruby's Bundler (not recommended).</div></div>
112<p>Congratulations! You published your first React Native library.</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/the-new-architecture/create-module-library.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/the-new-architecture/create-module-library.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/appendix><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Appendix</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/headless-js-android><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Headless JS</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=#extract-the-module-into-a-library class="table-of-contents__link toc-highlight">Extract the Module into a Library</a><ul><li><a href=#1-create-a-library class="table-of-contents__link toc-highlight">1. Create a Library</a><li><a href=#2-copy-the-code-over-from-your-app class="table-of-contents__link toc-highlight">2. Copy the Code over from Your App</a></ul><li><a href=#testing-your-library class="table-of-contents__link toc-highlight">Testing your Library</a><li><a href=#use-your-library-as-a-local-module class="table-of-contents__link toc-highlight">Use your library as a Local Module</a><li><a href=#publish-the-library-on-npm class="table-of-contents__link toc-highlight">Publish the Library on NPM</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>