Navigation error after wrapping App.js with PostHogProvider - expo

[rishav-bookee]

Bug description

error: Couldn't find a navigation object. Is your component inside a screen in a navigator?

How to reproduce

• Wrap index or app file with PostHogProvider in expo app.

Environment

• PostHog Cloud

[benjackwhite]

@rishav-bookee did you follow the guide here around autocapture? https://posthog.com/docs/integrate/client/react-native#autocapture

It sounds like you have react-native-navigation installed but are not correctly putting PosthogProvider below your NavigationContainer.

export function App() {
    return (
        <NavigationContainer>
            <PostHogProvider apiKey="<ph_project_api_key>" autocapture>
                {/* Rest of app */}
            </PostHogProvider>
        </NavigationContainer>
    )
}

If you don't want to capture screens automatically then you can pass captureScreens: false to the autocapture prop and this error should stop.

autocapture={{
    captureTouches: true, // If you don't want to capture touch events set this to false
    captureLifecycleEvents: true, // If you don't want to capture the Lifecycle Events (e.g. Application Opened) set this to false
    captureScreens: false, // If you don't want to capture screen events set this to false
}}

[rishav-bookee]

@benjackwhite I tried both approaches but still got the same error.

<NavigationContainer theme={theme}>
      <PostHogProvider apiKey='ph_api_key' autocapture>
           {/* Rest of the app */}
      </PostHogProvider>
 </NavigationContainer>

 <PostHogProvider apiKey='ph_api_key' autocapture>
     <Provider store={store}>
           {/* Rest of the app */}
     </Provider>
 </PostHogProvider>

[benjackwhite]

@rishav-bookee you need to set autocapture={{ captureScreens: false }} if you don't want to use the navigation capturing. I mentioned it in the above comment ;)

Here is an example on a branch I made to test this out https://github.com/PostHog/posthog-js-lite/blob/fix/navigation-context/examples/example-expo/navigation/index.tsx#L22-L37

[rishav-bookee]

@benjackwhite I want to capture screens and events. I am keeping PostHogProvider below NavigationContainer but still getting the same error. Here is how the code looks as of now. Do I need to add anything else?

<NavigationContainer theme={theme}>
      <PostHogProvider
        apiKey={ph_api_key}
        autocapture={{
          captureTouches: true,
          captureLifecycleEvents: true, 
          captureScreens: true
        }} 
      >
        <AppStack />
    </PostHogProvider>
</NavigationContainer>

[benjackwhite]

We have an example app here which you can use as reference: https://github.com/PostHog/posthog-js-lite/tree/master/examples/example-expo

Not sure in your case why it isn't working. Can you validate it you are importing NavigationContainer like import { NavigationContainer } from '@react-navigation/native?

Are you able to get a minimal code example somewhere that is re-producable? If so you can create an issue on the client repo https://github.com/PostHog/posthog-js-lite/issues and then it might be possible for me to debug further