add reordering handlers

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 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

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;

RNTableView/RNTableView.m

@@ -570,6 +570,24 @@ - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)
     return [value[@"canMove"] boolValue];
 }
 
+- (void)tableView:(UITableView *)tableView willBeginReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
+    if (self.onReorderingStart) {
+        self.onReorderingStart(@{});
+    }
+}
+
+- (void)tableView:(UITableView *)tableView didEndReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
+    if (self.onReorderingEnd) {
+        self.onReorderingEnd(@{});
+    }
+}
+
+- (void)tableView:(UITableView *)tableView didCancelReorderingRowAtIndexPath:(NSIndexPath *)indexPath {
+    if (self.onReorderingCancel) {
+        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"});
 }

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];
 }

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',
       },
     },
+    insideScrollView: {
+      screen: Example9,
+      navigationOptions: {
+        title: 'Reorderable TableView in ScrollView',
+      },
+    },
   },
   {
     navigationOptions: {

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})} />
 

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}
+        contentContainerStyle={{ 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.length * itemHeight),
+          }}
+        >
+          <Section canMove canEdit>
+            {items.map(obj => (
+              <Item
+                key={obj.id}
+                label={obj.name}
+              />
+            ))}
+          </Section>
+        </TableView>
+      </ScrollView>
+    );
+  }
+}
+
+export default Example9

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>
   )

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