Expose toggleRowActive to renderItem component

- Use `manuallyActivateRows={true}` to have the `toggleRowActive` prop exposed to rendered rows.
- The out of box timer with pan responder will not activate rows.

Author: Brad Bumbalough

README.md

@@ -29,13 +29,14 @@ npm i react-native-sortable-list --save
 - **horizontal?** (boolean) when true, the SortableList's children are arranged horizontally in a row instead of vertically in a column. The default value is false.
 - **sortingEnabled?** (boolean) when false, rows are not sortable. The default value is true.
 - **scrollEnabled?** (boolean) when false, the content does not scrollable. The default value is true.
+- **manuallyActivateRows?** (bool) whether you intend to use the `toggleRowActive` method to activate a row or use the out of box solution.
 - **autoscrollAreaSize?** (number) determines the height for vertical list and the width for horizontal list of the area at the begining and the end of the list that will trigger autoscrolling. Defaults to 60.<br />
 - **rowActivationTime?** (number) determines time delay in ms before pressed row becomes active. Defaults to 200 ms.<br />
 - **refreshControl?** (element)<br />
 A RefreshControl that works the same way as a ScrollView's refreshControl.
 - **renderRow** (function)<br />
 `({key, index, data, disabled, active}) => renderable`<br />
-Takes a row key, row index, data entry from the data source and its statuses disabled, active and should return a renderable component to be rendered as the row.<br />
+Takes a row key, row index, data entry from the data source and its statuses disabled, active and should return a renderable component to be rendered as the row. The child component will receive a method called `toggleRowActive` (only if `manuallyActivateRows={true}`) to manually activate the row. Useful if you have multiple touch responders in your view.<br />
 - **renderFooter?** (function)<br />
 `() => renderable`<br />
 Renders returned component at the bottom of the list.

src/Row.js

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import {Animated, PanResponder, StyleSheet} from 'react-native';
 import {shallowEqual} from './utils';
@@ -14,6 +14,7 @@ export default class Row extends Component {
       x: PropTypes.number,
       y: PropTypes.number,
     }),
+    manuallyActivateRows: PropTypes.bool,
     activationTime: PropTypes.number,
 
     // Will be called on long press.
@@ -55,19 +56,27 @@ export default class Row extends Component {
     },
 
     onPanResponderGrant: (e, gestureState) => {
-      e.persist();
-
-      this._longPressTimer = setTimeout(() => {
+      e.persist();        
+      if (!this.props.manuallyActivateRows) {
+        this._longPressTimer = setTimeout(() => {
+          this._target = e.nativeEvent.target;
+          this._prevGestureState = {
+            ...gestureState,
+            moveX: gestureState.x0,
+            moveY: gestureState.y0,
+          };
+          if (!this._active) {
+            this._toggleActive(e, gestureState);
+          }
+        }, this.props.activationTime);
+      } else {
         this._target = e.nativeEvent.target;
         this._prevGestureState = {
           ...gestureState,
           moveX: gestureState.x0,
           moveY: gestureState.y0,
         };
-        if (!this._active) {
-          this._toggleActive(e, gestureState);
-        }
-      }, this.props.activationTime);
+      }
     },
 
     onPanResponderMove: (e, gestureState) => {
@@ -164,7 +173,7 @@ export default class Row extends Component {
         {...this._panResponder.panHandlers}
         style={rowStyle}
         onLayout={this._onLayout}>
-        {children}
+        {this.props.manuallyActivateRows && children ? cloneElement(children, { toggleRowActive: this._toggleActive.bind(this) }) : children}
       </Animated.View>
     );
   }

src/SortableList.js

@@ -25,6 +25,7 @@ export default class SortableList extends Component {
     refreshControl: PropTypes.element,
     autoscrollAreaSize: PropTypes.number,
     rowActivationTime: PropTypes.number,
+    manuallyActivateRows: PropTypes.bool,
 
     renderRow: PropTypes.func.isRequired,
     renderFooter: PropTypes.func,
@@ -38,6 +39,7 @@ export default class SortableList extends Component {
     sortingEnabled: true,
     scrollEnabled: true,
     autoscrollAreaSize: 60,
+    manuallyActivateRows: false
   }
 
   /**
@@ -248,7 +250,8 @@ export default class SortableList extends Component {
           onActivate={this._onActivateRow.bind(this, key, index)}
           onPress={this._onPressRow.bind(this, key)}
           onRelease={this._onReleaseRow.bind(this, key)}
-          onMove={this._onMoveRow}>
+          onMove={this._onMoveRow}
+          manuallyActivateRows={this.props.manuallyActivateRows}>
           {renderRow({
             key,
             data: data[key],