this repo has no description
kitten.sh
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-turbo-native-modules-introduction" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Native Modules: Introduction · 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/turbo-native-modules-introduction><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="Native Modules: Introduction · React Native"><meta data-rh=true name=description content="Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a Turbo Native Module. This guide will show you how to write one."><meta data-rh=true property=og:description content="Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a Turbo Native Module. This guide will show you how to write one."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/turbo-native-modules-introduction><link data-rh=true rel=alternate href=https://reactnative.dev/docs/turbo-native-modules-introduction hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/turbo-native-modules-introduction 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/turbo-native-modules-introduction>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/turbo-native-modules-introduction>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/turbo-native-modules-introduction>0.79</a><li><a class=dropdown__link href=/docs/0.78/turbo-native-modules-introduction>0.78</a><li><a class=dropdown__link href=/docs/0.77/turbo-native-modules-introduction>0.77</a><li><a class=dropdown__link href=/docs/0.76/turbo-native-modules-introduction>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 menu__link--active" aria-current=page tabindex=0 href=/docs/turbo-native-modules-introduction>Android and iOS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/the-new-architecture/pure-cxx-modules>Cross-Platform with C++</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/the-new-architecture/advanced-topics-modules>Advanced Topics</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class=menu__link tabindex=0>Components</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/fabric-native-components-introduction>Android & iOS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/the-new-architecture/advanced-topics-components>Advanced Topics</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item 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>Native Modules</h1></header>
5<p>Your React Native application code may need to interact with native platform APIs that aren't provided by React Native or an existing library. You can write the integration code yourself using a <strong>Turbo Native Module</strong>. This guide will show you how to write one.</p>
6<p>The basic steps are:</p>
7<ol>
8<li><strong>define a typed JavaScript specification</strong> using one of the most popular JavaScript type annotation languages: Flow or TypeScript;</li>
9<li><strong>configure your dependency management system to run Codegen</strong>, which converts the specification into native language interfaces;</li>
10<li><strong>write your application code</strong> using your specification; and</li>
11<li><strong>write your native platform code using the generated interfaces</strong> to write and hook your native code into the React Native runtime environment.</li>
12</ol>
13<p>Lets work through each of these steps by building an example Turbo Native Module. The rest of this guide assume that you have created your application running the command:</p>
14<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 TurboModuleExample </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>
15<h2 class="anchor anchorWithStickyNavbar_JmGV" id=native-persistent-storage>Native Persistent Storage<a href=#native-persistent-storage class=hash-link aria-label="Direct link to Native Persistent Storage" title="Direct link to Native Persistent Storage"></a></h2>
16<p>This guide will show you how to write an implementation of the <a href=https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage-dev target=_blank rel="noopener noreferrer">Web Storage API</a>: <code>localStorage</code>. The API is relatable to a React developer who might be writing application code on your project.</p>
17<p>To make this work on mobile, we need to use Android and iOS APIs:</p>
18<ul>
19<li>Android: <a href=https://developer.android.com/reference/android/content/SharedPreferences target=_blank rel="noopener noreferrer">SharedPreferences</a>, and</li>
20<li>iOS: <a href=https://developer.apple.com/documentation/foundation/nsuserdefaults target=_blank rel="noopener noreferrer">NSUserDefaults</a>.</li>
21</ul>
22<h3 class="anchor anchorWithStickyNavbar_JmGV" id=1-declare-typed-specification>1. Declare Typed Specification<a href=#1-declare-typed-specification class=hash-link aria-label="Direct link to 1. Declare Typed Specification" title="Direct link to 1. Declare Typed Specification"></a></h3>
23<p>React Native provides a tool called <a href=/docs/the-new-architecture/what-is-codegen>Codegen</a>, which takes a specification written in TypeScript or Flow and generates platform specific code for Android and iOS. The specification declares the methods and data types that will pass back and forth between your native code and the React Native JavaScript runtime. A Turbo Native Module is both your specification, the native code you write, and the Codegen interfaces generated from your specification.</p>
24<p>To create a specs file:</p>
25<ol>
26<li>Inside the root folder of your app, create a new folder called <code>specs</code>.</li>
27<li>Create a new file called <code>NativeLocalStorage.ts</code>.</li>
28</ol>
29<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p>You can see all of the types you can use in your specification and the native types that are generated in the <a href=/docs/appendix>Appendix</a> documentation.</div></div>
30<p>Here is an implementation of the <code>localStorage</code> specification:</p>
31<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><div class="language-typescript codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>specs/NativeLocalStorage.ts</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-typescript 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 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 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 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 function" style=color:#79b6f2>setItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">value</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"> key</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</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>getItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</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>removeItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</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 operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</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>clear</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 keyword" style=color:#c5a5c5>void</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><</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>'NativeLocalStorage'</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 role=tabpanel class=tabItem_wHwb hidden><div class="language-flow codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>NativeLocalStorage.js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-flow codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>type</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token maybe-class-name">TurboModule</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#657b83>{</span><span class="token imports maybe-class-name">TurboModule</span><span class="token imports punctuation" style=color:#657b83>,</span><span class="token imports"> </span><span class="token imports maybe-class-name">TurboModuleRegistry</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword module" 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 function" style=color:#79b6f2>setItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">value</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token type class-name" style=color:#fac863>string</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>key</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token type class-name" style=color:#fac863>string</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 type class-name" style=color:#fac863>void</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>getItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token type class-name" style=color:#fac863>string</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 operator" style=color:#fc929e>?</span><span class="token type class-name" style=color:#fac863>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 function" style=color:#79b6f2>removeItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token type class-name" style=color:#fac863>string</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 type class-name" style=color:#fac863>void</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>clear</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 type class-name" style=color:#fac863>void</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div></div></div>
32<h3 class="anchor anchorWithStickyNavbar_JmGV" id=2-configure-codegen-to-run>2. Configure Codegen to run<a href=#2-configure-codegen-to-run class=hash-link aria-label="Direct link to 2. Configure Codegen to run" title="Direct link to 2. Configure Codegen to run"></a></h3>
33<p>The specification is used by the React Native Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your <code>package.json</code> to include:</p>
34<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>"NativeLocalStorageSpec"</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.nativelocalstorage"</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>
35<p>With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.</p>
36<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Android<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">iOS</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><p>Codegen is executed through the <code>generateCodegenArtifactsFromSchema</code> Gradle task:<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"> android</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">./gradlew generateCodegenArtifactsFromSchema</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">BUILD SUCCESSFUL </span><span class="token keyword" style=color:#c5a5c5>in</span><span class="token plain"> 837ms</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token number" style=color:#5a9bcf>14</span><span class="token plain"> actionable tasks: </span><span class="token number" style=color:#5a9bcf>3</span><span class="token plain"> executed, </span><span class="token number" style=color:#5a9bcf>11</span><span class="token plain"> up-to-date</span><br></span></code></pre></div></div><p>This is automatically run when you build your Android application.</div><div role=tabpanel class=tabItem_wHwb hidden><p>Codegen is run as part of the script phases that's automatically added to the project generated by CocoaPods.<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><p>The output will look like this:<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 punctuation" style=color:#657b83>..</span><span class="token plain">.</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">Framework build </span><span class="token builtin class-name" style=color:#fac863>type</span><span class="token plain"> is static library</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">Codegen</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> Adding script_phases to ReactCodegen.</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">Codegen</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> Generating ./build/generated/ios/ReactCodegen.podspec.json</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">Codegen</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> Analyzing /Users/me/src/TurboModuleExample/package.json</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">Codegen</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> Searching </span><span class="token keyword" style=color:#c5a5c5>for</span><span class="token plain"> codegen-enabled libraries </span><span class="token keyword" style=color:#c5a5c5>in</span><span class="token plain"> the app.</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">Codegen</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> Found TurboModuleExample</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">Codegen</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> Searching </span><span class="token keyword" style=color:#c5a5c5>for</span><span class="token plain"> codegen-enabled libraries </span><span class="token keyword" style=color:#c5a5c5>in</span><span class="token plain"> the project dependencies.</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">Codegen</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> Found react-native</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></code></pre></div></div></div></div></div>
37<h3 class="anchor anchorWithStickyNavbar_JmGV" id=3-write-application-code-using-the-turbo-native-module>3. Write Application Code using the Turbo Native Module<a href=#3-write-application-code-using-the-turbo-native-module class=hash-link aria-label="Direct link to 3. Write Application Code using the Turbo Native Module" title="Direct link to 3. Write Application Code using the Turbo Native Module"></a></h3>
38<p>Using <code>NativeLocalStorage</code>, here’s a modified <code>App.tsx</code> that includes some text we want persisted, an input field and some buttons to update this value.</p>
39<p>The <code>TurboModuleRegistry</code> supports 2 modes of retrieving a Turbo Native Module:</p>
40<ul>
41<li><code>get<T>(name: string): T | null</code> which will return <code>null</code> if the Turbo Native Module is unavailable.</li>
42<li><code>getEnforcing<T>(name: string): T</code> which will throw an exception if the Turbo Native Module is unavailable. This assumes the module is always available.</li>
43</ul>
44<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">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">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 punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">NativeLocalStorage</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/NativeLocalStorage'</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 constant" style=color:#5a9bcf>EMPTY</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'<empty>'</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 property-access">useState</span><span class="token operator" style=color:#fc929e><</span><span class="token builtin" style=color:#2aa198>string</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>null</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 punctuation" style=color:#657b83>[</span><span class="token plain">editingValue</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> setEditingValue</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 property-access">useState</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 builtin" style=color:#2aa198>string</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>|</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</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 punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>null</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 maybe-class-name">React</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>useEffect</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token 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"> storedValue </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token maybe-class-name">NativeLocalStorage</span><span class="token operator" style=color:#fc929e>?.</span><span class="token method function property-access" style=color:#79b6f2>getItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'myKey'</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>setValue</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">storedValue </span><span class="token operator" style=color:#fc929e>??</span><span class="token plain"> </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 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 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>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>saveValue</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">NativeLocalStorage</span><span class="token operator" style=color:#fc929e>?.</span><span class="token method function property-access" style=color:#79b6f2>setItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">editingValue </span><span class="token operator" style=color:#fc929e>??</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>EMPTY</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'myKey'</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>setValue</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">editingValue</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>function</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>clearAll</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">NativeLocalStorage</span><span class="token operator" style=color:#fc929e>?.</span><span class="token method function property-access" style=color:#79b6f2>clear</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 function" style=color:#79b6f2>setValue</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 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>deleteValue</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token maybe-class-name">NativeLocalStorage</span><span class="token operator" style=color:#fc929e>?.</span><span class="token method function property-access" style=color:#79b6f2>removeItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'myKey'</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>setValue</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 punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>SafeAreaView</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>flex</span><span class="token tag script language-javascript operator" style=color:#fc929e>:</span><span class="token tag script language-javascript" style=color:#fc929e> </span><span class="token tag script language-javascript number" style=color:#5a9bcf>1</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>styles</span><span class="token tag script language-javascript punctuation" style=color:#657b83>.</span><span class="token tag script language-javascript property-access" style=color:#fc929e>text</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"> Current stored value is: </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">value </span><span class="token operator" style=color:#fc929e>??</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'No Value'</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83></</span><span class="token tag class-name" style=color:#fac863>Text</span><span class="token tag punctuation" style=color:#657b83>></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</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>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>Enter the text you want to store</span><span class="token tag attr-value punctuation" style=color:#657b83>"</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag attr-name" style=color:#c5a5c5>style</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#657b83>=</span><span class="token tag script language-javascript punctuation" style=color:#657b83>{</span><span class="token tag script language-javascript" style=color:#fc929e>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>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>setEditingValue</span><span class="token tag script language-javascript punctuation" style=color:#657b83>}</span><span class="token tag" style=color:#fc929e></span><br></span><span class=token-line style=color:#FFFFFF><span class="token tag" style=color:#fc929e> </span><span class="token tag punctuation" style=color:#657b83>/></span><span class="token plain-text"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain-text"> </span><span class="token tag punctuation" style=color:#657b83><</span><span class="token tag class-name" style=color:#fac863>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>Save</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>saveValue</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><</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>Delete</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>deleteValue</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><</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>Clear</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>clearAll</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></</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"> text</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"> margin</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"> fontSize</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"> margin</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"> height</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>40</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"> paddingLeft</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"> paddingRight</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"> 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"> </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>
45<h3 class="anchor anchorWithStickyNavbar_JmGV" id=4-write-your-native-platform-code>4. Write your Native Platform code<a href=#4-write-your-native-platform-code class=hash-link aria-label="Direct link to 4. Write your Native Platform code" title="Direct link to 4. Write your Native Platform code"></a></h3>
46<p>With everything prepared, we're going to start writing native platform code. We do this in 2 parts:</p>
47<div class="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"/></svg></span>note</div><div class=admonitionContent_pbrs><p>This guide shows you how to create a Turbo Native Module that only works with the New Architecture. If you need to support both the New Architecture and the Legacy Architecture, please refer to our <a href=https://github.com/reactwg/react-native-new-architecture/blob/main/docs/backwards-compat.md target=_blank rel="noopener noreferrer">backwards compatibility guide</a>.</div></div>
48<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Android<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">iOS</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><p>Now it's time to write some Android platform code to make sure <code>localStorage</code> survives after the application is closed.</p>
49<p>The first step is to implement the generated <code>NativeLocalStorageSpec</code> interface:</p>
50<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Java<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Kotlin</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-java codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/src/main/java/com/nativelocalstorage/NativeLocalStorageModule.java</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-java codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>package</span><span class="token plain"> </span><span class="token namespace" style=opacity:0.7>com</span><span class="token namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token namespace" style=opacity:0.7>nativelocalstorage</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>android</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>content</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>Context</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>android</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>content</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>SharedPreferences</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>nativelocalstorage</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>NativeLocalStorageSpec</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>bridge</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactApplicationContext</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>class</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeLocalStorageModule</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>NativeLocalStorageSpec</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>static</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>final</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>NAME</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"NativeLocalStorage"</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>ReactApplicationContext</span><span class="token plain"> reactContext</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>super</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">reactContext</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 annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token constant" style=color:#5a9bcf>NAME</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> value</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> key</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 class-name" style=color:#fac863>SharedPreferences</span><span class="token plain"> sharedPref </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactApplicationContext</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 function" style=color:#79b6f2>getSharedPreferences</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>"my_prefs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Context</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>MODE_PRIVATE</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 class-name" style=color:#fac863>SharedPreferences</span><span class="token class-name punctuation" style=color:#657b83>.</span><span class="token class-name" style=color:#fac863>Editor</span><span class="token plain"> editor </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> sharedPref</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>edit</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"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>putString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</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"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>apply</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 annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> key</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 class-name" style=color:#fac863>SharedPreferences</span><span class="token plain"> sharedPref </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactApplicationContext</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 function" style=color:#79b6f2>getSharedPreferences</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>"my_prefs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Context</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>MODE_PRIVATE</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 class-name" style=color:#fac863>String</span><span class="token plain"> username </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> sharedPref</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</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>return</span><span class="token plain"> username</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>removeItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> key</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 class-name" style=color:#fac863>SharedPreferences</span><span class="token plain"> sharedPref </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactApplicationContext</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 function" style=color:#79b6f2>getSharedPreferences</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>"my_prefs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Context</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>MODE_PRIVATE</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"> sharedPref</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>edit</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 function" style=color:#79b6f2>remove</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>apply</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-kotlin codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/src/main/java/com/nativelocalstorage/NativeLocalStorageModule.kt</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-kotlin codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>package</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">nativelocalstorage</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> android</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">content</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">Context</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"> android</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">content</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">SharedPreferences</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">nativelocalstorage</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">NativeLocalStorageSpec</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">bridge</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactApplicationContext</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 function" style=color:#79b6f2>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">reactContext</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ReactApplicationContext</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>NativeLocalStorageSpec</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">reactContext</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> NAME</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">value</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> key</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String</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>val</span><span class="token plain"> sharedPref </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactApplicationContext</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 function" style=color:#79b6f2>getSharedPreferences</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string-literal singleline string" style=color:#8dc891>"my_prefs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> Context</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">MODE_PRIVATE</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>val</span><span class="token plain"> editor </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> sharedPref</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>edit</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"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>putString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>apply</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>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String</span><span class="token operator" style=color:#fc929e>?</span><span class="token plain"> </span><span class="token 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>val</span><span class="token plain"> sharedPref </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactApplicationContext</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 function" style=color:#79b6f2>getSharedPreferences</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string-literal singleline string" style=color:#8dc891>"my_prefs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> Context</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">MODE_PRIVATE</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>val</span><span class="token plain"> username </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> sharedPref</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</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"> username</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>toString</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>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>removeItem</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String</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>val</span><span class="token plain"> sharedPref </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactApplicationContext</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 function" style=color:#79b6f2>getSharedPreferences</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string-literal singleline string" style=color:#8dc891>"my_prefs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> Context</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">MODE_PRIVATE</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>val</span><span class="token plain"> editor </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> sharedPref</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>edit</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"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>remove</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">key</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"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>apply</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>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>clear</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>val</span><span class="token plain"> sharedPref </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactApplicationContext</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 function" style=color:#79b6f2>getSharedPreferences</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string-literal singleline string" style=color:#8dc891>"my_prefs"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> Context</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">MODE_PRIVATE</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>val</span><span class="token plain"> editor </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> sharedPref</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>edit</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"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>clear</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"> editor</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>apply</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>companion</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>object</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 keyword" style=color:#c5a5c5>val</span><span class="token plain"> NAME </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string-literal singleline string" style=color:#8dc891>"NativeLocalStorage"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div></div></div>
51<p>Next we need to create <code>NativeLocalStoragePackage</code>. It provides an object to register our Module in the React Native runtime, by wrapping it as a Base Native Package:</p>
52<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Java<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Kotlin</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-java codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/src/main/java/com/nativelocalstorage/NativeLocalStoragePackage.java</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-java codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>package</span><span class="token plain"> </span><span class="token namespace" style=opacity:0.7>com</span><span class="token namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token namespace" style=opacity:0.7>nativelocalstorage</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>BaseReactPackage</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>bridge</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>NativeModule</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>bridge</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactApplicationContext</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>module</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>model</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactModuleInfo</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>module</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>model</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactModuleInfoProvider</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>java</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>util</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>HashMap</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>java</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>util</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>Map</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>class</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeLocalStoragePackage</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>BaseReactPackage</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeModule</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> name</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactApplicationContext</span><span class="token plain"> reactContext</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>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">name</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>equals</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>NAME</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">reactContext</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><span class="token keyword" style=color:#c5a5c5>else</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>null</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactModuleInfoProvider</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactModuleInfoProvider</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactModuleInfoProvider</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Map</span><span class="token generics punctuation" style=color:#657b83><</span><span class="token generics class-name" style=color:#fac863>String</span><span class="token generics punctuation" style=color:#657b83>,</span><span class="token generics"> </span><span class="token generics class-name" style=color:#fac863>ReactModuleInfo</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactModuleInfos</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Map</span><span class="token generics punctuation" style=color:#657b83><</span><span class="token generics class-name" style=color:#fac863>String</span><span class="token generics punctuation" style=color:#657b83>,</span><span class="token generics"> </span><span class="token generics class-name" style=color:#fac863>ReactModuleInfo</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> map </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>HashMap</span><span class="token generics punctuation" style=color:#657b83><</span><span class="token generics 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"> map</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>put</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>NAME</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactModuleInfo</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 class-name" style=color:#fac863>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>NAME</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// name</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>NAME</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// className</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// canOverrideExistingModule</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// needsEagerInit</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// isCXXModule</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// isTurboModule</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"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> map</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-kotlin codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/src/main/java/com/nativelocalstorage/NativeLocalStoragePackage.kt</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-kotlin codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>package</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">nativelocalstorage</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">BaseReactPackage</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">bridge</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">NativeModule</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">bridge</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactApplicationContext</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">module</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">model</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactModuleInfo</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">module</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">model</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactModuleInfoProvider</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"> NativeLocalStoragePackage </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>BaseReactPackage</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">name</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> reactContext</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ReactApplicationContext</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> NativeModule</span><span class="token operator" style=color:#fc929e>?</span><span class="token plain"> </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 keyword" style=color:#c5a5c5>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">name </span><span class="token operator" style=color:#fc929e>==</span><span class="token plain"> NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">NAME</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 function" style=color:#79b6f2>NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">reactContext</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><span class="token keyword" style=color:#c5a5c5>else</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>null</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>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactModuleInfoProvider</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> ReactModuleInfoProvider </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>mapOf</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"> NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">NAME </span><span class="token keyword" style=color:#c5a5c5>to</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>ReactModuleInfo</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"> name </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">NAME</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"> className </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> NativeLocalStorageModule</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">NAME</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"> canOverrideExistingModule </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</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"> needsEagerInit </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</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"> isCxxModule </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</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"> isTurboModule </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>true</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div></div></div>
53<p>Finally, we need to tell the React Native in our main application how to find this <code>Package</code>. We call this "registering" the package in React Native.</p>
54<p>In this case, you add it to be returned by the <a href=https://github.com/facebook/react-native/blob/8d8b8c343e62115a5509e1aed62047053c2f6e39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactNativeHost.java#L233 target=_blank rel="noopener noreferrer">getPackages</a> method.</p>
55<div class="theme-admonition theme-admonition-info admonition_WCGJ alert alert--info"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_pbrs><p>Later you’ll learn how to distribute your Native Modules as <a href=/docs/the-new-architecture/create-module-library#publish-the-library-on-npm>npm packages</a>, which our build tooling will autolink for you.</div></div>
56<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">Java<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Kotlin</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-java codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/src/main/java/com/turobmoduleexample/MainApplication.java</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-java codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>package</span><span class="token plain"> </span><span class="token namespace" style=opacity:0.7>com</span><span class="token namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token namespace" style=opacity:0.7>inappmodule</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>android</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>app</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>Application</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>PackageList</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactApplication</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactHost</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactNativeHost</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactPackage</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>defaults</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>DefaultNewArchitectureEntryPoint</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>defaults</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>DefaultReactHost</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>react</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>defaults</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>DefaultReactNativeHost</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>facebook</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>soloader</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>SoLoader</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 keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>com</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>nativelocalstorage</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>NativeLocalStoragePackage</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>java</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>util</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ArrayList</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token import namespace" style=opacity:0.7>java</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>util</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>List</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>class</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>MainApplication</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>Application</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>implements</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactApplication</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>private</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>final</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactNativeHost</span><span class="token plain"> reactNativeHost </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>DefaultReactNativeHost</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token 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 annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>List</span><span class="token generics punctuation" style=color:#657b83><</span><span class="token generics class-name" style=color:#fac863>ReactPackage</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getPackages</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token class-name" style=color:#fac863>List</span><span class="token generics punctuation" style=color:#657b83><</span><span class="token generics class-name" style=color:#fac863>ReactPackage</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> packages </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>PackageList</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getPackages</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 comment" style=color:#93a1a1>// Packages that cannot be autolinked yet can be added manually here, for example:</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// packages.add(new MyReactNativePackage());</span><span class="token plain"></span><br></span><span class="token-line code-add-line" style=color:#FFFFFF><span class="token plain"> packages</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>add</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeLocalStoragePackage</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 keyword" style=color:#c5a5c5>return</span><span class="token plain"> packages</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>String</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getJSMainModuleName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"index"</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>boolean</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getUseDeveloperSupport</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>DEBUG</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>boolean</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>isNewArchEnabled</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>IS_NEW_ARCHITECTURE_ENABLED</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>boolean</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>isHermesEnabled</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>IS_HERMES_ENABLED</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactHost</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getReactHost</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>DefaultReactHost</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getDefaultReactHost</span><span class="token punctuation" style=color:#657b83>(</span><span class="token function" style=color:#79b6f2>getApplicationContext</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"> reactNativeHost</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 annotation punctuation" style=color:#657b83>@Override</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>onCreate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>super</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>onCreate</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 class-name" style=color:#fac863>SoLoader</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>init</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</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>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>IS_NEW_ARCHITECTURE_ENABLED</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// If you opted-in for the New Architecture, we load the native entry point for this app.</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token class-name" style=color:#fac863>DefaultNewArchitectureEntryPoint</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>load</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-kotlin codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>android/app/src/main/java/com/turobmoduleexample/MainApplication.kt</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-kotlin codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword" style=color:#c5a5c5>package</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">inappmodule</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> android</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">app</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">Application</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">PackageList</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactApplication</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactNativeHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactPackage</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">defaults</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">DefaultNewArchitectureEntryPoint</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">load</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">defaults</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">DefaultReactHost</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">getDefaultReactHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">react</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">defaults</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">DefaultReactNativeHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">facebook</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">soloader</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">SoLoader</span><br></span><span class="token-line code-add-line" style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>import</span><span class="token plain"> com</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">nativelocalstorage</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">NativeLocalStoragePackage</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"> MainApplication </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>Application</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"> ReactApplication </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>val</span><span class="token plain"> reactNativeHost</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ReactNativeHost </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 keyword" style=color:#c5a5c5>object</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>DefaultReactNativeHost</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token 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>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getPackages</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"> List</span><span class="token operator" style=color:#fc929e><</span><span class="token plain">ReactPackage</span><span class="token operator" style=color:#fc929e>></span><span class="token plain"> </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>PackageList</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">packages</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>apply</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// Packages that cannot be autolinked yet can be added manually here, for example:</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// add(MyReactNativePackage())</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 function" style=color:#79b6f2>add</span><span class="token punctuation" style=color:#657b83>(</span><span class="token function" style=color:#79b6f2>NativeLocalStoragePackage</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 keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getJSMainModuleName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> String </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string-literal singleline string" style=color:#8dc891>"index"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getUseDeveloperSupport</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"> Boolean </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">DEBUG</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>val</span><span class="token plain"> isNewArchEnabled</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Boolean </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">IS_NEW_ARCHITECTURE_ENABLED</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>val</span><span class="token plain"> isHermesEnabled</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Boolean </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">IS_HERMES_ENABLED</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>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>val</span><span class="token plain"> reactHost</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ReactHost</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>get</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getDefaultReactHost</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">applicationContext</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> reactNativeHost</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>override</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>onCreate</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>super</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>onCreate</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"> SoLoader</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>init</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>this</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token boolean" style=color:#ff8b50>false</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>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">BuildConfig</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">IS_NEW_ARCHITECTURE_ENABLED</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token comment" style=color:#93a1a1>// If you opted-in for the New Architecture, we load the native entry point for this app.</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>load</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div></div></div>
57<p>You can now build and run your code on an emulator:</p>
58<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>bash</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-bash codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> run android</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>bash</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-bash codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> run android</span><br></span></code></pre></div></div></div></div></div>
59<video width=30% height=30% playsinline autoplay muted loop><source src=/docs/assets/turbo-native-modules/turbo-native-modules-android.webm type=video/webm><source src=/docs/assets/turbo-native-modules/turbo-native-modules-android.mp4 type=video/mp4></video></div><div role=tabpanel class=tabItem_wHwb hidden><p>Now it's time to write some iOS platform code to make sure <code>localStorage</code> survives after the application is closed.</p>
60<h2 class="anchor anchorWithStickyNavbar_JmGV" id=prepare-your-xcode-project>Prepare your Xcode Project<a href=#prepare-your-xcode-project class=hash-link aria-label="Direct link to Prepare your Xcode Project" title="Direct link to Prepare your Xcode Project"></a></h2>
61<p>We need to prepare your iOS project using Xcode. After completing these <strong>6 steps</strong> you'll have <code>RCTNativeLocalStorage</code> that implements the generated <code>NativeLocalStorageSpec</code> interface.</p>
62<ol>
63<li>Open the CocoPods generated Xcode Workspace:</li>
64</ol>
65<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"> TurboModuleExample.xcworkspace</span><br></span></code></pre></div></div>
66<img class=half-size alt="Open Xcode Workspace" src=/docs/assets/turbo-native-modules/xcode/1.webp>
67<ol start=2>
68<li>Right click on app and select <code>New Group</code>, call the new group <code>NativeLocalStorage</code>.</li>
69</ol>
70<img class=half-size alt="Right click on app and select New Group" src=/docs/assets/turbo-native-modules/xcode/2.webp>
71<ol start=3>
72<li>In the <code>NativeLocalStorage</code> group, create <code>New</code>→<code>File from Template</code>.</li>
73</ol>
74<img class=half-size alt="Create a new file using the Cocoa Touch Class template" src=/docs/assets/turbo-native-modules/xcode/3.webp>
75<ol start=4>
76<li>Use the <code>Cocoa Touch Class</code>.</li>
77</ol>
78<img class=half-size alt="Use the Cocoa Touch Class template" src=/docs/assets/turbo-native-modules/xcode/4.webp>
79<ol start=5>
80<li>Name the Cocoa Touch Class <code>RCTNativeLocalStorage</code> with the <code>Objective-C</code> language.</li>
81</ol>
82<img class=half-size alt="Create an Objective-C RCTNativeLocalStorage class" src=/docs/assets/turbo-native-modules/xcode/5.webp>
83<ol start=6>
84<li>Rename <code>RCTNativeLocalStorage.m</code> → <code>RCTNativeLocalStorage.mm</code> making it an Objective-C++ file.</li>
85</ol>
86<img class=half-size alt="Convert to and Objective-C++ file" src=/docs/assets/turbo-native-modules/xcode/6.webp>
87<h2 class="anchor anchorWithStickyNavbar_JmGV" id=implement-localstorage-with-nsuserdefaults>Implement localStorage with NSUserDefaults<a href=#implement-localstorage-with-nsuserdefaults class=hash-link aria-label="Direct link to Implement localStorage with NSUserDefaults" title="Direct link to Implement localStorage with NSUserDefaults"></a></h2>
88<p>Start by updating <code>RCTNativeLocalStorage.h</code>:</p>
89<div class="language-objc codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>NativeLocalStorage/RCTNativeLocalStorage.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 comment" style=color:#93a1a1>// RCTNativeLocalStorage.h</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// TurboModuleExample</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>import</span><span class="token macro property" style=color:#2aa198> </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 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 code-add-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><</span><span class="token macro property expression" style=color:#2aa198>NativeLocalStorageSpec</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>NativeLocalStorageSpec</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 code-remove-line" style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>@interface</span><span class="token plain"> RCTNativeLocalStorage </span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"> NSObject</span><br></span><span class="token-line code-add-line" style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>@interface</span><span class="token plain"> RCTNativeLocalStorage </span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"> NSObject </span><span class="token operator" style=color:#fc929e><</span><span class="token plain">NativeLocalStorageSpec</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><br></span></code></pre></div></div>
90<p>Then update our implementation to use <code>NSUserDefaults</code> with a custom <a href=https://developer.apple.com/documentation/foundation/nsuserdefaults/1409957-initwithsuitename target=_blank rel="noopener noreferrer">suite name</a>.</p>
91<div class="language-objc codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>NativeLocalStorage/RCTNativeLocalStorage.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 comment" style=color:#93a1a1>// RCTNativeLocalStorage.m</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// TurboModuleExample</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>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property string" style=color:#8dc891>"RCTNativeLocalStorage.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>static</span><span class="token plain"> NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> RCTNativeLocalStorageKey </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>@"local-storage"</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>@interface</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>RCTNativeLocalStorage</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>@property</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">strong</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> nonatomic</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> NSUserDefaults </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain">localStorage</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>@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"></span><span class="token keyword" style=color:#c5a5c5>@implementation</span><span class="token plain"> RCTNativeLocalStorage</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">id</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> init </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>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>self</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 keyword" style=color:#c5a5c5>super</span><span class="token plain"> init</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> _localStorage </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">NSUserDefaults alloc</span><span class="token punctuation" style=color:#657b83>]</span><span class="token plain"> initWithSuiteName</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">RCTNativeLocalStorageKey</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>self</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 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><</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 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><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><</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">NativeLocalStorageSpecJSI</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 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 operator" style=color:#fc929e>-</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain"> _Nullable</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">getItem</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">key </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token keyword" style=color:#c5a5c5>self</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">localStorage stringForKey</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">key</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 operator" style=color:#fc929e>-</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">setItem</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">value</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> key</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">key </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>self</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">localStorage setObject</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">value forKey</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">key</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 operator" style=color:#fc929e>-</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">removeItem</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">key </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>self</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">localStorage removeObjectForKey</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">key</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 operator" style=color:#fc929e>-</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">clear </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"> NSDictionary </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain">keys </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 keyword" style=color:#c5a5c5>self</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">localStorage dictionaryRepresentation</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>for</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain">key </span><span class="token keyword" style=color:#c5a5c5>in</span><span class="token plain"> keys</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 punctuation" style=color:#657b83>[</span><span class="token keyword" style=color:#c5a5c5>self</span><span class="token plain"> removeItem</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">key</span><span class="token punctuation" style=color:#657b83>]</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><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 operator" style=color:#fc929e>+</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">moduleName</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"> </span><span class="token string" style=color:#8dc891>@"NativeLocalStorage"</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>
92<p>Important things to note:</p>
93<ul>
94<li>You can use Xcode to jump to the Codegen <code>@protocol NativeLocalStorageSpec</code>. You can also use Xcode to generate stubs for you.</li>
95</ul>
96<h2 class="anchor anchorWithStickyNavbar_JmGV" id=register-the-native-module-in-your-app>Register the Native Module in your app<a href=#register-the-native-module-in-your-app class=hash-link aria-label="Direct link to Register the Native Module in your app" title="Direct link to Register the Native Module in your app"></a></h2>
97<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 specs in native code.</p>
98<p>Modify the <code>package.json</code> as it follows:</p>
99<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 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 property" style=color:#2aa198>"ios"</span><span class="token operator" style=color:#fc929e>:</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>"NativeLocalStorage"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"RCTNativeLocalStorage"</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>
100<p>At this point, you need to re-install the pods to make sure that codegen runs again to generate the new files:</p>
101<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>
102<p>If you now build your application from Xcode, you should be able to build successfully.</p>
103<h2 class="anchor anchorWithStickyNavbar_JmGV" id=build-and-run-your-code-on-a-simulator>Build and run your code on a Simulator<a href=#build-and-run-your-code-on-a-simulator class=hash-link aria-label="Direct link to Build and run your code on a Simulator" title="Direct link to Build and run your code on a Simulator"></a></h2>
104<div class="tabs-container tabList_J5MA"><ul role=tablist aria-orientation=horizontal class=tabs><li role=tab tabindex=0 aria-selected=true class="tabs__item tabItem_l0OV tabs__item--active">npm<li role=tab tabindex=-1 aria-selected=false class="tabs__item tabItem_l0OV">Yarn</ul><div class=margin-top--md><div role=tabpanel class=tabItem_wHwb><div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>bash</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-bash codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>npm</span><span class="token plain"> run ios</span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>bash</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-bash codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token function" style=color:#79b6f2>yarn</span><span class="token plain"> run ios</span><br></span></code></pre></div></div></div></div></div>
105<video width=30% height=30% playsinline autoplay muted loop><source src=/docs/assets/turbo-native-modules/turbo-native-modules-ios.webm type=video/webm><source src=/docs/assets/turbo-native-modules/turbo-native-modules-ios.mp4 type=video/mp4></video></div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/turbo-native-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/turbo-native-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-14T14:14:17.000Z itemprop=dateModified>Apr 14, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/native-platform><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Introduction</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/the-new-architecture/pure-cxx-modules><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Cross-Platform with C++</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=#native-persistent-storage class="table-of-contents__link toc-highlight">Native Persistent Storage</a><ul><li><a href=#1-declare-typed-specification class="table-of-contents__link toc-highlight">1. Declare Typed Specification</a><li><a href=#2-configure-codegen-to-run class="table-of-contents__link toc-highlight">2. Configure Codegen to run</a><li><a href=#3-write-application-code-using-the-turbo-native-module class="table-of-contents__link toc-highlight">3. Write Application Code using the Turbo Native Module</a><li><a href=#4-write-your-native-platform-code class="table-of-contents__link toc-highlight">4. Write your Native Platform code</a></ul></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>