I've to implement Pendo's React Native implementation in TypeScript. My App.tsx has following code that has to modified to accommodate Pendo's methods in it:
Current App in TS:
export const App: FC = () => { const [isInitialized, setInitialized] = useState<boolean>(false); useEffect(() => { const init = async () => { ... some code ... }; init(); }, []); return (<SafeAreaProvider> {isInitialized ? (<NavigationContainer theme={combinedTheme} linking={linking} onReady={SplashScreen.hide}> ... code ....</NavigationContainer> ) : null}</SafeAreaProvider> );};
Pendo's Suggested Implementation in JS:
Pendo's implementation is in JavaScript, and I've not been able to find a custom type definition for the library. Here is the relevant segment in the documentation for initializing Pendo in React Native with React Navigation:
import {withPendoRN} from 'rn-pendo-sdk'import {useRef} from 'react';function RootNavigator(props) { const navigationRef = useRef(); return (<NavigationContainer ref={navigationRef} onStateChange={()=> { const state = navigationRef.current.getRootState() props.onStateChange(state); }} onReady ={()=>{ const state = navigationRef.current.getRootState() props.onStateChange(state); }}> {MainStackScreen()}</NavigationContainer> )};export default withPendoRN(RootNavigator);
My Modified App in TS:
How can I modify my existing code to integrate Pendo in it? This is what I've done so far to the App.tsx
file:
export const App1 FC = () => { const [isInitialized, setInitialized] = useState<boolean>(false); useEffect(() => { const init = async () => { ... code ... }; init(); }, []); const navigationRef = useRef<any>(); return (<SafeAreaProvider> {isInitialized ? (<NavigationContainer ref={navigationRef} theme={combinedTheme} linking={linking} onStateChange={()=> { const state = navigationRef.current.getRootState() prop.onStateChange(state); console.log(Children); }} onReady ={()=>{ const state = navigationRef.current.getRootState() props.onStateChange(state); SplashScreen.hide; }}> ... code ...</NavigationContainer> ) : null}</SafeAreaProvider> );};export const App = withPendoRN(App1,null);
My main questions are:
- Does my
App()
provides equivalent implementation tofunction RootNavigator(props)
from Pendo's instructions? - Is my implementation for
onStateChange()
andonReady()
inline with Pendo's instructions? - Is there a Pendo's React Native implementation available in TypeScript that I can review?
When I run the application in emulator, it doesn't crash or log any errors, however, Pendo's startup messages to confirm its valid install is missing from my logs.