Skip to content

Commit 671b66f

Browse files
authored
fix(web): broken at dropping (#3125)
## Description After upgraded RN from 0.74 to 0.75 ( follow [expo changelog](https://expo.dev/changelog/2024/08-14-react-native-0.75)), web page is broken when I do a drag and drop. console log: https://gist.github.com/MJRT/149969001b9dd853e6b7d0d413afcea7 expo-device-info: https://gist.github.com/MJRT/2b772c0879f0a867ffb6bcf4a18d8637 It return to normal after adding this check. <!-- Description and motivation for this PR. Include 'Fixes #<number>' if this is fixing some issue. --> ## Test plan I use `pnpm patch` in my project, and it's all ok. Since this is a simple and non-invasive change, I didn't write additional test. <!-- Describe how did you test this change here. -->
1 parent 5846054 commit 671b66f

File tree

2 files changed

+28
-5
lines changed

2 files changed

+28
-5
lines changed

example/App.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,11 @@ const EXAMPLES: ExamplesSection[] = [
187187
{ name: 'Double draggable', component: DoubleDraggable },
188188
{ name: 'Rows', component: Rows },
189189
{ name: 'Nested Fling', component: NestedFling },
190-
{ name: 'Combo', component: ComboWithGHScroll },
190+
{
191+
name: 'Combo',
192+
component: ComboWithGHScroll,
193+
unsupportedPlatforms: new Set(['web']),
194+
},
191195
{ name: 'Touchables', component: TouchablesIndex as React.ComponentType },
192196
{ name: 'MouseButtons', component: MouseButtons },
193197
{

src/RNGestureHandlerModule.web.ts

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ import NodeManager from './web/tools/NodeManager';
99
import * as HammerNodeManager from './web_hammer/NodeManager';
1010
import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
1111

12+
// init method is called inside attachGestureHandler function. However, this function may
13+
// fail when received view is not valid HTML element. On the other hand, dropGestureHandler
14+
// will be called even if attach failed, which will result in crash.
15+
//
16+
// We use this flag to check whether or not dropGestureHandler should be called.
17+
let shouldPreventDrop = false;
18+
1219
export default {
1320
handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
1421
console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
@@ -60,10 +67,18 @@ export default {
6067
_actionType: ActionType,
6168
propsRef: React.RefObject<unknown>
6269
) {
63-
if (
64-
!(newView instanceof HTMLElement || newView instanceof React.Component)
65-
) {
66-
return;
70+
if (!(newView instanceof Element || newView instanceof React.Component)) {
71+
shouldPreventDrop = true;
72+
73+
const handler = isNewWebImplementationEnabled()
74+
? NodeManager.getHandler(handlerTag)
75+
: HammerNodeManager.getHandler(handlerTag);
76+
77+
const handlerName = handler.constructor.name;
78+
79+
throw new Error(
80+
`${handlerName} with tag ${handlerTag} received child that is not valid HTML element.`
81+
);
6782
}
6883

6984
if (isNewWebImplementationEnabled()) {
@@ -94,6 +109,10 @@ export default {
94109
}
95110
},
96111
dropGestureHandler(handlerTag: number) {
112+
if (shouldPreventDrop) {
113+
return;
114+
}
115+
97116
if (isNewWebImplementationEnabled()) {
98117
NodeManager.dropGestureHandler(handlerTag);
99118
} else {

0 commit comments

Comments
 (0)