react navigation tab screen icon color props type

user_12090310 0
Viewed 2699

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

react-proptypes eslint-config-airbnb react-native eslint
3 Answers

Ignore the warning. It's a false positive.

  1. tabBarIcon isn't a component and propTypes are only applicable to components
  2. You're adding propTypes on BottomTabs component, but the warning is likely from the eslint plugin assuming that the function passed to tabBarIcon is a component
user_16650260

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} />
          ),
        }}
user_83981560

As per the documentation,

tabBarIcon is a supported option in bottom tab navigator. So we know we can use it on our screen components in the options prop, but in this case chose to put it in the screenOptions prop of Tab.Navigator in order to centralize the icon configuration for convenience. here is an example of using Icon with Tab.Screen

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
return (
<Tab.Navigator
  initialRouteName="Feed"
  tabBarOptions={{
    activeTintColor: '#e91e63',
  }}
>
  <Tab.Screen
    name="Feed"
    component={Feed}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="home" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Notifications"
    component={Notifications}
    options={{
      tabBarLabel: 'Updates',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="bell" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      tabBarLabel: 'Profile',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="account" color={color} size={size} />
      ),
    }}
  />
</Tab.Navigator>

); }

user_66991200
Related