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
521 lines (449 loc) · 75.4 KB
/
index.html
File metadata and controls
521 lines (449 loc) · 75.4 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
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Native UI Components · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Native UI Components · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application."/><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.23</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/0.23/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/0.23/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/0.23/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 (iOS)</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.23/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/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.23/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/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.23/native-modules-ios">Native Modules</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/0.23/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/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"><a class="navItem" href="/docs/0.23/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/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.23/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/navigator">Navigator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/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.23/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.23/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-components-ios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Native UI Components</h1></header><article><div><span><p>There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like <code>ScrollView</code> and <code>TextInput</code>, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.</p>
<p>Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with iOS programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing <code>MapView</code> component available in the core React Native library.</p>
<h2><a class="anchor" aria-hidden="true" id="ios-mapview-example"></a><a href="#ios-mapview-example" 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>iOS MapView example</h2>
<p>Let's say we want to add an interactive Map to our app - might as well use <a href="https://developer.apple.com/library/prerelease/mac/documentation/MapKit/Reference/MKMapView_Class/index.html"><code>MKMapView</code></a>, we only need to make it usable from JavaScript.</p>
<p>Native views are created and manipulated by subclasses of <code>RCTViewManager</code>. These subclasses are similar in function to view controllers, but are essentially singletons - only one instance of each is created by the bridge. They expose native views to the <code>RCTUIManager</code>, which delegates back to them to set and update the properties of the views as necessary. The <code>RCTViewManager</code>s are also typically the delegates for the views, sending events back to JavaScript via the bridge.</p>
<p>To expose a view you can:</p>
<ul>
<li>Subclass <code>RCTViewManager</code> to create a manager for your component.</li>
<li>Add the <code>RCT_EXPORT_MODULE()</code> marker macro.</li>
<li>Implement the <code>-(UIView *)view</code> method.</li>
</ul>
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
<span class="hljs-class"><span class="hljs-keyword">@interface</span> <span class="hljs-title">RNTMapManager</span> : <span class="hljs-title">RCTViewManager</span></span>
<span class="hljs-keyword">@end</span>
<span class="hljs-class"><span class="hljs-keyword">@implementation</span> <span class="hljs-title">RNTMapManager</span></span>
RCT_EXPORT_MODULE(RNTMap)
- (<span class="hljs-built_in">UIView</span> *)view
{
<span class="hljs-keyword">return</span> [[<span class="hljs-built_in">MKMapView</span> alloc] init];
}
<span class="hljs-keyword">@end</span>
</code></pre>
<p><strong>Note:</strong> Do not attempt to set the <code>frame</code> or <code>backgroundColor</code> properties on the <code>UIView</code> instance that you expose through the <code>-view</code> method. React Native will overwrite the values set by your custom class in order to match your JavaScript component's layout props. If you need this granularity of control it might be better to wrap the <code>UIView</code> instance you want to style in another <code>UIView</code> and return the wrapper <code>UIView</code> instead. See <a href="https://github.com/facebook/react-native/issues/2948">Issue 2948</a> for more context.</p>
<blockquote>
<p>In the example above, we prefixed our class name with <code>RNT</code>. Prefixes are used to avoid name collisions with other frameworks. Apple frameworks use two-letter prefixes, and React Native uses <code>RCT</code> as a prefix. In order to avoid name collisions, we recommend using a three-letter prefix other than <code>RCT</code> in your own classes.</p>
</blockquote>
<p>Then you need a little bit of JavaScript to make this a usable React component:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> requireNativeComponent <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 comment">// requireNativeComponent automatically resolves 'RNTMap' to 'RNTMapManager'</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RNTMap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// MyApp.js</span>
<span class="token keyword">import</span> MapView <span class="token keyword">from</span> <span class="token string">'./MapView.js'</span><span class="token punctuation">;</span>
<span class="token operator">...</span>
<span class="token function">render</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 tag"><span class="token tag"><span class="token punctuation&
13C5
quot;><</span><span class="token class-name">MapView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Make sure to use <code>RNTMap</code> here. We want to require the manager here, which will expose the view of our manager for use in Javascript.</p>
<p><strong>Note:</strong> When rendering, don't forget to stretch the view, otherwise you'll be staring at a blank screen.</p>
<pre><code class="hljs css language-jsx"> <span class="token function">render</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>This is now a fully-functioning native map view component in JavaScript, complete with pinch-zoom and other native gesture support. We can't really control it from JavaScript yet, though :(</p>
<h2><a class="anchor" aria-hidden="true" id="properties"></a><a href="#properties" 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>Properties</h2>
<p>The first thing we can do to make this component more usable is to bridge over some native properties. Let's say we want to be able to disable zooming and specify the visible region. Disabling zoom is a boolean, so we add this one line:</p>
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, <span class="hljs-built_in">BOOL</span>)
</code></pre>
<p>Note that we explicitly specify the type as <code>BOOL</code> - React Native uses <code>RCTConvert</code> under the hood to convert all sorts of different data types when talking over the bridge, and bad values will show convenient "RedBox" errors to let you know there is an issue ASAP. When things are straightforward like this, the whole implementation is taken care of for you by this macro.</p>
<p>Now to actually disable zooming, we set the property in JS:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// MyApp.js</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span> <span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
</code></pre>
<p>To document the properties (and which values they accept) of our MapView component we'll add a wrapper component and document the interface with React <code>PropTypes</code>:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
<span class="token keyword">import</span> PropTypes <span class="token keyword">from</span> <span class="token string">'prop-types'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> requireNativeComponent <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 keyword">class</span> <span class="token class-name">MapView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">render</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RNTMap</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
MapView<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">/**
* A Boolean value that determines whether the user may use pinch
* gestures to zoom in and out of the map.
*/</span>
zoomEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> RNTMap <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RNTMap'</span><span class="token punctuation">,</span> MapView<span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> MapView<span class="token punctuation">;</span>
</code></pre>
<p>Now we have a nicely documented wrapper component to work with. Note that we changed <code>requireNativeComponent</code>'s second argument from <code>null</code> to the new <code>MapView</code> wrapper component. This allows the infrastructure to verify that the propTypes match the native props in order to reduce the chances of mismatches between the Objective-C and JavaScript code.</p>
<p>Next, let's add the more complex <code>region</code> prop. We start by adding the native code:</p>
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
{
[view setRegion:json ? [RCTConvert <span class="hljs-built_in">MKCoordinateRegion</span>:json] : defaultView.region animated:<span class="hljs-literal">YES</span>];
}
</code></pre>
<p>Ok, this is more complicated than the <code>BOOL</code> case we had before. Now we have a <code>MKCoordinateRegion</code> type that needs a conversion function, and we have custom code so that the view will animate when we set the region from JS. Within the function body that we provide, <code>json</code> refers to the raw value that has been passed from JS. There is also a <code>view</code> variable which gives us access to the manager's view instance, and a <code>defaultView</code> that we use to reset the property back to the default value if JS sends us a null sentinel.</p>
<p>You could write any conversion function you want for your view - here is the implementation for <code>MKCoordinateRegion</code> via a category on <code>RCTConvert</code>. It uses an already existing category of ReactNative <code>RCTConvert+CoreLocation</code>:</p>
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapManager.m</span>
<span class="hljs-meta">#import <span class="hljs-meta-string">"RCTConvert+Mapkit.m"</span></span>
<span class="hljs-comment">// RCTConvert+Mapkit.h</span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTConvert.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><CoreLocation/CoreLocation.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTConvert+CoreLocation.h></span></span>
<span class="hljs-class"><span class="hljs-keyword">@interface</span> <span class="hljs-title">RCTConvert</span> (<span class="hljs-title">Mapkit</span>)</span>
+ (<span class="hljs-built_in">MKCoordinateSpan</span>)<span class="hljs-built_in">MKCoordinateSpan</span>:(<span class="hljs-keyword">id</span>)json;
+ (<span class="hljs-built_in">MKCoordinateRegion</span>)<span class="hljs-built_in">MKCoordinateRegion</span>:(<span class="hljs-keyword">id</span>)json;
<span class="hljs-keyword">@end</span>
<span class="hljs-class"><span class="hljs-keyword">@implementation</span> <span class="hljs-title">RCTConvert</span>(<span class="hljs-title">MapKit</span>)</span>
+ (<span class="hljs-built_in">MKCoordinateSpan</span>)<span class="hljs-built_in">MKCoordinateSpan</span>:(<span class="hljs-keyword">id</span>)json
{
json = [<span class="hljs-keyword">self</span> <span class="hljs-built_in">NSDictionary</span>:json];
<span class="hljs-keyword">return</span> (<span class="hljs-built_in">MKCoordinateSpan</span>){
[<span class="hljs-keyword">self</span> <span class="hljs-built_in">CLLocationDegrees</span>:json[<span class="hljs-string">@"latitudeDelta"</span>
9EF7
]],
[<span class="hljs-keyword">self</span> <span class="hljs-built_in">CLLocationDegrees</span>:json[<span class="hljs-string">@"longitudeDelta"</span>]]
};
}
+ (<span class="hljs-built_in">MKCoordinateRegion</span>)<span class="hljs-built_in">MKCoordinateRegion</span>:(<span class="hljs-keyword">id</span>)json
{
<span class="hljs-keyword">return</span> (<span class="hljs-built_in">MKCoordinateRegion</span>){
[<span class="hljs-keyword">self</span> <span class="hljs-built_in">CLLocationCoordinate2D</span>:json],
[<span class="hljs-keyword">self</span> <span class="hljs-built_in">MKCoordinateSpan</span>:json]
};
}
<span class="hljs-keyword">@end</span>
</code></pre>
<p>These conversion functions are designed to safely process any JSON that the JS might throw at them by displaying "RedBox" errors and returning standard initialization values when missing keys or other developer errors are encountered.</p>
<p>To finish up support for the <code>region</code> prop, we need to document it in <code>propTypes</code> (or we'll get an error that the native prop is undocumented), then we can set it like any other prop:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
MapView<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">/**
* A Boolean value that determines whether the user may use pinch
* gestures to zoom in and out of the map.
*/</span>
zoomEnabled<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>bool<span class="token punctuation">,</span>
<span class="token comment">/**
* The region to be displayed by the map.
*
* The region is defined by the center coordinates and the span of
* coordinates to display.
*/</span>
region<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span><span class="token function">shape</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">/**
* Coordinates for the center of the map.
*/</span>
latitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
longitude<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
<span class="token comment">/**
* Distance between the minimum and the maximum latitude/longitude
* to be displayed.
*/</span>
latitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
longitudeDelta<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<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 comment">// MyApp.js</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> region <span class="token operator">=</span> <span class="token punctuation">{</span>
latitude<span class="token punctuation">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
longitude<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
latitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
longitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</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 punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span>
<span class="token attr-name">region</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>region<span class="token punctuation">}</span></span>
<span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> flex<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Here you can see that the shape of the region is explicit in the JS documentation - ideally we could codegen some of this stuff, but that's not happening yet.</p>
<p>Sometimes your native component will have some reserved properties that you don't want to be part of the API for the associated React component. For example, <code>Switch</code> has a custom <code>onChange</code> handler for the raw native event, and exposes an <code>onValueChange</code> handler property that is invoked with the boolean value rather than the raw event. Since you don't want these native only properties to be part of the API, you don't want to put them in <code>propTypes</code>, but if you don't you'll get an error. The solution is to add them to the <code>nativeOnly</code> option, e.g.</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">var</span> RCTSwitch <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token string">'RCTSwitch'</span><span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> <span class="token punctuation">{</span>
nativeOnly<span class="token punctuation">:</span> <span class="token punctuation">{</span> onChange<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="events"></a><a href="#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>Events</h2>
<p>So now we have a native map component that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning to change the visible region?</p>
<p>Until now we've only returned a <code>MKMapView</code> instance from our manager's <code>-(UIView *)view</code> method. We can't add new properties to <code>MKMapView</code> so we have to create a new subclass from <code>MKMapView</code> which we use for our View. We can then add a <code>onRegionChange</code> callback on this subclass:</p>
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RNTMapView.h</span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTComponent.h></span></span>
<span class="hljs-class"><span class="hljs-keyword">@interface</span> <span class="hljs-title">RNTMapView</span>: <span class="hljs-title">MKMapView</span></span>
<span class="hljs-keyword">@property</span> (<span class="hljs-keyword">nonatomic</span>, <span class="hljs-keyword">copy</span>) RCTBubblingEventBlock onRegionChange;
<span class="hljs-keyword">@end</span>
<span class="hljs-comment">// RNTMapView.m</span>
<span class="hljs-meta">#import <span class="hljs-meta-string">"RNTMapView.h"</span></span>
<span class="hljs-class"><span class="hljs-keyword">@implementation</span> <span class="hljs-title">RNTMapView</span></span>
<span class="hljs-keyword">@end</span>
</code></pre>
<p>Note that all <code>RCTBubblingEventBlock</code> must be prefixed with <code>on</code>. Next, declare an event handler property on <code>RNTMapManager</code>, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view.</p>
<pre><code class="hljs css language-objectivec{9,17,31-48}"><span class="hljs-comment">// RNTMapManager.m</span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><MapKit/MapKit.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string">"RNTMapView.h"</span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string">"RCTConvert+Mapkit.m"</span></span>
<span class="hljs-class"><span class="hljs-keyword">@interface</span> <span class="hljs-title">RNTMapManager</span> : <span class="hljs-title">RCTViewManager</span> <<span class="hljs-title">MKMapViewDelegate</span>></span>
<span class="hljs-keyword">@end</span>
<span class="hljs-class"><span class="hljs-keyword">@implementation</span> <span class="hljs-title">RNTMapManager</span></span>
RCT_EXPORT_MODULE()
RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, <span class="hljs-built_in">BOOL</span>)
RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)
RCT_CUSTOM_VIEW_PROPERTY(region, <span class="hljs-built_in">MKCoordinateRegion</span>, <span class="hljs-built_in">MKMapView</span>)
{
[view setRegion:json ? [RCTConvert <span class="hljs-built_in">MKCoordinateRegion</span>:json] : defaultView.region animated:<span class="hljs-literal">YES</span>];
}
- (<span class="hljs-built_in">UIView</span> *)view
{
RNTMapView *map = [RNTMapView new];
map.delegate = <span class="hljs-keyword">self</span>;
<span class="hljs-keyword">return</span> map;
}
<span class="hljs-meta">#<span class="hljs-meta-keyword">pragma</span> mark MKMapViewDelegate</span>
- (<span class="hljs-keyword">void</span>)mapView:(RNTMapView *)mapView regionDidChangeAnimated:(<span class="hljs-built_in">BOOL</span>)animated
{
<span class="hljs-keyword">if</span> (!mapView.onRegionChange) {
<span class="hljs-keyword">return</span>;
}
<span class="hljs-built_in">MKCoordinateRegion</span> region = mapView.region;
mapView.onRegionChange(@{
<span class="hljs-string">@"region"</span>: @{
<span class="hljs-string">@"latitude"</span>: @(region.center.latitude),
<span class="hljs-string">@"longitude"</span>: @(region.center.longitude),
<span class="hljs-string">@"latitudeDelta"</span>: @(region.span.latitudeDelta),
<span class="hljs-string">@"longitudeDelta"</span>: @(region.span.longitudeDelta),
}
});
}
<span class="hljs-keyword">@end</span>
</code></pre>
<p>In the delegate method <code>-mapView:regionDidChangeAnimated:</code> the event handler block is called on the corresponding view with the region data. Calling the <code>onRegionChange</code> event handler block results in calling the same callback prop in JavaScript. This callback is invoked with the raw event, which we typically process in the wrapper component to simplify API:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// MapView.js</span>
<span class="token keyword">class</span> <span class="token class-name">MapView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function-variable function">_onRegionChange</span> <span class="token operator">=</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>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onRegionChange<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">// process raw event...</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onRegionChange</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</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 punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RNTMap</span></span>
<span class="token spread"><span class="token punctuation">{</span><span class="token punctuation">...</span><span class="token attr-value">this</span><span class="token punctuation">.</span><span class="token attr-value">props</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onRegionChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onRegionChange<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
MapView<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">/**
* Callback that is called continuously when the user is dragging the map.
*/</span>
onRegionChange<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">,</span>
<span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// MyApp.js</span>
<span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">onRegionChange</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Do stuff with event.region.latitude, etc.</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> region <span class="token operator">=</span> <span class="token punctuation">{</span>
latitude<span class="token punctuation">:</span> <span class="token number">37.48</span><span class="token punctuation">,</span>
longitude<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">122.16</span><span class="token punctuation">,</span>
latitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</span><span class="token punctuation">,</span>
longitudeDelta<span class="token punctuation">:</span> <span class="token number">0.1</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 punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span>
<span class="token attr-name">region</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>region<span class="token punctuation">}</span></span>
<span class="token attr-name">zoomEnabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span clas
8096
s="token boolean">false</span><span class="token punctuation">}</span></span>
<span class="token attr-name">onRegionChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onRegionChange<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="handling-multiple-native-views"></a><a href="#handling-multiple-native-views" 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>Handling multiple native views</h2>
<p>A React Native view can have more than one child view in the view tree eg.</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyNativeView</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyNativeView</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>In this example, the class <code>MyNativeView</code> is a wrapper for a <code>NativeComponent</code> and exposes methods, which will be called on the iOS platform. <code>MyNativeView</code> is defined in <code>MyNativeView.ios.js</code> and contains proxy methods of <code>NativeComponent</code>.</p>
<p>When the user interacts with the component, like clicking the button, the <code>backgroundColor</code> of <code>MyNativeView</code> changes. In this case <code>UIManager</code> would not know which <code>MyNativeView</code> should be handled and which one should change <code>backgroundColor</code>. Below you will find a solution to this problem:</p>
<pre><code class="hljs css language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyNativeView</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">/>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyNativeView</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference2<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">/>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myNativeReference<span class="token punctuation">.</span><span class="token function">callNativeMethod</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span></code></pre>
<p>Now the above component has a reference to a particular <code>MyNativeView</code> which allows us to use a specific instance of <code>MyNativeView</code>. Now the button can control which <code>MyNativeView</code> should change its <code>backgroundColor</code>. In this example let's assume that <code>callNativeMethod</code> changes <code>backgroundColor</code>.</p>
<p><code>MyNativeView.ios.js</code> contains code as follow:</p>
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">MyNativeView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>
<span class="token function-variable function">callNativeMethod</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
UIManager<span class="token punctuation">.</span><span class="token function">dispatchViewManagerCommand</span><span class="token punctuation">(</span>
ReactNative<span class="token punctuation">.</span><span class="token function">findNodeHandle</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
UIManager<span class="token punctuation">.</span><span class="token function">getViewManagerConfig</span><span class="token punctuation">(</span><span class="token string">'RNCMyNativeView'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>Commands
<span class="token punctuation">.</span>callNativeMethod<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 function">render</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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NativeComponent</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">NATIVE_COMPONENT_REF</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token plain-text">
</span></code></pre>
<p><code>callNativeMethod</code> is our custom iOS method which for example changes the <code>backgroundColor</code> which is exposed through <code>MyNativeView</code>. This method uses <code>UIManager.dispatchViewManagerCommand</code> which needs 3 parameters:</p>
<ul>
<li>(nonnull NSNumber *)reactTag - id of react view.</li>
<li>commandID:(NSInteger)commandID - Id of the native method that should be called</li>
<li>commandArgs:(NSArray<id> *)commandArgs - Args of the native method that we can pass from JS to native.</li>
</ul>
<p><code>RNCMyNativeViewManager.m</code></p>
<pre><code class="hljs css language-objectivec"><span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTViewManager.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTUIManager.h></span></span>
<span class="hljs-meta">#import <span class="hljs-meta-string"><React/RCTLog.h></span></span>
RCT_EXPORT_METHOD(callNativeMethod:(<span class="hljs-keyword">nonnull</span> <span class="hljs-built_in">NSNumber</span>*) reactTag) {
[<span class="hljs-keyword">self</span>.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, <span class="hljs-built_in">NSDictionary</span><<span class="hljs-built_in">NSNumber</span> *,<span class="hljs-built_in">UIView</span> *> *viewRegistry) {
NativeView *view = viewRegistry[reactTag];
<span class="hljs-keyword">if</span> (!view || ![view isKindOfClass:[NativeView <span class="hljs-keyword">class</span>]]) {
RCTLogError(<span class="hljs-string">@"Cannot find NativeView with tag #%@"</span>, reactTag);
<span class="hljs-keyword">return</span>;
}
[view callNativeMethod];
}];
}
</code></pre>
<p>Here the <code>callNativeMethod</code> is defined in the <code>RNCMyNativeViewManager.m</code> file and contains only one parameter which is <code>(nonnull NSNumber*) reactTag</code>. This exported function will find a particular view using <code>addUIBlock</code> which contains the <code>viewRegistry</code> parameter and returns the component based on <code>reactTag</code> allowing it to call the method on the correct component.</p>
<h2><a class="anchor" aria-hidden="true" id="styles"></a><a href="#styles" 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>Styles</h2>
<p>Since all our native react views are subclasses of <code>UIView</code>, most style attributes will work like you would expect out of the box. Some components will want a default style, however, for example <code>UIDatePicker</code> which is a fixed size. This default style is important for the layout algorithm to work as expected, but we also want to be able to override the default style when using the component. <code>DatePickerIOS</code> does this by wrapping the native component in an extra view, which has flexible styling, and using a fixed style (which is generated with constants passed in from native) on the inner native component:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// DatePickerIOS.ios.js</span>
<span cla
1E61
ss="token keyword">import</span> <span class="token punctuation">{</span> UIManager <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 keyword">var</span> RCTDatePickerIOSConsts <span class="token operator">=</span> UIManager<span class="token punctuation">.</span>RCTDatePicker<span class="token punctuation">.</span>Constants<span class="token punctuation">;</span>
<span class="token operator">...</span>
<span class="token function-variable function">render</span><span class="token punctuation">:</span> <span class="token keyword">function</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 punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>style<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RCTDatePickerIOS</span></span>
<span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">DATEPICKER</span><span class="token punctuation">}</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rkDatePickerIOS<span class="token punctuation">}</span></span>
<span class="token attr-name">...</span>
<span class="token punctuation">/></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></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 keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
rkDatePickerIOS<span class="token punctuation">:</span> <span class="token punctuation">{</span>
height<span class="token punctuation">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentHeight<span class="token punctuation">,</span>
width<span class="token punctuation">:</span> RCTDatePickerIOSConsts<span class="token punctuation">.</span>ComponentWidth<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 <code>RCTDatePickerIOSConsts</code> constants are exported from native by grabbing the actual frame of the native component like so:</p>
<pre><code class="hljs css language-objectivec"><span class="hljs-comment">// RCTDatePickerManager.m</span>
- (<span class="hljs-built_in">NSDictionary</span> *)constantsToExport
{
<span class="hljs-built_in">UIDatePicker</span> *dp = [[<span class="hljs-built_in">UIDatePicker</span> alloc] init];
[dp layoutIfNeeded];
<span class="hljs-keyword">return</span> @{
<span class="hljs-string">@"ComponentHeight"</span>: @(<span class="hljs-built_in">CGRectGetHeight</span>(dp.frame)),
<span class="hljs-string">@"ComponentWidth"</span>: @(<span class="hljs-built_in">CGRectGetWidth</span>(dp.frame)),
<span class="hljs-string">@"DatePickerModes"</span>: @{
<span class="hljs-string">@"time"</span>: @(<span class="hljs-built_in">UIDatePickerModeTime</span>),
<span class="hljs-string">@"date"</span>: @(<span class="hljs-built_in">UIDatePickerModeDate</span>),
<span class="hljs-string">@"datetime"</span>: @(<span class="hljs-built_in">UIDatePickerModeDateAndTime</span>),
}
};
}
</code></pre>
<p>This guide covered many of the aspects of bridging over custom native components, but there is even more you might need to consider, such as custom hooks for inserting and laying out subviews. If you want to go even deeper, check out the <a href="https://github.com/facebook/react-native/blob/master/React/Views">source code</a> of some of the implemented components.</p>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.23/native-modules-ios"><span class="arrow-prev">← </span><span>Native Modules</span></a><a class="docs-next button" href="/docs/0.23/linking-libraries-ios"><span>Linking Libraries</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#ios-mapview-example">iOS MapView example</a></li><li><a href="#properties">Properties</a></li><li><a href="#events">Events</a></li><li><a href="#handling-multiple-native-views">Handling multiple native views</a></li><li><a href="#styles">Styles</a></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.23"],"hitsPerPage":5}
});
</script></body></html>