[Touchable] Expose the touch-retention offset as a prop

The touch-retention offset defines a rect around a touchable component in which the touch is retained. Easiest way to see this is to touch a button in a real navigation bar and slide your finger out of the range and back in. This diff exposes the offset as a prop (I thought touchRetentionOffset was a more informative name than pressRectOffset).

Libraries/Components/Touchable/TouchableBounce.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var AnimationExperimental = require('AnimationExperimental');
+var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var POPAnimation = require('POPAnimation');
 var React = require('React');
@@ -20,17 +21,16 @@ var Touchable = require('Touchable');
 var merge = require('merge');
 var onlyChild = require('onlyChild');
 
+var TOUCH_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
+
+type DefaultProps = {
+  touchRetentionOffset: typeof TOUCH_RETENTION_OFFSET;
+};
+
 type State = {
   animationID: ?number;
 };
 
-/**
- * When the scroll view is disabled, this defines how far your touch may move
- * off of the button, before deactivating the button. Once deactivated, try
- * moving it back and you'll see that the button is once again reactivated!
- * Move it back and forth several times while the scroll view is disabled.
- */
-var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 /**
  * Example of using the `TouchableMixin` to play well with other responder
  * locking views including `ScrollView`. `TouchableMixin` provides touchable
@@ -49,6 +49,20 @@ var TouchableBounce = React.createClass({
     onPressWithCompletion: React.PropTypes.func,
     // the function passed is called after the animation is complete
     onPressAnimationComplete: React.PropTypes.func,
+    /**
+     * When the scroll view is disabled, this defines how far your touch may
+     * move off of the button, before deactivating the button. Once deactivated,
+     * try moving it back and you'll see that the button is once again
+     * reactivated! Move it back and forth several times while the scroll view
+     * is disabled. Ensure you pass in a constant to reduce memory allocations.
+     */
+    touchRetentionOffset: EdgeInsetsPropType,
+  },
+
+  getDefaultProps: function(): DefaultProps {
+    return {
+      touchRetentionOffset: TOUCH_RETENTION_OFFSET,
+    };
   },
 
   getInitialState: function(): State {
@@ -113,8 +127,8 @@ var TouchableBounce = React.createClass({
     this.props.onPress && this.props.onPress();
   },
 
-  touchableGetPressRectOffset: function(): typeof PRESS_RECT_OFFSET {
-    return PRESS_RECT_OFFSET;   // Always make sure to predeclare a constant!
+  touchableGetPressRectOffset: function(): typeof TOUCH_RETENTION_OFFSET {
+    return this.props.touchRetentionOffset;
   },
 
   touchableGetHighlightDelayMS: function(): number {

Libraries/Components/Touchable/TouchableHighlight.js

@@ -12,6 +12,7 @@
 
 // Note (avik): add @flow when Flow supports spread properties in propTypes
 
+var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
@@ -30,6 +31,7 @@ var onlyChild = require('onlyChild');
 var DEFAULT_PROPS = {
   activeOpacity: 0.8,
   underlayColor: 'black',
+  touchRetentionOffset: {top: 20, left: 20, right: 20, bottom: 30},
 };
 
 /**
@@ -153,7 +155,7 @@ var TouchableHighlight = React.createClass({
   },
 
   touchableGetPressRectOffset: function() {
-    return PRESS_RECT_OFFSET;   // Always make sure to predeclare a constant!
+    return this.props.touchRetentionOffset;
   },
 
   _showUnderlay: function() {
@@ -197,7 +199,6 @@ var TouchableHighlight = React.createClass({
   }
 });
 
-var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 var CHILD_REF = keyOf({childRef: null});
 var UNDERLAY_REF = keyOf({underlayRef: null});
 var INACTIVE_CHILD_PROPS = {

Libraries/Components/Touchable/TouchableOpacity.js

@@ -12,6 +12,7 @@
 
 // Note (avik): add @flow when Flow supports spread properties in propTypes
 
+var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var POPAnimationMixin = require('POPAnimationMixin');
 var React = require('React');
@@ -24,6 +25,8 @@ var flattenStyle = require('flattenStyle');
 var keyOf = require('keyOf');
 var onlyChild = require('onlyChild');
 
+var TOUCH_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
+
 /**
  * A wrapper for making views respond properly to touches.
  * On press down, the opacity of the wrapped view is decreased, dimming it.
@@ -45,7 +48,6 @@ var onlyChild = require('onlyChild');
  * },
  * ```
  */
-
 var TouchableOpacity = React.createClass({
   mixins: [Touchable.Mixin, NativeMethodsMixin, POPAnimationMixin],
 
@@ -61,6 +63,7 @@ var TouchableOpacity = React.createClass({
   getDefaultProps: function() {
     return {
       activeOpacity: 0.2,
+      touchRetentionOffset: TOUCH_RETENTION_OFFSET,
     };
   },
 
@@ -121,7 +124,7 @@ var TouchableOpacity = React.createClass({
   },
 
   touchableGetPressRectOffset: function() {
-    return PRESS_RECT_OFFSET;   // Always make sure to predeclare a constant!
+    return this.props.touchRetentionOffset;
   },
 
   touchableGetHighlightDelayMS: function() {
@@ -143,14 +146,6 @@ var TouchableOpacity = React.createClass({
   },
 });
 
-/**
- * When the scroll view is disabled, this defines how far your touch may move
- * off of the button, before deactivating the button. Once deactivated, try
- * moving it back and you'll see that the button is once again reactivated!
- * Move it back and forth several times while the scroll view is disabled.
- */
-var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
-
 var CHILD_REF = keyOf({childRef: null});
 
 module.exports = TouchableOpacity;

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -11,20 +11,19 @@
  */
 'use strict';
 
+var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var React = require('React');
 var Touchable = require('Touchable');
 var onlyChild = require('onlyChild');
 
-/**
- * When the scroll view is disabled, this defines how far your touch may move
- * off of the button, before deactivating the button. Once deactivated, try
- * moving it back and you'll see that the button is once again reactivated!
- * Move it back and forth several times while the scroll view is disabled.
- */
-var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
+var TOUCH_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
 type Event = Object;
 
+type DefaultProps = {
+  touchRetentionOffset: typeof TOUCH_RETENTION_OFFSET;
+};
+
 /**
  * Do not use unless you have a very good reason. All the elements that
  * respond to press should have a visual feedback when touched. This is
@@ -42,6 +41,20 @@ var TouchableWithoutFeedback = React.createClass({
     onPressIn: React.PropTypes.func,
     onPressOut: React.PropTypes.func,
     onLongPress: React.PropTypes.func,
+    /**
+     * When the scroll view is disabled, this defines how far your touch may
+     * move off of the button, before deactivating the button. Once deactivated,
+     * try moving it back and you'll see that the button is once again
+     * reactivated! Move it back and forth several times while the scroll view
+     * is disabled. Ensure you pass in a constant to reduce memory allocations.
+     */
+    touchRetentionOffset: EdgeInsetsPropType,
+  },
+
+  getDefaultProps: function(): DefaultProps {
+    return {
+      touchRetentionOffset: TOUCH_RETENTION_OFFSET,
+    }
   },
 
   getInitialState: function() {
@@ -68,8 +81,8 @@ var TouchableWithoutFeedback = React.createClass({
     this.props.onLongPress && this.props.onLongPress();
   },
 
-  touchableGetPressRectOffset: function(): typeof PRESS_RECT_OFFSET {
-    return PRESS_RECT_OFFSET;   // Always make sure to predeclare a constant!
+  touchableGetPressRectOffset: function(): typeof TOUCH_RETENTION_OFFSET {
+    return this.props.touchRetentionOffset;
   },
 
   touchableGetHighlightDelayMS: function(): number {