Updated docs for next

releases/next/css/react-native.css

@@ -1048,7 +1048,7 @@ h2 {
   display: table-cell; }
 
 p {
-  margin: 10px 0; }
+  margin: 16px 0; }
 
 .highlight {
   padding: 10px;
@@ -1668,6 +1668,14 @@ input#algolia-doc-search:focus {
   font-size: 24px;
   text-align: center; }
 
+@media only screen and (max-width: 680px) {
+  .hero .text {
+    font-size: 200%;
+    text-align: center; }
+  .hero .minitext {
+    font-size: 18px;
+    text-align: center; } }
+
 .buttons-unit {
   margin-top: 40px;
   text-align: center; }
@@ -1676,10 +1684,14 @@ input#algolia-doc-search:focus {
   color: #FA6900; }
 
 .buttons-unit .button {
-  font-size: 24px;
   background: #05A5D1;
   color: #fafafa; }
 
+@media screen and (min-width: 600px) {
+  .buttons-unit .button {
+    font-size: 24px; }
+}
+
 .buttons-unit .button:active {
   background: #0485A9; }
 
@@ -1712,15 +1724,11 @@ input#algolia-doc-search:focus {
 
 .showcase {
   margin: 30px auto 30px auto;
-  width: 100%;
+  width: 50%;
   display: inline-block;
   text-align: center;
   vertical-align: top; }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-  .showcase {
-    width: 50%; } }
-
 @media only screen and (min-device-width: 1024px) {
   .showcase {
     width: 25%; } }
@@ -1832,6 +1840,10 @@ input#algolia-doc-search:focus {
   display: block;
   text-align: left; }
 
+@media screen and (max-width: 768px) {
+  .entry-share {
+    display: none; } }
+
 .entry-excerpt {
   min-width: 320px;
   max-width: 640px;
@@ -1903,7 +1915,7 @@ article li {
 
 .posted-on {
   font-size: 12px;
-  color: rgba(102, 99, 122, 0.29);
+  color: #9d9b9b;
   margin-bottom: 0;
   margin-top: 15px; }
 
@@ -1918,7 +1930,7 @@ article li {
   color: #5A6B77; }
 
 .name-title .title {
-  color: rgba(102, 99, 122, 0.44); }
+  color: #9d9b9b; }
 
 .btn {
   background: 0 0;

releases/next/docs/flatlist.html

@@ -56,15 +56,19 @@ class <span class="token class-name">MyList</span> extends <span class="token cl
     <span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
 <span class="token punctuation">}</span></div><p>This is a convenience wrapper around <a href="docs/virtualizedlist.html" target="_blank"><code>&lt;VirtualizedList&gt;</code></a>,
-and thus inherits it&#x27;s props that aren&#x27;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
+and thus inherits it&#x27;s props (as well as those of <code>ScrollView</code>) that aren&#x27;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 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
+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&#x27;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></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="columnwrapperstyle"></a>columnWrapperStyle?: <span class="propType">StyleObj</span> <a class="hash-link" href="docs/flatlist.html#columnwrapperstyle">#</a></h4><div><p>Optional custom style for multi-item rows generated when numColumns &gt; 1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data: <span class="propType"><span>?Array&lt;ItemT&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#data">#</a></h4><div><p>For simplicity, data is just a plain array. If you want to use something else, like an
+Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>NOTE: <code>removeClippedSubviews</code> might not be necessary and may cause bugs. If you see issues with
+content not rendering, e.g when using <code>LayoutAnimation</code>, try setting
+<code>removeClippedSubviews={false}</code>, and we may change the default in the future after more
+experimentation in production apps.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="columnwrapperstyle"></a>columnWrapperStyle?: <span class="propType">StyleObj</span> <a class="hash-link" href="docs/flatlist.html#columnwrapperstyle">#</a></h4><div><p>Optional custom style for multi-item rows generated when numColumns &gt; 1.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data: <span class="propType"><span>?Array&lt;ItemT&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#data">#</a></h4><div><p>For simplicity, data is just a plain array. If you want to use something else, like an
 immutable list, use the underlying <code>VirtualizedList</code> directly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="extradata"></a>extraData?: <span class="propType">any</span> <a class="hash-link" href="docs/flatlist.html#extradata">#</a></h4><div><p>A marker property for telling the list to re-render (since it implements <code>PureComponent</code>). If
 any of your <code>renderItem</code>, Header, Footer, etc. functions depend on anything outside of the
 <code>data</code> prop, stick it here and treat it immutably.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitem"></a>getItem?:  <a class="hash-link" href="docs/flatlist.html#getitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemcount"></a>getItemCount?:  <a class="hash-link" href="docs/flatlist.html#getitemcount">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemlayout"></a>getItemLayout?: <span class="propType">(data: ?Array&lt;ItemT&gt;, index: number) =&gt;
@@ -94,8 +98,9 @@ sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div
 <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
 &lt;FlatList data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Title Text&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;item1&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Provides additional metadata like <code>index</code> if you need it.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/flatlist.html#viewabilityconfig">#</a></h4><div><p>See <code>ViewabilityHelper</code> for flow type and further documentation.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at a 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.</p><p>May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoitem">#</a></h4><div><p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible. May be janky
-without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltooffset"></a>scrollToOffset<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltooffset">#</a></h4><div><p>Scroll to a specific content pixel offset, like a normal <code>ScrollView</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/flatlist.html#recordinteraction">#</a></h4><div><p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
+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></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoitem">#</a></h4><div><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></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltooffset"></a>scrollToOffset<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltooffset">#</a></h4><div><p>Scroll to a specific content pixel offset, like a normal <code>ScrollView</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/flatlist.html#recordinteraction">#</a></h4><div><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></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/Lists/FlatList.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/flatlist.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/FlatListExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
 
@@ -138,7 +143,7 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
   static description <span class="token operator">=</span> <span class="token string">&#x27;Performant, scrollable list of data.&#x27;</span><span class="token punctuation">;</span>
 
   state <span class="token operator">=</span> <span class="token punctuation">{</span>
-    data<span class="token punctuation">:</span> <span class="token function">genItemData<span class="token punctuation">(</span></span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    data<span class="token punctuation">:</span> <span class="token function">genItemData<span class="token punctuation">(</span></span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     debug<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
     horizontal<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
     filterText<span class="token punctuation">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span>
@@ -218,6 +223,7 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
           <span class="token punctuation">}</span>
           legacyImplementation<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
           numColumns<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>
+          onEndReached<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onEndReached<span class="token punctuation">}</span>
           onRefresh<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onRefresh<span class="token punctuation">}</span>
           onScroll<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSinkX <span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSinkY<span class="token punctuation">}</span>
           onViewableItemsChanged<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onViewableItemsChanged<span class="token punctuation">}</span>
@@ -233,6 +239,11 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
   _getItemLayout <span class="token operator">=</span> <span class="token punctuation">(</span>data<span class="token punctuation">:</span> any<span class="token punctuation">,</span> index<span class="token punctuation">:</span> number<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
     <span class="token keyword">return</span> <span class="token function">getItemLayout<span class="token punctuation">(</span></span>data<span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>horizontal<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span><span class="token punctuation">;</span>
+  _onEndReached <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</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>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
+      data<span class="token punctuation">:</span> state<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">concat<span class="token punctuation">(</span></span><span class="token function">genItemData<span class="token punctuation">(</span></span><span class="token number">100</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<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>
   _onRefresh <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token function">alert<span class="token punctuation">(</span></span><span class="token string">&#x27;onRefresh: nothing to refresh :P&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   _renderItemComponent <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
     <span class="token keyword">return</span> <span class="token punctuation">(</span>

releases/next/docs/getting-started.html

@@ -34,6 +34,7 @@ one to start with, since the setup is a bit different.</p><span><div class="togg
   <span>Mobile OS:</span>
   <a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
   <a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
+  <br />
   <span>Development OS:</span>
   <a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
   <a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>

releases/next/docs/panresponder.html

@@ -14,7 +14,7 @@ native event object:</p><div class="prism language-javascript">onPanResponderMov
       onMoveShouldSetPanResponderCapture<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
 
       onPanResponderGrant<span class="token punctuation">:</span> <span class="token punctuation">(</span>evt<span class="token punctuation">,</span> gestureState<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
-       <span class="token comment" spellcheck="true"> // The guesture has started. Show visual feedback so the user knows
+       <span class="token comment" spellcheck="true"> // The gesture has started. Show visual feedback so the user knows
 </span>       <span class="token comment" spellcheck="true"> // what is happening!
 </span>
        <span class="token comment" spellcheck="true"> // gestureState.d{x,y} will be set to zero now

releases/next/docs/virtualizedlist.html

@@ -7,15 +7,16 @@ window with appropriately sized blank space. The window adapts to scrolling beha
 are rendered incrementally with low-pri (after any running interactions) if they are far from the
 visible area, or with hi-pri otherwise to minimize the potential of seeing blank space.</p><p>Some 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 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
+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&#x27;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>NOTE: <code>LayoutAnimation</code> and sticky section headers both have bugs when used with this and are
-therefore not officially supported yet.</p><p>NOTE: <code>removeClippedSubviews</code> might not be necessary and may cause bugs. If you see issues with
-content not rendering, try disabling it, and we may change the default there.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array&lt;{key: string}&gt; but you can override
+Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>NOTE: <code>removeClippedSubviews</code> might not be necessary and may cause bugs. If you see issues with
+content not rendering, e.g when using <code>LayoutAnimation</code>, try setting
+<code>removeClippedSubviews={false}</code>, and we may change the default in the future after more
+experimentation in production apps.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array&lt;{key: string}&gt; but you can override
 getItem, getItemCount, and keyExtractor to handle any type of index-based data.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="debug"></a>debug?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#debug">#</a></h4><div><p><code>debug</code> will turn on extra logging and visual overlays to aid with debugging both usage and
 implementation, but with a significant perf hit.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablevirtualization"></a>disableVirtualization: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#disablevirtualization">#</a></h4><div><p>DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
 unmounts react instances that are outside of the render window. You should only need to disable
@@ -33,7 +34,7 @@ sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div
 }) =&gt; void</span></span> <a class="hash-link" href="docs/virtualizedlist.html#onviewableitemschanged">#</a></h4><div><p>Called when the viewability of rows changes, as defined by the
 <code>viewabilityConfig</code> prop.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="refreshing"></a>refreshing?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#refreshing">#</a></h4><div><p>Set this true while waiting for new data from a refresh.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="removeclippedsubviews"></a>removeClippedSubviews?: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#removeclippedsubviews">#</a></h4><div><p>A native optimization that removes clipped subviews (those outside the parent) from the view
 hierarchy to offload work from the native rendering system. They are still kept around so no
-memory is saved and state is preserved.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {item: Item, index: number}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent: <span class="propType">(props: Object) =&gt; React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderscrollcomponent">#</a></h4><div><p>Render a custom scroll component, e.g. with a differently styled <code>RefreshControl</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="updatecellsbatchingperiod"></a>updateCellsBatchingPeriod: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#updatecellsbatchingperiod">#</a></h4><div><p>Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
+memory is saved and state is preserved.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderitem"></a>renderItem: <span class="propType">(info: {item: Item, index: number}) =&gt; ?React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderscrollcomponent"></a>renderScrollComponent: <span class="propType">(props: Object) =&gt; React.Element&lt;any&gt;</span> <a class="hash-link" href="docs/virtualizedlist.html#renderscrollcomponent">#</a></h4><div><p>Render a custom scroll component, e.g. with a differently styled <code>RefreshControl</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrolleventthrottle"></a>scrollEventThrottle?:  <a class="hash-link" href="docs/virtualizedlist.html#scrolleventthrottle">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="updatecellsbatchingperiod"></a>updateCellsBatchingPeriod: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#updatecellsbatchingperiod">#</a></h4><div><p>Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
 screen. Similar fill rate/responsiveness tradeoff as <code>maxToRenderPerBatch</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/virtualizedlist.html#viewabilityconfig">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="windowsize"></a>windowSize: <span class="propType">number</span> <a class="hash-link" href="docs/virtualizedlist.html#windowsize">#</a></h4><div><p>Determines the maximum number of items rendered outside of the visible area, in units of
 visible lengths. So if your list fills the screen, then <code>windowSize={21}</code> (the default) will
 render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing