"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?
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> }] ...
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,
};
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,
}
}
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';
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"] }]
}