Clever Geek Handbook

"Navigation responsive" is missing in props validation

The React Navigation introduction page suggests using the following destructuring assignment:

const { navigate } = this.props.navigation;

However, when I implemented React Navigation in my application, ESLint complains about this line describing both of these errors:

there is no "navigation" when checking the props (types of reaction / support)

"navigation.navigation" missing when checking props (react / support types)

Even if the application is working as expected, how can these error lines be removed?

+9


source to share


5 answers


One option is to add a propTypes

prop to the component.

example

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


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

Rule parameters

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

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


source


React.PropTypes

moved to the package prop-types

since React v15.5 (see Type Checking with PropTypes ).

It should be used instead of import react-native

(the package can be added to the project with npm install --save prop-types

or npm install --save prop-types

yarn add prop-types

).



And the sample code corresponding to the rule "Component must be written as a pure function" looks like this:

// 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,
};
+10


source


Solution today (as Proptype object is no longer accepted by default):

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


source


For ES5 navigation, 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';

0


source


When a project needs navigation to almost all components. We can also silence the backing for that particular prop.

By adding the following to your eslint config:

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


source






More articles:


All Articles