Commit 3a23bfa
authored
Fix
## Description
While investigating #2370 I've found out that if handler has `enabled: false` and moves to state `END`, it won't reach `UNDETERMINED`. This fact makes it useless because it is stuck at finished state. It happens because of [this line](https://github.com/software-mansion/react-native-gesture-handler/blob/a30f42f3fe5f08e9746864a7e6f7a15d15936a0f/src/web/tools/GestureHandlerOrchestrator.ts#L118). In order to fix that, I've decided to reset handler in case if it moves to `END` state while being inactive.
Fixes #2730
## Test plan
<details>
<summary>Tested on the following code</summary>
```jsx
import React, { useState } from 'react';
import {
View,
SafeAreaView,
Text,
TextInput,
TouchableOpacity as RNTouchable,
} from 'react-native';
import { TouchableOpacity as GHTouchable } from 'react-native-gesture-handler';
const BrokenGestureHandlerTouchable = () => {
const [disabled, setDisabled] = useState(true);
const [didClick, setDidClick] = useState(false);
return (
<View>
<Text>
Breaks with react-native-gesture-handler's TouchableOpacity. Refresh the
page, click the disabled button, edit the text, click the button that
should be enabled again and the click isn't triggered (no opacity change
and no function call). If you refresh the page, edit the text, then
click the enabled button, it works as expected.
</Text>
<TextInput
placeholder="Text Input"
placeholderTextColor="#AAAAAA"
onChangeText={(text) => {
setDisabled(false);
}}
/>
<GHTouchable
disabled={disabled}
onPress={() => {
setDidClick(true);
}}
style={{
borderWidth: 1,
borderColor: 'pink',
}}>
<Text>Click me! {`Disabled: ${disabled}. Clicked: ${didClick}`}</Text>
</GHTouchable>
</View>
);
};
const WorkingReactNativeTouchable = () => {
const [disabled, setDisabled] = useState(true);
const [didClick, setDidClick] = useState(false);
return (
<View>
<Text>
Works with react-native's TouchableOpacity. Refresh the page, click the
disabled button, edit the text, click the now-enabled button again and
it works.
</Text>
<TextInput
placeholder="Text Input"
placeholderTextColor="#AAAAAA"
onChangeText={(text) => {
setDisabled(false);
}}
/>
<RNTouchable
disabled={disabled}
onPress={() => {
setDidClick(true);
}}
style={{
borderWidth: 1,
borderColor: 'pink',
}}>
<Text>Click me! {`Disabled: ${disabled}. Clicked: ${didClick}`}</Text>
</RNTouchable>
</View>
);
};
export default function App() {
return (
<SafeAreaView>
<WorkingReactNativeTouchable />
<View
style={{
height: 50,
}}
/>
<BrokenGestureHandlerTouchable />
</SafeAreaView>
);
}
```
</details>inactive handlers staying at finished state (#2738)1 parent a30f42f commit 3a23bfa
1 file changed
+4
-0
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
118 | 118 | | |
119 | 119 | | |
120 | 120 | | |
| 121 | + | |
| 122 | + | |
| 123 | + | |
| 124 | + | |
121 | 125 | | |
122 | 126 | | |
123 | 127 | | |
| |||
0 commit comments