Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
d6c8c31cb1b90073b4e69748e793e44fcad192fe
react-native/docs/0.50/flatlist.html
T
Website Deployment Script d6c8c31cb1 Deploy website 
Deploy website version based on aa6bca5d8b7a59a46c8e4e5a6803f43206c13b65
2020-09-16 06:40:19 +00:00

262 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>FlatList · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A performant interface for rendering, flat lists, supporting the most handy features:"/><meta name="docsearch:version" content="0.50"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="FlatList · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="A performant interface for rendering, flat lists, supporting the most handy features:"/><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 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.50</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/0.50/getting-started" target="_self">Docs</a></li><li class="siteNavGroupActive"><a href="/docs/0.50/components-and-apis" target="_self">Components</a></li><li class="siteNavGroupActive"><a href="/docs/0.50/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>Components</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.50/getting-started">Getting Started</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/tutorial">Learn the Basics</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/props">Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/state">State</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/style">Style</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/height-and-width">Height and Width</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/flexbox">Layout with Flexbox</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/handling-text-input">Handling Text Input</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/handling-touches">Handling Touches</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/using-a-scrollview">Using a ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/using-a-listview">Using List Views</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/network">Networking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/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.50/components-and-apis">Components and APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/platform-specific-code">Platform Specific Code</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/navigation">Navigating Between Screens</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/images">Images</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/animations">Animations</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/accessibility">Accessibility</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/improvingux">Improving User Experience</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/timers">Timers</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/debugging">Debugging</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/performance">Performance</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/gesture-responder-system">Gesture Responder System</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/javascript-environment">JavaScript Environment</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/direct-manipulation">Direct Manipulation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/colors">Color Reference</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/running-on-device">Running On Device</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/upgrading">Upgrading to new React Native versions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/troubleshooting">Troubleshooting</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/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.50/native-modules-ios">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/native-components-ios">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/linking-libraries-ios">Linking Libraries</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/running-on-simulator-ios">Running On Simulator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/communication-ios">Communication between native and React Native</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/building-for-tv">Building For TV Devices</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/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.50/native-modules-android">Native Modules</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/native-components-android">Native UI Components</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/headless-js-android">Headless JS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/signed-apk-android">Publishing to Google Play Store</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/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.50/activityindicator">ActivityIndicator</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/button">Button</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/datepickerios">DatePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/drawerlayoutandroid">DrawerLayoutAndroid</a></li><li class="navListItem navListItemActive"><a class="navItem" href="/docs/0.50/flatlist">FlatList</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/image">Image</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/imagebackground">ImageBackground</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/keyboardavoidingview">KeyboardAvoidingView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/listview">ListView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/maskedviewios">MaskedViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/modal">Modal</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/navigatorios">NavigatorIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/picker">Picker</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/pickerios">PickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/progressbarandroid">ProgressBarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/progressviewios">ProgressViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/refreshcontrol">RefreshControl</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/safeareaview">SafeAreaView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/scrollview">ScrollView</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/sectionlist">SectionList</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/segmentedcontrolios">SegmentedControlIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/slider">Slider</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/snapshotviewios">SnapshotViewIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/statusbar">StatusBar</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/switch">Switch</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/tabbarios">TabBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/tabbarios-item">TabBarIOS.Item</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/text">Text</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/textinput">TextInput</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/toolbarandroid">ToolbarAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/touchablehighlight">TouchableHighlight</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/touchablenativefeedback">TouchableNativeFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/touchableopacity">TouchableOpacity</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/touchablewithoutfeedback">TouchableWithoutFeedback</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/view">View</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/viewpagerandroid">ViewPagerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/virtualizedlist">VirtualizedList</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/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.50/accessibilityinfo">AccessibilityInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/actionsheetios">ActionSheetIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/alert">Alert</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/alertios">AlertIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/animated">Animated</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/appregistry">AppRegistry</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/appstate">AppState</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/asyncstorage">AsyncStorage</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/backandroid">BackAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/backhandler">BackHandler</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/cameraroll">CameraRoll</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/clipboard">Clipboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/datepickerandroid">DatePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/dimensions">Dimensions</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/easing">Easing</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/geolocation">Geolocation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/imageeditor">ImageEditor</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/imagepickerios">ImagePickerIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/imagestore">ImageStore</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/image-style-props">Image Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/interactionmanager">InteractionManager</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/keyboard">Keyboard</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/layout-props">Layout Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/layoutanimation">LayoutAnimation</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/linking">Linking</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/listviewdatasource">ListViewDataSource</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/netinfo">NetInfo</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/panresponder">PanResponder</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/permissionsandroid">PermissionsAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/pixelratio">PixelRatio</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/pushnotificationios">PushNotificationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/settings">Settings</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/shadow-props">Shadow Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/share">Share</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/statusbarios">StatusBarIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/stylesheet">StyleSheet</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/systrace">Systrace</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/text-style-props">Text Style Props</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/timepickerandroid">TimePickerAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/toastandroid">ToastAndroid</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/transforms">Transforms</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/vibration">Vibration</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/vibrationios">VibrationIOS</a></li><li class="navListItem"><a class="navItem" href="/docs/0.50/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/flatlist.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">FlatList</h1></header><article><div><span><p>A performant interface for rendering, flat lists, supporting the most handy features:</p>
<ul>
<li>Fully cross-platform.</li>
<li>Optional horizontal mode.</li>
<li>Configurable viewability callbacks.</li>
<li>Header support.</li>
<li>Footer support.</li>
<li>Separator support.</li>
<li>Pull to Refresh.</li>
<li>Scroll loading.</li>
<li>ScrollToIndex support.</li>
</ul>
<p>If you need section support, use <a href="/docs/0.50/sectionlist"><code>&lt;SectionList&gt;</code></a>.</p>
<p>Minimal Example:</p>
<pre><code class="hljs">&lt;FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) =&gt; &lt;Text&gt;{item.key}&lt;/Text&gt;}
/&gt;
</code></pre>
<p>More complex, multi-select example demonstrating <code>PureComponent</code> usage for perf optimization and avoiding bugs.</p>
<ul>
<li>By binding the <code>onPressItem</code> handler, the props will remain <code>===</code> and <code>PureComponent</code> will prevent wasteful re-renders unless the actual <code>id</code>, <code>selected</code>, or <code>title</code> props change, even if the components rendered in <code>MyListItem</code> did not have such optimizations.</li>
<li>By passing <code>extraData={this.state}</code> to <code>FlatList</code> we make sure <code>FlatList</code> itself will re-render when the <code>state.selected</code> changes. Without setting this prop, <code>FlatList</code> would not know it needs to re-render any items because it is also a <code>PureComponent</code> and the prop comparison will not show any changes.</li>
<li><code>keyExtractor</code> tells the list to use the <code>id</code>s for the react keys instead of the default <code>key</code> property.</li>
</ul>
<pre><code class="hljs">class MyListItem extends React.PureComponent {
_onPress = () =&gt; {
this.props.onPressItem(this.props.id);
};
render() {
const textColor = this.props.selected ? &quot;red&quot; : &quot;black&quot;;
return (
&lt;TouchableOpacity onPress={this._onPress}&gt;
&lt;View&gt;
&lt;Text style={{ color: textColor }}&gt;
{this.props.title}
&lt;/Text&gt;
&lt;/View&gt;
&lt;/TouchableOpacity&gt;
);
}
}
class MultiSelectList extends React.PureComponent {
state = {selected: (new Map(): Map&lt;string, boolean&gt;)};
_keyExtractor = (item, index) =&gt; item.id;
_onPressItem = (id: string) =&gt; {
// updater functions are preferred for transactional updates
this.setState((state) =&gt; {
// copy the map rather than modifying state.
const selected = new Map(state.selected);
selected.set(id, !selected.get(id)); // toggle
return {selected};
});
};
_renderItem = ({item}) =&gt; (
&lt;MyListItem
id={item.id}
onPressItem={this._onPressItem}
selected={!!this.state.selected.get(item.id)}
title={item.title}
/&gt;
);
render() {
return (
&lt;FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/&gt;
);
}
}
</code></pre>
<p>This is a convenience wrapper around <a href="/docs/0.50/virtualizedlist"><code>&lt;VirtualizedList&gt;</code></a>, and thus inherits its props (as well as those of <code>ScrollView</code>) that aren't explicitly listed here, along with the following caveats:</p>
<ul>
<li>Internal state is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li>
<li>This is a <code>PureComponent</code> which means that it will not re-render if <code>props</code> remain shallow-equal. Make sure that everything your <code>renderItem</code> function depends on is passed as a prop (e.g. <code>extraData</code>) that is not <code>===</code> after updates, otherwise your UI may not update on changes. This includes the <code>data</code> prop and parent component state.</li>
<li>In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.</li>
<li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key. Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li>
</ul>
<p>Also inherits <a href="/docs/0.50/scrollview#props">ScrollView Props</a>, unless it is nested in another FlatList of same orientation.</p>
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" 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>Props</h3>
<ul>
<li><a href="/docs/0.50/flatlist#numcolumns"><code>numColumns</code></a></li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h3>
<ul>
<li><a href="/docs/0.50/flatlist#scrolltoend"><code>scrollToEnd</code></a></li>
<li><a href="/docs/0.50/flatlist#scrolltoindex"><code>scrollToIndex</code></a></li>
<li><a href="/docs/0.50/flatlist#scrolltoitem"><code>scrollToItem</code></a></li>
<li><a href="/docs/0.50/flatlist#scrolltooffset"><code>scrollToOffset</code></a></li>
<li><a href="/docs/0.50/flatlist#recordinteraction"><code>recordInteraction</code></a></li>
<li><a href="/docs/0.50/flatlist#flashscrollindicators"><code>flashScrollIndicators</code></a></li>
</ul>
<h3><a class="anchor" aria-hidden="true" id="type-definitions"></a><a href="#type-definitions" 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>Type Definitions</h3>
<ul>
<li><a href="/docs/0.50/flatlist#props"><code>Props</code></a></li>
<li><a href="/docs/0.50/flatlist#defaultprops"><code>DefaultProps</code></a></li>
</ul>
<hr>
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
<h2><a class="anchor" aria-hidden="true" id="props-1"></a><a href="#props-1" 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>Props</h2>
<h3><a class="anchor" aria-hidden="true" id="numcolumns"></a><a href="#numcolumns" 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><code>numColumns</code></h3>
<table>
<thead>
<tr><th>Type</th><th>Required</th></tr>
</thead>
<tbody>
<tr><td></td><td>No</td></tr>
</tbody>
</table>
<h2><a class="anchor" aria-hidden="true" id="methods-1"></a><a href="#methods-1" 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>Methods</h2>
<h3><a class="anchor" aria-hidden="true" id="scrolltoend"></a><a href="#scrolltoend" 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><code>scrollToEnd()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">scrollToEnd</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>params<span class="token punctuation">]</span><span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="scrolltoindex"></a><a href="#scrolltoindex" 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><code>scrollToIndex()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">scrollToIndex</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Scrolls to the item at the specified index such that it is positioned in the viewable area such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. <code>viewOffset</code> is a fixed number of pixels to offset the final target position.</p>
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="scrolltoitem"></a><a href="#scrolltoitem" 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><code>scrollToItem()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">scrollToItem</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible.</p>
<p>Note: cannot scroll to locations outside the render window without specifying the <code>getItemLayout</code> prop.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="scrolltooffset"></a><a href="#scrolltooffset" 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><code>scrollToOffset()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">scrollToOffset</span><span class="token punctuation">(</span><span class="token punctuation">(</span>params<span class="token operator">:</span> object<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Scroll to a specific content pixel offset in the list.</p>
<p>Check out <a href="/docs/0.50/virtualizedlist#scrolltooffset">scrollToOffset</a> of VirtualizedList</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="recordinteraction"></a><a href="#recordinteraction" 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><code>recordInteraction()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">recordInteraction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g. if <code>waitForInteractions</code> is true and the user has not scrolled. This is typically called by taps on items or by navigation actions.</p>
<hr>
<h3><a class="anchor" aria-hidden="true" id="flashscrollindicators"></a><a href="#flashscrollindicators" 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><code>flashScrollIndicators()</code></h3>
<pre><code class="hljs css language-jsx"><span class="token function">flashScrollIndicators</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p>Displays the scroll indicators momentarily.</p>
<h2><a class="anchor" aria-hidden="true" id="type-definitions-1"></a><a href="#type-definitions-1" 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>Type Definitions</h2>
<h3><a class="anchor" aria-hidden="true" id="props-2"></a><a href="#props-2" 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>Props</h3>
<table>
<thead>
<tr><th>Type</th></tr>
</thead>
<tbody>
<tr><td>IntersectionTypeAnnotation</td></tr>
</tbody>
</table>
<hr>
<h3><a class="anchor" aria-hidden="true" id="defaultprops"></a><a href="#defaultprops" 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>DefaultProps</h3>
<table>
<thead>
<tr><th>Type</th></tr>
</thead>
<tbody>
<tr><td>TypeofTypeAnnotation</td></tr>
</tbody>
</table>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/0.50/drawerlayoutandroid"><span class="arrow-prev">← </span><span class="function-name-prevnext">DrawerLayoutAndroid</span></a><a class="docs-next button" href="/docs/0.50/image"><span>Image</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props-1">Props</a><ul class="toc-headings"><li><a href="#numcolumns"><code>numColumns</code></a></li></ul></li><li><a href="#methods-1">Methods</a><ul class="toc-headings"><li><a href="#scrolltoend"><code>scrollToEnd()</code></a></li><li><a href="#scrolltoindex"><code>scrollToIndex()</code></a></li><li><a href="#scrolltoitem"><code>scrollToItem()</code></a></li><li><a href="#scrolltooffset"><code>scrollToOffset()</code></a></li><li><a href="#recordinteraction"><code>recordInteraction()</code></a></li><li><a href="#flashscrollindicators"><code>flashScrollIndicators()</code></a></li></ul></li><li><a href="#type-definitions-1">Type Definitions</a><ul class="toc-headings"><li><a href="#props-2">Props</a></li><li><a href="#defaultprops">DefaultProps</a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who&#x27;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.50"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink