React-navigation, Tintcolor Is Missing In Props Validation

I have put my react-navigation code into a separate Routes file which I am then importing into my App.js file. Everything is working fine but I am using Airbnb ESLint config in Ato

Solution 1:

You could create an additional Functional Component, add PropTypes for it and use in your main component. For example:

...
import PropTypes from 'prop-types';
...

const QuestionsTabBarIcon = ({ tintColor }) => (
  <Icon name="question-circle" type="font-awesome" size={20} color={tintColor} />
);
QuestionsTabBarIcon.propTypes = {
  tintColor: PropTypes.string.isRequired,
};

...

const ContentNavigator = TabNavigator(
  {
    Profile: { screen: ProfileStack },
    History: { screen: HistoryStack },
    Questions: {
      screen: QuestionsStack,
      navigationOptions: {
        tabBarIcon: QuestionsTabBarIcon
      },
    },
    Notifications: { screen: NotificationsStack },
  },
  {
    initialRouteName: 'Profile',
    swipeEnabled: true,
    tabBarOptions: {
      activeTintColor: COLOR_PRIMARY,
    },
    backBehavior: 'none',
  }
);

...