How can I track screen time of user when a user navigate to specific screen in react native?

Question

I want to track the time when a user navigates through the screen and when it leaves the screen. I also want to set state and then send those data to API.

const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();
export default function BootcampWeeksScreen(props){
    const { navigation } = props;
const pathway_id=navigation.getParam('pathway_id');
  return (


    <NavigationContainer>
      <Tab.Navigator tabBarOptions={{ scrollEnabled: true }}>
      <Tab.Screen name="Course" component={Courses} initialParams={{pathway_id:pathway_id}} />
        <Tab.Screen name="Roadmap" component={Roadmap} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

When a user navigates to the Course screen I want to track that time when the user leaves the screen.

How can I do this?

score -1 · Answer 1 · answered Oct 29 '21 at 15:02

you can do it by storing the time in global variable that is accessible throughout the components. you can use react context or redux for that.

when the user navigates to other page you could probably use

useEffect(()=>{

return ()=>{
  //  when the user navigated to another page this gets execute
  // setting of new date will be from here
 }
},[])

How can I track screen time of user when a user navigate to specific screen in react native?

1 Answers1