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

The press-retention offset defines a rect around a touchable component in which the press 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 pressRetentionOffset was a more informative name than pressRectOffset).

Libraries/Components/Touchable/TouchableBounce.js

@@ -12,23 +12,23 @@
 'use strict';
 
 var Animated = require('Animated');
+var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var Touchable = require('Touchable');
 
 var merge = require('merge');
 
+var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
+
+type DefaultProps = {
+  pressRetentionOffset: typeof PRESS_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
@@ -47,6 +47,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.
+     */
+    pressRetentionOffset: EdgeInsetsPropType,
+  },
+
+  getDefaultProps: function(): DefaultProps {
+    return {
+      pressRetentionOffset: PRESS_RETENTION_OFFSET,
+    };
   },
 
   getInitialState: function(): State {
@@ -95,8 +109,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 PRESS_RETENTION_OFFSET {
+    return this.props.pressRetentionOffset;
   },
 
   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');
@@ -31,6 +32,7 @@ var onlyChild = require('onlyChild');
 var DEFAULT_PROPS = {
   activeOpacity: 0.8,
   underlayColor: 'black',
+  pressRetentionOffset: {top: 20, left: 20, right: 20, bottom: 30},
 };
 
 /**
@@ -165,7 +167,7 @@ var TouchableHighlight = React.createClass({
   },
 
   touchableGetPressRectOffset: function() {
-    return PRESS_RECT_OFFSET;   // Always make sure to predeclare a constant!
+    return this.props.pressRetentionOffset;
   },
 
   touchableGetHighlightDelayMS: function() {
@@ -227,7 +229,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

@@ -13,6 +13,7 @@
 // Note (avik): add @flow when Flow supports spread properties in propTypes
 
 var Animated = require('Animated');
+var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var TimerMixin = require('react-timer-mixin');
@@ -23,6 +24,8 @@ var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var flattenStyle = require('flattenStyle');
 var keyOf = require('keyOf');
 
+var PRESS_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.
@@ -47,7 +50,6 @@ var keyOf = require('keyOf');
  * >
  * > If you wish to have to have several child components, wrap them in a View.
  */
-
 var TouchableOpacity = React.createClass({
   mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],
 
@@ -63,6 +65,7 @@ var TouchableOpacity = React.createClass({
   getDefaultProps: function() {
     return {
       activeOpacity: 0.2,
+      pressRetentionOffset: PRESS_RETENTION_OFFSET,
     };
   },
 
@@ -124,7 +127,7 @@ var TouchableOpacity = React.createClass({
   },
 
   touchableGetPressRectOffset: function() {
-    return PRESS_RECT_OFFSET;   // Always make sure to predeclare a constant!
+    return this.props.pressRetentionOffset;
   },
 
   touchableGetHighlightDelayMS: function() {
@@ -171,13 +174,4 @@ 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};
-
-
 module.exports = TouchableOpacity;

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -1,3 +1,4 @@
+
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
@@ -11,22 +12,21 @@
  */
 'use strict';
 
+var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var React = require('React');
 var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 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 PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
 
 type Event = Object;
 
+type DefaultProps = {
+  pressRetentionOffset: typeof PRESS_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
@@ -57,6 +57,20 @@ var TouchableWithoutFeedback = React.createClass({
      * Delay in ms, from onPressIn, before onLongPress is called.
      */
     delayLongPress: React.PropTypes.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. Ensure you pass in a constant to reduce memory allocations.
+     */
+    pressRetentionOffset: EdgeInsetsPropType,
+  },
+
+  getDefaultProps: function(): DefaultProps {
+    return {
+      pressRetentionOffset: PRESS_RETENTION_OFFSET,
+    }
   },
 
   getInitialState: function() {
@@ -91,8 +105,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 PRESS_RETENTION_OFFSET {
+    return this.props.pressRetentionOffset;
   },
 
   touchableGetHighlightDelayMS: function(): number {