.cache/fetch/reactnative.dev/docs_the-new-architecture_pure-cxx-modules.html at main · kitten.sh/rn-llms-txt-gen

this repo has no description
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_the-new-architecture_pure-cxx-modules.html
at main 135 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-the-new-architecture/pure-cxx-modules" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Cross-Platform Native Modules (C++) · 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/pure-cxx-modules><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="Cross-Platform Native Modules (C++) · React Native"><meta data-rh=true name=description content="Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code."><meta data-rh=true property=og:description content="Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/the-new-architecture/pure-cxx-modules><link data-rh=true rel=alternate href=https://reactnative.dev/docs/the-new-architecture/pure-cxx-modules hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/the-new-architecture/pure-cxx-modules 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/pure-cxx-modules>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/the-new-architecture/pure-cxx-modules>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/the-new-architecture/pure-cxx-modules>0.79</a><li><a class=dropdown__link href=/docs/0.78/the-new-architecture/pure-cxx-modules>0.78</a><li><a class=dropdown__link href=/docs/0.77/the-new-architecture/pure-cxx-modules>0.77</a><li><a class=dropdown__link href=/docs/0.76/the-new-architecture/pure-cxx-modules>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 menu__link--active" 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 menu__link--active" aria-current=page 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 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 tabindex=0 href=/docs/appendix>Miscellaneous</a></div></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>Cross-Platform Native Modules (C++)</h1></header>
  5<!-- -->
  6<p>Writing a module in C++ is the best way to share platform-agnostic code between Android and iOS. With pure C++ modules, you can write your logic only once and reuse it right away from all the platforms, without the need of writing platform-specific code.</p>
  7<p>In this guide, we will go through the creation of a pure C++ Turbo Native Module:</p>
  8<ol>
  9<li>Create the JS specs</li>
 10<li>Configure Codegen to generate the scaffolding</li>
 11<li>Implement the Native logic</li>
 12<li>Register the module in the Android and iOS application</li>
 13<li>Test your changes in JS</li>
 14</ol>
 15<p>The rest of this guide assume that you have created your application running the command:</p>
 16<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">npx @react-native-community/cli@latest init SampleApp </span><span class="token parameter variable" style=color:#cb4b16>--version</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>0.76</span><span class="token plain">.0</span><br></span></code></pre></div></div>
 17<h2 class="anchor anchorWithStickyNavbar_JmGV" id=1-create-the-js-specs>1. Create the JS specs<a href=#1-create-the-js-specs class=hash-link aria-label="Direct link to 1. Create the JS specs" title="Direct link to 1. Create the JS specs"></a></h2>
 18<p>Pure C++ Turbo Native Modules are Turbo Native Modules. They need a specification file (also called spec file) so that Codegen can create the scaffolding code for us. The specification file is also what we use to access the Turbo Native Module in JS.</p>
 19<p>Spec files need to be written in a typed JS dialect. React Native currently supports Flow or TypeScript.</p>
 20<ol>
 21<li>Inside the root folder of your app, create a new folder called <code>specs</code>.</li>
 22<li>Create a new file called <code>NativeSampleModule.ts</code> with the following code:</li>
 23</ol>
 24<div class="theme-admonition theme-admonition-warning admonition_WCGJ alert alert--warning"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 16 16"><path fill-rule=evenodd d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg></span>warning</div><div class=admonitionContent_pbrs><p>All Native Turbo Module spec files must have the prefix <code>Native</code>, otherwise Codegen will ignore them.</div></div>
 25<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">TypeScript<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Flow</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb hidden><div class="language-ts codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>specs/NativeSampleModule.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 comment" style=color:#93a1a1>// @flow</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>type</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">TurboModule</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"> TurboModuleRegistry </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"react-native"</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>interface</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Spec</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>extends</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>TurboModule</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 operator" style=color:#fc929e>+</span><span class="token function-variable function" style=color:#79b6f2>reverseString</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">input</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">TurboModuleRegistry</span><span class="token punctuation" style=color:#657b83>.</span><span class="token generic-function function" style=color:#79b6f2>getEnforcing</span><span class="token generic-function generic class-name operator" style=color:#fc929e>&lt;</span><span class="token generic-function generic class-name" style=color:#fac863>Spec</span><span class="token generic-function generic class-name operator" style=color:#fc929e>></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 string" style=color:#8dc891>"NativeSampleModule"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Spec</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb><div class="language-ts codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>specs/NativeSampleModule.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"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">TurboModule</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> TurboModuleRegistry</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>interface</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Spec</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>extends</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>TurboModule</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token keyword" style=color:#c5a5c5>readonly</span><span class="token plain"> </span><span class="token function-variable function" style=color:#79b6f2>reverseString</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">input</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=></span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> TurboModuleRegistry</span><span class="token punctuation" style=color:#657b83>.</span><span class="token generic-function function" style=color:#79b6f2>getEnforcing</span><span class="token generic-function generic class-name operator" style=color:#fc929e>&lt;</span><span class="token generic-function generic class-name" style=color:#fac863>Spec</span><span class="token generic-function generic class-name operator" style=color:#fc929e>></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 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"></span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div></div></div></div>
 26<h2 class="anchor anchorWithStickyNavbar_JmGV" id=2-configure-codegen>2. Configure Codegen<a href=#2-configure-codegen class=hash-link aria-label="Direct link to 2. Configure Codegen" title="Direct link to 2. Configure Codegen"></a></h2>
 27<p>The next step is to configure <a href=/docs/the-new-architecture/what-is-codegen>Codegen</a> in your <code>package.json</code>. Update the file to include:</p>
 28<div class="language-json codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>package.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>"start"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"react-native start"</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>"test"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"jest"</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 code-add-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 code-add-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>"AppSpecs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class="token-line code-add-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>"modules"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class="token-line code-add-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>"specs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class="token-line code-add-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 code-add-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.sampleapp.specs"</span><span class="token plain"></span><br></span><span class="token-line code-add-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 code-add-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>"dependencies"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><br></span></code></pre></div></div>
 29<p>This configuration tells Codegen to look for spec files in the <code>specs</code> folder. It also instructs Codegen to only generate code for <code>modules</code> and to namespace the generated code as <code>AppSpecs</code>.</p>
 30<h2 class="anchor anchorWithStickyNavbar_JmGV" id=3-write-the-native-code>3. Write the Native Code<a href=#3-write-the-native-code class=hash-link aria-label="Direct link to 3. Write the Native Code" title="Direct link to 3. Write the Native Code"></a></h2>
 31<p>Writing a C++ Turbo Native Module allows you to share the code between Android an iOS. Therefore we will be writing the code once, and we will look into what changes we need to apply to the platforms so that the C++ code can be picked up.</p>
 32<ol>
 33<li>
 34<p>Create a folder named <code>shared</code> at the same level as the <code>android</code> and <code>ios</code> folders.</p>
 35</li>
 36<li>
 37<p>Inside the <code>shared</code> folder, create a new file called <code>NativeSampleModule.h</code>.</p>
 38<div class="language-cpp codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shared/NativeSampleModule.h</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-cpp codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>pragma</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression" style=color:#2aa198>once</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 macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>include</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property string" style=color:#8dc891>&lt;AppSpecsJSI.h></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 macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>include</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property string" style=color:#8dc891>&lt;memory></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>include</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property string" style=color:#8dc891>&lt;string></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>namespace</span><span class="token plain"> facebook</span><span class="token double-colon punctuation" style=color:#657b83>::</span><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" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>class</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeSampleModule</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token base-clause keyword" style=color:#c5a5c5>public</span><span class="token base-clause"> </span><span class="token base-clause class-name" style=color:#fac863>NativeSampleModuleCxxSpec</span><span class="token base-clause operator" style=color:#fc929e>&lt;</span><span class="token base-clause class-name" style=color:#fac863>NativeSampleModule</span><span class="token base-clause 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 keyword" style=color:#c5a5c5>public</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token function" style=color:#79b6f2>NativeSampleModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">shared_ptr</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">CallInvoker</span><span class="token operator" style=color:#fc929e>></span><span class="token plain"> jsInvoker</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">string </span><span class="token function" style=color:#79b6f2>reverseString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">jsi</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">Runtime</span><span class="token operator" style=color:#fc929e>&</span><span class="token plain"> rt</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">string input</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token 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 punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// namespace 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></code></pre></div></div>
 39</li>
 40<li>
 41<p>Inside the <code>shared</code> folder, create a new file called <code>NativeSampleModule.cpp</code>.</p>
 42<div class="language-cpp codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>shared/NativeSampleModule.cpp</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-cpp codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>include</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property string" style=color:#8dc891>"NativeSampleModule.h"</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>namespace</span><span class="token plain"> facebook</span><span class="token double-colon punctuation" style=color:#657b83>::</span><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" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token class-name" style=color:#fac863>NativeSampleModule</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token function" style=color:#79b6f2>NativeSampleModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">shared_ptr</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">CallInvoker</span><span class="token operator" style=color:#fc929e>></span><span class="token plain"> jsInvoker</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>NativeSampleModuleCxxSpec</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token function" style=color:#79b6f2>move</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">jsInvoker</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token 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">std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">string </span><span class="token class-name" style=color:#fac863>NativeSampleModule</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token function" style=color:#79b6f2>reverseString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">jsi</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">Runtime</span><span class="token operator" style=color:#fc929e>&</span><span class="token plain"> rt</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token plain">string input</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> std</span><span class="token double-colon punctuation" style=color:#657b83>::</span><span class="token function" style=color:#79b6f2>string</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">input</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>rbegin</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> input</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>rend</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></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><span class="token comment" style=color:#93a1a1>// namespace facebook::react</span><br></span></code></pre></div></div>
 43</li>
 44</ol>
 45<p>Let's have a look at the two files we created:</p>
 46<ul>
 47<li>The <code>NativeSampleModule.h</code> file is the header file for a Pure C++ TurboModule. The <code>include</code> statements make sure that we include the specs that will be created by Codegen and that contains the interface and the base class we need to implement.</li>
 48<li>The module lives in the <code>facebook::react</code> namespace to have access to all the types that live in that namespace.</li>
 49<li>The class <code>NativeSampleModule</code> is the actual Turbo Native Module class and it extends the <code>NativeSampleModuleCxxSpec</code> class which contains some glue code and boilerplate code to let this class behave as a Turbo Native Module.</li>
 50<li>Finally, we have the constructor, that accepts a pointer to the <code>CallInvoker</code>, to communicate with JS if needed and the function's prototype we have to implement.</li>
 51</ul>
 52<p>The <code>NativeSampleModule.cpp</code> file is the actual implementation of our Turbo Native Module and implements the constructor and the method that we declared in the specs.</p>
 53<h2 class="anchor anchorWithStickyNavbar_JmGV" id=4-register-the-module-in-the-platform>4. Register the Module in the platform<a href=#4-register-the-module-in-the-platform class=hash-link aria-label="Direct link to 4. Register the Module in the platform" title="Direct link to 4. Register the Module in the platform"></a></h2>
 54<p>The next steps will let us register the module in the platform. This is the step that exposes the native code to JS so that the React Native application can finally call the native methods from the JS layer.</p>
 55<p>This is the only time when we will have to write some platform-specific code.</p>
 56<h3 class="anchor anchorWithStickyNavbar_JmGV" id=android>Android<a href=#android class=hash-link aria-label="Direct link to Android" title="Direct link to Android"></a></h3>
 57<p>To make sure that the Android app can effectively build the C++ Turbo Native Module, we need to:</p>
 58<ol>
 59<li>Create a <code>CMakeLists.txt</code> to access our C++ code.</li>
 60<li>Modify <code>build.gradle</code> to point to the newly created <code>CMakeLists.txt</code> file.</li>
 61<li>Create an <code>OnLoad.cpp</code> file in our Android app to register the new Turbo Native Module.</li>
 62</ol>
 63<h4 class="anchor anchorWithStickyNavbar_JmGV" id=1-create-the-cmakeliststxt-file>1. Create the <code>CMakeLists.txt</code> file<a href=#1-create-the-cmakeliststxt-file class=hash-link aria-label="Direct link to 1-create-the-cmakeliststxt-file" title="Direct link to 1-create-the-cmakeliststxt-file"></a></h4>
 64<p>Android uses CMake to build. CMake needs to access the files we defined in our shared folder to be able to build them.</p>
 65<ol>
 66<li>Create a new folder <code>SampleApp/android/app/src/main/jni</code>. The <code>jni</code> folder is where the C++ side of Android lives.</li>
 67<li>Create a <code>CMakeLists.txt</code> file and add this context:</li>
 68</ol>
 69<div class="language-shell codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>CMakeLists.txt</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">cmake_minimum_required</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">VERSION </span><span class="token number" style=color:#5a9bcf>3.13</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1># Define the library name here.</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">project</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">appmodules</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1># This file includes all the necessary to let you build your React Native application</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">include</span><span class="token punctuation" style=color:#657b83>(</span><span class="token variable" style=color:#cb4b16>${REACT_ANDROID_DIR}</span><span class="token plain">/cmake-utils/ReactNative-application.cmake</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1># Define where the additional source code lives. We need to crawl back the jni, main, src, app, android folders</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">target_sources</span><span class="token punctuation" style=color:#657b83>(</span><span class="token variable" style=color:#cb4b16>${CMAKE_PROJECT_NAME}</span><span class="token plain"> PRIVATE </span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/shared/NativeSampleModule.cpp</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1># Define where CMake can find the additional header files. We need to crawl back the jni, main, src, app, android folders</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">target_include_directories</span><span class="token punctuation" style=color:#657b83>(</span><span class="token variable" style=color:#cb4b16>${CMAKE_PROJECT_NAME}</span><span class="token plain"> PUBLIC </span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/</span><span class="token punctuation" style=color:#657b83>..</span><span class="token plain">/shared</span><span class="token punctuation" style=color:#657b83>)</span><br></span></code></pre></div></div>
 70<p>The CMake file does the following things:</p>
 71<ul>
 72<li>Defines the <code>appmodules</code> library, where all the app C++ code will be included.</li>
 73<li>Loads the base React Native's CMake file.</li>
 74<li>Adds the Module C++ source code that we need to build with the <code>target_sources</code> directives. By default React Native will already populate the <code>appmodules</code> library with default sources, here we include our custom one. You can see that we need to crawl back from the <code>jni</code> folder to the <code>shared</code> folder where our C++ Turbo Module lives.</li>
 75<li>Specifies where CMake can find the module header files. Also in this case we need to crawl back from the <code>jni</code> folder.</li>
 76</ul>
 77<h4 class="anchor anchorWithStickyNavbar_JmGV" id=2-modify-buildgradle-to-include-the-custom-c-code>2. Modify <code>build.gradle</code> to include the custom C++ code<a href=#2-modify-buildgradle-to-include-the-custom-c-code class=hash-link aria-label="Direct link to 2-modify-buildgradle-to-include-the-custom-c-code" title="Direct link to 2-modify-buildgradle-to-include-the-custom-c-code"></a></h4>
 78<p>Gradle is the tool that orchestrates the Android build. We need to tell it where it can find the <code>CMake</code> files to build the Turbo Native Module.</p>
 79<ol>
 80<li>Open the <code>SampleApp/android/app/build.gradle</code> file.</li>
 81<li>Add the following block into the Gradle file, within the existent <code>android</code> block:</li>
 82</ol>
 83<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/build.gradle</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-diff codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line">   buildTypes {</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">       debug {</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">           signingConfig signingConfigs.debug</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">       release {</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">           // Caution! In production, you need to generate your own keystore file.</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">           // see https://reactnative.dev/docs/signed-apk-android.</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">           signingConfig signingConfigs.debug</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">           minifyEnabled enableProguardInReleaseBuilds</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">           proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"</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">   }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>   externalNativeBuild {</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>       cmake {</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 "src/main/jni/CMakeLists.txt"</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></code></pre></div></div>
 84<p>This block tells the Gradle file where to look for the CMake file. The path is relative to the folder where the <code>build.gradle</code> file lives, so we need to add the path to the <code>CMakeLists.txt</code> files in the <code>jni</code> folder.</p>
 85<h4 class="anchor anchorWithStickyNavbar_JmGV" id=3-register-the-new-turbo-native-module>3. Register the new Turbo Native Module<a href=#3-register-the-new-turbo-native-module class=hash-link aria-label="Direct link to 3. Register the new Turbo Native Module" title="Direct link to 3. Register the new Turbo Native Module"></a></h4>
 86<p>The final step is to register the new C++ Turbo Native Module in the runtime, so that when JS requires the C++ Turbo Native Module, the app knows where to find it and can return it.</p>
 87<ol>
 88<li>From the folder <code>SampleApp/android/app/src/main/jni</code>, run the following command:</li>
 89</ol>
 90<div class="language-sh codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>sh</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-sh codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>curl</span><span class="token plain"> </span><span class="token parameter variable" style=color:#cb4b16>-O</span><span class="token plain"> https://raw.githubusercontent.com/facebook/react-native/v0.76.0/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp</span><br></span></code></pre></div></div>
 91<ol start=2>
 92<li>Then, modify this file as follows:</li>
 93</ol>
 94<div class="language-diff codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/src/main/jni/OnLoad.cpp</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">#include &lt;DefaultComponentsRegistry.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">#include &lt;DefaultTurboModuleManagerDelegate.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">#include &lt;autolinking.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">#include &lt;fbjni/fbjni.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">#include &lt;react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">#include &lt;rncore.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900> // Include the NativeSampleModule header</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> #include &lt;NativeSampleModule.h></span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">//...</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">std::shared_ptr&lt;TurboModule> cxxModuleProvider(</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line">   const std::string& name,</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">   const std::shared_ptr&lt;CallInvoker>& jsInvoker) {</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"> // Here you can provide your CXX Turbo Modules coming from</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"> // either your application or from external libraries. The approach to follow</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"> // is similar to the following (for a module called `NativeCxxModuleExample`):</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"> // if (name == NativeCxxModuleExample::kModuleName) {</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"> //   return std::make_shared&lt;NativeCxxModuleExample>(jsInvoker);</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> // }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>  // This code register the module so that when the JS side asks for it, the app can return it</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>  if (name == NativeSampleModule::kModuleName) {</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>    return std::make_shared&lt;NativeSampleModule>(jsInvoker);</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token inserted-sign inserted prefix inserted" style=color:#859900>+</span><span class="token inserted-sign inserted line" style=color:#859900>  }</span><br></span><span class=token-line style=color:#FFFFFF><span class="token inserted-sign inserted line" style=color:#859900></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token unchanged prefix unchanged"> </span><span class="token unchanged line"> // And we fallback to the CXX module providers autolinked</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"> return autolinking_cxxModuleProvider(name, jsInvoker);</span><br></span><span class=token-line style=color:#FFFFFF><span class="token unchanged line"></span><span class="token plain">}</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">// leave the rest of the file</span><br></span></code></pre></div></div>
 95<p>These steps download the original <code>OnLoad.cpp</code> file from React Native, so that we can safely override it to load the C++ Turbo Native Module in the app.</p>
 96<p>Once we downloaded the file, we can modify it by:</p>
 97<ul>
 98<li>Including the header file that points to our module</li>
 99<li>Registering the Turbo Native Module so that when JS requires it, the app can return it.</li>
100</ul>
101<p>Now, you can run <code>yarn android</code> from the project root to see your app building successfully.</p>
102<h3 class="anchor anchorWithStickyNavbar_JmGV" id=ios>iOS<a href=#ios class=hash-link aria-label="Direct link to iOS" title="Direct link to iOS"></a></h3>
103<p>To make sure that the iOS app can effectively build the C++ Turbo Native Module, we need to:</p>
104<ol>
105<li>Install pods and run Codegen.</li>
106<li>Add the <code>shared</code> folder to our iOS project.</li>
107<li>Register the C++ Turbo Native Module in the application.</li>
108</ol>
109<h4 class="anchor anchorWithStickyNavbar_JmGV" id=1-install-pods-and-run-codegen>1. Install Pods and Run Codegen.<a href=#1-install-pods-and-run-codegen class=hash-link aria-label="Direct link to 1. Install Pods and Run Codegen." title="Direct link to 1. Install Pods and Run Codegen."></a></h4>
110<p>The first step we need to run is the usual steps we run every time we have to prepare our iOS application. CocoaPods is the tool we use to setup and install React Native dependencies and, as part of the process, it will also run Codegen for us.</p>
111<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 builtin class-name" style=color:#fac863>cd</span><span class="token plain"> ios</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">bundle </span><span class="token function" style=color:#79b6f2>install</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">bundle </span><span class="token builtin class-name" style=color:#fac863>exec</span><span class="token plain"> pod </span><span class="token function" style=color:#79b6f2>install</span><br></span></code></pre></div></div>
112<h4 class="anchor anchorWithStickyNavbar_JmGV" id=2-add-the-shared-folder-to-the-ios-project>2. Add the shared folder to the iOS project<a href=#2-add-the-shared-folder-to-the-ios-project class=hash-link aria-label="Direct link to 2. Add the shared folder to the iOS project" title="Direct link to 2. Add the shared folder to the iOS project"></a></h4>
113<p>This step adds the <code>shared</code> folder to the project to make it visible to Xcode.</p>
114<ol>
115<li>Open the CocoPods generated Xcode Workspace.</li>
116</ol>
117<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 builtin class-name" style=color:#fac863>cd</span><span class="token plain"> ios</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token function" style=color:#79b6f2>open</span><span class="token plain"> SampleApp.xcworkspace</span><br></span></code></pre></div></div>
118<ol start=2>
119<li>Click on the <code>SampleApp</code> project on the left and select <code>Add files to "Sample App"...</code>.</li>
120</ol>
121<p><img decoding=async loading=lazy alt="Add Files to Sample App..." src=/assets/images/AddFilesToXcode1-d070f58ea78d4fb756a809a79dec57e7.png width=1915 height=1052 class=img_SS3x></p>
122<ol start=3>
123<li>Select the <code>shared</code> folder and click on <code>Add</code>.</li>
124</ol>
125<p><img decoding=async loading=lazy alt="Add Files to Sample App..." src=/assets/images/AddFilesToXcode2-b423ebeadf41ef8c29b2f87663b16b36.png width=2032 height=1167 class=img_SS3x></p>
126<p>If you did everything right, your project on the left should look like this:</p>
127<p><img decoding=async loading=lazy alt="Xcode Project" src=/assets/images/CxxTMGuideXcodeProject-0091370bc5a180f25194d0aaa25f1cf1.png width=273 height=288 class=img_SS3x></p>
128<h4 class="anchor anchorWithStickyNavbar_JmGV" id=3-registering-the-cxx-turbo-native-module-in-your-app>3. Registering the Cxx Turbo Native Module in your app<a href=#3-registering-the-cxx-turbo-native-module-in-your-app class=hash-link aria-label="Direct link to 3. Registering the Cxx Turbo Native Module in your app" title="Direct link to 3. Registering the Cxx Turbo Native Module in your app"></a></h4>
129<p>To register a pure Cxx Turbo Native Module in your app, you need to:</p>
130<ol>
131<li>Create a <code>ModuleProvider</code> for the Native Module</li>
132<li>Configure the <code>package.json</code> to associate the JS module name with the ModuleProvider class.</li>
133</ol>
134<p>The ModuleProvider is an Objective-C++ that glues together the Pure C++ module with the rest of your iOS App.</p>
135<h5 class="anchor anchorWithStickyNavbar_JmGV" id=31-create-the-moduleprovider>3.1 Create the ModuleProvider<a href=#31-create-the-moduleprovider class=hash-link aria-label="Direct link to 3.1 Create the ModuleProvider" title="Direct link to 3.1 Create the ModuleProvider"></a></h5>
136<ol>
137<li>From Xcode, select the <code>SampleApp</code> project and press <kbd>⌘</kbd> + <kbd>N</kbd> to create a new file.</li>
138<li>Select the <code>Cocoa Touch Class</code> template</li>
139<li>Add the name <code>SampleNativeModuleProvider</code> (keep the other field as <code>Subclass of: NSObject</code> and <code>Language: Objective-C</code>)</li>
140<li>Click Next to generate the files.</li>
141<li>Rename the <code>SampleNativeModuleProvider.m</code> to <code>SampleNativeModuleProvider.mm</code>. The <code>mm</code> extension denotes an Objective-C++ file.</li>
142<li>Implement the content of the <code>SampleNativeModuleProvider.h</code> with the following:</li>
143</ol>
144<div class="language-objc codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>NativeSampleModuleProvider.h</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-objc 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" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>Foundation</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>Foundation</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>ReactCommon</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>RCTTurboModule</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></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">NS_ASSUME_NONNULL_BEGIN</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>@interface</span><span class="token plain"> NativeSampleModuleProvider </span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"> NSObject </span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">RCTModuleProvider</span><span class="token operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" 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>@end</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">NS_ASSUME_NONNULL_END</span><br></span></code></pre></div></div>
145<p>This declares a <code>NativeSampleModuleProvider</code> object that conforms to the <code>RCTModuleProvider</code> protocol.</p>
146<ol start=7>
147<li>Implement the content of the <code>SampleNativeModuleProvider.mm</code> with the following:</li>
148</ol>
149<div class="language-objc codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>NativeSampleModuleProvider.mm</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-objc 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" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property string" style=color:#8dc891>"NativeSampleModuleProvider.h"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>ReactCommon</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>CallInvoker</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>ReactCommon</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>TurboModule</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property string" style=color:#8dc891>"NativeSampleModule.h"</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>@implementation</span><span class="token plain"> NativeSampleModuleProvider</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 operator" style=color:#fc929e>-</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">std</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">shared_ptr</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">TurboModule</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">getTurboModule</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 keyword" style=color:#c5a5c5>const</span><span class="token plain"> facebook</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">ObjCTurboModule</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">InitParams </span><span class="token operator" style=color:#fc929e>&</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">params</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 keyword" style=color:#c5a5c5>return</span><span class="token plain"> std</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">make_shared</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">NativeSampleModule</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">params</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">jsInvoker</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>@end</span><br></span></code></pre></div></div>
150<p>This code implements the <code>RCTModuleProvider</code> protocol by creating the pure C++ <code>NativeSampleModule</code> when the <code>getTurboModule:</code> method is called.</p>
151<h5 class="anchor anchorWithStickyNavbar_JmGV" id=32-update-the-packagejson>3.2 Update the package.json<a href=#32-update-the-packagejson class=hash-link aria-label="Direct link to 3.2 Update the package.json" title="Direct link to 3.2 Update the package.json"></a></h5>
152<p>The last step consist in updating the <code>package.json</code> to tell React Native about the link between the JS specs of the Native Module and the concrete implementation of those spec in native code.</p>
153<p>Modify the <code>package.json</code> as it follows:</p>
154<div class="language-json codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>package.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>"start"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"react-native start"</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>"test"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"jest"</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>"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>"AppSpecs"</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>"modules"</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>"specs"</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.sampleapp.specs"</span><span class="token plain"></span><br></span><span class="token-line code-add-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 code-add-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 punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class="token-line code-add-line" style=color:#FFFFFF><span class="token plain">        </span><span class="token property" style=color:#2aa198>"modulesProvider"</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 code-add-line" style=color:#FFFFFF><span class="token plain">          </span><span class="token property" style=color:#2aa198>"NativeSampleModule"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain">  </span><span class="token string" style=color:#8dc891>"NativeSampleModuleProvider"</span><span class="token plain"></span><br></span><span class="token-line code-add-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 code-add-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><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 property" style=color:#2aa198>"dependencies"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><br></span></code></pre></div></div>
155<p>At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:</p>
156<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 comment" style=color:#93a1a1># from the ios folder</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">bundle </span><span class="token builtin class-name" style=color:#fac863>exec</span><span class="token plain"> pod </span><span class="token function" style=color:#79b6f2>install</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token function" style=color:#79b6f2>open</span><span class="token plain"> SampleApp.xcworkspace</span><br></span></code></pre></div></div>
157<p>If you now build your application from Xcode, you should be able to build successfully.</p>
158<h2 class="anchor anchorWithStickyNavbar_JmGV" id=5-testing-your-code>5. Testing your Code<a href=#5-testing-your-code class=hash-link aria-label="Direct link to 5. Testing your Code" title="Direct link to 5. Testing your Code"></a></h2>
159<p>It's now time to access our C++ Turbo Native Module from JS. To do so, we have to modify the <code>App.tsx</code> file to import the Turbo Native Module and to call it in our code.</p>
160<ol>
161<li>Open the <code>App.tsx</code> file.</li>
162<li>Replace the content of the template with the following code:</li>
163</ol>
164<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>App.tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports">  </span><span class="token imports maybe-class-name">Button</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports">  </span><span class="token imports maybe-class-name">SafeAreaView</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports">  </span><span class="token imports maybe-class-name">StyleSheet</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports">  </span><span class="token imports maybe-class-name">Text</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports">  </span><span class="token imports maybe-class-name">TextInput</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports">  </span><span class="token imports maybe-class-name">View</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token imports"></span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">SampleTurboModule</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>'./specs/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>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>App</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>JSX</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access maybe-class-name">Element</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">value</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> setValue</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>useState</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>''</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 keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">reversedValue</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> setReversedValue</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>useState</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>''</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token function-variable function" style=color:#79b6f2>onPress</span><span class="token plain"> </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><span class="token plain"> </span><span class="token arrow 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 keyword" style=color:#c5a5c5>const</span><span class="token plain"> revString </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">SampleTurboModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>reverseString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">value</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 function" style=color:#79b6f2>setReversedValue</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">revString</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">    </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>SafeAreaView</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>container</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">      </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">        </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>title</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">          Welcome to C++ Turbo Native Module Example</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">        </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">        </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Write down here he text you want to revert</span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">        </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>TextInput</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e>          </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>textInput</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e>          </span><span class="token tag attr-name" style=color:#c5a5c5>placeholder</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>Write your text here</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e>          </span><span class="token tag attr-name" style=color:#c5a5c5>onChangeText</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>setValue</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e>          </span><span class="token tag attr-name" style=color:#c5a5c5>value</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>value</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e>        </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">        </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Button</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>title</span><span class="token tag attr-value punctuation attr-equals" style=color:#657b83>=</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag attr-value" style=color:#8dc891>Reverse</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>onPress</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">        </span><span class="token tag punctuation" style=color:#657b83>&lt;</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text">Reversed text: </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">reversedValue</span><span class="token punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">      </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>View</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text">    </span><span class="token tag punctuation" style=color:#657b83>&lt;/</span><span class="token tag class-name" style=color:#fac863>SafeAreaView</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> styles </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">StyleSheet</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>create</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  container</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">    flex</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</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">    justifyContent</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'center'</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">    alignItems</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'center'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  title</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">    fontSize</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>18</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">    marginBottom</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>20</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  textInput</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">    borderColor</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'black'</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">    borderWidth</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</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">    borderRadius</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>5</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">    padding</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>10</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">    marginTop</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>10</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">  </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token maybe-class-name">App</span><span class="token punctuation" style=color:#657b83>;</span><br></span></code></pre></div></div>
165<p>The interesting lines in this app are:</p>
166<ul>
167<li><code>import SampleTurboModule from './specs/NativeSampleModule';</code>: this line imports the Turbo Native Module in the app,</li>
168<li><code>const revString = SampleTurboModule.reverseString(value);</code> in the <code>onPress</code> callback: this is how you can use the Turbo Native Module in your app.</li>
169</ul>
170<div class="theme-admonition theme-admonition-warning admonition_WCGJ alert alert--warning"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 16 16"><path fill-rule=evenodd d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg></span>warning</div><div class=admonitionContent_pbrs><p>For the sake of this example and to keep it as short as possible, we directly imported the spec file in our app.
171The best practice in this case is to create a separate file to wrap the specs and use that file into your application.
172This allows you to prepare the input for the specs and gives you more control over them in JS.</div></div>
173<p>Congratulations, you wrote your first C++ Turbo Native Module!</p>
174<table><thead><tr><th><center>Android</center><th><center>iOS</center><tbody><tr><td><center><img src=/docs/assets/CxxGuideAndroidVideo.gif alt="Android Video" height=600></center><td><center><img src=/docs/assets/CxxGuideIOSVideo.gif alt="iOS video" height=600></center></table></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/pure-cxx-modules.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/pure-cxx-modules.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-28T15:51:33.000Z itemprop=dateModified>Apr 28, 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/turbo-native-modules-introduction><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Android and iOS</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/the-new-architecture/advanced-topics-modules><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Advanced Topics</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=#1-create-the-js-specs class="table-of-contents__link toc-highlight">1. Create the JS specs</a><li><a href=#2-configure-codegen class="table-of-contents__link toc-highlight">2. Configure Codegen</a><li><a href=#3-write-the-native-code class="table-of-contents__link toc-highlight">3. Write the Native Code</a><li><a href=#4-register-the-module-in-the-platform class="table-of-contents__link toc-highlight">4. Register the Module in the platform</a><ul><li><a href=#android class="table-of-contents__link toc-highlight">Android</a><li><a href=#ios class="table-of-contents__link toc-highlight">iOS</a></ul><li><a href=#5-testing-your-code class="table-of-contents__link toc-highlight">5. Testing your Code</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>