From e356f41f5d4eeac4fb21c063fe97e9e177698514 Mon Sep 17 00:00:00 2001
From: Website Deployment Script <reactjs-bot@users.noreply.github.com>
Date: Thu, 5 Apr 2018 16:31:31 +0000
Subject: [PATCH] Deploy website

Deploy website version based on 19f8cedda9585cfd914a7ec46e05e1c1d6c6ae56
---
 docs/next/sectionlist.html | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/docs/next/sectionlist.html b/docs/next/sectionlist.html
index ba9d3ef0d7a..d9e16635eeb 100644
--- a/docs/next/sectionlist.html
+++ b/docs/next/sectionlist.html
@@ -19,21 +19,27 @@
 </ul>
 <p>If you don't need section support and want a simpler interface, use <a href="/react-native/docs/next/flatlist.html"><code>&lt;FlatList&gt;</code></a>.</p>
 <p>Simple Examples:</p>
-<pre><code class="hljs">&lt;SectionList
-  renderItem={({item}) =&gt; &lt;ListItem title={item} /&gt;}
-  renderSectionHeader={({section}) =&gt; &lt;Header title={section.title} /&gt;}
-  sections={[ // homogeneous rendering between sections
-    {data: [...], title: ...},
-    {data: [...], title: ...},
-    {data: [...], title: ...},
+<pre><code class="hljs">// Example 1 (Homogeneous Rendering)
+&lt;SectionList
+  renderItem={({ item, index, section }) =&gt; &lt;Text key={index}&gt;{item}&lt;/Text&gt;}
+  renderSectionHeader={({ section: { title } }) =&gt; &lt;Text style={{ fontWeight: 'bold' }}&gt;{title}&lt;/Text&gt;}
+  sections={[
+    { title: 'Title1', data: ['item1', 'item2'] },
+    { title: 'Title2', data: ['item3', 'item4'] },
+    { title: 'Title3', data: ['item5', 'item6'] },
   ]}
+  keyExtractor={(item, index) =&gt; item + index}
 /&gt;
 
+// Example 2 (Heterogeneous Rendering / No Section Headers)
+const overrideRenderItem = ({ item, index, section: { title, data } }) =&gt; &lt;Text key={index}&gt;Override{item}&lt;/Text&gt;
+
 &lt;SectionList
-  sections={[ // heterogeneous rendering between sections
-    {data: [...], renderItem: ...},
-    {data: [...], renderItem: ...},
-    {data: [...], renderItem: ...},
+  renderItem={({ item, index, section }) =&gt; &lt;Text key={index}&gt;{item}&lt;/Text&gt;}
+  sections={[
+    { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
+    { title: 'Title2', data: ['item3', 'item4'] },
+    { title: 'Title3', data: ['item5', 'item6'] },
   ]}
 /&gt;
 </code></pre>