fix: capture customLabelProp if set

posthog-react-native/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Next
 
+# 3.3.10 - 2024-11-04
+
+1. fix: capture customLabelProp if set
+
 # 3.3.9 - 2024-10-26
 
 1. fix: rollback module to ESNext

posthog-react-native/package.json

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

posthog-react-native/src/PostHogProvider.tsx

@@ -6,6 +6,7 @@ import { useNavigationTracker } from './hooks/useNavigationTracker'
 import { useLifecycleTracker } from './hooks/useLifecycleTracker'
 import { PostHogContext } from './PostHogContext'
 import { PostHogAutocaptureOptions } from './types'
+import { defaultPostHogLabelProp } from './autocapture'
 
 export interface PostHogProviderProps {
   children: React.ReactNode
@@ -70,6 +71,7 @@ export const PostHogProvider = ({
   const captureScreens = !captureNone && posthog && (captureAll || (autocaptureOptions?.captureScreens ?? true)) // Default to true if not set
   const captureLifecycle =
     !captureNone && posthog && (captureAll || (autocaptureOptions?.captureLifecycleEvents ?? true)) // Default to true if not set
+  const phLabelProp = autocaptureOptions?.customLabelProp || defaultPostHogLabelProp
 
   useEffect(() => {
     posthog.debug(debug)
@@ -91,7 +93,7 @@ export const PostHogProvider = ({
 
   return (
     <View
-      ph-label="PostHogProvider"
+    {...{ [phLabelProp]: 'PostHogProvider' }} // Dynamically setting customLabelProp (default: ph-label)
       style={style || { flex: 1 }}
       onTouchEndCapture={captureTouches ? (e) => onTouch('end', e) : undefined}
     >

posthog-react-native/src/autocapture.tsx

@@ -39,14 +39,16 @@ const sanitiseLabel = (label: string): string => {
   return label.replace(/[^a-z0-9]+/gi, '-')
 }
 
+export const defaultPostHogLabelProp = 'ph-label'
+
 export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: PostHogAutocaptureOptions = {}): void => {
   const {
     noCaptureProp = 'ph-no-capture',
-    customLabelProp = 'ph-label',
+    customLabelProp = defaultPostHogLabelProp,
     maxElementsCaptured = 20,
     ignoreLabels = [],
-    propsToCapture = ['style', 'testID', 'accessibilityLabel', 'ph-label', 'children'],
   } = options
+  const propsToCapture = ['style', 'testID', 'accessibilityLabel', customLabelProp, 'children']
 
   if (!e._targetInst) {
     return
@@ -105,16 +107,16 @@ 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
+    // The element that was tapped, may be a child (or grandchild of an element with a customLabelProp (default: ph-label))
+    // In this case, the current labels applied obscure the customLabelProp (default: ph-label)
+    // To correct this, loop over the elements in reverse, and promote the customLabelProp (default: 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
+        // this element had a customLabelProp (default: ph-label) set, promote it to the lastLabel
         lastLabel = element[elAttrLabelKey]
       }