-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add hitSlop prop on iOS and Android #5720
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,7 +29,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; | |
* 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 | ||
* one of the primary reason a "web" app doesn't feel "native". | ||
* | ||
* | ||
* > **NOTE**: TouchableWithoutFeedback supports only one child | ||
* > | ||
* > If you wish to have several child components, wrap them in a View. | ||
|
@@ -80,6 +80,15 @@ var TouchableWithoutFeedback = React.createClass({ | |
* 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, | ||
}, | ||
|
||
getInitialState: function() { | ||
|
@@ -118,6 +127,10 @@ var TouchableWithoutFeedback = React.createClass({ | |
return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET; | ||
}, | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. undefined This type is incompatible with object type |
||
touchableGetHitSlop: function(): ?Object { | ||
return this.props.hitSlop; | ||
}, | ||
|
||
touchableGetHighlightDelayMS: function(): number { | ||
return this.props.delayPressIn || 0; | ||
}, | ||
|
@@ -140,6 +153,7 @@ var TouchableWithoutFeedback = React.createClass({ | |
accessibilityTraits: this.props.accessibilityTraits, | ||
testID: this.props.testID, | ||
onLayout: this.props.onLayout, | ||
hitSlop: this.props.hitSlop, | ||
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder, | ||
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest, | ||
onResponderGrant: this.touchableHandleResponderGrant, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,7 @@ | |
*/ | ||
'use strict'; | ||
|
||
const EdgeInsetsPropType = require('EdgeInsetsPropType'); | ||
const NativeMethodsMixin = require('NativeMethodsMixin'); | ||
const PropTypes = require('ReactPropTypes'); | ||
const React = require('React'); | ||
|
@@ -53,7 +54,7 @@ const AccessibilityComponentType = [ | |
|
||
const forceTouchAvailable = (UIManager.RCTView.Constants && | ||
UIManager.RCTView.Constants.forceTouchAvailable) || false; | ||
|
||
const statics = { | ||
AccessibilityTraits, | ||
AccessibilityComponentType, | ||
|
@@ -201,6 +202,19 @@ const View = React.createClass({ | |
onMoveShouldSetResponder: PropTypes.func, | ||
onMoveShouldSetResponderCapture: PropTypes.func, | ||
|
||
/** | ||
* This defines how far a touch event can start away from the view. | ||
* Typical interface guidelines recommend touch targets that are at least | ||
* 30 - 40 points/density-independent pixels. If a Touchable view has a | ||
* height of 20 the touchable height can be extended to 40 with | ||
* `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}` | ||
* ** NOTE ** | ||
* The touch area never extends past the parent view bounds and the Z-index | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same as above |
||
* of sibling views always takes precedence if a touch hits two overlapping | ||
* views. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you add a short example here showing how I would extend the area by n pixels in each direction? What's a reasonable number? |
||
*/ | ||
hitSlop: EdgeInsetsPropType, | ||
|
||
/** | ||
* Invoked on mount and layout changes with | ||
* | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/** | ||
* Copyright (c) 2015-present, Facebook, Inc. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. An additional grant | ||
* of patent rights can be found in the PATENTS file in the same directory. | ||
*/ | ||
|
||
package com.facebook.react.touch; | ||
|
||
import android.graphics.Rect; | ||
|
||
import javax.annotation.Nullable; | ||
|
||
/** | ||
* This interface should be implemented by all {@link View} subclasses that want to use the | ||
* hitSlop prop to extend their touch areas. | ||
*/ | ||
public interface ReactHitSlopView { | ||
|
||
/** | ||
* Called when determining the touch area of a view. | ||
* @return A {@link Rect} representing how far to extend the touch area in each direction. | ||
*/ | ||
public @Nullable Rect getHitSlopRect(); | ||
|
||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be more obvious to the reader, something like ** NOTE ** or even "Experimental" would help here