RootLocationContextWrapper

Wraps its children in a RootLocationContext.
Children can be a ReactNode or a Render Props function receiving TrackingContext.

RootLocationContextWrapper: (props: {
  children: ReactNode | ((parameters: TrackingContext) => ReactNode),
  id: string
}) => ReactElement
Low level api

Make sure to never use RootLocationContextWrapper while ReactNavigationPlugin is active. It will lead to multiple RootLocationContexts, which is forbidden.

For applications relying on React Navigation, RootLocationContext can be automatically instrumented via the ReactNavigationPlugin. Check out how to Install React Navigation Plugin.

Parameters​

type
requiredchildrenReactNode | ((parameters: TrackingContext) => void)
requiredidstring

Returns​

ReactElement

Usage example​

Enrich Locations​

import { RootLocationContextWrapper } from '@objectiv/tracker-react-native';

<RootLocationContextWrapper id={'page'}>
  <Layout>
    ...
  </Layout>
</RootLocationContextWrapper>

Tracking via Render Props​

import { 
  RootLocationContextWrapper, 
  trackHiddenEvent,
  trackVisibleEvent
} from '@objectiv/tracker-react-native';

<RootLocationContextWrapper id={'page'}>
  {(trackingContext) => (
    <>
      <Layout>
        ...
      </Layout>
      <ChatModal
        onShow={() => trackVisibleEvent(trackingContext)}
        onHide={() => trackHiddenEvent(trackingContext)}
      >
        ...
      </ChatModal>
    </>
  )}
</RootLocationContextWrapper>

Did you know ?

RootLocationContextWrapper internally uses LocationContextWrapper.


See also