Add Text component

android/src/main/java/com/swmansion/gesturehandler/core/NativeViewGestureHandler.kt

@@ -8,6 +8,7 @@ import android.view.ViewGroup
 import android.widget.ScrollView
 import com.facebook.react.views.scroll.ReactScrollView
 import com.facebook.react.views.swiperefresh.ReactSwipeRefreshLayout
+import com.facebook.react.views.text.ReactTextView
 import com.facebook.react.views.textinput.ReactEditText
 import com.facebook.react.views.view.ReactViewGroup
 import com.swmansion.gesturehandler.react.RNGestureHandlerButtonViewManager
@@ -45,7 +46,11 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
 
   override fun shouldRecognizeSimultaneously(handler: GestureHandler<*>): Boolean {
     // if the gesture is marked by user as simultaneous with other or the hook return true
-    if (super.shouldRecognizeSimultaneously(handler) || hook.shouldRecognizeSimultaneously(handler)) {
+    hook.shouldRecognizeSimultaneously(handler)?.let {
+      return@shouldRecognizeSimultaneously it
+    }
+
+    if (super.shouldRecognizeSimultaneously(handler)) {
       return true
     }
 
@@ -80,6 +85,7 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
       is ReactEditText -> this.hook = EditTextHook(this, view)
       is ReactSwipeRefreshLayout -> this.hook = SwipeRefreshLayoutHook(this, view)
       is ReactScrollView -> this.hook = ScrollViewHook()
+      is ReactTextView -> this.hook = TextViewHook()
       is ReactViewGroup -> this.hook = ReactViewGroupHook()
     }
   }
@@ -102,7 +108,8 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
         cancel()
       } else {
         hook.sendTouchEvent(view, event)
-        if ((state == STATE_UNDETERMINED || state == STATE_BEGAN) && view.isPressed) {
+
+        if ((state == STATE_UNDETERMINED || state == STATE_BEGAN) && hook.canActivate(view)) {
           activate()
         }
 
@@ -172,6 +179,11 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
      */
     fun canBegin(event: MotionEvent) = true
 
+    /**
+     * Checks whether handler can activate. Used by TextViewHook.
+     */
+    fun canActivate(view: View) = true
+
     /**
      * Called after the gesture transitions to the END state.
      */
@@ -181,7 +193,7 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
      * @return Boolean value signalling whether the gesture can be recognized simultaneously with
      * other (handler). Returning false doesn't necessarily prevent it from happening.
      */
-    fun shouldRecognizeSimultaneously(handler: GestureHandler<*>) = false
+    fun shouldRecognizeSimultaneously(handler: GestureHandler<*>): Boolean? = null
 
     /**
      * shouldActivateOnStart and tryIntercept have priority over this method
@@ -208,6 +220,14 @@ class NativeViewGestureHandler : GestureHandler<NativeViewGestureHandler>() {
     fun sendTouchEvent(view: View?, event: MotionEvent) = view?.onTouchEvent(event)
   }
 
+  private class TextViewHook() : NativeViewGestureHandlerHook {
+    override fun shouldRecognizeSimultaneously(handler: GestureHandler<*>) = false
+
+    // We have to explicitly check for ReactTextView, since its `isPressed` flag is not set to `true`,
+    // in contrast to e.g. Touchable
+    override fun canActivate(view: View) = view.isPressed || view is ReactTextView
+  }
+
   private class EditTextHook(
     private val handler: NativeViewGestureHandler,
     private val editText: ReactEditText

apple/Handlers/RNNativeViewHandler.mm

@@ -16,9 +16,11 @@
 #import <React/UIView+React.h>
 
 #ifdef RCT_NEW_ARCH_ENABLED
+#import <React/RCTParagraphComponentView.h>
 #import <React/RCTScrollViewComponentView.h>
 #else
 #import <React/RCTScrollView.h>
+#import <React/RCTTextView.h>
 #endif // RCT_NEW_ARCH_ENABLED
 
 #pragma mark RNDummyGestureRecognizer
@@ -35,11 +37,24 @@ - (id)initWithGestureHandler:(RNGestureHandler *)gestureHandler
   return self;
 }
 
+- (BOOL)isHandlerAttachedToTextView
+{
+#if RCT_NEW_ARCH_ENABLED
+  return [self.view.superview isKindOfClass:[RCTParagraphComponentView class]];
+#else
+  return [self.view isKindOfClass:[RCTTextView class]];
+#endif
+}
+
 #if !TARGET_OS_OSX
 - (void)touchesBegan:(NSSet<RNGHUITouch *> *)touches withEvent:(UIEvent *)event
 {
   [_gestureHandler setCurrentPointerType:event];
   [_gestureHandler.pointerTracker touchesBegan:touches withEvent:event];
+
+  if ([self isHandlerAttachedToTextView]) {
+    self.state = UIGestureRecognizerStatePossible;
+  }
 }
 
 - (void)touchesMoved:(NSSet<RNGHUITouch *> *)touches withEvent:(UIEvent *)event
@@ -51,7 +66,8 @@ - (void)touchesMoved:(NSSet<RNGHUITouch *> *)touches withEvent:(UIEvent *)event
 - (void)touchesEnded:(NSSet<RNGHUITouch *> *)touches withEvent:(UIEvent *)event
 {
   [_gestureHandler.pointerTracker touchesEnded:touches withEvent:event];
-  self.state = UIGestureRecognizerStateFailed;
+
+  self.state = [self isHandlerAttachedToTextView] ? UIGestureRecognizerStateEnded : UIGestureRecognizerStateFailed;
 
   // For now, we are handling only the scroll view case.
   // If more views need special treatment, then we can switch to a delegate pattern
@@ -72,7 +88,8 @@ - (void)mouseDown:(NSEvent *)event
 {
   [_gestureHandler setCurrentPointerTypeToMouse];
 
-  self.state = NSGestureRecognizerStateBegan;
+  self.state = [self isHandlerAttachedToTextView] ? NSGestureRecognizerStatePossible : NSGestureRecognizerStateBegan;
+
   [_gestureHandler.pointerTracker touchesBegan:[NSSet setWithObject:event] withEvent:event];
 }
 

example/App.tsx

@@ -40,6 +40,7 @@
 import SwipeableReanimation from './src/release_tests/swipeableReanimation';
 import NestedGestureHandlerRootViewWithModal from './src/release_tests/nestedGHRootViewWithModal';
 import TwoFingerPan from './src/release_tests/twoFingerPan';
+import NestedText from './src/release_tests/nestedText';
 import { PinchableBox } from './src/recipes/scaleAndRotate';
 import PanAndScroll from './src/recipes/panAndScroll';
 import { BottomSheet } from './src/showcase/bottomSheet';
@@ -217,6 +218,11 @@
         component: TwoFingerPan,
         unsupportedPlatforms: new Set(['android', 'macos']),
       },
+      {
+        name: 'Nested Text',
+        component: NestedText,
+        unsupportedPlatforms: new Set(['macos']),
+      },
     ],
   },
   {
@@ -321,7 +327,7 @@
         renderSectionHeader={({ section: { sectionTitle } }) => (
           <Text style={styles.sectionTitle}>{sectionTitle}</Text>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
     </SafeAreaView>
   );

example/src/release_tests/nestedText/index.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Text,
+  GestureHandlerRootView,
+  TouchableOpacity,
+} from 'react-native-gesture-handler';
+
+export default function NestedText() {
+  const [counter, setCounter] = useState(0);
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <Text style={{ fontSize: 30 }}>{`Counter: ${counter}`}</Text>
+
+      <TouchableOpacity
+        onPress={() => {
+          console.log('Touchable');
+          setCounter((prev) => prev + 1);
+        }}>
+        <Text
+          style={[styles.textCommon, styles.outerText]}
+          onPress={() => {
+            console.log('Outer text');
+            setCounter((prev) => prev + 1);
+          }}>
+          {'Outer Text '}
+          <Text
+            style={[styles.textCommon, styles.innerText]}
+            onPress={() => {
+              console.log('Nested text');
+              setCounter((prev) => prev + 1);
+            }}>
+            {'Nested Text'}
+          </Text>
+        </Text>
+      </TouchableOpacity>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    gap: 20,
+  },
+
+  textCommon: {
+    padding: 10,
+    color: 'white',
+  },
+
+  outerText: {
+    fontSize: 30,
+    borderWidth: 2,
+    backgroundColor: '#131313',
+  },
+
+  innerText: {
+    fontSize: 25,
+    backgroundColor: '#F06312',
+  },
+});

src/components/Text.tsx

@@ -0,0 +1,57 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  RefObject,
+  useEffect,
+  useRef,
+} from 'react';
+import {
+  Platform,
+  Text as RNText,
+  TextProps as RNTextProps,
+} from 'react-native';
+
+import { Gesture, GestureDetector } from '../';
+
+export const Text = forwardRef(
+  (props: RNTextProps, ref: ForwardedRef<RNText>) => {
+    const { onPress, ...rest } = props;
+    const textRef = useRef<RNText | null>(null);
+    const native = Gesture.Native().runOnJS(true);
+
+    const refHandler = (node: any) => {
+      textRef.current = node;
+
+      if (ref === null) {
+        return;
+      }
+
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    };
+
+    useEffect(() => {
+      if (Platform.OS !== 'web') {
+        return;
+      }
+
+      const textElement = ref
+        ? (ref as RefObject<RNText>).current
+        : textRef.current;
+
+      // @ts-ignore at this point we are sure that text is div
+      textElement?.setAttribute('rnghtext', 'true');
+    }, []);
+
+    return (
+      <GestureDetector gesture={native}>
+        <RNText onPress={onPress} ref={refHandler} {...rest} />
+      </GestureDetector>
+    );
+  }
+);
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type Text = typeof Text & RNText;

src/index.ts

@@ -102,6 +102,7 @@ export {
   FlatList,
   RefreshControl,
 } from './components/GestureComponents';
+export { Text } from './components/Text';
 export { HoverEffect } from './handlers/gestures/hoverGesture';
 export type {
   // Events

src/web/handlers/NativeViewGestureHandler.ts

@@ -79,7 +79,11 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
 
     this.begin();
-    if (this.buttonRole) {
+
+    const view = this.delegate.getView() as HTMLElement;
+    const isRNGHText = view.hasAttribute('rnghtext');
+
+    if (this.buttonRole || isRNGHText) {
       this.activate();
     }
   }