diff --git a/README.md b/README.md
index 8f1dde9..7a30435 100755
--- a/README.md
+++ b/README.md
@@ -405,6 +405,81 @@ 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
+### Without reordering
+
+Just explicitly set height for `TableView` and disable it's scrolling.
+
+```jsx
+render() {
+ return (
+
+
+
+ {items.map(obj => (
+
+ ))}
+
+
+
+ )
+}
+```
+
+### 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 (
+
+ {
+ 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),
+ }}
+ >
+
+ {items.map(obj => (
+
+ ))}
+
+
+
+ )
+}
+```
+
### 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..c312d5a 100644
--- a/RNTableView/RNTableView.m
+++ b/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"});
}
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];
}
diff --git a/example/src/index.js b/example/src/index.js
index 3f2404c..2d652b0 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',
},
},
+ insideScrollView: {
+ 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(
-
+