Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React-Native - How to convert JS to TS using functional component declaration (FC)?

$
0
0

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:

  1. Does my App() provides equivalent implementation to function RootNavigator(props) from Pendo's instructions?
  2. Is my implementation for onStateChange() and onReady()inline with Pendo's instructions?
  3. 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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>