Views with set accessibilityLabel or dd-action-name are still reported as RCTView

[PeterKucera]

Describe the bug

I have setup Datadog integration in the React Native app.

As a next step, I tried to add tracking of button clicks, while following the "Tracking User Actions" guide - https://docs.datadoghq.com/real_user_monitoring/browser/tracking_user_actions/

However, when I set accesibilityLabel or dd-action-name, certain Pressables / Views are still reported as RCTView, so at the moment in Datadog session explorer I still can't see which button / view was clicked, because all of them display same label - RCTView.

Can you please advise what could be causing this issue ?

Reproduction steps

1. Setup Datadog SDK integration into React Native project
2. set accesibilityLabel or dd-action-name on Pressable elements to certain string

Expected This string will appear in DataDog session explorer

Actual Only string in DD session explorer that I can see is RCTView

SDK logs

N/A

Expected behavior

N/A

Affected SDK versions

2.0.4

Latest working SDK version

N/A

Did you confirm if the latest SDK version fixes the bug?

Yes

Integration Methods

Yarn

React Native Version

0.73.2

Package.json Contents

No response

iOS Setup

No response

Android Setup

No response

Device Information

No response

Other relevant information

No response

[louiszawadzki]

Hi @PeterKucera, thanks for reaching out!

Could you share some sample code of a specific Pressable that gets reported as a RCTView? Even better if you have a sample app you can share so we can help you troubleshoot faster :)

Can you also specify if you experience the issue on iOS, Android or both platforms?

Thanks a lot!

[PeterKucera]

Hi @louiszawadzki

thanks for a quick response.

This is how the Pressable looks like:

<Pressable
    disabled={disabled || loading}
    accessible
    accessibilityLabel={title}
    accessibilityRole="button"
    onPress={onButtonPress}
    style={({ pressed }) => [
      styles.container,
      containerStyle,
      disabled ? styles.disabledContainer : {},
      pressed ? pressedStyle : {},
    ]}
  >

Behaviour can be observed on both Android and iOS client.

What's really strange, is that for certain pressables, using accessibilityLabel works OK, and labels are reported well into DD Session explorer, and for other pressables, only thing that's reported is "RCTView" string.

And for this specific Pressable (the code that's above), I see that if I set accessibilityLabel on it, it's not reported into DD, but if I set it on one of the parents of this Pressable, it's reported OK.

[louiszawadzki]

Hi @PeterKucera, thanks for sharing all these details!

Our implementation of interaction tracking is based on catching components that have an onPress prop. We have various mechanisms in place to prevent bugs in case you use a wrapper component that also contains an onPress prop. It is possible that it's failing in your case.

Could you include a more complete example with the chain of all parent components containing an onPress prop that are called in a case where the accessibilityLabel is not correctly reported?

Thanks a lot!

[brandon-austin-lark]

@PeterKucera did you manage to make any progress on this issue?

[PeterKucera]

@brandon-austin-lark , @louiszawadzki

Hey guys, sorry for slightly delayed response.

I have a sample for you, it's in a private repository, and I gave you both access.

You can find it using this link

Thanks

[wcastand]

i'm using tamagui which probably does add layers to the Pressable, maybe it's on of the case that would lead to RTCView.

[PeterKucera]

Solution:

Rename the onButtonPress property of PrimaryButton to onPress.

Reason:

DataDog auto-instrumentation works by overriding the onPress property of React components, if the property is found.