Attach additional attributes to view tracking when using `@datadog/mobile-react-native-navigation`

[conorshaw]

Is your feature request related to a problem? Please describe.

We use react native navigation in our app and would like to send additional attributes with each screen that is navigated. This can currently be done when manually tracking views (docs) but is not available to users using @datadog/mobile-react-native-navigation

Describe the solution you'd like

It would be great and make sense if this functionality was available in this library and save us and other teams who need to add these attributes a lot of time and effort re-factoring their implementations to manually track views instead of using the recommended library as it is unusable for the use case as it is currently implemented.

[louiszawadzki]

Hi @conorshaw, thanks for reaching out!

We'd like to know a bit more about your use case to assess if we could add it to our library.

Could you describe what kind of information would you like to pass to the RUM views context? In particular:

• is the information the same for all your screens or depends on the screen?
• if it depends on the screen, where is the information located in your application state? is it in a state (like Redux) or in the react-navigation screen parameters?

Thanks a lot :)

[conorshaw]

Hi @louiszawadzki, thanks for getting back.

is the information the same for all your screens or depends on the screen?

Depends on the screen

if it depends on the screen, where is the information located in your application state? is it in a state (like Redux) or in the react-navigation screen parameters?

In the react-navigation screen parameters

Basically in our app, we have a lot of dynamic screens which are configured from a CMS and rely on the routes params to decide which content to render. We need a way of tracking these params because at the minute we are only sending the screen name which does not exactly tell us what the user is seeing.

[louiszawadzki]

Hi @conorshaw, thanks for getting back with all these details.

With our react-navigation integration, there is an optional ViewNamePredicate parameter to replace the automatically detected View name. It takes the route (which contains the params) as input, so you could use it to change the route name to include the screen information.

For instance, if your route is called DynamicCMSScreen and the page is configured with a param called screenId, you could implement a predicate like this:

const viewNamePredicate: ViewNamePredicate = (route) => {
  if (route.name === 'DynamicCMSScreen') {
    return `${route.name}/${route.params.screenId}`
  }
  return route.name
}

// Pass the predicate to `DdRumReactNavigationTracking.startTrackingViews`
function App() {
  const navigationRef = React.useRef(null);
  return (
    <View>
      <NavigationContainer ref={navigationRef} onReady={() => {
        DdRumReactNavigationTracking.startTrackingViews(navigationRef.current, viewNamePredicate)
      }}>
        // …
      </NavigationContainer>
    </View>
  );
}

You would still be able to filter all your CMS screens in RUM by using a wildcard syntax in your queries (using in our example @view.name:DynamicCMSScreen*).

Would that solution fit your use case? If not let me know of any limitation so we can help you solve your issue :)

[conorshaw]

This is an option we have considered but the more ideal solution would be to add extra attributes for each screen and it seemed like it should be possible given the manual tracking of views allows this. Is there any reason why this is not possible when using react-navigation?