Files
react-native/docs/listviewdatasource.html
T
Website Deployment Script c2e04b58ae Updated docs for 0.42
2017-03-09 03:17:25 +00:00

59 lines
30 KiB
HTML

<!DOCTYPE html><html><head><title>ListViewDataSource</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="ListViewDataSource"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.42</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:0;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:0;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:0;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:0;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:0;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:0;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:0;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:0;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:0;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device.html">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/understanding-cli.html">Understanding the CLI</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-simulator-ios.html">Running On Simulator</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/headless-js-android.html">Headless JS</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="docs/android-ui-performance.html">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicator.html">ActivityIndicator</a></li><li><a style="margin-left:0;" class="" href="docs/button.html">Button</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:0;" class="" href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/snapshotviewios.html">SnapshotViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="docs/adsupportios.html">AdSupportIOS</a></li><li><a style="margin-left:0;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/easing.html">Easing</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/imageeditor.html">ImageEditor</a></li><li><a style="margin-left:0;" class="" href="docs/imagepickerios.html">ImagePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/imagestore.html">ImageStore</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/keyboard.html">Keyboard</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/permissionsandroid.html">PermissionsAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/settings.html">Settings</a></li><li><a style="margin-left:0;" class="" href="docs/share.html">Share</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/systrace.html">Systrace</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html">Vibration</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/layout-props.html">Layout Props</a></li><li><a style="margin-left:0;" class="" href="docs/shadow-props.html">Shadow Props</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><h1><a class="anchor" name="listviewdatasource"></a>ListViewDataSource <a class="hash-link" href="docs/listviewdatasource.html#listviewdatasource">#</a></h1><div><div><p>Provides efficient data processing and access to the
<code>ListView</code> component. A <code>ListViewDataSource</code> is created with functions for
extracting data from the input blob, and comparing elements (with default
implementations for convenience). The input blob can be as simple as an
array of strings, or an object with rows nested inside section objects.</p><p>To update the data in the datasource, use <code>cloneWithRows</code> (or
<code>cloneWithRowsAndSections</code> if you care about sections). The data in the
data source is immutable, so you can&#x27;t modify it directly. The clone methods
suck in the new data and compute a diff for each row so ListView knows
whether to re-render it or not.</p><p>In this example, a component receives data in chunks, handled by
<code>_onDataArrived</code>, which concats the new data onto the old data and updates the
data source. We use <code>concat</code> to create a new array - mutating <code>this._data</code>,
e.g. with <code>this._data.push(newRowData)</code>, would be an error. <code>_rowHasChanged</code>
understands the shape of the row data and knows how to efficiently compare
it.</p><div class="prism language-javascript">getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> ds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ListViewDataSource</span><span class="token punctuation">(</span><span class="token punctuation">{</span>rowHasChanged<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_rowHasChanged<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>ds<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">_onDataArrived<span class="token punctuation">(</span></span>newData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_data<span class="token punctuation">.</span><span class="token function">concat<span class="token punctuation">(</span></span>newData<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
ds<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>ds<span class="token punctuation">.</span><span class="token function">cloneWithRows<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>_data<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></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/listviewdatasource.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(params)</span> <a class="hash-link" href="docs/listviewdatasource.html#constructor">#</a></h4><div><p>You can provide custom extraction and <code>hasChanged</code> functions for section
headers and rows. If absent, data will be extracted with the
<code>defaultGetRowData</code> and <code>defaultGetSectionHeaderData</code> functions.</p><p>The default extractor expects data of one of the following forms:</p><div class="prism language-javascript"> <span class="token punctuation">{</span> sectionID_1<span class="token punctuation">:</span> <span class="token punctuation">{</span> rowID_1<span class="token punctuation">:</span> &lt;rowData1<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span></div><p> or</p><div class="prism language-javascript"> <span class="token punctuation">{</span> sectionID_1<span class="token punctuation">:</span> <span class="token punctuation">[</span> &lt;rowData1<span class="token operator">&gt;</span><span class="token punctuation">,</span> &lt;rowData2<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">}</span></div><p> or</p><div class="prism language-javascript"> <span class="token punctuation">[</span> <span class="token punctuation">[</span> &lt;rowData1<span class="token operator">&gt;</span><span class="token punctuation">,</span> &lt;rowData2<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">]</span></div><p>The constructor takes in a params argument that can contain any of the
following:</p><ul><li>getRowData(dataBlob, sectionID, rowID);</li><li>getSectionHeaderData(dataBlob, sectionID);</li><li>rowHasChanged(prevRowData, nextRowData);</li><li>sectionHeaderHasChanged(prevSectionData, nextSectionData);</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clonewithrows"></a>cloneWithRows<span class="methodType">(dataBlob, rowIdentities)</span> <a class="hash-link" href="docs/listviewdatasource.html#clonewithrows">#</a></h4><div><p>Clones this <code>ListViewDataSource</code> with the specified <code>dataBlob</code> and
<code>rowIdentities</code>. The <code>dataBlob</code> is just an arbitrary blob of data. At
construction an extractor to get the interesting information was defined
(or the default was used).</p><p>The <code>rowIdentities</code> is a 2D array of identifiers for rows.
ie. [[&#x27;a1&#x27;, &#x27;a2&#x27;], [&#x27;b1&#x27;, &#x27;b2&#x27;, &#x27;b3&#x27;], ...]. If not provided, it&#x27;s
assumed that the keys of the section data are the row identities.</p><p>Note: This function does NOT clone the data in this data source. It simply
passes the functions defined at construction to a new data source with
the data specified. If you wish to maintain the existing data you must
handle merging of old and new data separately and then pass that into
this function as the <code>dataBlob</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="clonewithrowsandsections"></a>cloneWithRowsAndSections<span class="methodType">(dataBlob, sectionIdentities, rowIdentities)</span> <a class="hash-link" href="docs/listviewdatasource.html#clonewithrowsandsections">#</a></h4><div><p>This performs the same function as the <code>cloneWithRows</code> function but here
you also specify what your <code>sectionIdentities</code> are. If you don&#x27;t care
about sections you should safely be able to use <code>cloneWithRows</code>.</p><p><code>sectionIdentities</code> is an array of identifiers for sections.
ie. [&#x27;s1&#x27;, &#x27;s2&#x27;, ...]. If not provided, it&#x27;s assumed that the
keys of dataBlob are the section identities.</p><p>Note: this returns a new object!</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowcount"></a>getRowCount<span class="methodType">(0)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowcount">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowandsectioncount"></a>getRowAndSectionCount<span class="methodType">(0)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowandsectioncount">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="rowshouldupdate"></a>rowShouldUpdate<span class="methodType">(sectionIndex, rowIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#rowshouldupdate">#</a></h4><div><p>Returns if the row is dirtied and needs to be rerendered</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowdata"></a>getRowData<span class="methodType">(sectionIndex, rowIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowdata">#</a></h4><div><p>Gets the data required to render the row.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getrowidforflatindex"></a>getRowIDForFlatIndex<span class="methodType">(index)</span> <a class="hash-link" href="docs/listviewdatasource.html#getrowidforflatindex">#</a></h4><div><p>Gets the rowID at index provided if the dataSource arrays were flattened,
or null of out of range indexes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionidforflatindex"></a>getSectionIDForFlatIndex<span class="methodType">(index)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionidforflatindex">#</a></h4><div><p>Gets the sectionID at index provided if the dataSource arrays were flattened,
or null for out of range indexes.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionlengths"></a>getSectionLengths<span class="methodType">(0)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionlengths">#</a></h4><div><p>Returns an array containing the number of rows in each section</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sectionheadershouldupdate"></a>sectionHeaderShouldUpdate<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#sectionheadershouldupdate">#</a></h4><div><p>Returns if the section header is dirtied and needs to be rerendered</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getsectionheaderdata"></a>getSectionHeaderData<span class="methodType">(sectionIndex)</span> <a class="hash-link" href="docs/listviewdatasource.html#getsectionheaderdata">#</a></h4><div><p>Gets the data required to render the section header</p></div></div></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/ListView/ListViewDataSource.js">edit the content above on GitHub</a> and send us a pull request!</p><div class="docs-prevnext"><a class="docs-prev" href="docs/linking.html#content">← Prev</a><a class="docs-next" href="docs/nativemethodsmixin.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://productpains.com/product/react-native/" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.42" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script></body></html>