react-native/docs/communication-android.html

<!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.66">
<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">
<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">Communication between native and React Native · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><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.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><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="Communication between native and React Native · React Native"><meta data-react-helmet="true" name="description" content="In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we&#x27;ll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."><meta data-react-helmet="true" property="og:description" content="In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we&#x27;ll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/communication-android"><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/communication-android"><link rel="stylesheet" href="/styles.fccefeba.css">
<link rel="stylesheet" href="/main.ca40cabd.css">
<link rel="preload" href="/styles.07d522c6.js" as="script">
<link rel="preload" href="/runtime~main.6a3554ed.js" as="script">
<link rel="preload" href="/main.7df1336c.js" as="script">
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
<link rel="preload" href="/2.58cb5d3d.js" as="script">
<link rel="preload" href="/1f391b9e.a824c215.js" as="script">
<link rel="preload" href="/943.8b024446.js" as="script">
<link rel="preload" href="/ee5b3385.b4fff665.js" as="script">
<link rel="preload" href="/17896441.0c201679.js" as="script">
<link rel="preload" href="/c2d0f160.82f178f9.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 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 xmlns="http://www.w3.org/2000/svg" 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 class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><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.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/communication-android">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/communication-android">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/communication-android">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/communication-android">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/communication-android">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" 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_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</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"><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 class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</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 class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><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" 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/communication-android">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/communication-android">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/communication-android">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/communication-android">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/communication-android">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_2UBv"><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Communication between native and React Native</h1></header><div class="markdown"><p>In <a href="/docs/integration-with-existing-apps">Integrating with Existing Apps guide</a> and <a href="/docs/native-components-android">Native UI Components guide</a> we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we&#x27;ll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="introduction"></a>Introduction<a aria-hidden="true" tabindex="-1" class="hash-link" href="#introduction" title="Direct link to heading">#</a></h2><p>React Native is inspired by React, so the basic idea of the information flow is similar. The flow in React is one-directional. We maintain a hierarchy of components, in which each component depends only on its parent and its own internal state. We do this with properties: data is passed from a parent to its children in a top-down manner. If an ancestor component relies on the state of its descendant, one should pass down a callback to be used by the descendant to update the ancestor.</p><p>The same concept applies to React Native. As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="properties"></a>Properties<a aria-hidden="true" tabindex="-1" class="hash-link" href="#properties" title="Direct link to heading">#</a></h2><p>Properties are the most straightforward way of cross-component communication. So we need a way to pass properties both from native to React Native, and from React Native to native.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="passing-properties-from-native-to-react-native"></a>Passing properties from native to React Native<a aria-hidden="true" tabindex="-1" class="hash-link" href="#passing-properties-from-native-to-react-native" title="Direct link to heading">#</a></h3><p>You can pass properties down to the React Native app by providing a custom implementation of <code>ReactActivityDelegate</code> in your main activity. This implementation should override <code>getLaunchOptions</code> to return a <code>Bundle</code> with the desired properties.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-java codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><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">MainActivity</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">ReactActivity</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token annotation punctuation" style="color:#657b83">@Override</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token keyword" style="color:#c5a5c5">protected</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">ReactActivityDelegate</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">createReactActivityDelegate</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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><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">ReactActivityDelegate</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 function" style="color:#79b6f2">getMainComponentName</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 punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">      </span><span class="token annotation punctuation" style="color:#657b83">@Override</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">      </span><span class="token keyword" style="color:#c5a5c5">protected</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Bundle</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">getLaunchOptions</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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">        </span><span class="token class-name" style="color:#fac863">Bundle</span><span class="token plain"> initialProperties </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">Bundle</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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">        </span><span class="token class-name" style="color:#fac863">ArrayList</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">&gt;</span><span class="token plain"> imageList </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">ArrayList</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">&gt;</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">Arrays</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">asList</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">                </span><span class="token string" style="color:#8dc891">&quot;http://foo.com/bar1.png&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">                </span><span class="token string" style="color:#8dc891">&quot;http://foo.com/bar2.png&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">        initialProperties</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">putStringArrayList</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">&quot;images&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> imageList</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">        </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> initialProperties</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">      </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;react&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> View</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> Image </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">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><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"></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 keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">ImageBrowserApp</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">React</span><span class="token class-name punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token function" style="color:#79b6f2">renderImage</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">imgURI</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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">Image</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">source</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> uri</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> imgURI </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/&gt;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token function" style="color:#79b6f2">render</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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">    </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">&gt;</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">props</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">images</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">map</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">renderImage</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">&lt;/</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">&gt;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">  </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><p><code>ReactRootView</code> provides a read-write property <code>appProperties</code>. After <code>appProperties</code> is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-java codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token class-name" style="color:#fac863">Bundle</span><span class="token plain"> updatedProps </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> mReactRootView</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getAppProperties</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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token class-name" style="color:#fac863">ArrayList</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">&gt;</span><span class="token plain"> imageList </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">ArrayList</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">&gt;</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">Arrays</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">asList</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">        </span><span class="token string" style="color:#8dc891">&quot;http://foo.com/bar3.png&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">        </span><span class="token string" style="color:#8dc891">&quot;http://foo.com/bar4.png&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><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></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">updatedProps</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">putStringArrayList</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">&quot;images&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> imageList</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><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">mReactRootView</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">setAppProperties</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">updatedProps</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>It is fine to update properties anytime. However, updates have to be performed on the main thread. You use the getter on any thread.</p><p>There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.</p><blockquote><p><strong><em>Note:</em></strong> Currently, JS function <code>componentWillUpdateProps</code> of the top level RN component will not be called after a prop update. However, you can access the new props in <code>componentDidMount</code> function.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="passing-properties-from-react-native-to-native"></a>Passing properties from React Native to native<a aria-hidden="true" tabindex="-1" class="hash-link" href="#passing-properties-from-react-native-to-native" title="Direct link to heading">#</a></h3><p>The problem exposing properties of native components is covered in detail in <a href="/docs/native-components-android#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">this article</a>. In short, properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code>, then use them in React Native as if the component was an ordinary React Native component.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="limits-of-properties"></a>Limits of properties<a aria-hidden="true" tabindex="-1" class="hash-link" href="#limits-of-properties" title="Direct link to heading">#</a></h3><p>The main drawback of cross-language properties is that they do not support callbacks, which would allow us to handle bottom-up data bindings. Imagine you have a small RN view that you want to be removed from the native parent view as a result of a JS action. There is no way to do that with props, as the information would need to go bottom-up.</p><p>Although we have a flavor of cross-language callbacks (<a href="/docs/native-modules-android#callbacks">described here</a>), these callbacks are not always the thing we need. The main problem is that they are not intended to be passed as properties. Rather, this mechanism allows us to trigger a native action from JS, and handle the result of that action in JS.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="other-ways-of-cross-language-interaction-events-and-native-modules"></a>Other ways of cross-language interaction (events and native modules)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#other-ways-of-cross-language-interaction-events-and-native-modules" title="Direct link to heading">#</a></h2><p>As stated in the previous chapter, using properties comes with some limitations. Sometimes properties are not enough to drive the logic of our app and we need a solution that gives more flexibility. This chapter covers other communication techniques available in React Native. They can be used for internal communication (between JS and native layers in RN) as well as for external communication (between RN and the &#x27;pure native&#x27; part of your app).</p><p>React Native enables you to perform cross-language function calls. You can execute custom native code from JS and vice versa. Unfortunately, depending on the side we are working on, we achieve the same goal in different ways. For native - we use events mechanism to schedule an execution of a handler function in JS, while for React Native we directly call methods exported by native modules.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="calling-react-native-functions-from-native-events"></a>Calling React Native functions from native (events)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#calling-react-native-functions-from-native-events" title="Direct link to heading">#</a></h3><p>Events are described in detail in <a href="/docs/native-components-android#events">this article</a>. Note that using events gives us no guarantees about execution time, as the event is handled on a separate thread.</p><p>Events are powerful, because they allow us to change React Native components without needing a reference to them. However, there are some pitfalls that you can fall into while using them:</p><ul><li>As events can be sent from anywhere, they can introduce spaghetti-style dependencies into your project.</li><li>Events share namespace, which means that you may encounter some name collisions. Collisions will not be detected statically, which makes them hard to debug.</li><li>If you use several instances of the same React Native component and you want to distinguish them from the perspective of your event, you&#x27;ll likely need to introduce identifiers and pass them along with events (you can use the native view&#x27;s <code>reactTag</code> as an identifier).</li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="calling-native-functions-from-react-native-native-modules"></a>Calling native functions from React Native (native modules)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#calling-native-functions-from-react-native-native-modules" title="Direct link to heading">#</a></h3><p>Native modules are Java classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in <a href="/docs/native-modules-android">this article</a>.</p><blockquote><p><strong><em>Warning</em></strong>: All native modules share the same namespace. Watch out for name collisions when creating new ones.</p></blockquote></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.63/communication-android.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><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="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</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"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#introduction" class="table-of-contents__link">Introduction</a></li><li><a href="#properties" class="table-of-contents__link">Properties</a><ul><li><a href="#passing-properties-from-native-to-react-native" class="table-of-contents__link">Passing properties from native to React Native</a></li><li><a href="#passing-properties-from-react-native-to-native" class="table-of-contents__link">Passing properties from React Native to native</a></li><li><a href="#limits-of-properties" class="table-of-contents__link">Limits of properties</a></li></ul></li><li><a href="#other-ways-of-cross-language-interaction-events-and-native-modules" class="table-of-contents__link">Other ways of cross-language interaction (events and native modules)</a><ul><li><a href="#calling-react-native-functions-from-native-events" class="table-of-contents__link">Calling React Native functions from native (events)</a></li><li><a href="#calling-native-functions-from-react-native-native-modules" class="table-of-contents__link">Calling native functions from React Native (native modules)</a></li></ul></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="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
<script src="/styles.07d522c6.js"></script>
<script src="/runtime~main.6a3554ed.js"></script>
<script src="/main.7df1336c.js"></script>
<script src="/1.ba9ce8bd.js"></script>
<script src="/2.58cb5d3d.js"></script>
<script src="/1f391b9e.a824c215.js"></script>
<script src="/943.8b024446.js"></script>
<script src="/ee5b3385.b4fff665.js"></script>
<script src="/17896441.0c201679.js"></script>
<script src="/c2d0f160.82f178f9.js"></script>
</body>
</html>