Merge branch '@mbert/docs-review' into @mbert/docs-root-view

Author: m-bert

packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx

@@ -10,7 +10,7 @@ import CollapsibleCode from '@site/src/components/CollapsibleCode';
 
 ## Gesture Detector
 
-The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook API or the builder pattern. Additionally, it allows for the recognition of multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). `GestureDetector` interacts closely with [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section.
+The `GestureDetector` is a key component of `react-native-gesture-handler`. It supports gestures created either using the hook-based API or the builder pattern. Additionally, it allows for the recognition of multiple gestures through [gesture composition](/docs/fundamentals/gesture-composition). `GestureDetector` interacts closely with [`Reanimated`](https://docs.swmansion.com/react-native-reanimated/). For more details, refer to the [Integration with Reanimated](/docs/fundamentals/reanimated-interactions) section.
 
 When using hook API, you can also integrate it directly with the [Animated API](https://reactnative.dev/docs/animated). More on that can be found in [Integration with Animated](/docs/fundamentals/animated-interactions) section.
 

packages/docs-gesture-handler/docs/fundamentals/installation.mdx

@@ -93,7 +93,7 @@ Gesture Handler on Android is implemented in Kotlin. If you need to set a specif
 ```groovy
 buildscript {
     ext {
-        kotlinVersion = "1.6.21"
+        kotlinVersion = "2.1.20"
     }
 }
 ```

packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx

@@ -11,11 +11,11 @@ RNGH3 allows to manually control [gestures lifecycle](/docs/under-the-hood/state
 
 ## State management
 
-Manual state management is based on `handlerTag`. There are two ways of manual state control. Some gestures also support [`manualActivation`](#manualactivation) property, which blocks their automatic activation, event if they met specific criteria.
+Manual state management is based on `handlerTag`. There are two ways of manual state control. Some gestures also support [`manualActivation`](#manualactivation) property, which blocks their automatic activation, even if they meet their activation criteria.
 
 ### Inside gesture definition
 
-If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter. 
+If you want to manipulate gesture's state in its callbacks, you can get `handlerTag` from event parameter.
 
 <CollapsibleCode
 label="Show full example"

packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx

@@ -105,9 +105,6 @@ const styles = StyleSheet.create({
 
 ### direction
 
-```ts
-```
-
 <CollapsibleCode 
 label="Show composed types definitions"
 expandedLabel="Hide composed types definitions"

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandlerOrchestrator.kt

@@ -8,6 +8,7 @@ import android.view.ViewGroup
 import android.widget.EditText
 import com.facebook.react.uimanager.ReactCompoundView
 import com.facebook.react.uimanager.RootView
+import com.swmansion.gesturehandler.react.RNGestureHandlerDetectorView
 import com.swmansion.gesturehandler.react.RNGestureHandlerRootHelper
 import com.swmansion.gesturehandler.react.RNGestureHandlerRootView
 import com.swmansion.gesturehandler.react.isHoverAction
@@ -745,9 +746,12 @@ class GestureHandlerOrchestrator(
 
       // TODO: this is not an ideal solution as we only consider ViewGroups that has no background set
       // TODO: ideally we should determine the pixel color under the given coordinates and return
-      // false if the color is transparent
-      val isLeafOrTransparent = view !is ViewGroup || view.getBackground() != null
-      return isLeafOrTransparent && isTransformedTouchPointInView(coords[0], coords[1], view)
+      val isLeaf = view !is ViewGroup
+      val isNotTransparent = view.getBackground() != null
+      val isDirectDetectorChild = view.parent is RNGestureHandlerDetectorView
+      val isPointInView = isTransformedTouchPointInView(coords[0], coords[1], view)
+
+      return (isLeaf || isNotTransparent || isDirectDetectorChild) && isPointInView
     }
 
     fun transformPointToChildViewCoords(x: Float, y: Float, parent: ViewGroup, child: View, outLocalPoint: PointF) {

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorView.kt

@@ -37,6 +37,43 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     attachHandlers(newHandlers)
   }
 
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+
+    if (moduleId != -1) {
+      handlersToAttach?.let {
+        attachHandlers(it)
+      }
+
+      virtualChildrenToAttach?.let {
+        attachVirtualChildren(it)
+      }
+
+      handlersToAttach = null
+      virtualChildrenToAttach = null
+    }
+  }
+
+  override fun onDetachedFromWindow() {
+    if (attachedHandlers.isNotEmpty()) {
+      handlersToAttach = attachedHandlers.toMutableList().also {
+        it.addAll(handlersToAttach ?: emptyList())
+      }
+    }
+
+    if (attachedVirtualHandlers.isNotEmpty()) {
+      virtualChildrenToAttach = attachedVirtualHandlers.map {
+        VirtualChildren(it.value.toList(), it.key)
+      }.toMutableList().also {
+        it.addAll(virtualChildrenToAttach ?: emptyList())
+      }
+    }
+
+    detachAllHandlers()
+
+    super.onDetachedFromWindow()
+  }
+
   fun setModuleId(id: Int) {
     assert(this.moduleId == -1) { "Tried to change moduleId of a native detector" }
 
@@ -192,7 +229,7 @@ class RNGestureHandlerDetectorView(context: Context) : ReactViewGroup(context) {
     eventDispatcher?.dispatchEvent(event)
   }
 
-  fun onViewDrop() {
+  fun detachAllHandlers() {
     val registry = RNGestureHandlerModule.registries[moduleId]
       ?: throw Exception("Tried to access a non-existent registry")
 

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerDetectorViewManager.kt

@@ -43,7 +43,7 @@ class RNGestureHandlerDetectorViewManager :
   }
 
   override fun onDropViewInstance(view: RNGestureHandlerDetectorView) {
-    view.onViewDrop()
+    view.detachAllHandlers()
     super.onDropViewInstance(view)
   }
 

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.cpp

@@ -28,11 +28,24 @@ void RNGestureHandlerDetectorShadowNode::initialize() {
         children.size() == 1 &&
         "RNGestureHandlerDetector received more than one child");
 
-    const auto clonedChild = children[0]->clone({});
-    replaceChild(*children[0], clonedChild);
+    // Will clone the child and ensure it's not flattened
+    replaceChild(*children[0], children[0], 0);
   }
 }
 
+void RNGestureHandlerDetectorShadowNode::appendChild(
+    const std::shared_ptr<const ShadowNode> &child) {
+  YogaLayoutableShadowNode::appendChild(unflattenNode(child));
+}
+
+void RNGestureHandlerDetectorShadowNode::replaceChild(
+    const ShadowNode &oldChild,
+    const std::shared_ptr<const ShadowNode> &newChild,
+    size_t suggestedIndex) {
+  YogaLayoutableShadowNode::replaceChild(
+      oldChild, unflattenNode(newChild), suggestedIndex);
+}
+
 void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
   // TODO: consider allowing more than one child and doing bounding box
   react_native_assert(getChildren().size() == 1);
@@ -69,4 +82,18 @@ void RNGestureHandlerDetectorShadowNode::layout(LayoutContext layoutContext) {
   mutableChild->setLayoutMetrics(childmetrics);
 }
 
+std::shared_ptr<const ShadowNode>
+RNGestureHandlerDetectorShadowNode::unflattenNode(
+    const std::shared_ptr<const ShadowNode> &node) {
+  auto clonedNode = node->clone({});
+  auto clonedNodeWithProtectedAccess =
+      std::static_pointer_cast<RNGestureHandlerDetectorShadowNode>(clonedNode);
+
+  clonedNodeWithProtectedAccess->traits_.set(ShadowNodeTraits::FormsView);
+  clonedNodeWithProtectedAccess->traits_.set(
+      ShadowNodeTraits::FormsStackingContext);
+
+  return clonedNode;
+}
+
 } // namespace facebook::react

packages/react-native-gesture-handler/shared/shadowNodes/react/renderer/components/rngesturehandler_codegen/RNGestureHandlerDetectorShadowNode.h

@@ -53,9 +53,17 @@ class RNGestureHandlerDetectorShadowNode final
     initialize();
   }
 
+  void appendChild(const std::shared_ptr<const ShadowNode> &child) override;
+  void replaceChild(
+      const ShadowNode &oldChild,
+      const std::shared_ptr<const ShadowNode> &newChild,
+      size_t suggestedIndex = SIZE_MAX) override;
+
   void layout(LayoutContext layoutContext) override;
 
  private:
+  std::shared_ptr<const ShadowNode> unflattenNode(
+      const std::shared_ptr<const ShadowNode> &node);
   void initialize();
 
   std::optional<LayoutMetrics> previousLayoutMetrics_;

packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts

@@ -90,6 +90,7 @@ export function useGesture<THandlerData, TConfig>(
 
   useEffect(() => {
     return () => {
+      currentGestureRef.current = { type: '', handlerTag: -1 };
       NativeProxy.dropGestureHandler(handlerTag);
       scheduleFlushOperations();
     };