How to convert Pendo's JavaScript to TypeScript?

Question

Pendo's JavaScript:

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);

Pendo has above mentioned JavaScript code to integrate to React Native. Can someone please provide me some pointers as to how to convert this to TypeScript. My code is FC, with export const App: FC = () => {} structure. Particularly the props object?

Answer 1

1. You should replace useRef with useNavigationContainerRef.
2. You can define a vague type definition for onStateChange. This is suboptimal but since Pendo has not provided types for this yet, it is my personal preference.

So refactoring your code example:

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { withPendoRN } from 'rn-pendo-sdk';

function RootNavigator(props: { onStateChange: (state: unknown) => unknown }) {
  const navigationRef = useNavigationContainerRef();
  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);

Answer 2

Pendo implemented one line code integration Pendo React Native Integration
Sample code:

const PendoNavigationContainer = WithPendoReactNavigation(NavigationContainer);    

function MyApp() {
  return (
    <PendoNavigationContainer >
      {MainStackScreen()}
    </PendoNavigationContainer >
  )
};
export default MyApp;

You can also open an issue on GitHub for those kind of questions