React Navigation 'navigation' is missing in props validation

Question

React Navigation's introduction page suggests the use of the following destructuring assignment:

const { navigate } = this.props.navigation;

However, when I implemented React Navigation in my App, ESLint is complaining about this line describing these both errors:

'navigation' is missing in props validation (react/prop-types)

'navigation.navigation' is missing in props validation (react/prop-types)

Even though the app seems to be working as intended, how would it be possible to remove these error lines?

Answer 1

React.PropTypes has moved into the prop-types package since React v15.5 (see Typechecking with PropTypes).

It should be used instead of importing from react-native (the package can be added into the project via npm install --save prop-types or yarn add prop-types).

And the example code complying with "Component should be written as a pure function" rule as follows:

// In addition to other imports:
import PropTypes from 'prop-types';

const LoginScreen = ({ navigation }) => (
  <View>
    <Button
      title="Login"
      onPress={() => navigation.navigate('MainScreen')}
    />
  </View>
);

LoginScreen.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func.isRequired,
  }).isRequired,
};

Answer 2

Solution today (since object Proptype isn't accepted by default anymore):

export default class LoginScreen extends Component {
  static propTypes = {
    navigation: PropTypes.shape({
      navigate: PropTypes.func.isRequired,
    }).isRequired,
  }
}

Answer 3

One option is to add the propTypes prop to the component.

Example

LoginScreen.propTypes = {
  navigation: PropTypes.object.isRequired,
};

Another option is to disable eslint for that page and rule. More info here

Rule Options

This rule can take one argument to ignore some specific props during validation.

...
"react/prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator> }]
...

Answer 4

When Project needs navigation to almost all componenets. We can also silence the linting for that specific prop.

By adding the following in the eslint configuration:

    "rules": {
     "react/prop-types": ["error", { "ignore": ["navigation"] }]
}