CODEWITHSUNDEEP
typescriptreact-nativereact-navigation
gafemoyano
gafemoyano

Reputation: 189

getParam errors about Argument of type X is not assignable to parameter of type '"navigation" | "screenProps" | "navigationOptions"'

I've been trying to get react-navigation to play nice with typescript, but I'm having a hard time with all the warnings.

I tried looking into the types api but I can't really find what I'm supposed to do to make the warning go away.

const VenueDetails: NavigationScreenComponent<NavigationScreenProps> = ({
  navigation
}) => {
  const venueId: NavigationScreenProp<string> = navigation.getParam(
    'id',
    'NO-ID'
  )
return(...)
}

so getParam throws the following warning:

Argument of type '"id"' is not assignable to parameter of type '"navigation" | "screenProps" | "navigationOptions"'.ts(2345) And I have no idea what I'm doing wrong.

Upvotes: 1

Views: 420

Answers (2)

Emmanuel Martinez
Emmanuel Martinez

Reputation: 104

If you're using react-navigation v4 you'd want to type it as follows:

import { NavigationStackScreenComponent } from 'react-navigation-stack';

const VenueDetails: NavigationStackScreenComponent = ({ navigation }) => {
    const venueId = navigation.getParam('id','NO-ID');

    return(...)
}

If you want to extend this to work with custom props you can type that as follows:

import { NavigationStackScreenComponent } from 'react-navigation-stack';

type Params = { venuId: string };
type ScreenProps = { myCoolProp: number };

const VenueDetails: NavigationStackScreenComponent<Params, ScreenProps> = ({ navigation, screenProps }) => {
    const venueId = navigation.getParam('id','NO-ID');
    const { myCoolProp } = screenProps

    return(...)
}

Upvotes: 1

Pedro Henrique
Pedro Henrique

Reputation: 394

I think you're typing venueId incorrectly. Is it just a string? Just type it as string and I think you're good to go.

Upvotes: 0

Related Questions