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