fix: captureTouches errors with reanimated styles (#2763)

Author: marandaneto

.changeset/empty-pillows-wait.md

@@ -0,0 +1,5 @@
+---
+'posthog-react-native': patch
+---
+
+fix: captureTouches errors with reanimated styles

packages/react-native/src/autocapture.tsx

@@ -11,15 +11,33 @@ interface Element {
   return?: Element
 }
 
+const isAnimatedValue = (value: any): boolean => {
+  // Check if it's a Reanimated shared value or animated style
+  // _isReanimatedSharedValue is the official internal marker for SharedValues
+  // Also check for _value property which is present in SharedValues
+  return value?._isReanimatedSharedValue === true || (typeof value === 'object' && value !== null && '_value' in value)
+}
+
 const flattenStyles = (styles: any): any => {
   const flattened: any = {}
 
+  // Skip if the entire style object is an animated value
+  if (isAnimatedValue(styles)) {
+    return {}
+  }
+
   if (Array.isArray(styles)) {
     for (const style of styles) {
       Object.assign(flattened, flattenStyles(style))
     }
-  } else {
-    Object.assign(flattened, styles)
+  } else if (styles && typeof styles === 'object') {
+    // Filter out individual animated properties within a regular style object
+    // This handles cases like { opacity: animatedValue, backgroundColor: 'red' }
+    for (const key in styles) {
+      if (!isAnimatedValue(styles[key])) {
+        flattened[key] = styles[key]
+      }
+    }
   }
 
   return flattened
@@ -81,7 +99,12 @@ export const autocaptureFromTouchEvent = (e: any, posthog: PostHog, options: Pos
         }
         const value = props[key]
         if (key === 'style') {
-          el.attr__style = stringifyStyle(value)
+          // Safely handle style prop, especially for animated styles
+          try {
+            el.attr__style = stringifyStyle(value)
+          } catch (error) {
+            // Skip style capturing if it fails (e.g., animated styles)
+          }
         } else if (['string', 'number', 'boolean'].includes(typeof value)) {
           if (key === 'children') {
             el.$el_text = typeof value === 'string' ? value : JSON.stringify(value)

packages/react-native/test/autocapture.spec.ts

@@ -19,5 +19,74 @@ describe('PostHog React Native', () => {
       autocaptureFromTouchEvent({ _targetInst: ignoreEvent, nativeEvent }, mockPostHog)
       expect(mockPostHog.autocapture).toHaveBeenCalledTimes(0)
     })
+
+    it('should handle animated styles without errors', () => {
+      const mockPostHog = { autocapture: jest.fn() } as any
+
+      // Mock a Reanimated animated style
+      const animatedStyle = {
+        _isReanimatedSharedValue: true,
+        _value: { opacity: 1 },
+        __reanimatedHostObjectRef: {},
+      }
+
+      const eventWithAnimatedStyle = {
+        _targetInst: {
+          elementType: { name: 'TouchableOpacity' },
+          memoizedProps: {
+            style: animatedStyle,
+            children: 'Test Button',
+          },
+          return: null,
+        },
+        nativeEvent,
+      }
+
+      // Should not throw error when processing animated styles
+      expect(() => {
+        autocaptureFromTouchEvent(eventWithAnimatedStyle, mockPostHog)
+      }).not.toThrow()
+
+      // Should still capture the event, just with empty style
+      expect(mockPostHog.autocapture).toHaveBeenCalledTimes(1)
+      const capturedElement = mockPostHog.autocapture.mock.calls[0][1][0]
+      expect(capturedElement.attr__style).toBe('')
+      expect(capturedElement.$el_text).toBe('Test Button')
+    })
+
+    it('should handle mixed animated and regular styles', () => {
+      const mockPostHog = { autocapture: jest.fn() } as any
+
+      const mixedStyle = [
+        { backgroundColor: 'red', padding: 10 },
+        {
+          opacity: {
+            _isReanimatedSharedValue: true,
+            _value: 1,
+          },
+        },
+      ]
+
+      const eventWithMixedStyle = {
+        _targetInst: {
+          elementType: { name: 'View' },
+          memoizedProps: {
+            style: mixedStyle,
+            testID: 'test-view',
+          },
+          return: null,
+        },
+        nativeEvent,
+      }
+
+      autocaptureFromTouchEvent(eventWithMixedStyle, mockPostHog)
+
+      expect(mockPostHog.autocapture).toHaveBeenCalledTimes(1)
+      const capturedElement = mockPostHog.autocapture.mock.calls[0][1][0]
+      // Should capture regular styles but skip animated values
+      expect(capturedElement.attr__style).toContain('backgroundColor:red')
+      expect(capturedElement.attr__style).toContain('padding:10')
+      expect(capturedElement.attr__style).not.toContain('opacity')
+    })
   })
 })