pendo.jsx

/**
* How pendo document it
*/
<SafeAreaProvider>
  <NavigationContainer
    theme={MyTheme}
    ref={navigationRef}
    linking={linking}
    onReady={props.onReady}
    onStateChange={props.onStateChange}>
    <Routes />
  </NavigationContainer>
</SafeAreaProvider>

/**
* How we need to do it
*/
<SafeAreaProvider>
  <NavigationContainer
    theme={MyTheme}
    ref={navigationRef}
    linking={linking}
    onReady={() => {
      routeNameRef.current = navigationRef.getCurrentRoute().name;
      return props.onReady()
    }}
    onStateChange={() => (
      const previousRouteName = routeNameRef.current;
      const currentRouteName = navigationRef.getCurrentRoute().name;
      onNavigationStateChange(currentRouteName, previousRouteName);
      routeNameRef.current = currentRouteName;
      return props.onStateChange()
    )}
  >
    <Routes />
  </NavigationContainer>
</SafeAreaProvider>

I dont understand why props.onsStateChange and props.onStateChage dont work when called inside an anonymous function.

@jim-at-jibba you need to pass the state to the
props.onStateChange()

onStateChange={() => (
      const previousRouteName = routeNameRef.current;
      const currentRouteName = navigationRef.getCurrentRoute().name;
      onNavigationStateChange(currentRouteName, previousRouteName);
      routeNameRef.current = currentRouteName;
      const state = navigationRef.current.getRootState()
      return props.onStateChange(state)
    )}````

@MikePendo Hey bud,

Thanks for that. Things seem to work now.

It might be good to add this to the docs.