Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
gh-pages
react-native/docs/integration-with-android-fragment.html
T

61 lines
50 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-alpha.70">
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom 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=UA-41298772-2"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</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="defer"></script>
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Integration with an Android Fragment · React Native</title><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.64"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.64"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Integration with an Android Fragment · React Native"><meta data-react-helmet="true" name="description" content="The guide for Integration with Existing Apps details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity."><meta data-react-helmet="true" property="og:description" content="The guide for Integration with Existing Apps details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/integration-with-android-fragment"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/integration-with-android-fragment"><link rel="stylesheet" href="/styles.f56da522.css">
<link rel="stylesheet" href="/main.3de2b5ef.css">
<link rel="preload" href="/styles.9d29dd5a.js" as="script">
<link rel="preload" href="/runtime~main.b00a5634.js" as="script">
<link rel="preload" href="/main.4103a08e.js" as="script">
<link rel="preload" href="/1.7a6193e2.js" as="script">
<link rel="preload" href="/2.9b40dc51.js" as="script">
<link rel="preload" href="/1089.caa7a648.js" as="script">
<link rel="preload" href="/1f03ab5e.a02daabd.js" as="script">
<link rel="preload" href="/17896441.b54b3e3c.js" as="script">
<link rel="preload" href="/8ce13a58.5748af94.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<nav aria-label="Skip navigation links"><button type="button" tabindex="0" class="skipToContent_3aLp">Skip to main content</button></nav><nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg aria-label="Menu" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.64</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/integration-with-android-fragment">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/integration-with-android-fragment">0.64</a></li><li><a class="dropdown__link" href="/docs/0.63/getting-started">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/getting-started">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/getting-started">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/getting-started">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</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="react-toggle react-toggle--disabled displayOnlyInLargeViewport_Bh6k"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_1UDy">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_1UDy">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><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"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/integration-with-android-fragment">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/integration-with-android-fragment">0.64</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.63/getting-started">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/getting-started">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/getting-started">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/getting-started">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1mVJ"><div class="docSidebarContainer_uPTz" role="complementary"><div class="sidebar_M-Lc"><div class="menu menu--responsive thin-scrollbar menu_tgpy"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_1e05" width="24" height="24" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/more-resources">More Resources</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/integration-with-android-fragment">Integration with an Android Fragment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/symbolication">Symbolicating a stack trace</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/upgrading">Upgrading to new versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/profiling">Profiling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/profile-hermes">Profiling with Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/signed-apk-android">Publishing to Google Play Store</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/app-extensions">App Extensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/publishing-to-app-store">Publishing to Apple App Store</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1zi2"><div class="container padding-vert--lg docItemWrapper_1hMI"><div class="row"><div class="col docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Integration with an Android Fragment</h1></header><div class="markdown"><p>The guide for <a href="https://reactnative.dev/docs/integration-with-existing-apps" target="_blank" rel="noopener noreferrer">Integration with Existing Apps</a> details how to integrate a full-screen React Native app into an existing Android app as an Activity. To use React Native components within Fragments in an existing app requires some additional setup. The benefit of this is that it allows for a native app to integrate React Native components alongside native fragments in an Activity.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="1-add-react-native-to-your-app"></a>1. Add React Native to your app<a class="hash-link" href="#1-add-react-native-to-your-app" title="Direct link to heading">#</a></h3><p>Follow the guide for <a href="https://reactnative.dev/docs/integration-with-existing-apps" target="_blank" rel="noopener noreferrer">Integration with Existing Apps</a> until the Code integration section. Continue to follow Step 1. Create an <code>index.android.js</code> file and Step 2. Add your React Native code from this section.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="2-integrating-your-app-with-a-react-native-fragment"></a>2. Integrating your App with a React Native Fragment<a class="hash-link" href="#2-integrating-your-app-with-a-react-native-fragment" title="Direct link to heading">#</a></h3><p>You can render your React Native component into a Fragment instead of a full screen React Native Activity. The component may be termed a &quot;screen&quot; or &quot;fragment&quot; and it will function in the same manner as an Android fragment, likely containing child components. These components can be placed in a <code>/fragments</code> folder and the child components used to compose the fragment can be placed in a <code>/components</code> folder.</p><p>You will need to implement the ReactApplication interface in your main Application Java class. If you have created a new project from Android Studio with a default activity, you will need to create a new class e.g. <code>MyReactApplication.java</code>. If it is an existing class you can find this main class in your <code>AndroidManifest.xml</code> file. Under the <code>&lt;application /&gt;</code> tag you should see a property <code>android:name</code> e.g. <code>android:name=&quot;.MyReactApplication&quot;</code>. This value is the class you want to implement and provide the required methods to.</p><p>Ensure your main Application Java class implements ReactApplication:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-java codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">public class MyReactApplication extends Application implements ReactApplication {...}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Override the required methods <code>getUseDeveloperSupport</code>, <code>getPackages</code> and <code>getReactNativeHost</code>:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-java codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">public class MyReactApplication extends Application implements ReactApplication {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> @Override</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> public void onCreate() {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> super.onCreate();</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> SoLoader.init(this, false);</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> @Override</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> public boolean getUseDeveloperSupport() {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> return BuildConfig.DEBUG;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> protected List&lt;ReactPackage&gt; getPackages() {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> List&lt;ReactPackage&gt; packages = new PackageList(this).getPackages();</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> // Packages that cannot be autolinked yet can be added manually here</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> return packages;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> };</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> @Override</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> public ReactNativeHost getReactNativeHost() {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> return mReactNativeHost;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>If you are using Android Studio, use Alt + Enter to add all missing imports in your class. Alternatively these are the required imports to include manually:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-java codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import android.app.Application;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.PackageList;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.ReactApplication;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.ReactNativeHost;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.ReactPackage;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.soloader.SoLoader;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import java.util.List;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Perform a &quot;Sync Project files with Gradle&quot; operation.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="step-3-add-a-framelayout-for-the-react-native-fragment"></a>Step 3. Add a FrameLayout for the React Native Fragment<a class="hash-link" href="#step-3-add-a-framelayout-for-the-react-native-fragment" title="Direct link to heading">#</a></h3><p>You will now add your React Native Fragment to an Activity. For a new project this Activity will be <code>MainActivity</code> but it could be any Activity and more fragments can be added to additional Activities as you integrate more React Native components into your app.</p><p>First add the React Native Fragment to your Activity&#x27;s layout. For example <code>main_activity.xml</code> in the <code>res/layouts</code> folder.</p><p>Add a <code>&lt;FrameLayout&gt;</code> with an id, width and height. This is the layout you will find and render your React Native Fragment into.</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-xml codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag" style="color:#fc929e">FrameLayout</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">id</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">@+id/reactNativeFragment</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">layout_width</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">match_parent</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">layout_height</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">match_parent</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/&gt;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="step-4-add-a-react-native-fragment-to-the-framelayout"></a>Step 4. Add a React Native Fragment to the FrameLayout<a class="hash-link" href="#step-4-add-a-react-native-fragment-to-the-framelayout" title="Direct link to heading">#</a></h3><p>To add your React Native Fragment to your layout you need to have an Activity. As mentioned in a new project this will be <code>MainActivity</code>. In this Activity add a button and an event listener. On button click you will render your React Native Fragment.</p><p>Modify your Activity layout to add the button:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-xml codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag" style="color:#fc929e">Button</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">layout_margin</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">10dp</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">id</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">@+id/button</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">layout_width</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">match_parent</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">layout_height</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">wrap_content</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name namespace" style="color:#c5a5c5;opacity:0.7">android:</span><span class="token tag attr-name" style="color:#c5a5c5">text</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">Show react fragment</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/&gt;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Now in your Activity class e.g. <code>MainActivity.java</code> you need to add an OnClickListener for the button, instantiate your ReactFragment and add it to the frame layout.</p><p>Add the button field to the top of your Activity:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-java codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">private Button mButton;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Update your Activity&#x27;s onCreate method as follows:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-java codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">@Override</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">protected void onCreate(Bundle savedInstanceState) {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> super.onCreate(savedInstanceState);</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> setContentView(R.layout.main_activity);</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> mButton = findViewById(R.id.button);</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> mButton.setOnClickListener(new View.OnClickListener() {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> public void onClick(View v) {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Fragment reactNativeFragment = new ReactFragment.Builder()</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> .setComponentName(&quot;HelloWorld&quot;)</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> .setLaunchOptions(getLaunchOptions(&quot;test message&quot;))</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> .build();</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> getSupportFragmentManager()</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> .beginTransaction()</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> .add(R.id.reactNativeFragment, reactNativeFragment)</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> .commit();</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> });</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>In the code above <code>Fragment reactNativeFragment = new ReactFragment.Builder()</code> creates the ReactFragment and <code>getSupportFragmentManager().beginTransaction().add()</code> adds the Fragment to the Frame Layout.</p><p>If you are using a starter kit for React Native, replace the &quot;HelloWorld&quot; string with the one in your <code>index.js</code> or <code>index.android.js</code> file (it’s the first argument to the AppRegistry.registerComponent() method).</p><p>Add the <code>getLaunchOptions</code> method which will allow you to pass props through to your component. This is optional and you can remove <code>setLaunchOptions</code> if you don&#x27;t need to pass any props.</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-java codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">private Bundle getLaunchOptions(String message) {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> Bundle initialProperties = new Bundle();</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> initialProperties.putString(&quot;message&quot;, message);</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> return initialProperties;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Add all missing imports in your Activity class. Be careful to use your package’s BuildConfig and not the one from the facebook package! Alternatively these are the required imports to include manually:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-java codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import android.app.Application;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.ReactApplication;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.ReactNativeHost;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.ReactPackage;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.react.shell.MainReactPackage;</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">import com.facebook.soloader.SoLoader;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Perform a &quot;Sync Project files with Gradle&quot; operation.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="step-5-test-your-integration"></a>Step 5. Test your integration<a class="hash-link" href="#step-5-test-your-integration" title="Direct link to heading">#</a></h3><p>Make sure you run <code>yarn</code> to install your react-native dependencies and run <code>yarn native</code> to start the metro bundler. Run your android app in Android Studio and it should load the JavaScript code from the development server and display it in your React Native Fragment in the Activity.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="step-6-additional-setup---native-modules"></a>Step 6. Additional setup - Native modules<a class="hash-link" href="#step-6-additional-setup---native-modules" title="Direct link to heading">#</a></h3><p>You may need to call out to existing Java code from your react component. Native modules allow you to call out to native code and run methods in your native app. Follow the setup here <a href="https://reactnative.dev/docs/native-modules-android" target="_blank" rel="noopener noreferrer">native-modules-android</a></p></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.64/integration-with-android-fragment.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 40 40" class="iconEdit_2Hwv"><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"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2021-03-12T19:14:20.000Z" class="docLastUpdatedAt_1gIo">3/12/2021</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/integration-with-existing-apps"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Integration with Existing Apps</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/building-for-tv"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Building For TV Devices »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_1zTD thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#1-add-react-native-to-your-app" class="table-of-contents__link">1. Add React Native to your app</a></li><li><a href="#2-integrating-your-app-with-a-react-native-fragment" class="table-of-contents__link">2. Integrating your App with a React Native Fragment</a></li><li><a href="#step-3-add-a-framelayout-for-the-react-native-fragment" class="table-of-contents__link">Step 3. Add a FrameLayout for the React Native Fragment</a></li><li><a href="#step-4-add-a-react-native-fragment-to-the-framelayout" class="table-of-contents__link">Step 4. Add a React Native Fragment to the FrameLayout</a></li><li><a href="#step-5-test-your-integration" class="table-of-contents__link">Step 5. Test your integration</a></li><li><a href="#step-6-additional-setup---native-modules" class="table-of-contents__link">Step 6. Additional setup - Native modules</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who&#x27;s using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_3cAK"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div class="footer__copyright">Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
<script src="/styles.9d29dd5a.js"></script>
<script src="/runtime~main.b00a5634.js"></script>
<script src="/main.4103a08e.js"></script>
<script src="/1.7a6193e2.js"></script>
<script src="/2.9b40dc51.js"></script>
<script src="/1089.caa7a648.js"></script>
<script src="/1f03ab5e.a02daabd.js"></script>
<script src="/17896441.b54b3e3c.js"></script>
<script src="/8ce13a58.5748af94.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink