forked from facebook/react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
469 lines (410 loc) · 93.2 KB
/
index.html
File metadata and controls
469 lines (410 loc) · 93.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native Modules · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta name="docsearch:version" content="0.34"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native Modules · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script type="text/javascript" src="/js/announcement.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.34</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/0.34/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/0.34/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/0.34/accessibilityinfo" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>Guides (Android)</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">The Basics<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.34/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/more-resources">More Resources</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.34/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/native-modules-setup">Native Modules Setup</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (iOS)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.34/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/app-extensions">App Extensions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Guides (Android)<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem navListItemActive"><a class="navItem" href="/docs/0.34/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/removing-default-permissions">Removing Default Permissions</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">Components<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.34/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/navigator">Navigator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/webview">WebView</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle collapsible">APIs<span class="arrow"><svg width="24" height="24" viewBox="0 0 24 24"><path fill="#565656" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></span></h3><ul class="hide"><li class="navListItem"><a class="navItem" href="/docs/0.34/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/share">Share</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.34/view-style-props">View Style Props</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/native-modules-android.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Native Modules</h1></header><article><div><span><p>Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.</p>
<p>We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform. This is a more advanced feature and we don't expect it to be part of the usual development process, however it is essential that it exists. If React Native doesn't support a native feature that you need, you should be able to build it yourself.</p>
<h2><a class="anchor" aria-hidden="true" id="native-module-setup"></a><a href="#native-module-setup" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Native Module Setup</h2>
<p>Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is, from NPM's perspective similar to any other media asset, meaning there isn't anything unique about it from this point of view. To get the basic scaffolding make sure to read <a href="native-modules-setup">Native Modules Setup</a> guide first.</p>
<h3><a class="anchor" aria-hidden="true" id="enable-gradle"></a><a href="#enable-gradle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Enable Gradle</h3>
<p>If you plan to make changes in Java code, we recommend enabling <a href="https://docs.gradle.org/2.9/userguide/gradle_daemon.html">Gradle Daemon</a> to speed up builds.</p>
<h2><a class="anchor" aria-hidden="true" id="the-toast-module"></a><a href="#the-toast-module" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Toast Module</h2>
<p>This guide will use the <a href="http://developer.android.com/reference/android/widget/Toast.html">Toast</a> example. Let's say we would like to be able to create a toast message from JavaScript.</p>
<p>We start by creating a native module. A native module is a Java class that usually extends the <code>ReactContextBaseJavaModule</code> class and implements the functionality required by the JavaScript. Our goal here is to be able to write <code>ToastExample.show('Awesome', ToastExample.SHORT);</code> from JavaScript to display a short toast on the screen.</p>
<p>Create a new Java Class named <code>ToastModule.java</code> inside <code>android/app/src/main/java/com/your-app-name/</code> folder with the content below:</p>
<pre><code class="hljs css language-java"><span class="token comment">// ToastModule.java</span>
<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>your</span><span class="token operator">-</span>app<span class="token operator">-</span>name<span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">android<span class="token punctuation">.</span>widget</span><span class="token punctuation">.</span><span class="token class-name">Toast</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactContext</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactContextBaseJavaModule</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactMethod</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">Map</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">HashMap</span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ToastModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token class-name">ReactApplicationContext</span> reactContext<span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> DURATION_SHORT_KEY <span class="token operator">=</span> <span class="token string">"SHORT"</span><span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> DURATION_LONG_KEY <span class="token operator">=</span> <span class="token string">"LONG"</span><span class="token punctuation">;</span>
<span class="token class-name">ToastModule</span><span class="token punctuation">(</span><span class="token class-name">ReactApplicationContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
reactContext <span class="token operator">=</span> context<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p><code>ReactContextBaseJavaModule</code> requires that a method called <code>getName</code> is implemented. The purpose of this method is to return the string name of the <code>NativeModule</code> which represents this class in JavaScript. So here we will call this <code>ToastExample</code> so that we can access it through <code>React.NativeModules.ToastExample</code> in JavaScript.</p>
<pre><code class="hljs css language-java"> <span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">"ToastExample"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>An optional method called <code>getConstants</code> returns the constant values exposed to JavaScript. Its implementation is not required but is very useful to key pre-defined values that need to be communicated from JavaScript to Java in sync.</p>
<pre><code class="hljs css language-java"> <span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">Map</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">></span></span> <span class="token function">getConstants</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">final</span> <span class="token class-name">Map</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">String</span><span class="token punctuation">,</span> <span class="token class-name">Object</span><span class="token punctuation">></span></span> constants <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">HashMap</span><span class="token generics"><span class="token punctuation"><</span><span class="token punctuation">></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
constants<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span>DURATION_SHORT_KEY<span class="token punctuation">,</span> <span class="token class-name">Toast</span><span class="token punctuation">.</span>LENGTH_SHORT<span class="token punctuation">)</span><span class="token punctuation">;</span>
constants<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span>DURATION_LONG_KEY<span class="token punctuation">,</span> <span class="token class-name">Toast</span><span class="token punctuation">.</span>LENGTH_LONG<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> constants<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>To expose a method to JavaScript a Java method must be annotated using <code>@ReactMethod</code>. The return type of bridge methods is always <code>void</code>. React Native bridge is asynchronous, so the only way to pass a result to JavaScript is by using callbacks or emitting events (see below).</p>
<pre><code class="hljs css language-java"> <span class="token annotation punctuation">@ReactMethod</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">show</span><span class="token punctuation">(</span><span class="token class-name">String</span> message<span class="token punctuation">,</span> <span class="token keyword">int</span> duration<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Toast</span><span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span><span class="token function">getReactApplicationContext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> message<span class="token punctuation">,</span> duration<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="argument-types"></a><a href="#argument-types" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Argument Types</h3>
<p>The following argument types are supported for methods annotated with <code>@ReactMethod</code> and they directly map to their JavaScript equivalents</p>
<pre><code class="hljs">B<span class="hljs-function"><span class="hljs-title">oolean</span> -></span> Bool
I<span class="hljs-function"><span class="hljs-title">nteger</span> -></span> Number
D<span class="hljs-function"><span class="hljs-title">ouble</span> -></span> Number
F<span class="hljs-function"><span class="hljs-title">loat</span> -></span> Number
S<span class="hljs-function"><span class="hljs-title">tring</span> -></span> String
C<span class="hljs-function"><span class="hljs-title">allback</span> -></span> function
R<span class="hljs-function"><span class="hljs-title">eadableMap</span> -></span> Object
R<span class="hljs-function"><span class="hljs-title">eadableArray</span> -></span> Array
</code></pre>
<p>Read more about <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableMap.java">ReadableMap</a> and <a href="https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReadableArray.java">ReadableArray</a></p>
<h3><a class="anchor" aria-hidden="true" id="register-the-module"></a><a href="#register-the-module" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Register the Module</h3>
<p>The last step within Java is to register the Module; this happens in the <code>createNativeModules</code> of your apps package. If a module is not registered it will not be available from JavaScript.</p>
<p>create a new Java Class named <code>CustomToastPackage.java</code> inside <code>android/app/src/main/java/com/your-app-name/</code> folder with the content below:</p>
<pre><code class="hljs css language-java"><span class="token comment">// CustomToastPackage.java</span>
<span class="token keyword">package</span> <span class="token namespace">com<span class="token punctuation">.</span>your</span><span class="token operator">-</span>app<span class="token operator">-</span>name<span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react</span><span class="token punctuation">.</span><span class="token class-name">ReactPackage</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">NativeModule</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">ReactApplicationContext</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>uimanager</span><span class="token punctuation">.</span><span class="token class-name">ViewManager</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">ArrayList</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">Collections</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">java<span class="token punctuation">.</span>util</span><span class="token punctuation">.</span><span class="token class-name">List</span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">CustomToastPackage</span> <span class="token keyword">implements</span> <span class="token class-name">ReactPackage</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">ViewManager</span><span class="token punctuation">></span></span> <span class="token function">createViewManagers</span><span class="token punctuation">(</span><span class="token class-name">ReactApplicationContext</span> reactContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token class-name">Collections</span><span class="token punctuation">.</span><span class="token function">emptyList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">NativeModule</span><span class="token punctuation">></span></span> <span class="token function">createNativeModules</span><span class="token punctuation">(</span>
<span class="token class-name">ReactApplicationContext</span> reactContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">NativeModule</span><span class="token punctuation">></span></span> modules <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ArrayList</span><span class="token generics"><span class="token punctuation"><</span><span class="token punctuation">></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
modules<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">ToastModule</span><span class="token punctuation">(</span>reactContext<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> modules<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>The package needs to be provided in the <code>getPackages</code> method of the <code>MainApplication.java</code> file. This file exists under the android folder in your react-native application directory. The path to this file is: <code>android/app/src/main/java/com/your-app-name/MainApplication.java</code>.</p>
<pre><code class="hljs css language-java"><span class="token comment">// MainApplication.java</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>your</span><span class="token operator">-</span>app<span class="token operator">-</span>name<span class="token punctuation">.</span><span class="token class-name">CustomToastPackage</span><span class="token punctuation">;</span> <span class="token comment">// <-- Add this line with your package name.</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">protected</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">ReactPackage</span><span class="token punctuation">></span></span> <span class="token function">getPackages</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@SuppressWarnings</span><span class="token punctuation">(</span><span class="token string">"UnnecessaryLocalVariable"</span><span class="token punctuation">)</span>
<span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">ReactPackage</span><span class="token punctuation">></span></span> packages <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">PackageList</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getPackages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Packages that cannot be autolinked yet can be added manually here, for example:</span>
<span class="token comment">// packages.add(new MyReactNativePackage());</span>
packages<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">CustomToastPackage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <-- Add this line with your package name.</span>
<span class="token keyword">return</span> packages<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>To access your new functionality from JavaScript, it is common to wrap the native module in a JavaScript module. This is not necessary but saves the consumers of your library the need to pull it off of <code>NativeModules</code> each time. This JavaScript file also becomes a good location for you to add any JavaScript side functionality.</p>
<p>Create a new JavaScript file named <code>ToastExample.js</code> with the content below:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">/**
* This exposes the native ToastExample module as a JS module. This has a
* function 'show' which takes the following parameters:
*
* 1. String message: A string with the text to toast
* 2. int duration: The duration of the toast. May be ToastExample.SHORT or
* ToastExample.LONG
*/</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> NativeModules <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> NativeModules<span class="token punctuation">.</span>ToastExample<span class="token punctuation">;</span>
</code></pre>
<p>Now, from your other JavaScript file you can call the method like this:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> ToastExample <span class="token keyword">from</span> <span class="token string">'./ToastExample'</span><span class="token punctuation">;</span>
ToastExample<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token string">'Awesome'</span><span class="token punctuation">,</span> ToastExample<span class="token punctuation">.</span><span class="token constant">SHORT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Please make sure this JavaScript is in the same hierarchy as <code>ToastExample.js</code>.</p>
<h2><a class="anchor" aria-hidden="true" id="beyond-toasts"></a><a href="#beyond-toasts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Beyond Toasts</h2>
<h3><a class="anchor" aria-hidden="true" id="callbacks"></a><a href="#callbacks" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callbacks</h3>
<p>Native modules also support a unique kind of argument - a callback. In most cases it is used to provide the function call result to JavaScript.</p>
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Callback</span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token annotation punctuation">@ReactMethod</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">measureLayout</span><span class="token punctuation">(</span>
<span class="token keyword">int</span> tag<span class="token punctuation">,</span>
<span class="token keyword">int</span> ancestorTag<span class="token punctuation">,</span>
<span class="token class-name">Callback</span> errorCallback<span class="token punctuation">,</span>
<span class="token class-name">Callback</span> successCallback<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token function">measureLayout</span><span class="token punctuation">(</span>tag<span class="token punctuation">,</span> ancestorTag<span class="token punctuation">,</span> mMeasureBuffer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">float</span> relativeX <span class="token operator">=</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">float</span> relativeY <span class="token operator">=</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">float</span> width <span class="token operator">=</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">float</span> height <span class="token operator">=</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
successCallback<span class="token punctuation">.</span><span class="token function">invoke</span><span class="token punctuation">(</span>relativeX<span class="token punctuation">,</span> relativeY<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">IllegalViewOperationException</span> e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
errorCallback<span class="token punctuation">.</span><span class="token function">invoke</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span><span class="token function">getMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
</code></pre>
<p>This method would be accessed in JavaScript using:</p>
<pre><code class="hljs css language-jsx">UIManager<span class="token punctuation">.</span><span class="token function">measureLayout</span><span class="token punctuation">(</span>
<span class="token number">100</span><span class="token punctuation">,</span>
<span class="token number">100</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token parameter">msg</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> y <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>A native module is supposed to invoke its callback only once. It can, however, store the callback and invoke it later.</p>
<p>It is very important to highlight that the callback is not invoked immediately after the native function completes - remember that bridge communication is asynchronous, and this too is tied to the run loop.</p>
<h3><a class="anchor" aria-hidden="true" id="promises"></a><a href="#promises" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Promises</h3>
<p>Native modules can also fulfill a promise, which can simplify your JavaScript, especially when using ES2016's <code>async/await</code> syntax. When the last parameter of a bridged native method is a <code>Promise</code>, its corresponding JS method will return a JS Promise object.</p>
<p>Refactoring the above code to use a promise instead of callbacks looks like this:</p>
<pre><code class="hljs css language-java"><span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Promise</span><span class="token punctuation">;</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">UIManagerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> E_LAYOUT_ERROR <span class="token operator">=</span> <span class="token string">"E_LAYOUT_ERROR"</span><span class="token punctuation">;</span>
<span class="token annotation punctuation">@ReactMethod</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">measureLayout</span><span class="token punctuation">(</span>
<span class="token keyword">int</span> tag<span class="token punctuation">,</span>
<span class="token keyword">int</span> ancestorTag<span class="token punctuation">,</span>
<span class="token class-name">Promise</span> promise<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token function">measureLayout</span><span class="token punctuation">(</span>tag<span class="token punctuation">,</span> ancestorTag<span class="token punctuation">,</span> mMeasureBuffer<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">WritableMap</span> map <span class="token operator">=</span> <span class="token class-name">Arguments</span><span class="token punctuation">.</span><span class="token function">createMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
map<span class="token punctuation">.</span><span class="token function">putDouble</span><span class="token punctuation">(</span><span class="token string">"relativeX"</span><span class="token punctuation">,</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
map<span class="token punctuation">.</span><span class="token function">putDouble</span><span class="token punctuation">(</span><span class="token string">"relativeY"</span><span class="token punctuation">,</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
map<span class="token punctuation">.</span><span class="token function">putDouble</span><span class="token punctuation">(</span><span class="token string">"width"</span><span class="token punctuation">,</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
map<span class="token punctuation">.</span><span class="token function">putDouble</span><span class="token punctuation">(</span><span class="token string">"height"</span><span class="token punctuation">,</span> <span class="token class-name">PixelUtil</span><span class="token punctuation">.</span><span class="token function">toDIPFromPixel</span><span class="token punctuation">(</span>mMeasureBuffer<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>map<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">IllegalViewOperationException</span> e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>E_LAYOUT_ERROR<span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
</code></pre>
<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>
<pre><code class="hljs css language-jsx"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">measureLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
relativeX<span class="token punctuation">,</span>
relativeY<span class="token punctuation">,</span>
width<span class="token punctuation">,</span>
height
<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> UIManager<span class="token punctuation">.</span><span class="token function">measureLayout</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
relativeX <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> relativeY <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> width <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> height
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">measureLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="threading"></a><a href="#threading" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Threading</h3>
<p>Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.</p>
<h3><a class="anchor" aria-hidden="true" id="sending-events-to-javascript"></a><a href="#sending-events-to-javascript" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Sending Events to JavaScript</h3>
<p>Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the <code>RCTDeviceEventEmitter</code> which can be obtained from the <code>ReactContext</code> as in the code snippet below.</p>
<pre><code class="hljs css language-java"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>modules<span class="token punctuation">.</span>core</span><span class="token punctuation">.</span><span class="token class-name">DeviceEventManagerModule</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">WritableMap</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token namespace">com<span class="token punctuation">.</span>facebook<span class="token punctuation">.</span>react<span class="token punctuation">.</span>bridge</span><span class="token punctuation">.</span><span class="token class-name">Arguments</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">private</span> <span class="token keyword">void</span> <span class="token function">sendEvent</span><span class="token punctuation">(</span><span class="token class-name">ReactContext</span> reactContext<span class="token punctuation">,</span>
<span class="token class-name">String</span> eventName<span class="token punctuation">,</span>
<span class="token annotation punctuation">@Nullable</span> <span class="token class-name">WritableMap</span> params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
reactContext
<span class="token punctuation">.</span><span class="token function">getJSModule</span><span class="token punctuation">(</span><span class="token class-name">DeviceEventManagerModule</span><span class="token punctuation">.</span><span class="token class-name">RCTDeviceEventEmitter</span><span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">emit</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token class-name">WritableMap</span> params <span class="token operator">=</span> <span class="token class-name">Arguments</span><span class="token punctuation">.</span><span class="token function">createMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
params<span class="token punctuation">.</span><span class="token function">putString</span><span class="token punctuation">(</span><span class="token string">"eventProperty"</span><span class="token punctuation">,</span> <span class="token string">"someValue"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token function">sendEvent</span><span class="token punctuation">(</span>reactContext<span class="token punctuation">,</span> <span class="token string">"EventReminder"</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>JavaScript modules can then register to receive events by <code>addListener</code> on the NativeEventEmitter class.</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> NativeEventEmitter<span class="token punctuation">,</span> NativeModules <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token operator">...</span>
<span class="token keyword">const</span> eventEmitter <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">NativeEventEmitter</span><span class="token punctuation">(</span>NativeModules<span class="token punctuation">.</span>ToastExample<span class="token punctuation">)</span><span class="token punctuation">;</span>
eventEmitter<span class="token punctuation">.</span><span class="token function">addListener</span><span class="token punctuation">(</span><span class="token string">'EventReminder'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>eventProperty<span class="token punctuation">)</span> <span class="token comment">// "someValue"</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="getting-activity-result-from-startactivityforresult"></a><a href="#getting-activity-result-from-startactivityforresult" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Getting activity result from <code>startActivityForResult</code></h3>
<p>You'll need to listen to <code>onActivityResult</code> if you want to get results from an activity you started with <code>startActivityForResult</code>. To do this, you must extend <code>BaseActivityEventListener</code> or implement <code>ActivityEventListener</code>. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module's constructor,</p>
<pre><code class="hljs css language-java">reactContext<span class="token punctuation">.</span><span class="token function">addActivityEventListener</span><span class="token punctuation">(</span>mActivityResultListener<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Now you can listen to <code>onActivityResult</code> by implementing the following method:</p>
<pre><code class="hljs css language-java"><span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onActivityResult</span><span class="token punctuation">(</span>
<span class="token keyword">final</span> <span class="token class-name">Activity</span> activity<span class="token punctuation">,</span>
<span class="token keyword">final</span> <span class="token keyword">int</span> requestCode<span class="token punctuation">,</span>
<span class="token keyword">final</span> <span class="token keyword">int</span> resultCode<span class="token punctuation">,</span>
<span class="token keyword">final</span> <span class="token class-name">Intent</span> intent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Your logic here</span>
<span class="token punctuation">}</span>
</code></pre>
<p>We will implement a basic image picker to demonstrate this. The image picker will expose the method <code>pickImage</code> to JavaScript, which will return the path of the image when called.</p>
<pre><code class="hljs css language-java"><span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">ImagePickerModule</span> <span class="token keyword">extends</span> <span class="token class-name">ReactContextBaseJavaModule</span> <span class="token punctuation">{</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token keyword">int</span> IMAGE_PICKER_REQUEST <span class="token operator">=</span> <span class="token number">467081</span><span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> E_ACTIVITY_DOES_NOT_EXIST <span class="token operator">=</span> <span class="token string">"E_ACTIVITY_DOES_NOT_EXIST"</span><span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> E_PICKER_CANCELLED <span class="token operator">=</span> <span class="token string">"E_PICKER_CANCELLED"</span><span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> E_FAILED_TO_SHOW_PICKER <span class="token operator">=</span> <span class="token string">"E_FAILED_TO_SHOW_PICKER"</span><span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> E_NO_IMAGE_DATA_FOUND <span class="token operator">=</span> <span class="token string">"E_NO_IMAGE_DATA_FOUND"</span><span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token class-name">Promise</span> mPickerPromise<span class="token punctuation">;</span>
<span class="token keyword">private</span> <span class="token keyword">final</span> <span class="token class-name">ActivityEventListener</span> mActivityEventListener <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BaseActivityEventListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onActivityResult</span><span class="token punctuation">(</span><span class="token class-name">Activity</span> activity<span class="token punctuation">,</span> <span class="token keyword">int</span> requestCode<span class="token punctuation">,</span> <span class="token keyword">int</span> resultCode<span class="token punctuation">,</span> <span class="token class-name">Intent</span> intent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>requestCode <span class="token operator">==</span> IMAGE_PICKER_REQUEST<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>mPickerPromise <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>resultCode <span class="token operator">==</span> <span class="token class-name">Activity</span><span class="token punctuation">.</span>RESULT_CANCELED<span class="token punctuation">)</span> <span class="token punctuation">{</span>
mPickerPromise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>E_PICKER_CANCELLED<span class="token punctuation">,</span> <span class="token string">"Image picker was cancelled"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>resultCode <span class="token operator">==</span> <span class="token class-name">Activity</span><span class="token punctuation">.</span>RESULT_OK<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Uri</span> uri <span class="token operator">=</span> intent<span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>uri <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
mPickerPromise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>E_NO_IMAGE_DATA_FOUND<span class="token punctuation">,</span> <span class="token string">"No image data found"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
mPickerPromise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>uri<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
mPickerPromise <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token class-name">ImagePickerModule</span><span class="token punctuation">(</span><span class="token class-name">ReactApplicationContext</span> reactContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>reactContext<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Add the listener for `onActivityResult`</span>
reactContext<span class="token punctuation">.</span><span class="token function">addActivityEventListener</span><span class="token punctuation">(</span>mActivityEventListener<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token string">"ImagePickerModule"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@ReactMethod</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">pickImage</span><span class="token punctuation">(</span><span class="token keyword">final</span> <span class="token class-name">Promise</span> promise<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">Activity</span> currentActivity <span class="token operator">=</span> <span class="token function">getCurrentActivity</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>currentActivity <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>E_ACTIVITY_DOES_NOT_EXIST<span class="token punctuation">,</span> <span class="token string">"Activity doesn't exist"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Store the promise to resolve/reject when picker returns data</span>
mPickerPromise <span class="token operator">=</span> promise<span class="token punctuation">;</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
<span class="token keyword">final</span> <span class="token class-name">Intent</span> galleryIntent <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Intent</span><span class="token punctuation">(</span><span class="token class-name">Intent</span><span class="token punctuation">.</span>ACTION_PICK<span class="token punctuation">)</span><span class="token punctuation">;</span>
galleryIntent<span class="token punctuation">.</span><span class="token function">setType</span><span class="token punctuation">(</span><span class="token string">"image/*"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">final</span> <span class="token class-name">Intent</span> chooserIntent <span class="token operator">=</span> <span class="token class-name">Intent</span><span class="token punctuation">.</span><span class="token function">createChooser</span><span class="token punctuation">(</span>galleryIntent<span class="token punctuation">,</span> <span class="token string">"Pick an image"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
currentActivity<span class="token punctuation">.</span><span class="token function">startActivityForResult</span><span class="token punctuation">(</span>chooserIntent<span class="token punctuation">,</span> IMAGE_PICKER_REQUEST<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">Exception</span> e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
mPickerPromise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>E_FAILED_TO_SHOW_PICKER<span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>
mPickerPromise <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<h3><a class="anchor" aria-hidden="true" id="listening-to-lifecycle-events"></a><a href="#listening-to-lifecycle-events" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Listening to LifeCycle events</h3>
<p>Listening to the activity's LifeCycle events such as <code>onResume</code>, <code>onPause</code> etc. is very similar to how we implemented <code>ActivityEventListener</code>. The module must implement <code>LifecycleEventListener</code>. Then, you need to register a listener in the module's constructor,</p>
<pre><code class="hljs css language-java">reactContext<span class="token punctuation">.</span><span class="token function">addLifecycleEventListener</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Now you can listen to the activity's LifeCycle events by implementing the following methods:</p>
<pre><code class="hljs css language-java"><span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onHostResume</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Activity `onResume`</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onHostPause</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Activity `onPause`</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@Override</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onHostDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Activity `onDestroy`</span>
<span class="token punctuation">}</span>
</code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.34/app-extensions"><span class="arrow-prev">← </span><span>App Extensions</span></a><a class="docs-next button" href="/docs/0.34/native-components-android"><span>Native UI Components</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#native-module-setup">Native Module Setup</a><ul class="toc-headings"><li><a href="#enable-gradle">Enable Gradle</a></li></ul></li><li><a href="#the-toast-module">The Toast Module</a><ul class="toc-headings"><li><a href="#argument-types">Argument Types</a></li><li><a href="#register-the-module">Register the Module</a></li></ul></li><li><a href="#beyond-toasts">Beyond Toasts</a><ul class="toc-headings"><li><a href="#callbacks">Callbacks</a></li><li><a href="#promises">Promises</a></li><li><a href="#threading">Threading</a></li><li><a href="#sending-events-to-javascript">Sending Events to JavaScript</a></li><li><a href="#getting-activity-result-from-startactivityforresult">Getting activity result from <code>startActivityForResult</code></a></li><li><a href="#listening-to-lifecycle-events">Listening to LifeCycle events</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.34"],"hitsPerPage":5}
});
</script></body></html>