23

I am using eslint airbnb in my react native project. The eslint throw error linting if i didn't validate the props, especially the props from react-navigation.

props validation 1 How do i validate this using PropTypes?

I am trying to validate it like this:

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

but still got error linting like this error lint 2

How do i pass the default props, and should i?

dehamzah
  • 1,243
  • 1
  • 10
  • 18

2 Answers2

31

I am fixing it by setting the navigation and navigate props to be required.

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

eslint force us to provide default props to be set if we set the props to be optional. So if we set the props to be required, the eslint will not warn you again.

dehamzah
  • 1,243
  • 1
  • 10
  • 18
23

In addition to the answer by Dede there might be occasions when your project adds navigation to (basically) all your components. Adding the props validation for navigation is an unnecessary task and then you might as well silence the linting for that specific prop.

You do this by adding the following in your eslint configuration:

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

Keep in mind though that you will need to ensure that navigation is in fact added to your components before using it.

MikaelHalen
  • 5,312
  • 1
  • 16
  • 15
  • 1
    This should be the answer. – lcssanches Apr 23 '18 at 14:18
  • "rules" where? in user-settings? in workspace-settings? just plain old "rules" or is this under "eslint" or something? – pashute Jun 27 '18 at 06:41
  • Your eslint is configured in your eslint configuration file. It can come in different formats. Quoting from the eslint.org website: "This can be in the form of an .eslintrc.* file or an eslintConfig field in a package.json file, both of which ESLint will look for and read automatically" You can read further at this link: https://eslint.org/docs/user-guide/configuring – MikaelHalen Jun 27 '18 at 11:02