vlad-ps
commented
1 year ago We have a similar issue in that we're using navigationRef to navigate within the app from outside of the NavigationContainer (without the navigation prop) as described in here: https://reactnavigation.org/docs/navigating-without-navigation-prop. This is used for navigation for a press in a push notification. Recent Pendo SDK upgrade (in v. 2.21.1) and a change in implementation (using WithPendoReactNavigation(NavigationContainer)) breaks using refs with NavigationContainer. I tried forwarding refs to PendoNavigationContainer, but it does not seem to register the ref or any navigation state changes.
My code with ref forwarding:
import { JSX, ReactNode, RefObject, forwardRef } from 'react'
import {
NavigationContainer,
NavigationContainerRef,
} from '@react-navigation/native'
import { AppThemeTypes } from 'react-native-paper'
import { WithPendoReactNavigation } from 'rn-pendo-sdk'
interface Props {
appTheme: AppThemeTypes
children: ReactNode
handleOnReady: () => void
handleOnStateChange: () => void
}
const PendoNavigationContainer = WithPendoReactNavigation(NavigationContainer)
function AppNavigationContainer(
{ appTheme, children, handleOnReady, handleOnStateChange }: Props,
inputRef: RefObject<NavigationContainerRef>
): JSX.Element {
return (
<PendoNavigationContainer
ref={inputRef}
theme={appTheme}
onReady={handleOnReady}
onStateChange={handleOnStateChange}
>
{children}
</PendoNavigationContainer>
)
}
export default forwardRef((props, ref) => {
return <AppNavigationContainer {...props} inputRef={ref} />
})
My handleOnReady and handleOnStateChange functions:
const handleOnReady = () => {
const currentRef = navigationRef.current
// currentRef is always null here
if (currentRef) {
const currentRoute = currentRef.getCurrentRoute()
if (currentRoute) {
routeNameRef.current = currentRoute.name
}
}
}
const handleOnStateChange = async () => {
const previousRouteName = routeNameRef.current
let currentRouteName
const currentRef = navigationRef.current
// currentRef is always null here
if (currentRef) {
const currentRoute = currentRef.getCurrentRoute()
if (currentRoute) {
currentRouteName = currentRoute.name
routeNameRef.current = currentRoute.name
}
}
if (previousRouteName !== currentRouteName) {
await analytics().logScreenView({
screen_name: currentRouteName,
screen_class: currentRouteName,
})
}
}Please help solving this issue. This is delaying a release to production for us.
MikePendo
udilevin
npinney
dgasch512
Hi Pendo devs!
I'm having compatibility difficulties between Pendo and Sentry in our React Native app and am wondering if you guys could help us out. Because both softwares require access to the
NavigationContainerthere is a bit of a conflict to get both third parties registered with the container.This is the basic Sentry configuration at the root navigation level (imports and exports omitted):
After following the Pendo docs our root navigation turned into:
Now with the Pendo wrapper, Sentry produces
WARN Sentry Logger [warn]: [ReactNavigationInstrumentation] Received invalid navigation container ref!and no longer automatically registers navigation state changes.Does the Pendo wrapper modify the ref in any way not allowing this to work? Are there other ways we can setup the
WithPendoReactNavigation()that might help us get both third parties working?Thank you for you time!
Relevant packages :