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 unopinionated 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