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?

Does this answer your question? [React-Native - How to convert JS to TS using functional component declaration (FC)?](https://stackoverflow.com/questions/73890738/react-native-how-to-convert-js-to-ts-using-functional-component-declaration-f) — Terry, Sep 29 '22 at 12:29
You have asked an exact copy of the same question here: https://stackoverflow.com/questions/73890738/react-native-how-to-convert-js-to-ts-using-functional-component-declaration-f — Terry, Sep 29 '22 at 12:29
It could have been, if it had received an answer. I posted this as a subset of the larger set of questions here, hoping that targeting a subset might pique some interest. — SJaka, Sep 29 '22 at 13:06

score 1 · Answer 1 · answered Nov 30 '22 at 16:15

You should replace useRef with useNavigationContainerRef.
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);

score 1 · Answer 2 · answered Aug 22 '23 at 17:50

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

How to convert Pendo's JavaScript to TypeScript?

2 Answers2