diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index bada73041f274d..efbd78db9f10d1 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/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 { diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 47d24b8117d40b..cfdaf2b2911dd6 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/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 = { diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 39117aa93466f3..567e26d7d965b2 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/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; diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 227cbeae282782..04b77658c37b76 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/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 {