Skip to content

Commit 56a14fb

Browse files
authored
[Web] Remove collapsable property (#3203)
## Description Currently when we add component into `GestureDetector`, we add `collapsable={false}` to its props. However, it [does nothing on web](necolas/react-native-web#1703), so we can safely remove it. This way we can get rid of the following error: ``` Warning: Received `false` for a non-boolean attribute `collapsable`. ``` Closes #3201 ## Test plan <details> <summary>Tested on the following code:</summary> ```jsx import { GestureHandlerRootView, GestureDetector, Gesture, } from 'react-native-gesture-handler'; import { View } from 'react-native'; import { Svg, Circle } from 'react-native-svg'; import { useState, useCallback } from 'react'; export default function App() { const [circleFill, setCircleFill] = useState('blue'); const switchCircleColor = useCallback( () => setCircleFill((old) => (old === 'blue' ? 'brown' : 'blue')), [setCircleFill] ); const tapGestureCircle = Gesture.Tap().runOnJS(true).onEnd(switchCircleColor); return ( <GestureHandlerRootView style={{ flex: 1, paddingTop: 200 }}> <View style={{ padding: 10, borderWidth: 1, alignSelf: 'flex-start' }}> <Svg width={200} height={200}> <GestureDetector gesture={tapGestureCircle}> <Circle r={200} cx={210} cy={210} fill={circleFill} /> </GestureDetector> </Svg> </View> </GestureHandlerRootView> ); } ``` </details>
1 parent 46a7892 commit 56a14fb

File tree

1 file changed

+11
-17
lines changed

1 file changed

+11
-17
lines changed

src/handlers/gestures/GestureDetector/Wrap.web.tsx

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,28 @@ import { tagMessage } from '../../../utils';
55
export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
66
({ children }, ref) => {
77
try {
8-
// I don't think that fighting with types over such a simple function is worth it
9-
// The only thing it does is add 'collapsable: false' to the child component
10-
// to make sure it is in the native view hierarchy so the detector can find
11-
// correct viewTag to attach to.
128
// eslint-disable-next-line @typescript-eslint/no-explicit-any
139
const child: any = React.Children.only(children);
1410

1511
const isRNSVGNode =
1612
Object.getPrototypeOf(child?.type)?.name === 'WebShape';
1713

18-
const additionalProps = isRNSVGNode
19-
? { collapsable: false, ref }
20-
: { collapsable: false };
14+
if (isRNSVGNode) {
15+
const clone = React.cloneElement(
16+
child,
17+
{ ref },
18+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
19+
child.props.children
20+
);
2121

22-
const clone = React.cloneElement(
23-
child,
24-
additionalProps,
25-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
26-
child.props.children
27-
);
22+
return clone;
23+
}
2824

29-
return isRNSVGNode ? (
30-
clone
31-
) : (
25+
return (
3226
<div
3327
ref={ref as LegacyRef<HTMLDivElement>}
3428
style={{ display: 'contents' }}>
35-
{clone}
29+
{child}
3630
</div>
3731
);
3832
} catch (e) {

0 commit comments

Comments
 (0)