Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
773ad2a89d4005802006fc6040a9ba5e207b37a5
react-native/docs/next/native-modules-android.html
T
Website Deployment Script 773ad2a89d Deploy website - based on aa97a8fe2f19002000947c634cbb5f1eec6f2515
2020-12-05 23:12:47 +00:00

79 lines
212 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Android 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="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><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="Android Native Modules · React Native"><meta data-react-helmet="true" name="description" content="Welcome to Native Modules for Android. Please start by reading the Native Modules Intro for an intro to what native modules are."><meta data-react-helmet="true" property="og:description" content="Welcome to Native Modules for Android. Please start by reading the Native Modules Intro for an intro to what native modules are."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/next/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/next/native-modules-android"><link rel="stylesheet" href="/styles.fccefeba.css">
<link rel="stylesheet" href="/main.b5a87951.css">
<link rel="preload" href="/styles.25dfd8ab.js" as="script">
<link rel="preload" href="/runtime~main.41a59a33.js" as="script">
<link rel="preload" href="/main.00cf4c49.js" as="script">
<link rel="preload" href="/1.844dff91.js" as="script">
<link rel="preload" href="/2.e0509fa8.js" as="script">
<link rel="preload" href="/1f391b9e.3f65ce9d.js" as="script">
<link rel="preload" href="/941.a6bd671c.js" as="script">
<link rel="preload" href="/935f2afb.5273623d.js" as="script">
<link rel="preload" href="/17896441.8ef96896.js" as="script">
<link rel="preload" href="/f0b9a8a6.2c29c8a4.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/next/getting-started">Next</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/next/native-modules-android">Next</a></li><li><a class="dropdown__link" 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/next/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/next/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/next/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/next/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/next/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 aria-current="page" class="menu__link menu__link--active" href="/docs/next/native-modules-android">Next</a></li><li class="menu__list-item"><a class="menu__link" 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/next/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/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/next/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/integration-with-android-fragment">Integration with an Android Fragment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/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/next/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/symbolication">Symbolicating a stack trace</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/upgrading">Upgrading to new versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/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/next/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/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/next/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/next/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profiling">Profiling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/profile-hermes">Profiling with Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/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/next/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/security">Security</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/next/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/next/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/signed-apk-android">Publishing to Google Play Store</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/app-extensions">App Extensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/next/publishing-to-app-store">Publishing to Apple App Store</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="alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for React Native <strong>Next</strong> version.</div><div class="margin-top--md">For up-to-date documentation, see the <strong><a href="/docs/native-modules-android">latest version</a></strong> (0.63).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: Next</span></div><header><h1 class="docTitle_cWlf">Android Native Modules</h1></header><div class="markdown"><p>Welcome to Native Modules for Android. Please start by reading the <a href="/docs/next/native-modules-intro">Native Modules Intro</a> for an intro to what native modules are.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="create-a-calendar-native-module"></a>Create a Calendar Native Module<a aria-hidden="true" tabindex="-1" class="hash-link" href="#create-a-calendar-native-module" title="Direct link to heading">#</a></h2><p>In the following guide you will create a native module, <code>CalendarModule</code>, that will allow you to access Android’s calendar APIs from JavaScript. By the end, you will be able to call <code>CalendarModule.createCalendarEvent(&#x27;Dinner Party&#x27;, &#x27;My House&#x27;);</code> from JavaScript, invoking a Java method that creates a calendar event.</p><blockquote><p>The React Native team is currently working on a re-architecture of the Native Module system. This new system is called TurboModules, and it will help facilitate more efficient type-safe communication between JavaScript and native, without relying on the React Native bridge. It will also enable new extensions that weren&#x27;t possible with the legacy Native Module system. You can read more about it <a href="https://github.com/react-native-community/discussions-and-proposals/issues/40" target="_blank" rel="noopener noreferrer">here</a>. Throughout these docs we have added notes around parts of Native Modules that will change in the TurboModules release and how you can best prepare for a smooth upgrade to TurboModules.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="setup"></a>Setup<a aria-hidden="true" tabindex="-1" class="hash-link" href="#setup" title="Direct link to heading">#</a></h3><p>To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:</p><figure><img src="/docs/assets/native-modules-android-open-project.png" width="500" alt="Image of opening up an Android project within a React Native app inside of Android Studio."><figcaption>Image of where you can find your Android project</figcaption></figure><p>We recommend using Android Studio to write your native code. Android studio is an IDE built for Android development and using it will help you resolve minor issues like code syntax errors quickly.</p><p>We also 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 as you iterate on Java code.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="create-a-custom-native-module-file"></a>Create A Custom Native Module File<a aria-hidden="true" tabindex="-1" class="hash-link" href="#create-a-custom-native-module-file" title="Direct link to heading">#</a></h3><p>The first step is to create the CalendarModule.java Java file inside <code>android/app/src/main/java/com/your-app-name/ folder</code>. This Java file will contain your native module Java class.</p><figure><img src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio."><figcaption>Image of how to add the CalendarModuleClass</figcaption></figure><p>Then add the following content:</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">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><span class="token comment" style="color:#93a1a1">// replace com.your-app-name with your app’s 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">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"></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">CalendarModule</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 class-name" style="color:#fac863">CalendarModule</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"> </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>As you can see, your <code>CalendarModule</code> class extends the <code>ReactContextBaseJavaModule</code> class. For Android, Java native modules are written as classes that extend <code>ReactContextBaseJavaModule</code> and implement the functionality required by JavaScript.</p><blockquote><p>It is worth noting that technically Java classes only need to extend the <code>BaseJavaModule</code> class or implement the <code>NativeModule</code> interface to be considered a Native Module by React Native.</p></blockquote><blockquote><p>However we recommend that you use <code>ReactContextBaseJavaModule</code>, as shown above. <code>ReactContextBaseJavaModule</code> gives access to the <code>ReactApplicationContext</code> (RAC), which is useful for Native Modules that need to hook into activity lifecycle methods. Using <code>ReactContextBaseJavaModule</code> will also make it easier to make your native module type-safe in the future. For native module type-safety, which is coming in future releases, React Native looks at each native module&#x27;s JavaScript spec and generates an abstract base class that extends <code>ReactContextBaseJavaModule</code>.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="module-name"></a>Module Name<a aria-hidden="true" tabindex="-1" class="hash-link" href="#module-name" title="Direct link to heading">#</a></h3><p>All Java native modules in Android need to implement the <code>getName()</code> method. This method returns a string, which represents the name of the native module. The native module can then be accessed in JavaScript using its name. For example, in the below code snippet, <code>getName()</code> returns <code>&quot;CalendarModule&quot;</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">// add to CalendarModule.java</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token annotation punctuation" style="color:#657b83">@Override</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">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">&quot;CalendarModule&quot;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><p>The native module can then be accessed in JS 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">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> CalendarModule </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"> ReactNative</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">NativeModules</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="export-a-native-method-to-javascript"></a>Export a Native Method to JavaScript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#export-a-native-method-to-javascript" title="Direct link to heading">#</a></h3><p>Next you will need to add a method to your native module that will create calendar events and can be invoked in JavaScript. All native module methods meant to be invoked from JavaScript must be annotated with <code>@ReactMethod</code>.</p><p>Set up a method <code>createCalendarEvent()</code> for <code>CalendarModule</code> that can be invoked in JS through <code>CalendarModule.createCalendarEvent()</code>. For now, the method will take in a name and location as strings. Argument type options will be covered shortly.</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">@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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> location</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 punctuation" style="color:#657b83">}</span></div></div></div></div></div><p>Add a debug log in the method to confirm it has been invoked when you call it from your application. Below is an example of how you can import and use the <a href="https://developer.android.com/reference/android/util/Log" target="_blank" rel="noopener noreferrer">Log</a> class from the Android util package:</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">android</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">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" 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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> location</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">Log</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">d</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">&quot;CalendarModule&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;Create event called with name: &quot;</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> name</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><span class="token string" style="color:#8dc891">&quot; and location: &quot;</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">+</span><span class="token plain"> location</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><p>Once you finish implementing the native module and hook it up in JavaScript, you can follow <a href="https://developer.android.com/studio/debug/am-logcat.html" target="_blank" rel="noopener noreferrer">these steps</a> to view the logs from your app.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="synchronous-methods"></a>Synchronous Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#synchronous-methods" title="Direct link to heading">#</a></h3><p>You can pass <code>isBlockingSynchronousMethod = true</code> to a native method to mark it as a synchronous 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">@ReactMethod</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">isBlockingSynchronousMethod </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>At the moment, we do not recommend this, since calling methods synchronously can have strong performance penalties and introduce threading-related bugs to your native modules. Additionally, please note that if you choose to enable <code>isBlockingSynchronousMethod</code>, your app can no longer use the Google Chrome debugger. This is because synchronous methods require the JS VM to share memory with the app. For the Google Chrome debugger, React Native runs inside the JS VM in Google Chrome, and communicates asynchronously with the mobile devices via WebSockets.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="register-the-module-android-specific"></a>Register the Module (Android Specific)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#register-the-module-android-specific" title="Direct link to heading">#</a></h3><p>Once a native module is written, it needs to be registered with React Native. In order to do so, you need to add your native module to a <code>ReactPackage</code> and register the <code>ReactPackage</code> with React Native. During initialization, React Native will loop over all packages, and for each <code>ReactPackage</code>, register each native module within.</p><p>React Native invokes the method <code>createNativeModules()</code> on a <code>ReactPackage</code> in order to get the list of native modules to register. For Android, if a module is not instantiated and returned in createNativeModules it will not be available from JavaScript.</p><p>To add your Native Module to <code>ReactPackage</code>, first create a new Java Class named <code>MyAppPackage.java</code> that implements <code>ReactPackage</code> inside the <code>android/app/src/main/java/com/your-app-name/</code> folder:</p><p>Then add the following content:</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">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><span class="token comment" style="color:#93a1a1">// replace your-app-name with your app’s 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">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">MyAppPackage</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">&lt;</span><span class="token generics class-name" style="color:#fac863">ViewManager</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">&lt;</span><span class="token generics class-name" style="color:#fac863">NativeModule</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">&lt;</span><span class="token generics class-name" style="color:#fac863">NativeModule</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">&lt;</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">CalendarModule</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>This file imports the native module you created, <code>CalendarModule</code>. It then instantiates <code>CalendarModule</code> within the <code>createNativeModules()</code> function and returns it as a list of <code>NativeModules</code> to register. If you add more native modules down the line, you can also instantiate them and add them to the list returned here.</p><blockquote><p>It is worth noting that this way of registering native modules eagerly initializes all native modules when the application starts, which adds to the startup time of an application. You can use <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/TurboReactPackage.java" target="_blank" rel="noopener noreferrer">TurboReactPackage</a> as an alternative. Instead of <code>createNativeModules</code>, which return a list of instantiated native module objects, TurboReactPackage implements a <code>getModule(String name, ReactApplicationContext rac)</code> method that creates the native module object, when required. TurboReactPackage is a bit more complicated to implement at the moment. In addition to implementing a <code>getModule()</code> method, you have to implement a <code>getReactModuleInfoProvider()</code> method, which returns a list of all the native modules the package can instantiate along with a function that instantiates them, example <a href="https://github.com/facebook/react-native/blob/8ac467c51b94c82d81930b4802b2978c85539925/ReactAndroid/src/main/java/com/facebook/react/CoreModulesPackage.java#L86-L165" target="_blank" rel="noopener noreferrer">here</a>. Again, using TurboReactPackage will allow your application to have a faster startup time, but it is currently a bit cumbersome to write. So proceed with caution if you choose to use TurboReactPackages.</p></blockquote><p>To register the <code>CalendarModule</code> package, you must add <code>MyAppPackage</code> to the list of packages returned in ReactNativeHost&#x27;s <code>getPackages()</code> method. Open up your <code>MainApplication.java</code> file, which can be found in the following path: <code>android/app/src/main/java/com/your-app-name/MainApplication.java</code></p><p>Locate ReactNativeHost’s <code>getPackages()</code> method and add your package to the packages list <code>getPackages()</code> returns:</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">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">&lt;</span><span class="token generics class-name" style="color:#fac863">ReactPackage</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">&quot;UnnecessaryLocalVariable&quot;</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token class-name" style="color:#fac863">List</span><span class="token generics punctuation" style="color:#657b83">&lt;</span><span class="token generics class-name" style="color:#fac863">ReactPackage</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">// below MyAppPackage is added to the list of packages returned</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">MyAppPackage</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 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>You have now successfully registered your native module for Android!</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="test-what-you-have-built"></a>Test What You Have Built<a aria-hidden="true" tabindex="-1" class="hash-link" href="#test-what-you-have-built" title="Direct link to heading">#</a></h3><p>At this point, you have set up the basic scaffolding for your native module in Android. Test that out by accessing the native module and invoking its exported method in JavaScript.</p><p>Find a place in your application where you would like to add a call to the native module’s <code>createCalendarEvent()</code> method. Below is an example of a component, <code>NewModuleButton</code> you can add in your app. You can invoke the native module inside <code>NewModuleButton</code>&#x27;s <code>onPress()</code> function.</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"> React </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;react&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> NativeModules</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> Button </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">NewModuleButton</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">onPress</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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 string" style="color:#8dc891">&#x27;We will invoke the native module here!&#x27;</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" 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"> </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 tag punctuation" style="color:#657b83">&lt;</span><span class="token tag class-name" style="color:#fac863">Button</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">title</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">Click to invoke your native module!</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">color</span><span class="token tag attr-value punctuation" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag attr-value" style="color:#8dc891">#841584</span><span class="token tag attr-value punctuation" style="color:#657b83">&quot;</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e">onPress</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag" style="color:#fc929e"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/&gt;</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 punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> NewModuleButton</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>In order to access your native module from JavaScript you need to first import <code>NativeModules</code> from React Native:</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"> 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">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>You can then access the <code>CalendarModule</code> native module off of <code>NativeModules</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-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 punctuation" style="color:#657b83">{</span><span class="token plain"> CalendarModule </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"> NativeModules</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Now that you have the CalendarModule native module available, you can invoke your native method <code>createCalendarEvent()</code>. Below it is added to the <code>onPress()</code> method in <code>NewModuleButton</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-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">onPress</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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"> CalendarModule</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">&#x27;testName&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;testLocation&#x27;</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></div></div></div></div></div><p>The final step is to rebuild the React Native app so that you can have the latest native code (with your new native module!) available. In your command line, where the react native application is located, run the following:</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-shell codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">npx react-native run-android</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="building-as-you-iterate"></a>Building as You Iterate<a aria-hidden="true" tabindex="-1" class="hash-link" href="#building-as-you-iterate" title="Direct link to heading">#</a></h3><p>As you work through these guides and iterate on your native module, you will need to do a native rebuild of your application to access your most recent changes from JavaScript. This is because the code that you are writing sits within the native part of your application. While React Native’s metro bundler can watch for changes in JavaScript and rebuild on the fly for you, it will not do so for native code. So if you want to test your latest native changes you need to rebuild by using the <code>npx react-native run-android</code> command.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="recap"></a>Recap✨<a aria-hidden="true" tabindex="-1" class="hash-link" href="#recap" title="Direct link to heading">#</a></h3><p>You should now be able to invoke your <code>createCalendarEvent()</code> method on your native module in the app. In our example this occurs by pressing the <code>NewModuleButton</code>. You can confirm this by viewing the log you set up in your <code>createCalendarEvent()</code> method. You can follow <a href="https://developer.android.com/studio/debug/am-logcat.html" target="_blank" rel="noopener noreferrer">these steps</a> to view ADB logs in your app. You should then be able to search for your <code>Log.d</code> message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.</p><figure><img src="/docs/assets/native-modules-android-logs.png" width="1000" alt="Image of logs."><figcaption>Image of ADB logs in Android Studio</figcaption></figure><p>At this point you have created an Android native module and invoked it’s native method from JavaScript in your React Native application. You can read on to learn more about things like argument types available to a native module method and how to setup callbacks and promises.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="beyond-a-calendar-native-module"></a>Beyond a Calendar Native Module<a aria-hidden="true" tabindex="-1" class="hash-link" href="#beyond-a-calendar-native-module" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="better-native-module-export"></a>Better Native Module Export<a aria-hidden="true" tabindex="-1" class="hash-link" href="#better-native-module-export" title="Direct link to heading">#</a></h3><p>Importing your native module by pulling it off of <code>NativeModules</code> like above is a bit clunky.</p><p>To save consumers of your native module from needing to do that each time they want to access your native module, you can create a JavaScript wrapper for the module. Create a new JavaScript file named <code>CalendarModule.js</code> with the following content:</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 CalendarModule 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 &#x27;createCalendarEvent&#x27; which takes the following parameters:</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="display:inline-block;color:#93a1a1">
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">* 1. String name: A string representing the name of the event</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">* 2. String location: A string representing the location of the event</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">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> CalendarModule </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"> NativeModules</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">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> CalendarModule</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>This JavaScript file also becomes a good location for you to add any JavaScript side functionality. For example, if you use a type system like Typescript you can add type annotations for your native module here. While React Native does not yet support Native to JS type safety, all your JS code will be type safe. Doing so will also make it easier for you to switch to type-safe native modules down the line. Below is an example of adding type safety to the CalendarModule:</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 CalendarModule 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 &#x27;createCalendarEvent&#x27; 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 name: A string representing the name of the event</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token comment" style="color:#93a1a1">* 2. String location: A string representing the location of the event</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">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> CalendarModule </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"> NativeModules</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">CalendarInterface</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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">name</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> location</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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 keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> CalendarModule </span><span class="token keyword" style="color:#c5a5c5">as</span><span class="token plain"> CalendarInterface</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>In your other JavaScript files you can access the native module and invoke its 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"> CalendarModule </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;./CalendarModule&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">CalendarModule</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">&#x27;foo&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;bar&#x27;</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><blockquote><p>This assumes that the place you are importing <code>CalendarModule</code> is in the same hierarchy as <code>CalendarModule.js</code>. Please update the relative import as necessary.</p></blockquote><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>When a native module method is invoked in JavaScript, React Native converts the arguments from JS objects to their Java object analogues. So for example, if your Java Native Module method accepts a double, in JS you need to call the method with a number. React Native will handle the conversion for you. Below is a list of the argument types supported for native module methods and the JavaScript equivalents they map to.</p><table><thead><tr><th>Java</th><th>JavaScript</th></tr></thead><tbody><tr><td>Boolean</td><td>?boolean</td></tr><tr><td>boolean</td><td>boolean</td></tr><tr><td>Double</td><td>?number</td></tr><tr><td>double</td><td>number</td></tr><tr><td>String</td><td>string</td></tr><tr><td>Callback</td><td>Function</td></tr><tr><td>ReadableMap</td><td>Object</td></tr><tr><td>ReadableArray</td><td>Array</td></tr></tbody></table><blockquote><p>The following types are currently supported but will not be supported in TurboModules. Please avoid using them:</p><ul><li>Integer -&gt; ?number</li><li>int -&gt; number</li><li>Float -&gt; ?number</li><li>float -&gt; number</li></ul></blockquote><p>For argument types not listed above, you will need to handle the conversion yourself. For example, in Android, <code>Date</code> conversion is not supported out of the box. You can handle the conversion to the <code>Date</code> type within the native method yourself like so:</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 class-name" style="color:#fac863">String</span><span class="token plain"> dateFormat </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;yyyy-MM-dd&quot;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token class-name" style="color:#fac863">SimpleDateFormat</span><span class="token plain"> sdf </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">SimpleDateFormat</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">dateFormat</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">Calendar</span><span class="token plain"> eStartDate </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Calendar</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getInstance</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">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"> eStartDate</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">setTime</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">sdf</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">parse</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">startDate</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></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="exporting-constants"></a>Exporting Constants<a aria-hidden="true" tabindex="-1" class="hash-link" href="#exporting-constants" title="Direct link to heading">#</a></h3><p>A native module can export constants by implementing the native method <code>getConstants()</code>, which is available in JS. Below you will implement <code>getConstants()</code> and return a Map that contains a <code>DEFAULT_EVENT_NAME</code> constant you can access 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 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">&lt;</span><span class="token generics class-name" style="color:#fac863">String</span><span class="token generics punctuation" style="color:#657b83">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:#fac863">Object</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">&lt;</span><span class="token generics class-name" style="color:#fac863">String</span><span class="token generics punctuation" style="color:#657b83">,</span><span class="token generics"> </span><span class="token generics class-name" style="color:#fac863">Object</span><span class="token generics punctuation" style="color:#657b83">&gt;</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">&lt;</span><span class="token generics punctuation" style="color:#657b83">&gt;</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 string" style="color:#8dc891">&quot;DEFAULT_EVENT_NAME&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;New Event&quot;</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>The constant can then be accessed by invoking <code>getConstants</code> on the native module in JS:</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 punctuation" style="color:#657b83">{</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">DEFAULT_EVENT_NAME</span><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"> CalendarModule</span><span class="token punctuation" style="color:#657b83">.</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 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 constant" style="color:#5a9bcf">DEFAULT_EVENT_NAME</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Technically it is possible to access constants exported in <code>getConstants()</code> directly off the native module object. This will no longer be supported with TurboModules, so we encourage the community to switch to the above approach to avoid necessary migration down the line.</p><blockquote><p>That currently constants are exported only at initialization time, so if you change getConstants values at runtime it won&#x27;t affect the JavaScript environment. This will change with Turbomodules. With Turbomodules, <code>getConstants()</code> will become a regular native module method), and each invocation will hit the native side.</p></blockquote><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. Callbacks are used to pass data from Java to JavaScript for asynchronous methods. They can also be used to asynchronously execute JavaScript from the native side.</p><p>In order to create a native module method with a callback, first import the <code>Callback</code> interface, and then add a new parameter to your native module method of type <code>Callback</code>. There are a couple of nuances with callback arguments that will soon be lifted with TurboModules. First off, you can only have two callbacks in your function arguments- a sucessCallback and a failureCallback. In addition, the last argument to a native module method call, if it&#x27;s a function, is treated as the successCallback, and the second to last argument to a native module method call, if it&#x27;s a function, is treated as the failure callback.</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 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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> location</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Callback</span><span class="token plain"> callBack</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 punctuation" style="color:#657b83">}</span></div></div></div></div></div><p>You can invoke the callback in your Java method, providing whatever data you want to pass to JavaScript. Please note that you can only pass serializable data from native code to JavaScript. If you need to pass back a native object you can use <code>WriteableMaps</code>, if you need to use a collection use <code>WritableArrays</code>. It is also important to highlight that the callback is not invoked immediately after the native function completes. Below the ID of an event created in an earlier call is passed to the callback.</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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> location</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Callback</span><span class="token plain"> callBack</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">Integer</span><span class="token plain"> eventId </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> callback</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">eventId</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><p>This method could then 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 keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">onPress</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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"> CalendarModule</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;Party&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;My House&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">eventId</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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 string" style="color:#8dc891">&#x27;Created a new event with id ${eventId}&#x27;</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"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Another important detail to note is that a native module method can only invoke one callback, one time. This means that you can either call a success callback or a failure callback, but not both, and each callback can only be invoked at most one time. A native module can, however, store the callback and invoke it later.</p><p>There are two approaches to error handling with callbacks. The first is to follow Node’s convention and treat the first argument passed to the callback as an error object.</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">@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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> location</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Callback</span><span class="token plain"> myFailureCallback</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Callback</span><span class="token plain"> callBack</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">Integer</span><span class="token plain"> eventId </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> callBack</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 keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> eventId</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><p>In JavaScript, you can then check the first argument to see if an error was passed through:</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">onPress</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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"> CalendarModule</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createCalendarEventCallback</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;testName&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;testLocation&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">error</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> eventId</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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">error</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 template-string template-punctuation string" style="color:#8dc891">`</span><span class="token template-string string" style="color:#8dc891">Error found! </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">${</span><span class="token template-string interpolation">error</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">}</span><span class="token template-string template-punctuation string" style="color:#8dc891">`</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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"> 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 template-string template-punctuation string" style="color:#8dc891">`</span><span class="token template-string string" style="color:#8dc891">event id </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">${</span><span class="token template-string interpolation">eventId</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">}</span><span class="token template-string string" style="color:#8dc891"> returned</span><span class="token template-string template-punctuation string" style="color:#8dc891">`</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>Another option is to use an onSuccess and onFailure callback:</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">@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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> location</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Callback</span><span class="token plain"> myFailureCallback</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Callback</span><span class="token plain"> mySuccessCallback</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 punctuation" style="color:#657b83">}</span></div></div></div></div></div><p>Then in JavaScript you can add a seperate callback for error and success responses:</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">onPress</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 punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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"> CalendarModule</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createCalendarEventCallback</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;testName&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;testLocation&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">error</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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 template-string template-punctuation string" style="color:#8dc891">`</span><span class="token template-string string" style="color:#8dc891">Error found! </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">${</span><span class="token template-string interpolation">error</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">}</span><span class="token template-string template-punctuation string" style="color:#8dc891">`</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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">eventId</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</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 template-string template-punctuation string" style="color:#8dc891">`</span><span class="token template-string string" style="color:#8dc891">event id </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">${</span><span class="token template-string interpolation">eventId</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">}</span><span class="token template-string string" style="color:#8dc891"> returned</span><span class="token template-string template-punctuation string" style="color:#8dc891">`</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><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 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" rel="noopener noreferrer">Promise</a>, which can simplify your JavaScript, especially when using ES2016&#x27;s <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" target="_blank" rel="noopener noreferrer">async/await</a> syntax. When the last parameter of a native module Java method is a Promise, 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 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">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> name</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> location</span><span class="token punctuation" style="color:#657b83">,</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 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 class-name" style="color:#fac863">Integer</span><span class="token plain"> eventId </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token 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">resolve</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">eventId</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 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"> 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 string" style="color:#8dc891">&quot;Create Event Error&quot;</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></div></div></div></div></div><blockquote><p>Similar to callbacks, a native module method can either reject or resolve a promise (but not both) and can do so at mosxt once. This means that you can either call a success callback or a failure callback, but not both, and each callback can only be invoked at most one time. A native module can, however, store the callback and invoke it later.</p></blockquote><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">onSubmit</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">=&gt;</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">const</span><span class="token plain"> eventId </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"> CalendarModule</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">createCalendarEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;Party&#x27;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">&#x27;My House&#x27;</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"> 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 template-string template-punctuation string" style="color:#8dc891">`</span><span class="token template-string string" style="color:#8dc891">Created a new event with id </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">${</span><span class="token template-string interpolation">eventId</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">}</span><span class="token template-string template-punctuation string" style="color:#8dc891">`</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></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></div></div></div></div></div><p>The reject method takes different combinations of the following arguments:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-java codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> code</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">String</span><span class="token plain"> message</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">WritableMap</span><span class="token plain"> userInfo</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Throwable</span><span class="token plain"> throwable</span></div></div></div></div></div><p>For more detail, you can find the <code>Promise.java</code> interface <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/Promise.java#L1" target="_blank" rel="noopener noreferrer">here</a>. If <code>userInfo</code> is not provided, ReactNative will set it to null. For the rest of the parameters React Native will use a default value. The <code>message</code> argument provides the error <code>message</code> shown at the top of an error call stack. Below is an example of the error message shown in JavaScript from the following reject call in Java.</p><p>Java reject call:</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">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 string" style="color:#8dc891">&quot;Create Event error&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;Error parsing date&quot;</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></div></div></div></div></div><p>Error message in React Native App when promise is rejected:</p><figure><img src="/docs/assets/native-modules-android-errorscreen.png" width="200" alt="Image of error message in React Native app."><figcaption>Image of error message</figcaption></figure><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. For example, you might want to signal to JavaScript a reminder that a calendar event from the native Android calendar app will occur soon. 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">&quot;eventProperty&quot;</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;someValue&quot;</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">&quot;EventReminder&quot;</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">x`</span></div></div></div></div></div><p>JavaScript modules can then register to receive events by <code>addListener</code> on the <a href="https://github.com/facebook/react-native/blob/master/Libraries/EventEmitter/NativeEventEmitter.js" target="_blank" rel="noopener noreferrer">NativeEventEmitter</a> 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">&#x27;react-native&#x27;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></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">&#x27;EventReminder&#x27;</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">=&gt;</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">// &quot;someValue&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </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 startActivityForResult<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-activity-result-from-startactivityforresult" title="Direct link to heading">#</a></h3><p>You&#x27;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&#x27;s constructor like so:</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>Let&#x27;s 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-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">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"> final int </span><span class="token constant" style="color:#5a9bcf">IMAGE_PICKER_REQUEST</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">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"> final String </span><span class="token constant" style="color:#5a9bcf">E_ACTIVITY_DOES_NOT_EXIST</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;E_ACTIVITY_DOES_NOT_EXIST&quot;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> final String </span><span class="token constant" style="color:#5a9bcf">E_PICKER_CANCELLED</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;E_PICKER_CANCELLED&quot;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> final String </span><span class="token constant" style="color:#5a9bcf">E_FAILED_TO_SHOW_PICKER</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;E_FAILED_TO_SHOW_PICKER&quot;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">private</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> final String </span><span class="token constant" style="color:#5a9bcf">E_NO_IMAGE_DATA_FOUND</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;E_NO_IMAGE_DATA_FOUND&quot;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" 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"> Promise 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"> final ActivityEventListener 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"> @Override</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 parameter">Activity activity</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> int requestCode</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> int resultCode</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> Intent 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"> </span><span class="token constant" style="color:#5a9bcf">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"> Activity</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">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 constant" style="color:#5a9bcf">E_PICKER_CANCELLED</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">&quot;Image picker was cancelled&quot;</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"> Activity</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">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"> Uri 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 constant" style="color:#5a9bcf">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">&quot;No image data found&quot;</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 function" style="color:#79b6f2">ImagePickerModule</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">ReactApplicationContext 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"> @Override</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"> String </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">&quot;ImagePickerModule&quot;</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token 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"> @ReactMethod</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 parameter">final Promise 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"> Activity 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 constant" style="color:#5a9bcf">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">&quot;Activity doesn&#x27;t exist&quot;</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"> final Intent 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 plain">Intent</span><span class="token punctuation" style="color:#657b83">.</span><span class="token constant" style="color:#5a9bcf">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">&quot;image/*&quot;</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"> final Intent chooserIntent </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">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">&quot;Pick an image&quot;</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"> </span><span class="token constant" style="color:#5a9bcf">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 plain">Exception 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 constant" style="color:#5a9bcf">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&#x27;s LifeCycle events such as <code>onResume</code>, <code>onPause</code> etc. is very similar to how <code>ActivityEventListener</code> was implemented. The module must implement <code>LifecycleEventListener</code>. Then, you need to register a listener in the module&#x27;s constructor like so:</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">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&#x27;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-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">@Override</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">@Override</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">@Override</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><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>To date, on Android, all native module async methods execute on one thread. 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></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/../docs/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-12-03T18:19:36.000Z" class="docLastUpdatedAt_1gIo">12/3/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/next/native-modules-intro"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Native Modules Intro</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/next/native-modules-ios"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">iOS Native Modules »</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="#create-a-calendar-native-module" class="table-of-contents__link">Create a Calendar Native Module</a><ul><li><a href="#setup" class="table-of-contents__link">Setup</a></li><li><a href="#create-a-custom-native-module-file" class="table-of-contents__link">Create A Custom Native Module File</a></li><li><a href="#module-name" class="table-of-contents__link">Module Name</a></li><li><a href="#export-a-native-method-to-javascript" class="table-of-contents__link">Export a Native Method to JavaScript</a></li><li><a href="#synchronous-methods" class="table-of-contents__link">Synchronous Methods</a></li><li><a href="#register-the-module-android-specific" class="table-of-contents__link">Register the Module (Android Specific)</a></li><li><a href="#test-what-you-have-built" class="table-of-contents__link">Test What You Have Built</a></li><li><a href="#building-as-you-iterate" class="table-of-contents__link">Building as You Iterate</a></li><li><a href="#recap" class="table-of-contents__link">Recap✨</a></li></ul></li><li><a href="#beyond-a-calendar-native-module" class="table-of-contents__link">Beyond a Calendar Native Module</a><ul><li><a href="#better-native-module-export" class="table-of-contents__link">Better Native Module Export</a></li><li><a href="#argument-types" class="table-of-contents__link">Argument Types</a></li><li><a href="#exporting-constants" class="table-of-contents__link">Exporting Constants</a></li><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="#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 startActivityForResult</a></li><li><a href="#listening-to-lifecycle-events" class="table-of-contents__link">Listening to Lifecycle Events</a></li><li><a href="#threading" class="table-of-contents__link">Threading</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who&#x27;s using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2020 Facebook, Inc.</div></div></div></footer></div>
<script src="/styles.25dfd8ab.js"></script>
<script src="/runtime~main.41a59a33.js"></script>
<script src="/main.00cf4c49.js"></script>
<script src="/1.844dff91.js"></script>
<script src="/2.e0509fa8.js"></script>
<script src="/1f391b9e.3f65ce9d.js"></script>
<script src="/941.a6bd671c.js"></script>
<script src="/935f2afb.5273623d.js"></script>
<script src="/17896441.8ef96896.js"></script>
<script src="/f0b9a8a6.2c29c8a4.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink