Skip to content

Commit 6735e9a

Browse files
authored
[Web] Fix Text with Touchables (#3418)
## Description #3379 introduced new check for `SVG`. However, `Text` is present in `RNSVGElements` list - it resulted in `Text` component not working correctly with `Touchables` ## Test plan Tested on **_NestedText_** example
1 parent 3f77800 commit 6735e9a

File tree

2 files changed

+11
-0
lines changed

2 files changed

+11
-0
lines changed

src/components/Text.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ export const Text = forwardRef(
3535
}
3636
};
3737

38+
// This is a special case for `Text` component. After https://github.com/software-mansion/react-native-gesture-handler/pull/3379 we check for
39+
// `displayName` field. However, `Text` from RN has this field set to `Text`, but is also present in `RNSVGElements` set.
40+
// We don't want to treat our `Text` as the one from `SVG`, therefore we add special field to ref.
41+
refHandler.rngh = true;
42+
3843
useEffect(() => {
3944
if (Platform.OS !== 'web') {
4045
return;

src/web/utils.ts

+6
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,12 @@ export function isRNSVGElement(viewRef: SVGRef | GestureHandlerRef) {
280280
// Second condition was introduced to handle case where SVG element was wrapped with
281281
// `createAnimatedComponent` from Reanimated.
282282
export function isRNSVGNode(node: any) {
283+
// If `ref` has `rngh` field, it means that component comes from Gesture Handler. This is a special case for
284+
// `Text` component, which is present in `RNSVGElements` set, yet we don't want to treat it as SVG.
285+
if (node.ref?.rngh) {
286+
return false;
287+
}
288+
283289
return (
284290
Object.getPrototypeOf(node?.type)?.name === 'WebShape' ||
285291
RNSVGElements.has(node?.type?.displayName)

0 commit comments

Comments
 (0)