Collect analytics in react native / expo app

Draft Disclaimer: Please note that this article is currently in draft form and may undergo revisions before final publication. The content, including information, opinions, and recommendations, is subject to change and may not represent the final version. We appreciate your understanding and patience as we work to refine and improve the quality of this article. Your feedback is valuable in shaping the final release.

Language Mismatch Disclaimer: Please be aware that the language of this article may not match the language settings of your browser or device.
Do you want to read articles in English instead ?

    const routeNameRef = useRef(null)
    const onStateChange = useCallback(async () => {
        const previousRouteName = routeNameRef.current
        const currentRouteName = navigationRef.getCurrentRoute()?.name
        if (previousRouteName !== currentRouteName) {
            // TODO record screen/page/view change here
            // TODO: save event locally first to later pull and emit to server (network request) one at a time. Max 1 per second
            // TODO: api to record analytics
            //   POST /analytics/events {event: 'view', data: {screen: 'currentRouteName'}, date: new Date().toISOString().slice(0, 10)}
            //   add route params
            console.log('current page is ' + currentRouteName)
        }
        routeNameRef.current = currentRouteName
    }, [])

		<NavigationContainer
				ref={navigationRef}
				onReady={() => {
						routeNameRef.current = navigationRef.getCurrentRoute()?.name
				}}
				onStateChange={onStateChange}
		>
				<StatusBar style="auto" />
				<Navigation/>
		</NavigationContainer>
  • api to queue analytics, immediate response to not hold up
  • save events locally in case network error for retry later once network restored.
  • save locally first, cadence one event every 1s max to space request in time