kitten.sh / rn-llms-txt-gen
this repo has no description
fork atom
rn-llms-txt-gen / .cache / fetch / reactnative.dev / docs_fabric-native-components-introduction.html
at main 314 kB view raw
1<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-0.79 docs-doc-page docs-doc-id-fabric-native-components-introduction" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Fabric Native Components 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/fabric-native-components-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="Fabric Native Components Introduction · React Native"><meta data-rh=true name=description content="If you want to build new React Native Components that wrap around a Host Component like a unique kind of CheckBox on Android, or a UIButton on iOS, you should use a Fabric Native Component."><meta data-rh=true property=og:description content="If you want to build new React Native Components that wrap around a Host Component like a unique kind of CheckBox on Android, or a UIButton on iOS, you should use a Fabric Native Component."><link data-rh=true rel=icon href=/img/favicon.ico><link data-rh=true rel=canonical href=https://reactnative.dev/docs/fabric-native-components-introduction><link data-rh=true rel=alternate href=https://reactnative.dev/docs/fabric-native-components-introduction hreflang=en><link data-rh=true rel=alternate href=https://reactnative.dev/docs/fabric-native-components-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/fabric-native-components-introduction>0.79</a><ul class=dropdown__menu><li><a class=dropdown__link href=/docs/next/fabric-native-components-introduction>Next</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/docs/fabric-native-components-introduction>0.79</a><li><a class=dropdown__link href=/docs/0.78/fabric-native-components-introduction>0.78</a><li><a class=dropdown__link href=/docs/0.77/fabric-native-components-introduction>0.77</a><li><a class=dropdown__link href=/docs/0.76/fabric-native-components-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 tabindex=0>Modules</a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/turbo-native-modules-introduction>Android and iOS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/the-new-architecture/pure-cxx-modules>Cross-Platform with C++</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/the-new-architecture/advanced-topics-modules>Advanced Topics</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--active" 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 menu__link--active" aria-current=page 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 Components</h1></header> 5<p>If you want to build <em>new</em> React Native Components that wrap around a <a href=https://reactnative.dev/architecture/glossary#host-view-tree-and-host-view target=_blank rel="noopener noreferrer">Host Component</a> like a unique kind of <a href=https://developer.android.com/reference/androidx/appcompat/widget/AppCompatCheckBox target=_blank rel="noopener noreferrer">CheckBox</a> on Android, or a <a href="https://developer.apple.com/documentation/uikit/uibutton?language=objc" target=_blank rel="noopener noreferrer">UIButton</a> on iOS, you should use a Fabric Native Component.</p> 6<p>This guide will show you how to build Fabric Native Components, by implementing a web view component. The steps to doing this are:</p> 7<ol> 8<li>Define a JavaScript specification using Flow or TypeScript.</li> 9<li>Configure the dependencies management system to generate code from the provided spec and to be auto-linked.</li> 10<li>Implement the Native code.</li> 11<li>Use the Component in an App.</li> 12</ol> 13<p>You're going to need a plain template generated application to use the component:</p> 14<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 plain">npx @react-native-community/cli@latest init Demo --install-pods </span><span class="token boolean" style=color:#ff8b50>false</span><br></span></code></pre></div></div> 15<h2 class="anchor anchorWithStickyNavbar_JmGV" id=creating-a-webview-component>Creating a WebView Component<a href=#creating-a-webview-component class=hash-link aria-label="Direct link to Creating a WebView Component" title="Direct link to Creating a WebView Component">​</a></h2> 16<p>This guide will show you how to create a Web View component. We will be creating the component by using the Android's <a href=https://developer.android.com/reference/android/webkit/WebView target=_blank rel="noopener noreferrer"><code>WebView</code></a> component, and the iOS <a href="https://developer.apple.com/documentation/webkit/wkwebview?language=objc" target=_blank rel="noopener noreferrer"><code>WKWebView</code></a> component.</p> 17<p>Let's start by creating the folders structure to hold our component's code:</p> 18<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>mkdir</span><span class="token plain"> </span><span class="token parameter variable" style=color:#cb4b16>-p</span><span class="token plain"> Demo/</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">specs,android/app/src/main/java/com/webview</span><span class="token punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div> 19<p>This gives you the following layout where you'll working:</p> 20<div class="language-tsx codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-tsx codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token maybe-class-name">Demo</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">├── android</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">app</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">src</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">main</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">java</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">com</span><span class="token operator" style=color:#fc929e>/</span><span class="token plain">webview</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">└── ios</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">└── specs</span><br></span></code></pre></div></div> 21<ul> 22<li>The <code>android/app/src/main/java/com/webview</code> folder is the folder that will contain our Android code.</li> 23<li>The <code>ios</code> folder is the folder that will contain our iOS code.</li> 24<li>The <code>specs</code> folder is the folder that will contain the Codegen's specification file.</li> 25</ul> 26<h2 class="anchor anchorWithStickyNavbar_JmGV" id=1-define-specification-for-codegen>1. Define Specification for Codegen<a href=#1-define-specification-for-codegen class=hash-link aria-label="Direct link to 1. Define Specification for Codegen" title="Direct link to 1. Define Specification for Codegen">​</a></h2> 27<p>Your specification must be defined in either <a href=https://www.typescriptlang.org/ target=_blank rel="noopener noreferrer">TypeScript</a> or <a href=https://flow.org/ target=_blank rel="noopener noreferrer">Flow</a> (see <a href=/docs/the-new-architecture/what-is-codegen>Codegen</a> documentation for more details). This is used by Codegen to generate the C++, Objective-C++ and Java to connect your platform code to the JavaScript runtime that React runs in.</p> 28<p>The specification file must be named <code>&lt;MODULE_NAME>NativeComponent.{ts|js}</code> to work with Codegen. The suffix <code>NativeComponent</code> is not only a convention, it is actually used by Codegen to detect a spec file.</p> 29<p>Use this specification for our WebView Component:</p> 30<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>Demo/specs/WebViewNativeComponent.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">HostComponent</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> ViewProps</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 keyword" style=color:#c5a5c5>type</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">BubblingEventHandler</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/Libraries/Types/CodegenTypes'</span><span class="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"> codegenNativeComponent </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native/Libraries/Utilities/codegenNativeComponent'</span><span class="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>type</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>WebViewScriptLoadedEvent</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 plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> result</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'success'</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>'error'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>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>NativeProps</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>ViewProps</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"> sourceURL</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> onScriptLoaded</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> BubblingEventHandler</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">WebViewScriptLoadedEvent</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><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" 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 generic-function function" style=color:#79b6f2>codegenNativeComponent</span><span class="token generic-function generic class-name operator" style=color:#fc929e>&lt;</span><span class="token generic-function generic class-name" style=color:#fac863>NativeProps</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>'CustomWebView'</span><span class="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>as</span><span class="token plain"> HostComponent</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">NativeProps</span><span class="token operator" style=color:#fc929e>></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-ts codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Demo/RCTWebView/js/RCTWebViewNativeComponent.js</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-ts codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token comment" style=color:#93a1a1>// @flow strict-local</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 keyword" style=color:#c5a5c5>type</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">HostComponent</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> ViewProps</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 keyword" style=color:#c5a5c5>type</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">BubblingEventHandler</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/Libraries/Types/CodegenTypes'</span><span class="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"> codegenNativeComponent </span><span class="token keyword" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native/Libraries/Utilities/codegenNativeComponent'</span><span class="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>type</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>WebViewScriptLoadedEvent</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> $ReadOnly</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token punctuation" style=color:#657b83>{</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"> result</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"success"</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>"error"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token operator" style=color:#fc929e>|</span><span class="token punctuation" style=color:#657b83>}</span><span class="token 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" 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>type</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>NativeProps</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> $ReadOnly</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token punctuation" style=color:#657b83>{</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 operator" style=color:#fc929e>...</span><span class="token plain">ViewProps</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> sourceURL</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token builtin" style=color:#2aa198>string</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> onScriptLoaded</span><span class="token operator" style=color:#fc929e>?</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> BubblingEventHandler</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">WebViewScriptLoadedEvent</span><span class="token operator" style=color:#fc929e>></span><span class="token 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 operator" style=color:#fc929e>|</span><span class="token punctuation" style=color:#657b83>}</span><span class="token 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" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>default</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token generic-function function" style=color:#79b6f2>codegenNativeComponent</span><span class="token generic-function generic class-name operator" style=color:#fc929e>&lt;</span><span class="token generic-function generic class-name" style=color:#fac863>NativeProps</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>'CustomWebView'</span><span class="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 operator" style=color:#fc929e>:</span><span class="token plain"> HostComponent</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">NativeProps</span><span class="token operator" style=color:#fc929e>></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></code></pre></div></div></div></div></div> 31<p>This specification is composed of three main parts, excluding the imports:</p> 32<ul> 33<li>The <code>WebViewScriptLoadedEvent</code> is a supporting data type for the data the event needs to pass from native to JavaScript.</li> 34<li>The <code>NativeProps</code> is a definition of the props that we can set on the component.</li> 35<li>The <code>codegenNativeComponent</code> statement allows us to codegenerate the code for the custom component and that defines a name for the component used to match the native implementations.</li> 36</ul> 37<p>As with Native Modules, you can have multiple specification files in the <code>specs/</code> directory. For more information about the types you can use, and the platform types these map to, see the <a href=/docs/appendix#codegen-typings>appendix</a>.</p> 38<h2 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></h2> 39<p>The specification is used by the React Native's 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> 40<div class="language-json codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>json</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-json codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token property" style=color:#2aa198>"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 theme-code-block-highlighted-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 theme-code-block-highlighted-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>"AppSpec"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-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>"components"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-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 theme-code-block-highlighted-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.webview"</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> </span><span class="token property" style=color:#2aa198>"ios"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> </span><span class="token property" style=color:#2aa198>"componentProvider"</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> </span><span class="token property" style=color:#2aa198>"CustomWebView"</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"RCTWebView"</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-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 theme-code-block-highlighted-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> 41<p>With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.</p> 42<p>Note that for iOS, we are declaratively mapping the name of the JS component that is exported by the spec (<code>CustomWebView</code>) with the iOS class that will implement the component natively.</p> 43<h2 class="anchor anchorWithStickyNavbar_JmGV" id=2-building-your-native-code>2. Building your Native Code<a href=#2-building-your-native-code class=hash-link aria-label="Direct link to 2. Building your Native Code" title="Direct link to 2. Building your Native Code">​</a></h2> 44<p>Now it's time to write the native platform code so that when React requires to render a view, the platform can create the right native view and can render it on screen.</p> 45<p>You should work through both the Android and iOS platforms.</p> 46<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 Native Component 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> 47<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 be able to render the web view. The steps you need to follow are:</p> 48<ul> 49<li>Running Codegen</li> 50<li>Write the code for the <code>ReactWebView</code></li> 51<li>Write the code for the <code>ReactWebViewManager</code></li> 52<li>Write the code for the <code>ReactWebViewPackage</code></li> 53<li>Register the <code>ReactWebViewPackage</code> in the application</li> 54</ul> 55<h3 class="anchor anchorWithStickyNavbar_JmGV" id=1-run-codegen-through-gradle>1. Run Codegen through Gradle<a href=#1-run-codegen-through-gradle class=hash-link aria-label="Direct link to 1. Run Codegen through Gradle" title="Direct link to 1. Run Codegen through Gradle">​</a></h3> 56<p>Run this once to generate boilerplate that your IDE of choice can use.</p> 57<div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Demo/</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></code></pre></div></div> 58<p>Codegen will generate the <code>ViewManager</code> interface you need to implement and the <code>ViewManager</code> delegate for the web view.</p> 59<h3 class="anchor anchorWithStickyNavbar_JmGV" id=2-write-the-reactwebview>2. Write the <code>ReactWebView</code><a href=#2-write-the-reactwebview class=hash-link aria-label="Direct link to 2-write-the-reactwebview" title="Direct link to 2-write-the-reactwebview">​</a></h3> 60<p>The <code>ReactWebView</code> is the component that wraps the Android native view that React Native will render when using our custom Component.</p> 61<p>Create a <code>ReactWebView.java</code> or a <code>ReactWebView.kt</code> file in the <code>android/src/main/java/com/webview</code> folder with this code:</p> 62<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>Demo/android/src/main/java/com/webview/ReactWebView.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>webview</span><span class="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>util</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>AttributeSet</span><span class="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>webkit</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>WebView</span><span class="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>webkit</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>WebViewClient</span><span class="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 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>Arguments</span><span class="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>WritableMap</span><span class="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>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 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>uimanager</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>UIManagerHelper</span><span class="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>uimanager</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>events</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>Event</span><span class="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>ReactWebView</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>WebView</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactWebView</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>Context</span><span class="token plain"> context</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">context</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>configureComponent</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>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactWebView</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>Context</span><span class="token plain"> context</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>AttributeSet</span><span class="token plain"> attrs</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">context</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> attrs</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>configureComponent</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>public</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactWebView</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>Context</span><span class="token plain"> context</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>AttributeSet</span><span class="token plain"> attrs</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>int</span><span class="token plain"> defStyleAttr</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">context</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> attrs</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> defStyleAttr</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>configureComponent</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>private</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>configureComponent</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>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>setLayoutParams</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>LayoutParams</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>LayoutParams</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>MATCH_PARENT</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>LayoutParams</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>MATCH_PARENT</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>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>setWebViewClient</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>WebViewClient</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 keyword" style=color:#c5a5c5>void</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>onPageFinished</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>WebView</span><span class="token plain"> view</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"> url</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>emitOnScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>OnScriptLoadedEventResult</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">success</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 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>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>emitOnScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>OnScriptLoadedEventResult</span><span class="token plain"> result</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>ReactContext</span><span class="token plain"> reactContext </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 class-name" style=color:#fac863>ReactContext</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"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>int</span><span class="token plain"> surfaceId </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>UIManagerHelper</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getSurfaceId</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 class-name" style=color:#fac863>EventDispatcher</span><span class="token plain"> eventDispatcher </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>UIManagerHelper</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getEventDispatcherForReactTag</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 function" style=color:#79b6f2>getId</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 class-name" style=color:#fac863>WritableMap</span><span class="token plain"> payload </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Arguments</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>createMap</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"> payload</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 string" style=color:#8dc891>"result"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> result</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>name</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 class-name" style=color:#fac863>OnScriptLoadedEvent</span><span class="token plain"> event </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>OnScriptLoadedEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">surfaceId</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getId</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"> payload</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 plain">eventDispatcher </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><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> eventDispatcher</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>dispatchEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">event</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 keyword" style=color:#c5a5c5>public</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>enum</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>OnScriptLoadedEventResult</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"> success</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> error</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>private</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>OnScriptLoadedEvent</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>Event</span><span class="token generics punctuation" style=color:#657b83>&lt;</span><span class="token generics class-name" style=color:#fac863>OnScriptLoadedEvent</span><span class="token generics 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>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>WritableMap</span><span class="token plain"> payload</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token class-name" style=color:#fac863>OnScriptLoadedEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token keyword" style=color:#c5a5c5>int</span><span class="token plain"> surfaceId</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>int</span><span class="token plain"> viewId</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>WritableMap</span><span class="token plain"> payload</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">surfaceId</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> viewId</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>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">payload </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> payload</span><span class="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>getEventName</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>"onScriptLoaded"</span><span class="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>WritableMap</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getEventData</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"> payload</span><span class="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>Demo/android/src/main/java/com/webview/ReactWebView.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">webview</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">util</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">AttributeSet</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">webkit</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">WebView</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">webkit</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">WebViewClient</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">Arguments</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">WritableMap</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">ReactContext</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">uimanager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">UIManagerHelper</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">uimanager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">events</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">Event</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"> ReactWebView</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> WebView </span><span class="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>constructor</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">context</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Context</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 keyword" style=color:#c5a5c5>super</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"> </span><span class="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>configureComponent</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>constructor</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">context</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Context</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> attrs</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> AttributeSet</span><span class="token operator" style=color:#fc929e>?</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 keyword" style=color:#c5a5c5>super</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"> attrs</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>configureComponent</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>constructor</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">context</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Context</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> attrs</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> AttributeSet</span><span class="token operator" style=color:#fc929e>?</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> defStyleAttr</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Int</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 keyword" style=color:#c5a5c5>super</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"> attrs</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> defStyleAttr</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>configureComponent</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>private</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>configureComponent</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>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">layoutParams </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>LayoutParams</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">LayoutParams</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">MATCH_PARENT</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> LayoutParams</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">MATCH_PARENT</span><span class="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>this</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">webViewClient </span><span class="token operator" style=color:#fc929e>=</span><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>WebViewClient</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>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>onPageFinished</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">view</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> WebView</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> url</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 function" style=color:#79b6f2>emitOnScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">OnScriptLoadedEventResult</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">success</span><span class="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><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>fun</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>emitOnScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">result</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> OnScriptLoadedEventResult</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"> reactContext </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> context </span><span class="token keyword" style=color:#c5a5c5>as</span><span class="token plain"> ReactContext</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"> surfaceId </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> UIManagerHelper</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getSurfaceId</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 keyword" style=color:#c5a5c5>val</span><span class="token plain"> eventDispatcher </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> UIManagerHelper</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>getEventDispatcherForReactTag</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"> id</span><span class="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"> payload </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"> Arguments</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>createMap</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>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 function" style=color:#79b6f2>putString</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string-literal singleline string" style=color:#8dc891>"result"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> result</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"> </span><span class="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"> event </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>OnScriptLoadedEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">surfaceId</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"> payload</span><span class="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"> eventDispatcher</span><span class="token operator" style=color:#fc929e>?</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>dispatchEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">event</span><span class="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>enum</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>class</span><span class="token plain"> OnScriptLoadedEventResult </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> success</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> error</span><span class="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>inner</span><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>OnScriptLoadedEvent</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> surfaceId</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Int</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> viewId</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> Int</span><span class="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>private</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>val</span><span class="token plain"> payload</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> WritableMap</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 operator" style=color:#fc929e>:</span><span class="token plain"> Event</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">OnScriptLoadedEvent</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">surfaceId</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> viewId</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>getEventName</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string-literal singleline string" style=color:#8dc891>"onScriptLoaded"</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>getEventData</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"> payload</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> 63<p>The <code>ReactWebView</code> extends the Android <code>WebView</code> so you can reuse all the properties already defined by the platform with ease.</p> 64<p>The class defines the three Android constructors but defers their actual implementation to the private <code>configureComponent</code> function. This function takes care of initializing all the components specific properties: in this case you are setting the layout of the <code>WebView</code> and you are defining the <code>WebClient</code> that you use to customize the behavior of the <code>WebView</code>. In this code, the <code>ReactWebView</code> emits an event when the page finishes loading, by implementing the <code>WebClient</code>'s <code>onPageFinished</code> method.</p> 65<p>The code then defines a helper function to actually emit an event. To emit an event, you have to:</p> 66<ul> 67<li>grab a reference to the <code>ReactContext</code>;</li> 68<li>retrieve the <code>surfaceId</code> of the view that you are presenting;</li> 69<li>grab a reference to the <code>eventDispatcher</code> associated with the view;</li> 70<li>build the payload for the event using a <code>WritableMap</code> object;</li> 71<li>create the event object that you need to send to JavaScript;</li> 72<li>call the <code>eventDispatcher.dispatchEvent</code> to send the event.</li> 73</ul> 74<p>The last part of the file contains the definition of the data types you need to send the event:</p> 75<ul> 76<li>The <code>OnScriptLoadedEventResult</code>, with the possible outcomes of the <code>OnScriptLoaded</code> event.</li> 77<li>The actual <code>OnScriptLoadedEvent</code> that needs to extend the React Native's <code>Event</code> class.</li> 78</ul> 79<h3 class="anchor anchorWithStickyNavbar_JmGV" id=3-write-the-webviewmanager>3. Write the <code>WebViewManager</code><a href=#3-write-the-webviewmanager class=hash-link aria-label="Direct link to 3-write-the-webviewmanager" title="Direct link to 3-write-the-webviewmanager">​</a></h3> 80<p>The <code>WebViewManager</code> is the class that connects the React Native runtime with the native view.</p> 81<p>When React receives the instruction from the app to render a specific component, React uses the registered view manager to create the view and to pass all the required properties.</p> 82<p>This is the code of the <code>ReactWebViewManager</code>.</p> 83<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>Demo/android/src/main/java/com/webview/ReactWebViewManager.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>webview</span><span class="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 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>annotations</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactModule</span><span class="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>uimanager</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>SimpleViewManager</span><span class="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>uimanager</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ThemedReactContext</span><span class="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>uimanager</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ViewManagerDelegate</span><span class="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>uimanager</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import namespace" style=opacity:0.7>annotations</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ReactProp</span><span class="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>viewmanagers</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>CustomWebViewManagerInterface</span><span class="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>viewmanagers</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>CustomWebViewManagerDelegate</span><span class="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 annotation punctuation" style=color:#657b83>@ReactModule</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"> </span><span class="token class-name" style=color:#fac863>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>REACT_CLASS</span><span class="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>class</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>ReactWebViewManager</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>SimpleViewManager</span><span class="token generics punctuation" style=color:#657b83>&lt;</span><span class="token generics class-name" style=color:#fac863>ReactWebView</span><span class="token generics punctuation" style=color:#657b83>></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>CustomWebViewManagerInterface</span><span class="token generics punctuation" style=color:#657b83>&lt;</span><span class="token generics class-name" style=color:#fac863>ReactWebView</span><span class="token generics 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>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>CustomWebViewManagerDelegate</span><span class="token generics punctuation" style=color:#657b83>&lt;</span><span class="token generics class-name" style=color:#fac863>ReactWebView</span><span class="token generics punctuation" style=color:#657b83>,</span><span class="token generics"> </span><span class="token generics class-name" style=color:#fac863>ReactWebViewManager</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> delegate </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>new</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>CustomWebViewManagerDelegate</span><span class="token generics punctuation" style=color:#657b83>&lt;</span><span class="token generics punctuation" style=color:#657b83>></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"></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>ViewManagerDelegate</span><span class="token generics punctuation" style=color:#657b83>&lt;</span><span class="token generics class-name" style=color:#fac863>ReactWebView</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getDelegate</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"> delegate</span><span class="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>REACT_CLASS</span><span class="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>ReactWebView</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>createViewInstance</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>ThemedReactContext</span><span class="token plain"> context</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>ReactWebView</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 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>@ReactProp</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"> </span><span class="token string" style=color:#8dc891>"sourceUrl"</span><span class="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 keyword" style=color:#c5a5c5>void</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>setSourceURL</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>ReactWebView</span><span class="token plain"> view</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"> sourceURL</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">sourceURL </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><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> view</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>emitOnScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token class-name" style=color:#fac863>ReactWebView</span><span class="token class-name punctuation" style=color:#657b83>.</span><span class="token class-name" style=color:#fac863>OnScriptLoadedEventResult</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">error</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 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"> view</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>loadUrl</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">sourceURL</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>HashMap</span><span class="token generics punctuation" style=color:#657b83>&lt;</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 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>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>REACT_CLASS</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>"CustomWebView"</span><span class="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>Map</span><span class="token generics punctuation" style=color:#657b83>&lt;</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>Object</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>getExportedCustomBubblingEventTypeConstants</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>&lt;</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>Object</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>&lt;</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"> </span><span class="token class-name" style=color:#fac863>Map</span><span class="token generics punctuation" style=color:#657b83>&lt;</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>Object</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> bubblingMap </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>&lt;</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"> bubblingMap</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 string" style=color:#8dc891>"phasedRegistrationNames"</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>HashMap</span><span class="token generics punctuation" style=color:#657b83>&lt;</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>String</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 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 function" style=color:#79b6f2>put</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>"bubbled"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"onScriptLoaded"</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>put</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>"captured"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>"onScriptLoadedCapture"</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 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 string" style=color:#8dc891>"onScriptLoaded"</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> bubblingMap</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><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>Demo/android/src/main/java/com/webview/ReactWebViewManager.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">webview</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">bridge</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">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"> 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">annotations</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactModule</span><span class="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"> 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">uimanager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">SimpleViewManager</span><span class="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"> 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">uimanager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ThemedReactContext</span><span class="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"> 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">uimanager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ViewManagerDelegate</span><span class="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"> 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">uimanager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">annotations</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactProp</span><span class="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"> 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">viewmanagers</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">CustomWebViewManagerInterface</span><span class="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"> 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">viewmanagers</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">CustomWebViewManagerDelegate</span><span class="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 builtin" style=color:#2aa198>@ReactModule</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"> ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">REACT_CLASS</span><span class="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>class</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">context</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"> SimpleViewManager</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">ReactWebView</span><span class="token operator" style=color:#fc929e>></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"> CustomWebViewManagerInterface</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">ReactWebView</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>private</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>val</span><span class="token plain"> delegate</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> CustomWebViewManagerDelegate</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">ReactWebView</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> ReactWebViewManager</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>CustomWebViewManagerDelegate</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><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>getDelegate</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"> ViewManagerDelegate</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">ReactWebView</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"> delegate</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 operator" style=color:#fc929e>:</span><span class="token plain"> String </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> REACT_CLASS</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>createViewInstance</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">context</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ThemedReactContext</span><span class="token punctuation" style=color:#657b83>)</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ReactWebView </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>ReactWebView</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"></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 builtin" style=color:#2aa198>@ReactProp</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"> </span><span class="token string-literal singleline string" style=color:#8dc891>"sourceUrl"</span><span class="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>setSourceURL</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">view</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> ReactWebView</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> sourceURL</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 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">sourceURL </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><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> view</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>emitOnScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">ReactWebView</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">OnScriptLoadedEventResult</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">error</span><span class="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 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"> view</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>loadUrl</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">sourceURL</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>emptyMap</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>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"> REACT_CLASS </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> </span><span class="token string-literal singleline string" style=color:#8dc891>"CustomWebView"</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>getExportedCustomBubblingEventTypeConstants</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"> Map</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">String</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> Any</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>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"> </span><span class="token string-literal singleline string" style=color:#8dc891>"onScriptLoaded"</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>to</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"> </span><span class="token string-literal singleline string" style=color:#8dc891>"phasedRegistrationNames"</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>to</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"> </span><span class="token string-literal singleline string" style=color:#8dc891>"bubbled"</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>to</span><span class="token plain"> </span><span class="token string-literal singleline string" style=color:#8dc891>"onScriptLoaded"</span><span class="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-literal singleline string" style=color:#8dc891>"captured"</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>to</span><span class="token plain"> </span><span class="token string-literal singleline string" style=color:#8dc891>"onScriptLoadedCapture"</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 punctuation" style=color:#657b83>}</span><br></span></code></pre></div></div></div></div></div> 84<p>The <code>ReactWebViewManager</code> extends the <code>SimpleViewManager</code> class from React and implements the <code>CustomWebViewManagerInterface</code>, generated by Codegen.</p> 85<p>It holds a reference of the <code>CustomWebViewManagerDelegate</code>, another element generated by Codegen.</p> 86<p>It then overrides the <code>getName</code> function, which must return the same name used in the spec's <code>codegenNativeComponent</code> function call.</p> 87<p>The <code>createViewInstance</code> function is responsible to instantiate a new <code>ReactWebView</code>.</p> 88<p>Then, the ViewManager needs to define how all the React's components props will update the native view. In the example, you need to decide how to handle the <code>sourceURL</code> property that React will set on the <code>WebView</code>.</p> 89<p>Finally, if the component can emit an event, you need to map the event name by overriding the <code>getExportedCustomBubblingEventTypeConstants</code> for bubbling events, or the <code>getExportedCustomDirectEventTypeConstants</code> for direct events.</p> 90<h3 class="anchor anchorWithStickyNavbar_JmGV" id=4-write-the-reactwebviewpackage>4. Write the <code>ReactWebViewPackage</code><a href=#4-write-the-reactwebviewpackage class=hash-link aria-label="Direct link to 4-write-the-reactwebviewpackage" title="Direct link to 4-write-the-reactwebviewpackage">​</a></h3> 91<p>As you do with Native Modules, Native Components also need to implement the <code>ReactPackage</code> class. This is an object that you can use to register the component in the React Native runtime.</p> 92<p>This is the code for the <code>ReactWebViewPackage</code>:</p> 93<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>Demo/android/src/main/java/com/webview/ReactWebViewPackage.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>webview</span><span class="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"></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>uimanager</span><span class="token import namespace punctuation" style=opacity:0.7;color:#657b83>.</span><span class="token import class-name" style=color:#fac863>ViewManager</span><span class="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>Collections</span><span class="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>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>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"></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>ReactWebViewPackage</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"> </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>&lt;</span><span class="token generics class-name" style=color:#fac863>ViewManager</span><span class="token generics punctuation" style=color:#657b83>&lt;</span><span class="token generics operator" style=color:#fc929e>?</span><span class="token generics punctuation" style=color:#657b83>,</span><span class="token generics"> </span><span class="token generics operator" style=color:#fc929e>?</span><span class="token generics punctuation" style=color:#657b83>></span><span class="token generics punctuation" style=color:#657b83>></span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>createViewManagers</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>return</span><span class="token plain"> </span><span class="token class-name" style=color:#fac863>Collections</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>singletonList</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>ReactWebViewManager</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 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>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"> s</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"> reactApplicationContext</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 class-name" style=color:#fac863>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>REACT_CLASS</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 plain">s</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>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">reactApplicationContext</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>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" 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>&lt;</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>&lt;</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>&lt;</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>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>REACT_CLASS</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>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>REACT_CLASS</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>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token constant" style=color:#5a9bcf>REACT_CLASS</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>Demo/android/src/main/java/com/webview/ReactWebViewPackage.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">webview</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"></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">uimanager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ViewManager</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"> ReactWebViewPackage </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"> </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>createViewManagers</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"> List</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">ViewManager</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token operator" style=color:#fc929e>*</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 operator" style=color:#fc929e>></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>return</span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>listOf</span><span class="token punctuation" style=color:#657b83>(</span><span class="token function" style=color:#79b6f2>ReactWebViewManager</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 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">s</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"> reactApplicationContext</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 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>when</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">s</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"> ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">REACT_CLASS </span><span class="token operator" style=color:#fc929e>-></span><span class="token plain"> </span><span class="token function" style=color:#79b6f2>ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">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 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 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 operator" style=color:#fc929e>:</span><span class="token plain"> ReactModuleInfoProvider </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">ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">REACT_CLASS </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"> ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">REACT_CLASS</span><span class="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"> ReactWebViewManager</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">REACT_CLASS</span><span class="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 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><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> 94<p>The <code>ReactWebViewPackage</code> extends the <code>BaseReactPackage</code> and implements all the methods required to properly register our component.</p> 95<ul> 96<li>the <code>createViewManagers</code> method is the factory method that creates the <code>ViewManager</code> that manage the custom views.</li> 97<li>the <code>getModule</code> method returns the proper ViewManager depending on the View that React Native needs to render.</li> 98<li>the <code>getReactModuleInfoProvider</code> provides all the information required when registering the module in the runtime,</li> 99</ul> 100<h3 class="anchor anchorWithStickyNavbar_JmGV" id=5-register-the-reactwebviewpackage-in-the-application>5. Register the <code>ReactWebViewPackage</code> in the application<a href=#5-register-the-reactwebviewpackage-in-the-application class=hash-link aria-label="Direct link to 5-register-the-reactwebviewpackage-in-the-application" title="Direct link to 5-register-the-reactwebviewpackage-in-the-application">​</a></h3> 101<p>Finally, you need to register the <code>ReactWebViewPackage</code> in the application. We do that by modifying the <code>MainApplication</code> file by adding the <code>ReactWebViewPackage</code> to the list of packages returned by the <code>getPackages</code> function.</p> 102<div class="language-kotlin codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Demo/app/src/main/java/com/demo/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">demo</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">react</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">OpenSourceMergedSoMapping</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 theme-code-block-highlighted-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">webview</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">ReactWebViewPackage</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>&lt;</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 theme-code-block-highlighted-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>ReactWebViewPackage</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"> OpenSourceMergedSoMapping</span><span class="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 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><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span></code></pre></div></div></div><div role=tabpanel class=tabItem_wHwb hidden><p>Now it's time to write some iOS platform code to be able to render the web view. The steps you need to follow are:</p> 103<ul> 104<li>Run Codegen.</li> 105<li>Write the code for the <code>RCTWebView</code></li> 106<li>Register the <code>RCTWebView</code> in the application</li> 107</ul> 108<h3 class="anchor anchorWithStickyNavbar_JmGV" id=1-run-codegen>1. Run Codegen<a href=#1-run-codegen class=hash-link aria-label="Direct link to 1. Run Codegen" title="Direct link to 1. Run Codegen">​</a></h3> 109<p>You can <a href=/docs/the-new-architecture/codegen-cli>manually run</a> the Codegen, however it's simpler to use the application you're going to demo the component in to do this for you.</p> 110<div class="language-bash codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>bash</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-bash codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token 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> 111<p>Importantly you will see logging output from Codegen, which we're going to use in Xcode to build our WebView native component.</p> 112<div class="theme-admonition theme-admonition-warning admonition_WCGJ alert alert--warning"><div class=admonitionHeading_GCBg><span class=admonitionIcon_L39b><svg viewBox="0 0 16 16"><path fill-rule=evenodd d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg></span>warning</div><div class=admonitionContent_pbrs><p>You should be careful about committing generated code to your repository. Generated code is specific to each version of React Native. Use npm <a href=https://nodejs.org/en/blog/npm/peer-dependencies target=_blank rel="noopener noreferrer">peerDependencies</a> to restrict compatibility with version of React Native.</div></div> 113<h3 class="anchor anchorWithStickyNavbar_JmGV" id=3-write-the-rctwebview>3. Write the <code>RCTWebView</code><a href=#3-write-the-rctwebview class=hash-link aria-label="Direct link to 3-write-the-rctwebview" title="Direct link to 3-write-the-rctwebview">​</a></h3> 114<p>We need to prepare your iOS project using Xcode by completing these <strong>5 steps</strong>:</p> 115<ol> 116<li>Open the CocoPods generated Xcode Workspace:</li> 117</ol> 118<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"> Demo.xcworkspace</span><br></span></code></pre></div></div> 119<img class=half-size alt="Open Xcode Workspace" src=/docs/assets/fabric-native-components/1.webp> 120<ol start=2> 121<li>Right click on app and select <code>New Group</code>, call the new group <code>WebView</code>.</li> 122</ol> 123<img class=half-size alt="Right click on app and select New Group" src=/docs/assets/fabric-native-components/2.webp> 124<ol start=3> 125<li>In the <code>WebView</code> group, create <code>New</code>→<code>File from Template</code>.</li> 126</ol> 127<img class=half-size alt="Create a new file using the Cocoa Touch Classs template" src=/docs/assets/fabric-native-components/3.webp> 128<ol start=4> 129<li>Use the <code>Objective-C File</code> template, and name it <code>RCTWebView</code>.</li> 130</ol> 131<img class=half-size alt="Create an Objective-C RCTWebView class" src=/docs/assets/fabric-native-components/4.webp> 132<ol start=5> 133<li> 134<p>Repeat step 4 and create a header file named <code>RCTWebView.h</code>.</p> 135</li> 136<li> 137<p>Rename <code>RCTWebView.m</code> → <code>RCTWebView.mm</code> making it an Objective-C++ file.</p> 138</li> 139</ol> 140<div class="language-text codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Demo/ios</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-text 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">Podfile</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">...</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">Demo</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">├── AppDelegate.swift</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">...</span><br></span><span class="token-line theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain">├── RCTWebView.h</span><br></span><span class="token-line theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain">└── RCTWebView.mm</span><br></span></code></pre></div></div> 141<p>After creating the header file and the implementation file, you can start implementing them.</p> 142<p>This is the code for the <code>RCTWebView.h</code> file, which declares the component interface.</p> 143<div class="language-objc codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Demo/RCTWebView/RCTWebView.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 macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>React</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>RCTViewComponentView</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>UIKit</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>UIKit</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">NS_ASSUME_NONNULL_BEGIN</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>@interface</span><span class="token plain"> RCTWebView </span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain"> RCTViewComponentView</span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// You would declare native methods you'd want to access from the view here</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword" style=color:#c5a5c5>@end</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain">NS_ASSUME_NONNULL_END</span><br></span></code></pre></div></div> 144<p>This class defines an <code>RCTWebView</code> which extends the <code>RCTViewComponentView</code> class. This is the base class for all the native components and it is provided by React Native.</p> 145<p>The code for the implementation file (<code>RCTWebView.mm</code>) is the following:</p> 146<div class="language-objc codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Demo/RCTWebView/RCTWebView.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 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>"RCTWebView.h"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>react</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>renderer</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>components</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>AppSpec</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>ComponentDescriptors</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>react</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>renderer</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>components</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>AppSpec</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>EventEmitters</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>react</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>renderer</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>components</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>AppSpec</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>Props</span><span class="token macro property expression punctuation" style=color:#657b83>.</span><span class="token macro property expression" style=color:#2aa198>h</span><span class="token macro property expression operator" style=color:#fc929e>></span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>react</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>renderer</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>components</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>AppSpec</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>RCTComponentViewHelpers</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"></span><span class="token macro property directive-hash" style=color:#2aa198>#</span><span class="token macro property directive keyword" style=color:#c5a5c5>import</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression operator" style=color:#fc929e>&lt;</span><span class="token macro property expression" style=color:#2aa198>WebKit</span><span class="token macro property expression operator" style=color:#fc929e>/</span><span class="token macro property expression" style=color:#2aa198>WebKit</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">using namespace 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 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>RCTWebView</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">RCTCustomWebViewViewProtocol</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"> WKNavigationDelegate</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>@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"> RCTWebView </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> NSURL </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain"> _sourceURL</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> WKWebView </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain"> _webView</span><span class="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 punctuation" style=color:#657b83>(</span><span class="token plain">instancetype</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">init</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>if</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> _webView </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">WKWebView new</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> _webView</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">navigationDelegate </span><span class="token operator" style=color:#fc929e>=</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 theme-code-block-highlighted-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"> addSubview</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">_webView</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 keyword" style=color:#c5a5c5>void</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">updateProps</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">Props</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">Shared </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>&</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">props oldProps</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">Props</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">Shared </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>&</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">oldProps</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>const</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>auto</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>&</span><span class="token plain">oldViewProps </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">std</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">static_pointer_cast</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">CustomWebViewProps </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">_props</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>auto</span><span class="token plain"> </span><span class="token operator" style=color:#fc929e>&</span><span class="token plain">newViewProps </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">std</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">static_pointer_cast</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">CustomWebViewProps </span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">props</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 comment" style=color:#93a1a1>// Handle your props here</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">oldViewProps</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">sourceURL </span><span class="token operator" style=color:#fc929e>!=</span><span class="token plain"> newViewProps</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">sourceURL</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"> NSString </span><span class="token operator" style=color:#fc929e>*</span><span class="token plain">urlString </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 stringWithCString</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">newViewProps</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">sourceURL</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>c_str</span><span class="token punctuation" style=color:#657b83>(</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain"> encoding</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">NSUTF8StringEncoding</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"> _sourceURL </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">NSURL URLWithString</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">urlString</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 theme-code-block-highlighted-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 punctuation" style=color:#657b83>[</span><span class="token keyword" style=color:#c5a5c5>self</span><span class="token plain"> urlIsValid</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">newViewProps</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">sourceURL</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">_webView loadRequest</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>[</span><span class="token plain">NSURLRequest requestWithURL</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">_sourceURL</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 theme-code-block-highlighted-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 punctuation" style=color:#657b83>[</span><span class="token keyword" style=color:#c5a5c5>super</span><span class="token plain"> updateProps</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">props oldProps</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">oldProps</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 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">layoutSubviews</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 keyword" style=color:#c5a5c5>super</span><span class="token plain"> layoutSubviews</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"> _webView</span><span class="token punctuation" style=color:#657b83>.</span><span class="token plain">frame </span><span class="token operator" style=color:#fc929e>=</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">bounds</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><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>pragma</span><span class="token macro property" style=color:#2aa198> </span><span class="token macro property expression" style=color:#2aa198>mark </span><span class="token macro property expression operator" style=color:#fc929e>-</span><span class="token macro property expression" style=color:#2aa198> WKNavigationDelegate</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 theme-code-block-highlighted-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>void</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">webView</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">WKWebView </span><span class="token operator" style=color:#fc929e>*</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">webView didFinishNavigation</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">WKNavigation </span><span class="token operator" style=color:#fc929e>*</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">navigation</span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> CustomWebViewEventEmitter</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">OnScriptLoaded result </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> CustomWebViewEventEmitter</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">OnScriptLoaded</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">CustomWebViewEventEmitter</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">OnScriptLoadedResult</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">Success</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 theme-code-block-highlighted-line" style=color:#FFFFFF><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">eventEmitter</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>onScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">result</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 theme-code-block-highlighted-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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class="token-line theme-code-block-highlighted-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">BOOL</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">urlIsValid</span><span class="token punctuation" style=color:#657b83>:</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">string</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">propString</span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-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">propString</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>length</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 number" style=color:#5a9bcf>0</span><span class="token plain"> </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">_sourceURL</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> CustomWebViewEventEmitter</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">OnScriptLoaded result </span><span class="token operator" style=color:#fc929e>=</span><span class="token plain"> CustomWebViewEventEmitter</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">OnScriptLoaded</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">CustomWebViewEventEmitter</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">OnScriptLoadedResult</span><span class="token punctuation" style=color:#657b83>:</span><span class="token punctuation" style=color:#657b83>:</span><span class="token plain">Error</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class="token-line theme-code-block-highlighted-line" style=color:#FFFFFF><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">eventEmitter</span><span class="token punctuation" style=color:#657b83>.</span><span class="token function" style=color:#79b6f2>onScriptLoaded</span><span class="token punctuation" style=color:#657b83>(</span><span class="token plain">result</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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> NO</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> YES</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain" style=display:inline-block></span><br></span><span class="token-line theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"></span><span class="token comment" style=color:#93a1a1>// Event emitter convenience method</span><span class="token plain"></span><br></span><span class="token-line theme-code-block-highlighted-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>const</span><span class="token plain"> CustomWebViewEventEmitter </span><span class="token operator" style=color:#fc929e>&</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">eventEmitter</span><br></span><span class="token-line theme-code-block-highlighted-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 theme-code-block-highlighted-line" style=color:#FFFFFF><span class="token plain"> </span><span class="token keyword" style=color:#c5a5c5>return</span><span class="token plain"> static_cast</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token keyword" style=color:#c5a5c5>const</span><span class="token plain"> CustomWebViewEventEmitter </span><span class="token operator" style=color:#fc929e>&</span><span class="token operator" style=color:#fc929e>></span><span class="token punctuation" style=color:#657b83>(</span><span class="token operator" style=color:#fc929e>*</span><span class="token plain">_eventEmitter</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 theme-code-block-highlighted-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">ComponentDescriptorProvider</span><span class="token punctuation" style=color:#657b83>)</span><span class="token plain">componentDescriptorProvider</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"> concreteComponentDescriptorProvider</span><span class="token operator" style=color:#fc929e>&lt;</span><span class="token plain">CustomWebViewComponentDescriptor</span><span class="token operator" style=color:#fc929e>></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>@end</span><br></span></code></pre></div></div> 147<p>This code is written in Objective-C++ and contains various details:</p> 148<ul> 149<li>the <code>@interface</code> implements two protocols:<!-- --> 150<ul> 151<li><code>RCTCustomWebViewViewProtocol</code>, generated by Codegen;</li> 152<li><code>WKNavigationDelegate</code>, provided by the WebKit framework to handle the web view navigation events;</li> 153</ul> 154</li> 155<li>the <code>init</code> method that instantiates the <code>WKWebView</code>, adds it to the subviews and that sets the <code>navigationDelegate</code>;</li> 156<li>the <code>updateProps</code> method that is called by React Native when the component's props change;</li> 157<li>the <code>layoutSubviews</code> method that describes how the custom view needs to be laid out;</li> 158<li>the <code>webView:didFinishNavigation:</code> method that lets you handle what to do when the <code>WKWebView</code> finishes loading the page;</li> 159<li>the <code>urlIsValid:(std::string)propString</code> method that checks whether the URL received as prop is valid;</li> 160<li>the <code>eventEmitter</code> method which is a utility to retrieve a strongly typed <code>eventEmitter</code> instance</li> 161<li>the <code>componentDescriptorProvider</code> which returns the <code>ComponentDescriptor</code> generated by Codegen;</li> 162</ul> 163<h4 class="anchor anchorWithStickyNavbar_JmGV" id=add-webkit-framework>Add WebKit framework<a href=#add-webkit-framework class=hash-link aria-label="Direct link to Add WebKit framework" title="Direct link to Add WebKit framework">​</a></h4> 164<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 step is only required because we are creating a Web view. Web components on iOS needs to be linked against the WebKit framework provided by Apple. If your component doesn't need to access web-specific features, you can skip this step.</div></div> 165<p>A web view requires access to some features that Apple provides through one of the frameworks shipped with Xcode and the devices: WebKit. 166You can see it in the native code by the <code>#import &lt;WebKit/WebKit.h></code> line added in the <code>RCTWebView.mm</code>.</p> 167<p>To link the WebKit framework in your app, follow these steps:</p> 168<ol> 169<li>In Xcode, Click on your project</li> 170<li>Select the app target</li> 171<li>Select the General tab</li> 172<li>Scroll down until you find the <em>"Frameworks, Libraries, and Embedded Contents"</em> section, and press the <code>+</code> button</li> 173</ol> 174<img class=half-size alt="Add webkit framework to your app 1" src=/docs/assets/AddWebKitFramework1.png> 175<ol start=5> 176<li>In the search bar, filter for WebKit</li> 177<li>Select the WebKit framework</li> 178<li>Click on Add.</li> 179</ol> 180<img class=half-size alt="Add webkit framework to your app 2" src=/docs/assets/AddWebKitFramework2.png></div></div></div> 181<h2 class="anchor anchorWithStickyNavbar_JmGV" id=3-use-your-native-component>3. Use your Native Component<a href=#3-use-your-native-component class=hash-link aria-label="Direct link to 3. Use your Native Component" title="Direct link to 3. Use your Native Component">​</a></h2> 182<p>Finally, you can use the new component in your app. Update your generated <code>App.tsx</code> to:</p> 183<div class="language-javascript codeBlockContainer_mQmQ theme-code-block" style=--prism-color:#FFFFFF;--prism-background-color:#282C34><div class=codeBlockTitle_kY6l>Demo/App.tsx</div><div class=codeBlockContent_t_Hd><pre tabindex=0 class="prism-code language-javascript codeBlock_RMoD thin-scrollbar" style=color:#FFFFFF;background-color:#282C34><code class=codeBlockLines_AclH><span class=token-line style=color:#FFFFFF><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">React</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'</span><span class="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">Alert</span><span class="token imports punctuation" style=color:#657b83>,</span><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><span class="token imports maybe-class-name">View</span><span class="token imports punctuation" style=color:#657b83>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#c5a5c5>from</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'react-native'</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"></span><span class="token keyword module" style=color:#c5a5c5>import</span><span class="token plain"> </span><span class="token imports maybe-class-name">WebView</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>'./specs/WebViewNativeComponent'</span><span class="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 maybe-class-name" 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 control-flow" 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 operator" style=color:#fc929e>&lt;</span><span class="token maybe-class-name">View</span><span class="token plain"> style</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">styles</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">container</span><span class="token punctuation" style=color:#657b83>}</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 operator" style=color:#fc929e>&lt;</span><span class="token maybe-class-name">WebView</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> sourceURL</span><span class="token operator" style=color:#fc929e>=</span><span class="token string" style=color:#8dc891>"https://react.dev/"</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> style</span><span class="token operator" style=color:#fc929e>=</span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain">styles</span><span class="token punctuation" style=color:#657b83>.</span><span class="token property-access">webview</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> onScriptLoaded</span><span class="token operator" style=color:#fc929e>=</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 maybe-class-name">Alert</span><span class="token punctuation" style=color:#657b83>.</span><span class="token method function property-access" style=color:#79b6f2>alert</span><span class="token punctuation" style=color:#657b83>(</span><span class="token string" style=color:#8dc891>'Page Loaded'</span><span class="token punctuation" style=color:#657b83>)</span><span class="token punctuation" style=color:#657b83>;</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>}</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token operator" style=color:#fc929e>/</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 operator" style=color:#fc929e>&lt;</span><span class="token operator" style=color:#fc929e>/</span><span class="token maybe-class-name">View</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 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"> </span><span class="token literal-property property" style=color:#2aa198>container</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>{</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>flex</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token number" style=color:#5a9bcf>1</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>alignItems</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'center'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>alignContent</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'center'</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token punctuation" style=color:#657b83>}</span><span class="token punctuation" style=color:#657b83>,</span><span class="token plain"></span><br></span><span class=token-line style=color:#FFFFFF><span class="token plain"> </span><span class="token literal-property property" style=color:#2aa198>webview</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 literal-property property" style=color:#2aa198>width</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'100%'</span><span class="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 literal-property property" style=color:#2aa198>height</span><span class="token operator" style=color:#fc929e>:</span><span class="token plain"> </span><span class="token string" style=color:#8dc891>'100%'</span><span class="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 module" style=color:#c5a5c5>export</span><span class="token plain"> </span><span class="token keyword module" 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> 184<p>This code creates an app that uses the new <code>WebView</code> component we created to load the <code>react.dev</code> website.</p> 185<p>The app also shows an alert when the web page is loaded.</p> 186<h2 class="anchor anchorWithStickyNavbar_JmGV" id=4-run-your-app-using-the-webview-component>4. Run your App using the WebView Component<a href=#4-run-your-app-using-the-webview-component class=hash-link aria-label="Direct link to 4. Run your App using the WebView Component" title="Direct link to 4. Run your App using the WebView Component">​</a></h2> 187<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><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 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> 188<table><thead><tr><th style=text-align:center>Android<th style=text-align:center>iOS<tbody><tr><td style=text-align:center><img style=max-height:600px src=/docs/assets/webview-android.webp><td style=text-align:center><img style=max-height:600px src=/docs/assets/webview-ios.webp></table></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class=editButtons_t0bR><a href=https://github.com/facebook/react-native-website/edit/main/docs/fabric-native-components.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/fabric-native-components.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/the-new-architecture/advanced-topics-modules><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Advanced Topics</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/the-new-architecture/advanced-topics-components><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Advanced Topics</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#creating-a-webview-component class="table-of-contents__link toc-highlight">Creating a WebView Component</a><li><a href=#1-define-specification-for-codegen class="table-of-contents__link toc-highlight">1. Define Specification for Codegen</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=#2-building-your-native-code class="table-of-contents__link toc-highlight">2. Building your Native Code</a><li><a href=#3-use-your-native-component class="table-of-contents__link toc-highlight">3. Use your Native Component</a><li><a href=#4-run-your-app-using-the-webview-component class="table-of-contents__link toc-highlight">4. Run your App using the WebView Component</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Develop</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/getting-started>Guides</a><li class=footer__item><a class=footer__link-item href=/docs/components-and-apis>Components</a><li class=footer__item><a class=footer__link-item href=/docs/accessibilityinfo>APIs</a><li class=footer__item><a class=footer__link-item href=/architecture/overview>Architecture</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Participate</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/showcase>Showcase</a><li class=footer__item><a class=footer__link-item href=/contributing/overview>Contributing</a><li class=footer__item><a class=footer__link-item href=/community/overview>Community</a><li class=footer__item><a href=https://reactnative.directory/ target=_blank rel="noopener noreferrer" class=footer__link-item>Directory<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://stackoverflow.com/questions/tagged/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>Stack Overflow<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Find us</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://x.com/reactnative target=_blank rel="noopener noreferrer" class=footer__link-item>X<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://bsky.app/profile/reactnative.dev target=_blank rel="noopener noreferrer" class=footer__link-item>Bluesky<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://github.com/facebook/react-native target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Explore More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://react.dev/ target=_blank rel="noopener noreferrer" class=footer__link-item>ReactJS<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/privacy/ target=_blank rel="noopener noreferrer" class=footer__link-item>Privacy Policy<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a href=https://opensource.fb.com/legal/terms/ target=_blank rel="noopener noreferrer" class=footer__link-item>Terms of Service<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_2l9O><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=margin-bottom--sm><a href=https://opensource.fb.com/ rel="noopener noreferrer" class=footerLogoLink_tutC><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--light_hHel"><img src=/img/oss_logo.svg alt="Meta Open Source Logo" class="footer__logo themedComponent_siVc themedComponent--dark_yETr"></a></div><div class=footer__copyright>Copyright © 2025 Meta Platforms, Inc.</div></div></div></footer></div>