React-native-navigation: How to track screens with Analytics using tab bar?

Created on 31 Jul 2019 · 5Comments · Source: wix/react-native-navigation

Issue Description

All tab bars are rendered into the screen simultaneously. This behaviour results in wrong Firebase Analytics reports. I'm used to track the current active screen when the component is mounted, but this doesn't seem to be a good option as all the tabs screen components are mounted at the same time.

So even if the user never opens a certain tab will be reported as if he did. How can I overcome this? Should I try send the current screen to analytics in other way than the component did mount?

Environment

React Native Navigation version: 2.21.0
React Native version: 0.59.9
Platform(s) (iOS, Android, or both?): Both
Device info (Simulator/Device? OS version? Debug/Release?): Both / Both

🏚 stale

Source

igortupini

Most helpful comment

You can put this in your functional component:

React.useEffect(() => {
  const navigationEventListener = 
    Navigation.events().registerComponentDidAppearListener(({ componentId: id }) => {
      // Check whether the event is fired in this screen.
      if (componentId !== id) return
      // put your code here...
    })

  return () => {
    navigationEventListener.remove()
  }
}, [])

You can turn this into a util function if you are using this pattern alot:

export const useComponentAppear = ({ componentId, onAppear }: Props) => {
  React.useEffect(() => {
    const navigationEventListener = 
      Navigation.events().registerComponentDidAppearListener(
        ({ componentId: compId }) => {
          if (componentId !== compId) return
          onAppear()
        }
      )

    return () => navigationEventListener.remove()
  }, [])
}

jinshin1013 on 2 Sep 2019

❤2 👍2

All 5 comments

Have you tried using componentDidAppear? Doc here

jinshin1013 on 1 Aug 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

stale[bot] on 31 Aug 2019

Have you tried using componentDidAppear? Doc here

How do I get to use this method with functional components?
I'm using Hooks for my entire app

igortupini on 2 Sep 2019

You can put this in your functional component:

React.useEffect(() => {
  const navigationEventListener = 
    Navigation.events().registerComponentDidAppearListener(({ componentId: id }) => {
      // Check whether the event is fired in this screen.
      if (componentId !== id) return
      // put your code here...
    })

  return () => {
    navigationEventListener.remove()
  }
}, [])

You can turn this into a util function if you are using this pattern alot:

export const useComponentAppear = ({ componentId, onAppear }: Props) => {
  React.useEffect(() => {
    const navigationEventListener = 
      Navigation.events().registerComponentDidAppearListener(
        ({ componentId: compId }) => {
          if (componentId !== compId) return
          onAppear()
        }
      )

    return () => navigationEventListener.remove()
  }, [])
}

jinshin1013 on 2 Sep 2019

❤2 👍2

stale[bot] on 2 Oct 2019

Was this page helpful?

0 / 5 - 0 ratings