fix: update the logic of tag_name to prefer a ph-label from a parent …

posthog-react-native/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.10.1 - 2024-01-12
+
+1. The `tag_name` property of auto-captured events now uses the nearest `ph-label` from parent elements, if present.
+
 # 2.10.0 - 2024-01-08
 
 1. `$device_type` is now set to `Mobile`, `Desktop`, or `Web` for all events

posthog-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "posthog-react-native",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "main": "lib/posthog-react-native/index.js",
   "files": [
     "lib/"

posthog-react-native/src/autocapture.tsx

@@ -105,6 +105,24 @@ export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: Pos
   }
 
   if (elements.length) {
+    // The element that was tapped, may be a child (or grandchild of an element with a ph-label)
+    // In this case, the current labels applied obscure the ph-label
+    // To correct this, loop over the elements in reverse, and promote the ph-label
+    const elAttrLabelKey = `attr__${customLabelProp}`
+    let lastLabel: string | undefined = undefined
+
+    for (let i = elements.length - 1; i >= 0; i--) {
+      const element = elements[i]
+      if (element[elAttrLabelKey]) {
+        // this element had a ph-label set, promote it to the lastLabel
+        lastLabel = element[elAttrLabelKey]
+      }
+
+      // if lastLabel is set, update this elements tag_name
+      if (lastLabel) {
+        element['tag_name'] = lastLabel
+      }
+    }
     posthog.autocapture('touch', elements, {
       $touch_x: e.nativeEvent.pageX,
       $touch_y: e.nativeEvent.pageY,

posthog-react-native/test/__snapshots__/autocapture.spec.ts.snap

@@ -12,16 +12,16 @@ Array [
     },
     Object {
       "$el_text": "I have the property \\"ph-label\\" which means touching me will be autocaptured with a specific label",
-      "attr__ph-label": "special-text",
       "attr__testID": "example-ph-label",
-      "tag_name": "special-text",
+      "tag_name": "higher-level-element",
     },
     Object {
       "attr__style": "backgroundColor:rgba(0,0,0,.1);padding:15;borderRadius:10;marginBottom:10",
-      "tag_name": "View",
+      "tag_name": "higher-level-element",
     },
     Object {
-      "tag_name": "View",
+      "attr__ph-label": "higher-level-element",
+      "tag_name": "higher-level-element",
     },
     Object {
       "attr__style": "flex:1",

posthog-react-native/test/data/autocapture-event.json

@@ -16,7 +16,6 @@
       "elementType": { "displayName": "Text" },
       "memoizedProps": {
         "testID": "example-ph-label",
-        "ph-label": "special-text",
         "children": "I have the property \"ph-label\" which means touching me will be autocaptured with a specific label"
       },
       "return": {
@@ -40,7 +39,9 @@
                 "memoizedProps": { "value": false },
                 "return": {
                   "elementType": { "displayName": "View" },
-                  "memoizedProps": {},
+                  "memoizedProps": {
+                    "ph-label": "higher-level-element"
+                  },
                   "return": {
                     "elementType": {},
                     "memoizedProps": {},