docs: update screen tracking for React Navigation (#553)

Currently, the documentation for screen tracking in React Navigation requires manually implementing a utility to determine the focused screen and can also result in `Unknown` screen. This updates the documentation to follow the official React Navigation docs to use the built-in methods instead.

The example app also needs to be updated, but currently, I don't have time to do this.

Note: I didn't use `useNavigationRef` to stay compatible with React Navigation 5.

Docs: https://reactnavigation.org/docs/screen-tracking

Author: satya164

README.md

@@ -372,42 +372,28 @@ Our [example app](./example) is set up with screen tracking using React Navigati
 
 Essentially what we'll do is find the root level navigation container and call `screen()` whenever user has navigated to a new screen.
 
-Find the file where you've used the `NavigationContainer` - the main top level container for React Navigation. In this component, create a new state variable to store the current route name:
+Find the file where you've used the `NavigationContainer` - the main top level container for React Navigation. In this component, create 2 new refs to store the `navigation` object and the current route name:
 
 ```js
-const [routeName, setRouteName] = useState('Unknown');
+const navigationRef = useRef(null);
+const routeNameRef = useRef(null);
 ```
 
-Now, outside of the component, create a utility function for determining the name of the selected route:
-
-```js
-const getActiveRouteName = (
-  state: NavigationState | PartialState<NavigationState> | undefined
-): string => {
-  if (!state || typeof state.index !== 'number') {
-    return 'Unknown';
-  }
-
-  const route = state.routes[state.index];
-
-  if (route.state) {
-    return getActiveRouteName(route.state);
-  }
-
-  return route.name;
-};
-```
-
-Finally, pass a function in the `onStateChange` prop of your `NavigationContainer` that checks for the active route name and calls `client.screen()` if the route has changes. You can pass in any additional screen parameters as the second argument for screen call as needed.
+Next, pass the ref to `NavigationContainer` and a function in the `onReady` prop to store the initial route name. Finally, pass a function in the `onStateChange` prop of your `NavigationContainer` that checks for the active route name and calls `client.screen()` if the route has changes. You can pass in any additional screen parameters as the second argument for screen call as needed.
 
 ```js
 <NavigationContainer
-  onStateChange={(state) => {
-    const newRouteName = getActiveRouteName(state);
+  ref={navigationRef}
+  onReady={() => {
+    routeNameRef.current = navigationRef.current.getCurrentRoute().name;
+  }}
+  onStateChange={() => {
+    const previousRouteName = routeNameRef.current;
+    const currentRouteName = navigationRef.current?.getCurrentRoute().name;
 
-    if (routeName !== newRouteName) {
-      segmentClient.screen(newRouteName);
-      setRouteName(newRouteName);
+    if (previousRouteName !== currentRouteName) {
+      segmentClient.screen(currentRouteName);
+      routeNameRef.current = currentRouteName;
     }
   }}
 >