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
231 lines (213 loc) · 51.2 KB
/
index.html
File metadata and controls
231 lines (213 loc) · 51.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
<!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.13"/><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.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/0.13/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/0.13/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/0.13/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.13/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/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.13/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/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.13/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/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.13/native-modules-android">Native Modules</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/0.13/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/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.13/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/navigator">Navigator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/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.13/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.13/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-android.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 Android SDK 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>ImageView</code> component available in the core React Native library.</p>
<h2><a class="anchor" aria-hidden="true" id="imageview-example"></a><a href="#imageview-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>ImageView example</h2>
<p>For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.</p>
<p>Native views are created and manipulated by extending <code>ViewManager</code> or more commonly <code>SimpleViewManager</code> . A <code>SimpleViewManager</code> is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.</p>
<p>These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend native views to the <code>NativeViewHierarchyManager</code>, which delegates back to them to set and update the properties of the views as necessary. The <code>ViewManagers</code> are also typically the delegates for the views, sending events back to JavaScript via the bridge.</p>
<p>To vend a view:</p>
<ol>
<li>Create the ViewManager subclass.</li>
<li>Implement the <code>createViewInstance</code> method</li>
<li>Expose view property setters using <code>@ReactProp</code> (or <code>@ReactPropGroup</code>) annotation</li>
<li>Register the manager in <code>createViewManagers</code> of the applications package.</li>
<li>Implement the JavaScript module</li>
</ol>
<h2><a class="anchor" aria-hidden="true" id="1-create-the-viewmanager-subclass"></a><a href="#1-create-the-viewmanager-subclass" 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>1. Create the <code>ViewManager</code> subclass</h2>
<p>In this example we create view manager class <code>ReactImageManager</code> that extends <code>SimpleViewManager</code> of type <code>ReactImageView</code>. <code>ReactImageView</code> is the type of object managed by the manager, this will be the custom native view. Name returned by <code>getName</code> is used to reference the native view type from JavaScript.</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">public</span> <span class="token keyword">class</span> <span class="token class-name">ReactImageManager</span> <span class="token keyword">extends</span> <span class="token class-name">SimpleViewManager</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">ReactImageView</span><span class="token punctuation">></span></span> <span class="token punctuation">{</span>
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">final</span> <span class="token class-name">String</span> REACT_CLASS <span class="token operator">=</span> <span class="token string">"RCTImageView"</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> REACT_CLASS<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="2-implement-method-createviewinstance"></a><a href="#2-implement-method-createviewinstance" 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>2. Implement method <code>createViewInstance</code></h2>
<p>Views are created in the <code>createViewInstance</code> method, the view should initialize itself in its default state, any properties will be set via a follow up call to <code>updateView.</code></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">ReactImageView</span> <span class="token function">createViewInstance</span><span class="token punctuation">(</span><span class="token class-name">ThemedReactContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ReactImageView</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token class-name">Fresco</span><span class="token punctuation">.</span><span class="token function">newDraweeControllerBuilder</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> mCallerContext<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="3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation"></a><a href="#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation" 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>3. Expose view property setters using <code>@ReactProp</code> (or <code>@ReactPropGroup</code>) annotation</h2>
<p>Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code> (or <code>@ReactPropGroup</code>). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a <code>void</code> method and should be <code>public</code>. Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: <code>boolean</code>, <code>int</code>, <code>float</code>, <code>double</code>, <code>String</code>, <code>Boolean</code>, <code>Integer</code>, <code>ReadableArray</code>, <code>ReadableMap</code>.</p>
<p>Annotation <code>@ReactProp</code> has one obligatory argument <code>name</code> of type <code>String</code>. Name assigned to the <code>@ReactProp</code> annotation linked to the setter method is used to reference the property on JS side.</p>
<!-- alex ignore primitive -->
<p>Except from <code>name</code>, <code>@ReactProp</code> annotation may take following optional arguments: <code>defaultBoolean</code>, <code>defaultInt</code>, <code>defaultFloat</code>. Those arguments should be of the corresponding type (accordingly <code>boolean</code>, <code>int</code>, <code>float</code>) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, <code>null</code> will be provided as a default value in case when corresponding property gets removed.</p>
<p>Setter declaration requirements for methods annotated with <code>@ReactPropGroup</code> are different than for <code>@ReactProp</code>, please refer to the <code>@ReactPropGroup</code> annotation class docs for more information about it.</p>
<!-- alex ignore primitive -->
<p><strong>IMPORTANT!</strong> in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using <code>defaultBoolean</code>, <code>defaultFloat</code>, etc. arguments of <code>@ReactProp</code> annotation, for complex types setter will be called with value set to <code>null</code>).</p>
<pre><code class="hljs css language-java"> <span class="token annotation punctuation">@ReactProp</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"src"</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setSrc</span><span class="token punctuation">(</span><span class="token class-name">ReactImageView</span> view<span class="token punctuation">,</span> <span class="token annotation punctuation">@Nullable</span> <span class="token class-name">ReadableArray</span> sources<span class="token punctuation">)</span> <span class="token punctuation">{</span>
view<span class="token punctuation">.</span><span class="token function">setSource</span><span class="token punctuation">(</span>sources<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@ReactProp</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"borderRadius"</span><span class="token punctuation">,</span> defaultFloat <span class="token operator">=</span> <span class="token number">0f</span><span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setBorderRadius</span><span class="token punctuation">(</span><span class="token class-name">ReactImageView</span> view<span class="token punctuation">,</span> <span class="token keyword">float</span> borderRadius<span class="token punctuation">)</span> <span class="token punctuation">{</span>
view<span class="token punctuation">.</span><span class="token function">setBorderRadius</span><span class="token punctuation">(</span>borderRadius<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token annotation punctuation">@ReactProp</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token class-name">ViewProps</span><span class="token punctuation">.</span>RESIZE_MODE<span class="token punctuation">)</span>
<span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setResizeMode</span><span class="token punctuation">(</span><span class="token class-name">ReactImageView</span> view<span class="token punctuation">,</span> <span class="token annotation punctuation">@Nullable</span> <span class="token class-name">String</span> resizeMode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
view<span class="token punctuation">.</span><span class="token function">setScaleType</span><span class="token punctuation">(</span><span class="token class-name">ImageResizeMode</span><span class="token punctuation">.</span><span class="token function">toScaleType</span><span class="token punctuation">(</span>resizeMode<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="4-register-the-viewmanager"></a><a href="#4-register-the-viewmanager" 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>4. Register the <code>ViewManager</code></h2>
<p>The final Java step is to register the ViewManager to the application, this happens in a similar way to <a href="/docs/0.13/native-modules-android">Native Modules</a>, via the applications package member function <code>createViewManagers.</code></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">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">Arrays</span><span class="token punctuation">.</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">asList</span><span class="token punctuation">(</span>
<span class="token keyword">new</span> <span class="token class-name">ReactImageManager</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>
<h2><a class="anchor" aria-hidden="true" id="5-implement-the-javascript-module"></a><a href="#5-implement-the-javascript-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>5. Implement the JavaScript module</h2>
<p>The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// ImageView.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">/**
* Composes `View`.
*
* - src: string
* - borderRadius: number
* - resizeMode: 'cover' | 'contain' | 'stretch'
*/</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">'RCTImageView'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>The <code>requireNativeComponent</code> function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the <code>MyCustomView</code> example below.</p>
<h1><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</h1>
<p>So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the <code>getId()</code> method.</p>
<pre><code class="hljs css language-java"><span class="token keyword">class</span> <span class="token class-name">MyCustomView</span> <span class="token keyword">extends</span> <span class="token class-name">View</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">public</span> <span class="token keyword">void</span> <span class="token function">onReceiveNativeEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token class-name">WritableMap</span> event <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>
event<span class="token punctuation">.</span><span class="token function">putString</span><span class="token punctuation">(</span><span class="token string">"message"</span><span class="token punctuation">,</span> <span class="token string">"MyMessage"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token class-name">ReactContext</span> reactContext <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token class-name">ReactContext</span><span class="token punctuation">)</span><span class="token function">getContext</span><span class="token punctuation">(</span><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">RCTEventEmitter</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">receiveEvent</span><span class="token punctuation">(</span>
<span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string">"topChange"</span><span class="token punctuation">,</span>
event<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>To map the <code>topChange</code> event name to the <code>onChange</code> callback prop in JavaScript, register it by overriding the <code>getExportedCustomBubblingEventTypeConstants</code> method in your <code>ViewManager</code>:</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">ReactImageManager</span> <span class="token keyword">extends</span> <span class="token class-name">SimpleViewManager</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">MyCustomView</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 keyword">public</span> <span class="token class-name">Map</span> <span class="token function">getExportedCustomBubblingEventTypeConstants</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 class-name">MapBuilder</span><span class="token punctuation">.</span><span class="token function">builder</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span>
<span class="token string">"topChange"</span><span class="token punctuation">,</span>
<span class="token class-name">MapBuilder</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>
<span class="token string">"phasedRegistrationNames"</span><span class="token punctuation">,</span>
<span class="token class-name">MapBuilder</span><span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span><span class="token string">"bubbled"</span><span class="token punctuation">,</span> <span class="token string">"onChange"</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">build</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 callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:</p>
<pre><code class="hljs css language-jsx"><span class="token comment">// MyCustomView.js</span>
<span class="token keyword">class</span> <span class="token class-name">MyCustomView</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">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_onChange <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_onChange</span><span class="token punctuation">.</span><span class="token function">bind</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 punctuation">}</span>
<span class="token function">_onChange</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">:</span> Event</span><span class="token punctuation">)</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>onChangeMessage<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 keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onChangeMessage</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>message<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">RCTMyCustomView</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">onChange</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>_onChange<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>
MyCustomView<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>
onChangeMessage<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 keyword">var</span> RCTMyCustomView <span class="token operator">=</span> <span class="token function">requireNativeComponent</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">RCTMyCustomView</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.13/native-modules-android"><span class="arrow-prev">← </span><span>Native Modules</span></a><a class="docs-next button" href="/docs/0.13/headless-js-android"><span>Headless JS</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#imageview-example">ImageView example</a></li><li><a href="#1-create-the-viewmanager-subclass">1. Create the <code>ViewManager</code> subclass</a></li><li><a href="#2-implement-method-createviewinstance">2. Implement method <code>createViewInstance</code></a></li><li><a href="#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">3. Expose view property setters using <code>@ReactProp</code> (or <code>@ReactPropGroup</code>) annotation</a></li><li><a href="#4-register-the-viewmanager">4. Register the <code>ViewManager</code></a></li><li><a href="#5-implement-the-javascript-module">5. Implement the JavaScript module</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.13"],"hitsPerPage":5}
});
</script></body></html>