I'm looking for a way to call a function on each screen to track user interaction with each screen. so for example:
function track(screenName){
console.log(screenName)
}
function ScreenA(){
track('ScreenA')
return <View />
}
function ScreenB(){
track('ScreenB')
return <View />
}
Instead of having to call the function manually in each screen separately , I believe there has to be a way to do it from the navigator directly. I'm using :
react-navigation 5.9
react-native 0.65
using @sushrut619 answer i applied the following :
export function App(){
const [routeName, setRouteName] = React.useState('Unknown');
return (
...
<NavigationContainer
linking={linking}
onStateChange={state => {
const newRouteName = getActiveRouteName(state);
if (routeName !== newRouteName) {
setRouteName(newRouteName);
//use whatever tracking function you want with newRouteName
}
}}>
<MainAppStack />
</NavigationContainer>
...
);
}
and in a different utility file i added this function :
export function 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;
}