score:27

Accepted answer

typescript has no idea of the navigation type.

to just get rid of this error, you can type the navigation prop as any (not advisable btw) like so:

/*doing this will make you lose type safety*/
const home = ({navigation}: {navigation: any}) => {
 return ...
}

recommended approach

looking at the docs https://reactnavigation.org/docs/typescript/ we can see we need to create an object type with mappings for route name to the params of the route, then pass this object type as a generic to the createstacknavigator function.

in the screens, we need to import the corresponding type from the navigator which in you case is the stacknavigator. this type takes 2 generics: a params list object type and the name of the current route.

// in your case

// app.tsx
import { createstacknavigator } from '@react-navigation/stack';

type rootstackparamlist = {
  home: undefined, // undefined because you aren't passing any params to the home screen
  profile: { name: string }; 
};

const stack = createstacknavigator<rootstackparamlist>();


// home.tsx
import { stacknavigationprop } from '@react-navigation/stack';
type profilescreennavigationprop = stacknavigationprop<
  rootstackparamlist,
  'home'
>;

type props = {
  navigation: profilescreennavigationprop;
};

const home = ({navigation}: props) =>{
  return ...
}

Related Query

More Query from same tag