From e250e162ef25e389ef5c918fa85c64e7b8caf23d Mon Sep 17 00:00:00 2001
From: Tim Wang <timwangdev@users.noreply.github.com>
Date: Wed, 26 Jul 2017 15:21:56 +0800
Subject: [PATCH 01/11] Fix renderItem() types in FlatListProperties

ref: http://facebook.github.io/react-native/docs/flatlist.html
---
 types/react-native/index.d.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index 42fe51fc8c..393e0dff62 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -4,6 +4,7 @@
 //                 Fedor Nezhivoi <https://github.com/gyzerok>
 //                 HuHuanming <https://github.com/huhuanming>
 //                 Kyle Roach <https://github.com/iRoachie>
+//                 Tim Wang <https://github.com/timwangdev>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
@@ -3421,7 +3422,7 @@ export interface ViewToken {
 export interface ViewabilityConfig {
     /**
      * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
-     * viewability callback will be fired. A high number means that scrolling through content without
+     * viewability callback will be fired. A high number means that Fscrolling through content without
      * stopping will not mark the content as viewable.
      */
     minimumViewTime?: number;
@@ -3450,6 +3451,17 @@ export interface ViewabilityConfig {
 /**
  * @see https://facebook.github.io/react-native/docs/flatlist.html#props
  */
+
+interface FlatListRenderItemInfo<ItemT> {
+    item: ItemT,
+    index: number,
+    separators: {
+        highlight: () => void,
+        unhighlight: () => void,
+        updateProps: (select: 'leading' | 'trailing', newProps: any) => void,
+    },
+}
+
 export interface FlatListProperties<ItemT> extends ScrollViewProperties {
 
     /**
@@ -3584,7 +3596,7 @@ export interface FlatListProperties<ItemT> extends ScrollViewProperties {
      * ```
      * Provides additional metadata like `index` if you need it.
      */
-    renderItem: (info: ItemT) => React.ReactElement<any> | null
+    renderItem: (info: FlatListRenderItemInfo<ItemT>) => React.ReactElement<any> | null
 
     /**
      * See `ViewabilityHelper` for flow type and further documentation.

From 9e1fbb528b7c650167976c7c23eeda7811295f97 Mon Sep 17 00:00:00 2001
From: Tim Wang <timwangdev@users.noreply.github.com>
Date: Wed, 26 Jul 2017 15:24:02 +0800
Subject: [PATCH 02/11] Fix typo

---
 types/react-native/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index 393e0dff62..b4a96e8003 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -3422,7 +3422,7 @@ export interface ViewToken {
 export interface ViewabilityConfig {
     /**
      * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
-     * viewability callback will be fired. A high number means that Fscrolling through content without
+     * viewability callback will be fired. A high number means that scrolling through content without
      * stopping will not mark the content as viewable.
      */
     minimumViewTime?: number;

From 46ef92eda79b756f454188b39b71bceb6e0ffa7f Mon Sep 17 00:00:00 2001
From: Tim Wang <tim@thenetcircle.com>
Date: Wed, 26 Jul 2017 15:47:15 +0800
Subject: [PATCH 03/11] Fix test

---
 types/react-native/test/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index 5cf036d433..c77f8586d2 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -209,7 +209,7 @@ export class FlatListTest {
     render() {
         <FlatList
             data={[1, 2, 3, 4, 5]}
-            renderItem={(itemInfo: number) => <View><Text>{itemInfo}</Text></View>}
+            renderItem={(info: { item: number }) => <View><Text>{info.item}</Text></View>}
         />
     }
 }

From 9fb7af4a03873e69ee8effb0171852e30f9adc4a Mon Sep 17 00:00:00 2001
From: Tim Wang <tim@thenetcircle.com>
Date: Thu, 27 Jul 2017 17:25:52 +0800
Subject: [PATCH 04/11] Add test for FlatListProperties & SectionListProperties

---
 types/react-native/test/index.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index c77f8586d2..17c7e64c6e 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -31,7 +31,10 @@ import {
     ViewStyle,
     ViewPagerAndroid,
     FlatList,
+    FlatListProperties,
     SectionList,
+    SectionListProperties,
+    ListRenderItemInfo,
     findNodeHandle,
     ScrollView,
     ScrollViewProps,
@@ -205,29 +208,33 @@ InteractionManager.runAfterInteractions(() => {
     // ...
 }).then(() => 'done')
 
-export class FlatListTest {
+export class FlatListTest extends React.Component<FlatListProperties<number>, {}> {
     render() {
-        <FlatList
-            data={[1, 2, 3, 4, 5]}
-            renderItem={(info: { item: number }) => <View><Text>{info.item}</Text></View>}
-        />
+        return (
+            <FlatList
+                data={[1, 2, 3, 4, 5]}
+                renderItem={(info: { item: number }) => <View><Text>{info.item}</Text></View>}
+            />
+        );
     }
 }
 
-export class SectionListTest {
+export class SectionListTest extends React.Component<SectionListProperties<string>, {}> {
     render() {
         var sections = [{
             key: 's1',
-            data: ['A', 'B', 'C', 'D', 'E']
+            data: ['A', 'B', 'C', 'D', 'E'],
         }, {
             key: 's2',
             data: ['A2', 'B2', 'C2', 'D2', 'E2']
         }];
 
-        <SectionList
-            sections={sections}
-            renderItem={(info: {item: string, index: number}) => <View><Text>{info.item}</Text></View>}
-        />
+        return (
+            <SectionList
+                sections={sections}
+                renderItem={(info: {item: string, index: number}) => <View><Text>{info.item}</Text></View>}
+            />
+        );
     }
 }
 

From 4f0e33fcdad2c97492d01313b1ed76df52610ecc Mon Sep 17 00:00:00 2001
From: Tim Wang <tim@thenetcircle.com>
Date: Thu, 27 Jul 2017 17:26:23 +0800
Subject: [PATCH 05/11] Fix SectionListProperties

---
 types/react-native/index.d.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index b4a96e8003..61a727ebeb 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -3452,7 +3452,7 @@ export interface ViewabilityConfig {
  * @see https://facebook.github.io/react-native/docs/flatlist.html#props
  */
 
-interface FlatListRenderItemInfo<ItemT> {
+interface ListRenderItemInfo<ItemT> {
     item: ItemT,
     index: number,
     separators: {
@@ -3462,6 +3462,8 @@ interface FlatListRenderItemInfo<ItemT> {
     },
 }
 
+type ListRenderItem<ItemT> = (info: ListRenderItemInfo<ItemT>) => React.ReactElement<any> | null
+
 export interface FlatListProperties<ItemT> extends ScrollViewProperties {
 
     /**
@@ -3596,7 +3598,7 @@ export interface FlatListProperties<ItemT> extends ScrollViewProperties {
      * ```
      * Provides additional metadata like `index` if you need it.
      */
-    renderItem: (info: FlatListRenderItemInfo<ItemT>) => React.ReactElement<any> | null
+    renderItem: ListRenderItem<ItemT>
 
     /**
      * See `ViewabilityHelper` for flow type and further documentation.
@@ -3660,7 +3662,7 @@ export interface SectionListData<ItemT> {
 
     key: string
 
-    renderItem?: (info: {item: ItemT, index: number}) => React.ReactElement<any> | null
+    renderItem?: ListRenderItem<ItemT>
 
     keyExtractor?: (item: ItemT, index: number) => string
 }
@@ -3723,7 +3725,7 @@ export interface SectionListProperties<ItemT> extends ScrollViewProperties {
     /**
      * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
      */
-    renderItem?: (info: {item: ItemT, index: number}) => React.ReactElement<any> | null
+    renderItem?: ListRenderItem<ItemT>
 
     /**
      * Rendered at the top of each section. Sticky headers are not yet supported.

From c6575198306d36b82c044d0ab635dd6369191ba8 Mon Sep 17 00:00:00 2001
From: Tim Wang <tim@thenetcircle.com>
Date: Thu, 27 Jul 2017 17:30:53 +0800
Subject: [PATCH 06/11] Remove unused import

---
 types/react-native/test/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index 17c7e64c6e..26f819bfa8 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -34,7 +34,6 @@ import {
     FlatListProperties,
     SectionList,
     SectionListProperties,
-    ListRenderItemInfo,
     findNodeHandle,
     ScrollView,
     ScrollViewProps,
@@ -232,7 +231,7 @@ export class SectionListTest extends React.Component<SectionListProperties<strin
         return (
             <SectionList
                 sections={sections}
-                renderItem={(info: {item: string, index: number}) => <View><Text>{info.item}</Text></View>}
+                renderItem={(info: { item: string }) => <View><Text>{info.item}</Text></View>}
             />
         );
     }

From d6168ee5811c0f028f86a8ab95e59e4b81c9becc Mon Sep 17 00:00:00 2001
From: Tim Wang <tim@thenetcircle.com>
Date: Thu, 27 Jul 2017 17:36:53 +0800
Subject: [PATCH 07/11] Fix typo

---
 types/react-native/test/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index 26f819bfa8..4bd5fddb5f 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -222,7 +222,7 @@ export class SectionListTest extends React.Component<SectionListProperties<strin
     render() {
         var sections = [{
             key: 's1',
-            data: ['A', 'B', 'C', 'D', 'E'],
+            data: ['A', 'B', 'C', 'D', 'E']
         }, {
             key: 's2',
             data: ['A2', 'B2', 'C2', 'D2', 'E2']

From 4a0e8af3d9a5d2de91d24a7248e65a141e3137d1 Mon Sep 17 00:00:00 2001
From: Tim Wang <timwangdev@users.noreply.github.com>
Date: Thu, 27 Jul 2017 21:00:03 +0800
Subject: [PATCH 08/11] Fix SectionList test

---
 types/react-native/test/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index 4bd5fddb5f..d36940dd03 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -221,11 +221,12 @@ export class FlatListTest extends React.Component<FlatListProperties<number>, {}
 export class SectionListTest extends React.Component<SectionListProperties<string>, {}> {
     render() {
         var sections = [{
-            key: 's1',
+            title: 's1',
             data: ['A', 'B', 'C', 'D', 'E']
         }, {
-            key: 's2',
-            data: ['A2', 'B2', 'C2', 'D2', 'E2']
+            title: 's2',
+            data: ['A2', 'B2', 'C2', 'D2', 'E2'],
+            renderItem: ({ item }) => <View><Text>{item}</Text></View>
         }];
 
         return (

From 03b37e3f1bcfd63800e7fb4b7d816c61ab565b69 Mon Sep 17 00:00:00 2001
From: Tim Wang <timwangdev@users.noreply.github.com>
Date: Thu, 27 Jul 2017 21:11:59 +0800
Subject: [PATCH 09/11] Make key optional for SectionListData

---
 types/react-native/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index 61a727ebeb..dec04276a4 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -3660,7 +3660,7 @@ export interface SectionListData<ItemT> {
 
     data: ItemT[]
 
-    key: string
+    key?: string
 
     renderItem?: ListRenderItem<ItemT>
 

From cde9060ae1c6ebfc61610b5536b111a8be3da846 Mon Sep 17 00:00:00 2001
From: Tim Wang <tim@thenetcircle.com>
Date: Thu, 27 Jul 2017 21:33:10 +0800
Subject: [PATCH 10/11] Add correct type for SectionList

---
 types/react-native/index.d.ts     | 15 ++++++++++-----
 types/react-native/test/index.tsx |  4 +---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index dec04276a4..f0ec4b304e 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -3453,8 +3453,11 @@ export interface ViewabilityConfig {
  */
 
 interface ListRenderItemInfo<ItemT> {
-    item: ItemT,
-    index: number,
+
+    item: ItemT
+
+    index: number
+
     separators: {
         highlight: () => void,
         unhighlight: () => void,
@@ -3656,6 +3659,9 @@ export interface FlatListStatic<ItemT> extends React.ComponentClass<FlatListProp
     recordInteraction: () => void
 }
 
+/**
+ * @see https://facebook.github.io/react-native/docs/sectionlist.html
+ */
 export interface SectionListData<ItemT> {
 
     data: ItemT[]
@@ -3664,12 +3670,11 @@ export interface SectionListData<ItemT> {
 
     renderItem?: ListRenderItem<ItemT>
 
+    ItemSeparatorComponent?: React.ComponentClass<any> | null
+
     keyExtractor?: (item: ItemT, index: number) => string
 }
 
-/**
- * @see https://facebook.github.io/react-native/docs/sectionlist.html
- */
 export interface SectionListProperties<ItemT> extends ScrollViewProperties {
 
     /**
diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index d36940dd03..846eb37671 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -221,12 +221,10 @@ export class FlatListTest extends React.Component<FlatListProperties<number>, {}
 export class SectionListTest extends React.Component<SectionListProperties<string>, {}> {
     render() {
         var sections = [{
-            title: 's1',
             data: ['A', 'B', 'C', 'D', 'E']
         }, {
-            title: 's2',
             data: ['A2', 'B2', 'C2', 'D2', 'E2'],
-            renderItem: ({ item }) => <View><Text>{item}</Text></View>
+            renderItem: (info: { item: string }) => <View><Text>{info.item}</Text></View>
         }];
 
         return (

From f1ebed48aa30b14833c257b8b1da9bcd877a50b7 Mon Sep 17 00:00:00 2001
From: Tim Wang <tim@thenetcircle.com>
Date: Fri, 28 Jul 2017 10:29:17 +0800
Subject: [PATCH 11/11] Add optional property for SectionList

---
 types/react-native/index.d.ts     | 6 +++++-
 types/react-native/test/index.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts
index f0ec4b304e..883dc985a7 100644
--- a/types/react-native/index.d.ts
+++ b/types/react-native/index.d.ts
@@ -3662,7 +3662,7 @@ export interface FlatListStatic<ItemT> extends React.ComponentClass<FlatListProp
 /**
  * @see https://facebook.github.io/react-native/docs/sectionlist.html
  */
-export interface SectionListData<ItemT> {
+export interface SectionBase<ItemT> {
 
     data: ItemT[]
 
@@ -3675,6 +3675,10 @@ export interface SectionListData<ItemT> {
     keyExtractor?: (item: ItemT, index: number) => string
 }
 
+export interface SectionListData<ItemT> extends SectionBase<ItemT> {
+    [key: string]: any;
+}
+
 export interface SectionListProperties<ItemT> extends ScrollViewProperties {
 
     /**
diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx
index 846eb37671..29ff38508a 100644
--- a/types/react-native/test/index.tsx
+++ b/types/react-native/test/index.tsx
@@ -221,8 +221,10 @@ export class FlatListTest extends React.Component<FlatListProperties<number>, {}
 export class SectionListTest extends React.Component<SectionListProperties<string>, {}> {
     render() {
         var sections = [{
-            data: ['A', 'B', 'C', 'D', 'E']
+            title: 'Section 1',
+            data: ['A', 'B', 'C', 'D', 'E'],
         }, {
+            title: 'Section 2',
             data: ['A2', 'B2', 'C2', 'D2', 'E2'],
             renderItem: (info: { item: string }) => <View><Text>{info.item}</Text></View>
         }];
@@ -230,6 +232,7 @@ export class SectionListTest extends React.Component<SectionListProperties<strin
         return (
             <SectionList
                 sections={sections}
+                renderSectionHeader={({section}) => <View><Text>{section.title}</Text></View>}
                 renderItem={(info: { item: string }) => <View><Text>{info.item}</Text></View>}
             />
         );