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?

score 22 · Answer 1 · answered Apr 06 '18 at 06:44

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,
};

This solution definitely looks cleaner. – Al Amin Dec 16 '20 at 13:37 — Al Amin, Dec 16 '20 at 13:37

score 14 · Answer 2 · answered Feb 26 '18 at 13:18

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,
  }
}

score 13 · Accepted Answer · answered Oct 21 '17 at 21:52

13

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> }]
...

answered Oct 21 '17 at 21:52

bennygenel

23,896
6
65
78

3

Newest version now complains about the object type: `Eslint: Prop type 'object' is forbidden react/forbid-prop-types` – mcabe Feb 26 '18 at 10:31
13

To clarify the rule option mentioned above it would look something like this: `"react/prop-types": ["error", { "ignore": ["navigation"] }]` – MikaelHalen Mar 20 '18 at 09:33

score 6 · Answer 4 · answered May 02 '19 at 10:00

6

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"] }]
}

answered May 02 '19 at 10:00

Athul Raj

349
3
11

score 1 · Answer 5 · answered Feb 06 '19 at 21:48

1

In case of navigation in ES5 use something like this:

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

in ES6 use this:

static PropTypes = {
  navigation: PropTypes.object.isRequired,
};

and

import PropTypes from 'prop-types';

answered Feb 06 '19 at 21:48

karolkarp

271
2
7

It's working but after adding these part of code another warning appear. `Caution: `PropTypes` also has a named export `object`. Check if you meant to write `import {object} from 'prop-types'` instead.` Do you know how to avoid this without throwing exception to `eslint`? – Mikołaj Wittbrodt Apr 08 '22 at 12:46

React Navigation 'navigation' is missing in props validation

5 Answers5