TSLint: Property 'params' does not exist on type 'NavigationState'

Question

I use typescript in react-native development. I pass params to screen through navigate function.

this.props.navigation.navigate("NextScreen", { title: "title" })

In NextScreen I access params through this.props.navigation.state.params.title but I get tslint error for params.

TS2339:Property 'params' does not exist on type 'NavigationState'.

This is some of codes.

import { NavigationInjectedProps } from "react-navigation";
interface OwnProps {
}
interface OwnState {
}

type Props = NavigationInjectedProps & OwnProps;

class NextScreen extends React.Component<Props, OwnState> {
    ...
    public render() {
        // tslint error occurs in this line.
        const { title } = this.props.navigation.state.params;
        ...
    }
}

I assume I should define types of passing props but what would be proper approach?

Answer 1

I solved by this way but I'm not sure if this is the best way. Researching original code, I redefine navigation with custom type NavigationScreenProp<NavStateParams>.

import { NavigationInjectedProps, NavigationScreenProp, NavigationState } from "react-navigation";
...
interface ParamType {
  title: string;
}
interface StateParams extends NavigationState {
  params: ParamType;
}
interface OwnProps {
  navigation: NavigationScreenProp<StateParams>;
}

type Props = OwnProps & NavigationInjectedProps;