mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
96 lines
178 KiB
HTML
96 lines
178 KiB
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.0.2/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Native Modules · 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="Native Modules · React Native"><meta data-react-helmet="true" name="description" content="Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."><meta data-react-helmet="true" property="og:description" content="Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/native-modules-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/native-modules-android"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.102c4ce0.css">
|
|
<link rel="preload" href="/styles.73cf9778.js" as="script">
|
|
<link rel="preload" href="/runtime~main.8e079d40.js" as="script">
|
|
<link rel="preload" href="/main.3b1f3498.js" as="script">
|
|
<link rel="preload" href="/1.17a0cf36.js" as="script">
|
|
<link rel="preload" href="/2.37a050b1.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.c148b120.js" as="script">
|
|
<link rel="preload" href="/939.41ec4d67.js" as="script">
|
|
<link rel="preload" href="/ee5b3385.90d27433.js" as="script">
|
|
<link rel="preload" href="/17896441.7d7633c0.js" as="script">
|
|
<link rel="preload" href="/bb7d3856.b2e0e7d0.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/native-modules-android">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/native-modules-android">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/native-modules-android">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/native-modules-android">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/native-modules-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 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_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 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/native-modules-android">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/native-modules-android">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/native-modules-android">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/native-modules-android">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/native-modules-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"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" 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 menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" 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/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 React Native 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></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 Components and Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules Setup</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"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/native-modules-android">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/native-components-android">Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/removing-default-permissions">Removing Default Permissions</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/native-modules-ios">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">Native UI Components</a></li><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></ul></li></ul></div></div></div><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">Native Modules</h1></header><div class="markdown"><p>Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p><p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="native-module-setup"></a>Native Module Setup<a aria-hidden="true" tabindex="-1" class="hash-link" href="#native-module-setup" title="Direct link to heading">#</a></h2><p>Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is (from NPM's perspective) similar to any other media asset, meaning there isn't anything unique about it from this point of view. To get the basic scaffolding make sure to read <a href="/docs/native-modules-setup">Native Modules Setup</a> guide first.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="enable-gradle"></a>Enable Gradle<a aria-hidden="true" tabindex="-1" class="hash-link" href="#enable-gradle" title="Direct link to heading">#</a></h3><p>If you plan to make changes in Java code, we recommend enabling <a href="https://docs.gradle.org/2.9/userguide/gradle_daemon.html" target="_blank" rel="noopener noreferrer">Gradle Daemon</a> to speed up builds.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="the-toast-module"></a>The Toast Module<a aria-hidden="true" tabindex="-1" class="hash-link" href="#the-toast-module" title="Direct link to heading">#</a></h2><p>This guide will use the <a href="http://developer.android.com/reference/android/widget/Toast.html" target="_blank" rel="noopener noreferrer">Toast</a> example. Let's say we would like to be able to create a toast message from JavaScript.</p><p>We start by creating a native module. A native module is a Java class that usually extends the <code>ReactContextBaseJavaModule</code> class and implements the functionality required by the JavaScript. Our goal here is to be able to write <code>ToastExample.show('Awesome', ToastExample.SHORT);</code> from JavaScript to display a short toast on the screen.</p><p>Create a new Java Class named <code>ToastModule.java</code> inside <code>android/app/src/main/java/com/your-app-name/</code> folder with the content below:</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 comment" style="color:#93a1a1">// ToastModule.java</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">package</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">your</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">app</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">name</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">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">android</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">widget</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Toast</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">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">NativeModule</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ReactApplicationContext</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ReactContext</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ReactContextBaseJavaModule</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ReactMethod</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">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">java</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">util</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Map</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 namespace" style="opacity:0.7">java</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">util</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">HashMap</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">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">ToastModule</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">ReactContextBaseJavaModule</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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">ReactApplicationContext</span><span class="token plain"> reactContext</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> DURATION_SHORT_KEY </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"SHORT"</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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> DURATION_LONG_KEY </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"LONG"</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 class-name" style="color:#fac863">ToastModule</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">ReactApplicationContext</span><span class="token plain"> context</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">super</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">context</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> reactContext </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> context</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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>ReactContextBaseJavaModule</code> requires that a method called <code>getName</code> is implemented. The purpose of this method is to return the string name of the <code>NativeModule</code> which represents this class in JavaScript. So here we will call this <code>ToastExample</code> so that we can access it through <code>React.NativeModules.ToastExample</code> in JavaScript.</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 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">public</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">getName</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></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 string" style="color:#8dc891">"ToastExample"</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>An optional method called <code>getConstants</code> returns the constant values exposed to JavaScript. Its implementation is not required but is very useful to key pre-defined values that need to be communicated from JavaScript to Java in sync.</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 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">public</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Map</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics class-name" style="color:#fac863">String</span><span class="token generics punctuation" style="color:#657b83">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:#fac863">Object</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">getConstants</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">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Map</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics class-name" style="color:#fac863">String</span><span class="token generics punctuation" style="color:#657b83">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:#fac863">Object</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token plain"> constants </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">HashMap</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> constants</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">put</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">DURATION_SHORT_KEY</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Toast</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">LENGTH_SHORT</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"> constants</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">put</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">DURATION_LONG_KEY</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Toast</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">LENGTH_LONG</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"> constants</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>To expose a method to JavaScript a Java method must be annotated using <code>@ReactMethod</code>. The return type of bridge methods is always <code>void</code>. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).</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 plain"> </span><span class="token annotation punctuation" style="color:#657b83">@ReactMethod</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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">show</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> message</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">int</span><span class="token plain"> duration</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">Toast</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">makeText</span><span class="token punctuation" style="color:#657b83">(</span><span class="token function" style="color:#79b6f2">getReactApplicationContext</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> message</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> duration</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">show</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 punctuation" style="color:#657b83">}</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="argument-types"></a>Argument Types<a aria-hidden="true" tabindex="-1" class="hash-link" href="#argument-types" title="Direct link to heading">#</a></h3><p>The following argument types are supported for methods annotated with <code>@ReactMethod</code> and they directly map to their JavaScript equivalents</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-text codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Boolean -> Bool</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Integer -> Number</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Double -> Number</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Float -> Number</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">String -> String</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Callback -> function</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">ReadableMap -> Object</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">ReadableArray -> Array</span></div></div></div></div></div><p>Read more about <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableMap.java" target="_blank" rel="noopener noreferrer">ReadableMap</a> and <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java" target="_blank" rel="noopener noreferrer">ReadableArray</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="register-the-module"></a>Register the Module<a aria-hidden="true" tabindex="-1" class="hash-link" href="#register-the-module" title="Direct link to heading">#</a></h3><p>The last step within Java is to register the Module; this happens in the <code>createNativeModules</code> of your apps package. If a module is not registered it will not be available from JavaScript.</p><p>create a new Java Class named <code>CustomToastPackage.java</code> inside <code>android/app/src/main/java/com/your-app-name/</code> folder with the content below:</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 comment" style="color:#93a1a1">// CustomToastPackage.java</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">package</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">your</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">app</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">name</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">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ReactPackage</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">NativeModule</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ReactApplicationContext</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">uimanager</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ViewManager</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">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">java</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">util</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">ArrayList</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 namespace" style="opacity:0.7">java</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">util</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Collections</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 namespace" style="opacity:0.7">java</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">util</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">List</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">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">CustomToastPackage</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">implements</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">ReactPackage</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" style="display:inline-block">
|
|
</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">public</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">List</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics class-name" style="color:#fac863">ViewManager</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">createViewManagers</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">ReactApplicationContext</span><span class="token plain"> reactContext</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></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 class-name" style="color:#fac863">Collections</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">emptyList</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 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 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">public</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">List</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics class-name" style="color:#fac863">NativeModule</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">createNativeModules</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">ReactApplicationContext</span><span class="token plain"> reactContext</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token class-name" style="color:#fac863">List</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics class-name" style="color:#fac863">NativeModule</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token plain"> modules </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"><</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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"> modules</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">add</span><span class="token punctuation" style="color:#657b83">(</span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">ToastModule</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">reactContext</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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">return</span><span class="token plain"> modules</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" style="display:inline-block">
|
|
</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>The package needs to be provided in the <code>getPackages</code> method of the <code>MainApplication.java</code> file. This file exists under the android folder in your react-native application directory. The path to this file is: <code>android/app/src/main/java/com/your-app-name/MainApplication.java</code>.</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 comment" style="color:#93a1a1">// MainApplication.java</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 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 keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">your</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">app</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">name</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">CustomToastPackage</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// <-- Add this line with your package name.</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" 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">protected</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">List</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics class-name" style="color:#fac863">ReactPackage</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">getPackages</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token annotation punctuation" style="color:#657b83">@SuppressWarnings</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">"UnnecessaryLocalVariable"</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">List</span><span class="token generics punctuation" style="color:#657b83"><</span><span class="token generics class-name" style="color:#fac863">ReactPackage</span><span class="token generics punctuation" style="color:#657b83">></span><span class="token plain"> packages </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PackageList</span><span class="token punctuation" style="color:#657b83">(</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getPackages</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// Packages that cannot be autolinked yet can be added manually here, for example:</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// packages.add(new MyReactNativePackage());</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> packages</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">add</span><span class="token punctuation" style="color:#657b83">(</span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">CustomToastPackage</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// <-- Add this line with your package name.</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"> packages</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>To access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p><p>Create a new JavaScript file named <code>ToastExample.js</code> with the content below:</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-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">/**</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"> * This exposes the native ToastExample module as a JS module. This has a</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"> * function 'show' which takes the following parameters:</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"> *</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"> * 1. String message: A string with the text to toast</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"> * 2. int duration: The duration of the toast. May be ToastExample.SHORT or</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"> * ToastExample.LONG</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1"> */</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"> NativeModules </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> NativeModules</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">ToastExample</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Now, from your other JavaScript file you can call the method like this:</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-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"> ToastExample </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'./ToastExample'</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">ToastExample</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">show</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'Awesome'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> ToastExample</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">SHORT</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Please make sure this JavaScript is in the same hierarchy as <code>ToastExample.js</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="beyond-toasts"></a>Beyond Toasts<a aria-hidden="true" tabindex="-1" class="hash-link" href="#beyond-toasts" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="callbacks"></a>Callbacks<a aria-hidden="true" tabindex="-1" class="hash-link" href="#callbacks" title="Direct link to heading">#</a></h3><p>Native modules also support a unique kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</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">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Callback</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">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">UIManagerModule</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">ReactContextBaseJavaModule</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" style="display:inline-block">
|
|
</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" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token annotation punctuation" style="color:#657b83">@ReactMethod</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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">measureLayout</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">int</span><span class="token plain"> tag</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">int</span><span class="token plain"> ancestorTag</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">Callback</span><span class="token plain"> errorCallback</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">Callback</span><span class="token plain"> successCallback</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">try</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">measureLayout</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">tag</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> ancestorTag</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> mMeasureBuffer</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">float</span><span class="token plain"> relativeX </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</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 keyword" style="color:#c5a5c5">float</span><span class="token plain"> relativeY </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">1</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 keyword" style="color:#c5a5c5">float</span><span class="token plain"> width </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">2</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 keyword" style="color:#c5a5c5">float</span><span class="token plain"> height </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">3</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"> successCallback</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">invoke</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">relativeX</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> relativeY</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> width</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> height</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><span class="token keyword" style="color:#c5a5c5">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">IllegalViewOperationException</span><span class="token plain"> e</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"> errorCallback</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">invoke</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">e</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getMessage</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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 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 punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span></div></div></div></div></div><p>This method would be accessed in JavaScript using:</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-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">UIManager</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">measureLayout</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 number" style="color:#5a9bcf">100</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 number" style="color:#5a9bcf">100</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 parameter">msg</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">msg</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 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 parameter">x</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> y</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> width</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> height</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">x </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">':'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> y </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">':'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> width </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">':'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> height</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><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p><p>It is very important to highlight that the callback is not invoked immediately after the native function completes - remember that bridge communication is asynchronous, and this too is tied to the run loop.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="promises"></a>Promises<a aria-hidden="true" tabindex="-1" class="hash-link" href="#promises" title="Direct link to heading">#</a></h3><p>Native modules can also fulfill a promise, which can simplify your JavaScript, especially when using ES2016's <code>async/await</code> syntax. When the last parameter of a bridged native method is a <code>Promise</code>, its corresponding JS method will return a JS Promise object.</p><p>Refactoring the above code to use a promise instead of callbacks looks like this:</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">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Promise</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">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">UIManagerModule</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">ReactContextBaseJavaModule</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" style="display:inline-block">
|
|
</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"> </span><span class="token keyword" style="color:#c5a5c5">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> E_LAYOUT_ERROR </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"E_LAYOUT_ERROR"</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">@ReactMethod</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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">measureLayout</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">int</span><span class="token plain"> tag</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">int</span><span class="token plain"> ancestorTag</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">Promise</span><span class="token plain"> promise</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">try</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">measureLayout</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">tag</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> ancestorTag</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> mMeasureBuffer</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"> </span><span class="token class-name" style="color:#fac863">WritableMap</span><span class="token plain"> map </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Arguments</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createMap</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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"> map</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">putDouble</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">"relativeX"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> map</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">putDouble</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">"relativeY"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> map</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">putDouble</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">"width"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">2</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> map</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">putDouble</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">"height"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">PixelUtil</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toDIPFromPixel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mMeasureBuffer</span><span class="token punctuation" style="color:#657b83">[</span><span class="token number" style="color:#5a9bcf">3</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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"> promise</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">resolve</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">map</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><span class="token keyword" style="color:#c5a5c5">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">IllegalViewOperationException</span><span class="token plain"> e</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"> promise</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">reject</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">E_LAYOUT_ERROR</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> e</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><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 punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span></div></div></div></div></div><p>The JavaScript counterpart of this method returns a Promise. This means you can use the <code>await</code> keyword within an async function to call it and wait for its result:</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-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">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">measureLayout</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></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">try</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">var</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"> relativeX</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"> relativeY</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"> width</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"> height</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><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">await</span><span class="token plain"> UIManager</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">measureLayout</span><span class="token punctuation" style="color:#657b83">(</span><span class="token number" style="color:#5a9bcf">100</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">100</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"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</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"> relativeX </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">':'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> relativeY </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">':'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> width </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">':'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> height</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><span class="token keyword" style="color:#c5a5c5">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">e</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"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">error</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">e</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><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 function" style="color:#79b6f2">measureLayout</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></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="threading"></a>Threading<a aria-hidden="true" tabindex="-1" class="hash-link" href="#threading" title="Direct link to heading">#</a></h3><p>Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="sending-events-to-javascript"></a>Sending Events to JavaScript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#sending-events-to-javascript" title="Direct link to heading">#</a></h3><p>Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the <code>RCTDeviceEventEmitter</code> which can be obtained from the <code>ReactContext</code> as in the code snippet below.</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 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 keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">modules</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">core</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">DeviceEventManagerModule</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">WritableMap</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 namespace" style="opacity:0.7">com</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">facebook</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">react</span><span class="token namespace punctuation" style="opacity:0.7;color:#657b83">.</span><span class="token namespace" style="opacity:0.7">bridge</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">Arguments</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 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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">sendEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">ReactContext</span><span class="token plain"> reactContext</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">String</span><span class="token plain"> eventName</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">@Nullable</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">WritableMap</span><span class="token plain"> params</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"> reactContext</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 function" style="color:#79b6f2">getJSModule</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">DeviceEventManagerModule</span><span class="token punctuation" style="color:#657b83">.</span><span class="token class-name" style="color:#fac863">RCTDeviceEventEmitter</span><span class="token punctuation" style="color:#657b83">.</span><span class="token keyword" style="color:#c5a5c5">class</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 function" style="color:#79b6f2">emit</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">eventName</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> params</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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 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">WritableMap</span><span class="token plain"> params </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Arguments</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createMap</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">params</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">putString</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">"eventProperty"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"someValue"</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 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 function" style="color:#79b6f2">sendEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">reactContext</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"EventReminder"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> params</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>JavaScript modules can then register to receive events by <code>addListener</code> on the NativeEventEmitter class.</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-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"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> NativeEventEmitter</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> NativeModules </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">...</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 function" style="color:#79b6f2">componentDidMount</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 operator" style="color:#fc929e">...</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">const</span><span class="token plain"> eventEmitter </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">NativeEventEmitter</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">NativeModules</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">ToastExample</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">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">eventListener </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> eventEmitter</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">addListener</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'EventReminder'</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 parameter">event</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">event</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">eventProperty</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// "someValue"</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"> </span><span class="token operator" style="color:#fc929e">...</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" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">componentWillUnmount</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">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">eventListener</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">remove</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">//Removes the listener</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><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="getting-activity-result-from-startactivityforresult"></a>Getting activity result from <code>startActivityForResult</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-activity-result-from-startactivityforresult" title="Direct link to heading">#</a></h3><p>You'll need to listen to <code>onActivityResult</code> if you want to get results from an activity you started with <code>startActivityForResult</code>. To do this, you must extend <code>BaseActivityEventListener</code> or implement <code>ActivityEventListener</code>. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor,</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 plain">reactContext</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">addActivityEventListener</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mActivityResultListener</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Now you can listen to <code>onActivityResult</code> by implementing the following method:</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 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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">onActivityResult</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">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Activity</span><span class="token plain"> activity</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">final</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">int</span><span class="token plain"> requestCode</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">final</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">int</span><span class="token plain"> resultCode</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">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Intent</span><span class="token plain"> intent</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 comment" style="color:#93a1a1">// Your logic here</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>We will implement a basic image picker to demonstrate this. The image picker will expose the method <code>pickImage</code> to JavaScript, which will return the path of the image when called.</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">ImagePickerModule</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">ReactContextBaseJavaModule</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" 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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">int</span><span class="token plain"> IMAGE_PICKER_REQUEST </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> E_ACTIVITY_DOES_NOT_EXIST </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"E_ACTIVITY_DOES_NOT_EXIST"</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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> E_PICKER_CANCELLED </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"E_PICKER_CANCELLED"</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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> E_FAILED_TO_SHOW_PICKER </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"E_FAILED_TO_SHOW_PICKER"</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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> E_NO_IMAGE_DATA_FOUND </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"E_NO_IMAGE_DATA_FOUND"</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">private</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Promise</span><span class="token plain"> mPickerPromise</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">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">ActivityEventListener</span><span class="token plain"> mActivityEventListener </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">BaseActivityEventListener</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" style="display:inline-block">
|
|
</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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">onActivityResult</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">Activity</span><span class="token plain"> activity</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">int</span><span class="token plain"> requestCode</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">int</span><span class="token plain"> resultCode</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Intent</span><span class="token plain"> intent</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">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">requestCode </span><span class="token operator" style="color:#fc929e">==</span><span class="token plain"> IMAGE_PICKER_REQUEST</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">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mPickerPromise </span><span class="token operator" style="color:#fc929e">!=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">resultCode </span><span class="token operator" style="color:#fc929e">==</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Activity</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">RESULT_CANCELED</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"> mPickerPromise</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">reject</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">E_PICKER_CANCELLED</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"Image picker was cancelled"</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><span class="token keyword" style="color:#c5a5c5">else</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">resultCode </span><span class="token operator" style="color:#fc929e">==</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Activity</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">RESULT_OK</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">Uri</span><span class="token plain"> uri </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> intent</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getData</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" 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">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">uri </span><span class="token operator" style="color:#fc929e">==</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> mPickerPromise</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">reject</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">E_NO_IMAGE_DATA_FOUND</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"No image data found"</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><span class="token keyword" style="color:#c5a5c5">else</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> mPickerPromise</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">resolve</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">uri</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">toString</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token 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><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"> mPickerPromise </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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 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" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token class-name" style="color:#fac863">ImagePickerModule</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">ReactApplicationContext</span><span class="token plain"> reactContext</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">super</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">reactContext</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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 comment" style="color:#93a1a1">// Add the listener for `onActivityResult`</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> reactContext</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">addActivityEventListener</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">mActivityEventListener</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" style="display:inline-block">
|
|
</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">public</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">getName</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></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 string" style="color:#8dc891">"ImagePickerModule"</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" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token annotation punctuation" style="color:#657b83">@ReactMethod</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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">pickImage</span><span class="token punctuation" style="color:#657b83">(</span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Promise</span><span class="token plain"> promise</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">Activity</span><span class="token plain"> currentActivity </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">getCurrentActivity</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" 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">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">currentActivity </span><span class="token operator" style="color:#fc929e">==</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> promise</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">reject</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">E_ACTIVITY_DOES_NOT_EXIST</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"Activity doesn't exist"</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 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" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// Store the promise to resolve/reject when picker returns data</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> mPickerPromise </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> promise</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">try</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">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Intent</span><span class="token plain"> galleryIntent </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">Intent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">Intent</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">ACTION_PICK</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"> galleryIntent</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">setType</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">"image/*"</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"> </span><span class="token keyword" style="color:#c5a5c5">final</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Intent</span><span class="token plain"> chooserIntent </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Intent</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createChooser</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">galleryIntent</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"Pick an image"</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"> currentActivity</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">startActivityForResult</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">chooserIntent</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> IMAGE_PICKER_REQUEST</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><span class="token keyword" style="color:#c5a5c5">catch</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">Exception</span><span class="token plain"> e</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"> mPickerPromise</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">reject</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">E_FAILED_TO_SHOW_PICKER</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> e</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"> mPickerPromise </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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 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><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="listening-to-lifecycle-events"></a>Listening to LifeCycle events<a aria-hidden="true" tabindex="-1" class="hash-link" href="#listening-to-lifecycle-events" title="Direct link to heading">#</a></h3><p>Listening to the activity's LifeCycle events such as <code>onResume</code>, <code>onPause</code> etc. is very similar to how we implemented <code>ActivityEventListener</code>. The module must implement <code>LifecycleEventListener</code>. Then, you need to register a listener in the module's constructor,</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 plain">reactContext</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">addLifecycleEventListener</span><span class="token punctuation" style="color:#657b83">(</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Now you can listen to the activity's LifeCycle events by implementing the following methods:</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 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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">onHostResume</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 comment" style="color:#93a1a1">// Activity `onResume`</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" style="display:inline-block">
|
|
</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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">onHostPause</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 comment" style="color:#93a1a1">// Activity `onPause`</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" style="display:inline-block">
|
|
</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">public</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">onHostDestroy</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 comment" style="color:#93a1a1">// Activity `onDestroy`</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></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/native-modules-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"><a class="pagination-nav__link" href="/docs/direct-manipulation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Direct Manipulation</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/native-components-android"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Native UI Components »</div></a></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="#native-module-setup" class="table-of-contents__link">Native Module Setup</a><ul><li><a href="#enable-gradle" class="table-of-contents__link">Enable Gradle</a></li></ul></li><li><a href="#the-toast-module" class="table-of-contents__link">The Toast Module</a><ul><li><a href="#argument-types" class="table-of-contents__link">Argument Types</a></li><li><a href="#register-the-module" class="table-of-contents__link">Register the Module</a></li></ul></li><li><a href="#beyond-toasts" class="table-of-contents__link">Beyond Toasts</a><ul><li><a href="#callbacks" class="table-of-contents__link">Callbacks</a></li><li><a href="#promises" class="table-of-contents__link">Promises</a></li><li><a href="#threading" class="table-of-contents__link">Threading</a></li><li><a href="#sending-events-to-javascript" class="table-of-contents__link">Sending Events to JavaScript</a></li><li><a href="#getting-activity-result-from-startactivityforresult" class="table-of-contents__link">Getting activity result from <code>startActivityForResult</code></a></li><li><a href="#listening-to-lifecycle-events" class="table-of-contents__link">Listening to LifeCycle events</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'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 © 2020 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.73cf9778.js"></script>
|
|
<script src="/runtime~main.8e079d40.js"></script>
|
|
<script src="/main.3b1f3498.js"></script>
|
|
<script src="/1.17a0cf36.js"></script>
|
|
<script src="/2.37a050b1.js"></script>
|
|
<script src="/1f391b9e.c148b120.js"></script>
|
|
<script src="/939.41ec4d67.js"></script>
|
|
<script src="/ee5b3385.90d27433.js"></script>
|
|
<script src="/17896441.7d7633c0.js"></script>
|
|
<script src="/bb7d3856.b2e0e7d0.js"></script>
|
|
</body>
|
|
</html> |