diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index 1942140d3..b9fe3d152 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -16,6 +16,12 @@ const React = require('React'); const createReactClass = require('create-react-class'); const PropTypes = require('prop-types'); const Touchable = require('Touchable'); +const TouchableWithoutFeedback = require('TouchableWithoutFeedback'); +const ViewPropTypes = require('ViewPropTypes'); + +import type {EdgeInsetsProp} from 'EdgeInsetsPropType'; +import type {Props as TouchableWithoutFeedbackProps} from 'TouchableWithoutFeedback'; +import type {ViewStyleProp} from 'StyleSheet'; type Event = Object; @@ -26,6 +32,17 @@ type State = { const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; +type Props = $ReadOnly<{| + ...TouchableWithoutFeedbackProps, + + onPressWithCompletion?: ?Function, + onPressAnimationComplete?: ?Function, + pressRetentionOffset?: ?EdgeInsetsProp, + releaseVelocity?: ?number, + releaseBounciness?: ?number, + style?: ?ViewStyleProp, +|}>; + /** * Example of using the `TouchableMixin` to play well with other responder * locking views including `ScrollView`. `TouchableMixin` provides touchable @@ -33,20 +50,13 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; * `TouchableMixin` expects us to implement some abstract methods to handle * interesting interactions such as `handleTouchablePress`. */ -const TouchableBounce = createReactClass({ +const TouchableBounce = ((createReactClass({ displayName: 'TouchableBounce', mixins: [Touchable.Mixin, NativeMethodsMixin], propTypes: { - /** - * When true, indicates that the view is an accessibility element. By default, - * all the touchable elements are accessible. - */ - accessible: PropTypes.bool, + ...TouchableWithoutFeedback.propTypes, - onPress: PropTypes.func, - onPressIn: PropTypes.func, - onPressOut: PropTypes.func, // The function passed takes a callback to start the animation which should // be run after this onPress handler is done. You can use this (for example) // to update UI before starting the animation. @@ -61,17 +71,13 @@ const TouchableBounce = createReactClass({ * is disabled. Ensure you pass in a constant to reduce memory allocations. */ pressRetentionOffset: EdgeInsetsPropType, - /** - * This defines how far your touch can start away from the button. This is - * added to `pressRetentionOffset` when moving off of the button. - * ** NOTE ** - * The touch area never extends past the parent view bounds and the Z-index - * of sibling views always takes precedence if a touch hits two overlapping - * views. - */ - hitSlop: EdgeInsetsPropType, releaseVelocity: PropTypes.number.isRequired, releaseBounciness: PropTypes.number.isRequired, + /** + * Style to apply to the container/underlay. Most commonly used to make sure + * rounded corners match the wrapped component. + */ + style: ViewPropTypes.style, }, getDefaultProps: function() { @@ -138,7 +144,6 @@ const TouchableBounce = createReactClass({ }, touchableGetPressRectOffset: function(): typeof PRESS_RETENTION_OFFSET { - // $FlowFixMe Invalid prop usage return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET; }, @@ -153,30 +158,12 @@ const TouchableBounce = createReactClass({ render: function(): React.Element { return ( =0.53.0 site=react_native_fb,react_native_oss) This - * comment suppresses an error when upgrading Flow's support for React. - * To see the error delete this comment and run Flow. */ style={[{transform: [{scale: this.state.scale}]}, this.props.style]} accessible={this.props.accessible !== false} - /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This - * comment suppresses an error when upgrading Flow's support for React. - * To see the error delete this comment and run Flow. */ accessibilityLabel={this.props.accessibilityLabel} - /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This - * comment suppresses an error when upgrading Flow's support for React. - * To see the error delete this comment and run Flow. */ accessibilityComponentType={this.props.accessibilityComponentType} - /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This - * comment suppresses an error when upgrading Flow's support for React. - * To see the error delete this comment and run Flow. */ accessibilityTraits={this.props.accessibilityTraits} - /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This - * comment suppresses an error when upgrading Flow's support for React. - * To see the error delete this comment and run Flow. */ nativeID={this.props.nativeID} - /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This - * comment suppresses an error when upgrading Flow's support for React. - * To see the error delete this comment and run Flow. */ testID={this.props.testID} hitSlop={this.props.hitSlop} onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder} @@ -198,6 +185,6 @@ const TouchableBounce = createReactClass({ ); }, -}); +}): any): React.ComponentType); module.exports = TouchableBounce;