Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pressability: Restore Press In Delay

Browse Source 
Summary:
During the development of `Pressability`, I removed the default "press in delay" in order to minimize differences between `Touchable` (as used by `TouchableWithoutFeedback`) and `Pressability`. However, it was a bug that `TouchableWithoutFeedback` zero'd out the default press delay.

This restores the original "press in delay". This will make it so that when users swipe over a pressable element in a scroll view, the scroll view will have time to cancel the touch and prevent a press in behavior (visual jank).

Changelog:
[General] [Changed] - Increase default `delayPressIn` value for `Pressability` to 130ms.

Reviewed By: TheSavior

Differential Revision: D20176152

fbshipit-source-id: 5d6481395ee501bcab20ab98cb46a6be2c423ddf
This commit is contained in:
Tim Yung
2020-03-04 11:06:48 -08:00
committed by Facebook Github Bot
parent fbb94a30bc
commit fc45530ded
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Libraries/Pressability/Pressability.js
+2 -2
View File
@@ -271,8 +271,8 @@ const isPressInSignal = signal =>
const isTerminalSignal = signal =>
signal === 'RESPONDER_TERMINATED' || signal === 'RESPONDER_RELEASE';
const DEFAULT_LONG_PRESS_DELAY_MS = 500;
const DEFAULT_PRESS_DELAY_MS = 0;
const DEFAULT_LONG_PRESS_DELAY_MS = 370; // 500 - 130
const DEFAULT_PRESS_DELAY_MS = 130;
const DEFAULT_PRESS_RECT_OFFSETS = {
bottom: 30,
left: 20,
Libraries/Pressability/__tests__/Pressability-test.js
+14 -6
View File
@@ -354,7 +354,7 @@ describe('Pressability', () => {
expect(config.onLongPress).toBeCalled();
});
it('is called if pressed for 500ms after the press delay', () => {
it('is called if pressed for 370ms after the press delay', () => {
const {config, handlers} = createMockPressability({
delayPressIn: 100,
});
@@ -363,7 +363,7 @@ describe('Pressability', () => {
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(createMockPressEvent('onResponderMove'));
jest.advanceTimersByTime(599);
jest.advanceTimersByTime(469);
expect(config.onLongPress).not.toBeCalled();
jest.advanceTimersByTime(1);
expect(config.onLongPress).toBeCalled();
@@ -392,7 +392,7 @@ describe('Pressability', () => {
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(createMockPressEvent('onResponderMove'));
jest.advanceTimersByTime(9);
jest.advanceTimersByTime(139);
expect(config.onLongPress).not.toBeCalled();
jest.advanceTimersByTime(1);
expect(config.onLongPress).toBeCalled();
@@ -432,7 +432,7 @@ describe('Pressability', () => {
expect(config.onPressIn).toBeCalled();
});
it('is called after no delay by default', () => {
it('is called after the default delay by default', () => {
const {config, handlers} = createMockPressability({
delayPressIn: null,
});
@@ -441,10 +441,13 @@ describe('Pressability', () => {
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(createMockPressEvent('onResponderMove'));
jest.advanceTimersByTime(129);
expect(config.onPressIn).not.toBeCalled();
jest.advanceTimersByTime(1);
expect(config.onPressIn).toBeCalled();
});
it('falls back to no delay if `delayPressIn` is omitted', () => {
it('falls back to the default delay if `delayPressIn` is omitted', () => {
const {config, handlers} = createMockPressability({
delayPressIn: null,
});
@@ -453,6 +456,9 @@ describe('Pressability', () => {
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));
handlers.onResponderMove(createMockPressEvent('onResponderMove'));
jest.advanceTimersByTime(129);
expect(config.onPressIn).not.toBeCalled();
jest.advanceTimersByTime(1);
expect(config.onPressIn).toBeCalled();
});
@@ -561,7 +567,9 @@ describe('Pressability', () => {
describe('beyond bounds of hit rect', () => {
it('`onPress` only is not called when no delay', () => {
mockUIManagerMeasure();
const {config, handlers} = createMockPressability();
const {config, handlers} = createMockPressability({
delayPressIn: 0,
});
handlers.onStartShouldSetResponder();
handlers.onResponderGrant(createMockPressEvent('onResponderGrant'));