react navigation tab screen icon color props type

Question

I use eslint with vs code for my react native project .

I created a bottom tabs navigation using react navigation v5 :

 ...
   <Tab.Screen
        name="Contacts"
        component={ContactStackScreen}
        options={{
          tabBarLabel: 'Contacts',
          tabBarColor: COLORS.DEFAULT,
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons name="contacts" color={color} size={26} />
          ),
        }}
       ...

I got eslint error for color props :

'color' is missing in props validation

I tried to fix it :

ButtomTabs.propTypes = {
  color: PropTypes.string,
};

but i got this error :

propType "color" is not required, but has no corresponding defaultProps declaration

Answer 1

I believe there's a misunderstanding by the previous answers as to what is causing eslint to throw the react/prop-types error in this case. The lint error is correct - what's missing is the props validation for the arrow function introduced for tabBarIcon. Since that arrow function returns a React component, eslint is correct in enforcing the react/prop-types rule. To satisfy the rule, you need to provide prop types for that arrow function (think of the arrow function as an anonymous component which takes color as a prop). Just add {color: string} as the type definition for the entire parameter of that arrow function like this:

({color}: {color: string}) =>

In context:

<Tab.Screen
        name="Contacts"
        component={ContactStackScreen}
        options={{
          tabBarLabel: 'Contacts',
          tabBarColor: COLORS.DEFAULT,
          tabBarIcon: ({color}: {color: string}) => (
            <MaterialCommunityIcons name="contacts" color={color} size={26} />
          ),
        }}