From fdab2039c96a5088ecf0dd07946a1b726c1ca5f3 Mon Sep 17 00:00:00 2001
From: Damir Minnegalimov <damikdk@gmail.com>
Date: Mon, 10 Sep 2018 13:02:53 +0300
Subject: [PATCH 1/6] add reordering handlers

---
 README.md                        | 75 ++++++++++++++++++++++++++++++++
 RNTableView/RNTableView.h        |  4 ++
 RNTableView/RNTableView.m        | 12 +++++
 RNTableView/RNTableViewManager.m |  4 ++
 4 files changed, 95 insertions(+)

diff --git a/README.md b/README.md
index 8f1dde9..bc46dfb 100755
--- a/README.md
+++ b/README.md
@@ -405,6 +405,81 @@ an `imageWidth` is unnecessary.
 ;<Item image={require('../images/icon-success.png')} />
 ```
 
+## TableView inside ScrollView (like iOS Customise Control Center)
+
+In some cases you need place your TableView into ScrollView. There is some problems with handling
+scroll events,so we don't recommend do it with large large number of items
+### Without reordering
+
+Just explicitly set height for `TableView` and disable it's scrolling.
+
+```jsx
+render() {
+    return (
+        <ScrollView  style={{ flex: 1 }>
+            <TableView
+                scrollEnabled={false}
+                style={{
+                    // You should explicitly set height for TableView
+                    // default height of header in iOS is 26, row height is 44
+                    height: headerHeight + (items.count * itemHeight),
+                }}
+            >
+                <Section>
+                    {items.map(obj => (
+                        <Item key={obj.id} label={obj.name} />
+                    ));}
+                </Section>
+            </TableView>
+        </ScrollView>
+    )
+}
+```
+
+### With reordering
+
+Explicitly set height for `TableView`, disable it's scrolling and handle reorder actions
+for toggling `scrollEnabled` prop of container `ScrollView`:
+
+```jsx
+render() {
+    return (
+        <ScrollView 
+            scrollEnabled={this.state.scrollEnabled}
+            style={{ flex: 1 }
+        >
+            <TableView
+                editing
+                scrollEnabled={false}
+                onReorderingStart={() => {
+                    this.setState({ scrollEnabled: false });
+                }}
+                onReorderingEnd={() => {
+                    this.setState({ scrollEnabled: true });
+                }}
+                onReorderingCancel={() => {
+                    this.setState({ scrollEnabled: true });
+                }}
+                style={{
+                    // You should explicitly set height for TableView
+                    // default height of header in iOS is 26, row height is 44
+                    height: headerHeight + (items.count * itemHeight),
+                }}
+            >
+                <Section canMove canEdit>
+                    {items.map(obj => (
+                        <Item
+                            key={obj.id}
+                            label={obj.name}
+                        />
+                    ));}
+                </Section>
+            </TableView>
+        </ScrollView>
+    )
+}
+```
+
 ### Editable Complex Components
 
 Only `Item`s can be edited or moved. However you can create a complex component
diff --git a/RNTableView/RNTableView.h b/RNTableView/RNTableView.h
index bcc3011..5a94fb4 100644
--- a/RNTableView/RNTableView.h
+++ b/RNTableView/RNTableView.h
@@ -86,6 +86,10 @@
 @property(nonatomic, copy) RCTDirectEventBlock onScroll;
 @property(nonatomic, copy) RCTDirectEventBlock onRefresh;
 
+@property(nonatomic, copy) RCTBubblingEventBlock onReorderingStart;
+@property(nonatomic, copy) RCTBubblingEventBlock onReorderingEnd;
+@property(nonatomic, copy) RCTBubblingEventBlock onReorderingCancel;
+
 - (void)addRefresh;
 - (void)stopRefreshing;
 - (void)startRefreshing;
diff --git a/RNTableView/RNTableView.m b/RNTableView/RNTableView.m
index c519a80..b20821c 100644
--- a/RNTableView/RNTableView.m
+++ b/RNTableView/RNTableView.m
@@ -570,6 +570,18 @@ - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)
     return [value[@"canMove"] boolValue];
 }
 
+- (void)tableView:(UITableView *)tableView willBeginReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
+    self.onReorderingStart(@{});
+}
+
+- (void)tableView:(UITableView *)tableView didEndReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
+    self.onReorderingEnd(@{});
+}
+
+- (void)tableView:(UITableView *)tableView didCancelReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
+    self.onReorderingCancel(@{});
+}
+
 - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath {
     self.onChange(@{@"target":self.reactTag, @"sourceIndex":@(sourceIndexPath.row), @"sourceSection": @(sourceIndexPath.section), @"destinationIndex":@(destinationIndexPath.row), @"destinationSection":@(destinationIndexPath.section), @"mode": @"move"});
 }
diff --git a/RNTableView/RNTableViewManager.m b/RNTableView/RNTableViewManager.m
index 104eaf3..af5897e 100644
--- a/RNTableView/RNTableViewManager.m
+++ b/RNTableView/RNTableViewManager.m
@@ -71,6 +71,10 @@ - (NSArray *)customDirectEventTypes
 RCT_EXPORT_VIEW_PROPERTY(onScroll, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock)
 
+RCT_EXPORT_VIEW_PROPERTY(onReorderingStart, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onReorderingEnd, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onReorderingCancel, RCTBubblingEventBlock)
+
 RCT_CUSTOM_VIEW_PROPERTY(refreshing, BOOL, RNTableView) {
     view.refreshing = [RCTConvert BOOL:json];
 }

From c7a8553425ab9415614611c92e4a30de498ff5af Mon Sep 17 00:00:00 2001
From: Damir Minnegalimov <damikdk@gmail.com>
Date: Mon, 10 Sep 2018 13:13:22 +0300
Subject: [PATCH 2/6] fix typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bc46dfb..afc7901 100755
--- a/README.md
+++ b/README.md
@@ -408,7 +408,7 @@ an `imageWidth` is unnecessary.
 ## TableView inside ScrollView (like iOS Customise Control Center)
 
 In some cases you need place your TableView into ScrollView. There is some problems with handling
-scroll events,so we don't recommend do it with large large number of items
+scroll events,so we don't recommend do it with large number of items
 ### Without reordering
 
 Just explicitly set height for `TableView` and disable it's scrolling.

From c2a3c97f30e6034d037a4bed46124951e345aa78 Mon Sep 17 00:00:00 2001
From: Damir Minnegalimov <damikdk@gmail.com>
Date: Tue, 11 Sep 2018 10:36:30 +0300
Subject: [PATCH 3/6] fix crush with null blocks

---
 RNTableView/RNTableView.m | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/RNTableView/RNTableView.m b/RNTableView/RNTableView.m
index b20821c..c312d5a 100644
--- a/RNTableView/RNTableView.m
+++ b/RNTableView/RNTableView.m
@@ -571,15 +571,21 @@ - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)
 }
 
 - (void)tableView:(UITableView *)tableView willBeginReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
-    self.onReorderingStart(@{});
+    if (self.onReorderingStart) {
+        self.onReorderingStart(@{});
+    }
 }
 
 - (void)tableView:(UITableView *)tableView didEndReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
-    self.onReorderingEnd(@{});
+    if (self.onReorderingEnd) {
+        self.onReorderingEnd(@{});
+    }
 }
 
 - (void)tableView:(UITableView *)tableView didCancelReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
-    self.onReorderingCancel(@{});
+    if (self.onReorderingCancel) {
+        self.onReorderingCancel(@{});
+    }
 }
 
 - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath {

From 9af5eeb5aad46514a5774716bf7cd5b4c54027f2 Mon Sep 17 00:00:00 2001
From: Damir Minnegalimov <damikdk@gmail.com>
Date: Fri, 28 Sep 2018 12:40:23 +0300
Subject: [PATCH 4/6] add typescript definitions

---
 src/index.d.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/index.d.ts b/src/index.d.ts
index 828e49f..43c6ecc 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -287,6 +287,9 @@ interface TableViewProps {
    * Fired when pull to refresh is active
    */
   onRefresh?(): void
+  onReorderingStart?(): void
+  onReorderingEnd?(): void
+  onReorderingCancel?(): void
   onAccessoryPress?(event: AccessoryCallBack): void
   onWillDisplayCell?(event: DisplayCallBack): void
   onEndDisplayingCell?(event: DisplayCallBack): void

From 3c8bf53055be581c4378e9d5907f03e9ae9981f3 Mon Sep 17 00:00:00 2001
From: Damir Minnegalimov <damikdk@gmail.com>
Date: Fri, 28 Sep 2018 13:10:05 +0300
Subject: [PATCH 5/6] add example with reorderable TableView in ScrollView

---
 README.md                       | 106 ++++++++++++++++----------------
 example/src/index.js            |   7 +++
 example/src/screens/Example8.js |   2 +-
 example/src/screens/Example9.js |  62 +++++++++++++++++++
 4 files changed, 123 insertions(+), 54 deletions(-)
 create mode 100644 example/src/screens/Example9.js

diff --git a/README.md b/README.md
index afc7901..7a30435 100755
--- a/README.md
+++ b/README.md
@@ -408,31 +408,31 @@ an `imageWidth` is unnecessary.
 ## TableView inside ScrollView (like iOS Customise Control Center)
 
 In some cases you need place your TableView into ScrollView. There is some problems with handling
-scroll events,so we don't recommend do it with large number of items
+scroll events, so we don't recommend do it with large number of items
 ### Without reordering
 
 Just explicitly set height for `TableView` and disable it's scrolling.
 
 ```jsx
 render() {
-    return (
-        <ScrollView  style={{ flex: 1 }>
-            <TableView
-                scrollEnabled={false}
-                style={{
-                    // You should explicitly set height for TableView
-                    // default height of header in iOS is 26, row height is 44
-                    height: headerHeight + (items.count * itemHeight),
-                }}
-            >
-                <Section>
-                    {items.map(obj => (
-                        <Item key={obj.id} label={obj.name} />
-                    ));}
-                </Section>
-            </TableView>
-        </ScrollView>
-    )
+  return (
+    <ScrollView style={{ flex: 1 }}>
+      <TableView
+        scrollEnabled={false}
+        style={{
+            // You should explicitly set height for TableView
+            // default height of header in iOS is 26, row height is 44
+            height: headerHeight + (items.count * itemHeight),
+        }}
+      >
+        <Section>
+          {items.map(obj => (
+            <Item key={obj.id} label={obj.name} />
+          ))}
+        </Section>
+      </TableView>
+    </ScrollView>
+  )
 }
 ```
 
@@ -443,40 +443,40 @@ for toggling `scrollEnabled` prop of container `ScrollView`:
 
 ```jsx
 render() {
-    return (
-        <ScrollView 
-            scrollEnabled={this.state.scrollEnabled}
-            style={{ flex: 1 }
-        >
-            <TableView
-                editing
-                scrollEnabled={false}
-                onReorderingStart={() => {
-                    this.setState({ scrollEnabled: false });
-                }}
-                onReorderingEnd={() => {
-                    this.setState({ scrollEnabled: true });
-                }}
-                onReorderingCancel={() => {
-                    this.setState({ scrollEnabled: true });
-                }}
-                style={{
-                    // You should explicitly set height for TableView
-                    // default height of header in iOS is 26, row height is 44
-                    height: headerHeight + (items.count * itemHeight),
-                }}
-            >
-                <Section canMove canEdit>
-                    {items.map(obj => (
-                        <Item
-                            key={obj.id}
-                            label={obj.name}
-                        />
-                    ));}
-                </Section>
-            </TableView>
-        </ScrollView>
-    )
+  return (
+    <ScrollView
+      scrollEnabled={this.state.scrollEnabled}
+      style={{ flex: 1 }}
+    >
+      <TableView
+          editing
+          scrollEnabled={false}
+          onReorderingStart={() => {
+              this.setState({ scrollEnabled: false });
+          }}
+          onReorderingEnd={() => {
+              this.setState({ scrollEnabled: true });
+          }}
+          onReorderingCancel={() => {
+              this.setState({ scrollEnabled: true });
+          }}
+          style={{
+              // You should explicitly set height for TableView
+              // default height of header in iOS is 26, row height is 44
+              height: headerHeight + (items.count * itemHeight),
+          }}
+      >
+        <Section canMove canEdit>
+          {items.map(obj => (
+            <Item
+              key={obj.id}
+              label={obj.name}
+            />
+          ))}
+        </Section>
+      </TableView>
+    </ScrollView>
+  )
 }
 ```
 
diff --git a/example/src/index.js b/example/src/index.js
index 3f2404c..295e8c0 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -9,6 +9,7 @@ import Example5 from './screens/Example5'
 import Example6 from './screens/Example6'
 import Example7 from './screens/Example7'
 import Example8 from './screens/Example8'
+import Example9 from './screens/Example9'
 
 import TableViewExampleCell from './cells/TableViewExampleCell'
 
@@ -68,6 +69,12 @@ const Stack = createStackNavigator(
         title: 'Scroll to Index',
       },
     },
+    index: {
+      screen: Example9,
+      navigationOptions: {
+        title: 'Reorderable TableView in ScrollView',
+      },
+    },
   },
   {
     navigationOptions: {
diff --git a/example/src/screens/Example8.js b/example/src/screens/Example8.js
index f7cb3fb..a1098ea 100644
--- a/example/src/screens/Example8.js
+++ b/example/src/screens/Example8.js
@@ -7,7 +7,7 @@ const { Section, Item } = TableView
 class Example8 extends React.Component{
   render() {
     return(
-      <View style={{flex: 1}}>
+      <View style={{ flex: 1 }}>
 
         <Button title="Scroll To Section 2" onPress={() => this.tableView.scrollToIndex({index: 2, section: 1})} />
 
diff --git a/example/src/screens/Example9.js b/example/src/screens/Example9.js
new file mode 100644
index 0000000..d78c855
--- /dev/null
+++ b/example/src/screens/Example9.js
@@ -0,0 +1,62 @@
+import React from 'react'
+import { ScrollView } from 'react-native'
+import TableView from 'react-native-tableview'
+
+const { Section, Item } = TableView
+const headerHeight = 26;
+const itemHeight = 44;
+
+class Example9 extends React.Component {
+  state = {
+    scrollEnabled: true,
+    items: [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+      { id: 4, name: 'Item 4' },
+      { id: 5, name: 'Item 5' },
+      { id: 6, name: 'Item 6' },
+    ],
+  }
+
+  render() {
+    const { scrollEnabled, items } = this.state;
+
+    return(
+      <ScrollView
+        scrollEnabled={scrollEnabled}
+        style={{ flex: 1 }}
+      >
+        <TableView
+          editing
+          scrollEnabled={false}
+          onReorderingStart={() => {
+              this.setState({ scrollEnabled: false });
+          }}
+          onReorderingEnd={() => {
+              this.setState({ scrollEnabled: true });
+          }}
+          onReorderingCancel={() => {
+              this.setState({ scrollEnabled: true });
+          }}
+          style={{
+              // You should explicitly set height for TableView
+              // default height of header in iOS is 26, row height is 44
+              height: headerHeight + (items.count * itemHeight),
+          }}
+        >
+          <Section canMove>
+            {items.map(obj => (
+                <Item
+                  key={obj.id}
+                  label={obj.name}
+              />
+            ))}
+          </Section>
+        </TableView>
+      </ScrollView>
+    );
+  }
+}
+
+export default Example9

From d2292dbe33f9fcd6a649d49f4907998f2d00bf1a Mon Sep 17 00:00:00 2001
From: Damir Minnegalimov <damikdk@gmail.com>
Date: Wed, 7 Nov 2018 13:23:34 +0300
Subject: [PATCH 6/6] fix demo

---
 example/src/index.js            |  2 +-
 example/src/screens/Example9.js | 22 +++++++++++-----------
 example/src/screens/Home.js     |  1 +
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/example/src/index.js b/example/src/index.js
index 295e8c0..2d652b0 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -69,7 +69,7 @@ const Stack = createStackNavigator(
         title: 'Scroll to Index',
       },
     },
-    index: {
+    insideScrollView: {
       screen: Example9,
       navigationOptions: {
         title: 'Reorderable TableView in ScrollView',
diff --git a/example/src/screens/Example9.js b/example/src/screens/Example9.js
index d78c855..8abbe0c 100644
--- a/example/src/screens/Example9.js
+++ b/example/src/screens/Example9.js
@@ -25,31 +25,31 @@ class Example9 extends React.Component {
     return(
       <ScrollView
         scrollEnabled={scrollEnabled}
-        style={{ flex: 1 }}
+        contentContainerStyle={{ flex: 1 }}
       >
         <TableView
           editing
           scrollEnabled={false}
           onReorderingStart={() => {
-              this.setState({ scrollEnabled: false });
+            this.setState({ scrollEnabled: false });
           }}
           onReorderingEnd={() => {
-              this.setState({ scrollEnabled: true });
+            this.setState({ scrollEnabled: true });
           }}
           onReorderingCancel={() => {
-              this.setState({ scrollEnabled: true });
+            this.setState({ scrollEnabled: true });
           }}
           style={{
-              // You should explicitly set height for TableView
-              // default height of header in iOS is 26, row height is 44
-              height: headerHeight + (items.count * itemHeight),
+            // You should explicitly set height for TableView
+            // default height of header in iOS is 26, row height is 44
+            height: headerHeight + (items.length * itemHeight),
           }}
         >
-          <Section canMove>
+          <Section canMove canEdit>
             {items.map(obj => (
-                <Item
-                  key={obj.id}
-                  label={obj.name}
+              <Item
+                key={obj.id}
+                label={obj.name}
               />
             ))}
           </Section>
diff --git a/example/src/screens/Home.js b/example/src/screens/Home.js
index 1c18178..68b2fbc 100644
--- a/example/src/screens/Home.js
+++ b/example/src/screens/Home.js
@@ -28,6 +28,7 @@ const App = ({ navigation }: NavigationScreenConfigProps) => {
         <Item onPress={() => navigate('edit', { editing: true })}>Editing mode</Item>
         <Item onPress={() => navigate('refresh')}>Pull to Refresh</Item>
         <Item onPress={() => navigate('index')}>Scroll To Index</Item>
+        <Item onPress={() => navigate('insideScrollView')}>Reorderable Table in ScrollView</Item>
       </Section>
     </TableView>
   )