Skip to main content

Using with React Navigation

Since: 1.41.0, @fullstory/react-native: 1.3.0

Automatic screen tracking​

The Mobile Pages API provides an unopinioned way to create instances of FSPage that mark the beginning and end of a view of a page. If you are using React Navigation, there is an easy way to set up automatic screen tracking.

The following is an example for versions 5.x and above.

const App = () => {
  const navigationRef = useNavigationContainerRef();
  const routeNameRef = useRef(null);
  const pageRef = useRef(null);

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.getCurrentRoute().name;
        // track the initial screen
        pageRef.current = new FSPage(routeNameRef.current);
        pageRef.current.start();
      }}
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.getCurrentRoute().name;

        if (previousRouteName !== currentRouteName) {
          routeNameRef.current = currentRouteName;

          const page = new FSPage(currentRouteName);
          page.start();

          // alternatively create and manipulate the page in a shared data store
          pageRef.current = page;
        }
      }}
    >
      ⋮
    </NavigationContainer>
  );
};

An alternative to using useRef in a top-level Component is to use Redux or React Context. Using a shared data store will allow you to easily call update or end on the current page from anywhere in your application.

Additional Information​