React Native React Navigation v5 Tab tintColor not working in Image

Question

I am using "@react-navigation/bottom-tabs": "^5.11.11" and creating a bottom tab navigation. However the tintColor doesn't apply to the Image component

import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const SupportStack = createStackNavigator();

const Tab = createBottomTabNavigator();


const SPressPlusDashboard = ({ navigation }) => {
  return (
    <Tab.Navigator
      initialRouteName={'Support'}
      tabBarOptions={{
        activeTintColor: '#0062C8',
        inactiveTintColor: '#979797',
      }}
    >
      <Tab.Screen
        name='Support'
        component={SupportStackScreen}
        options={{
          tabBarLabel: 'Support',
          tabBarIcon: ({ color, size }) => <Image source={Images.sPressPlusIcons.supportIcon} tintColor={color} />,
        }}
      />
    </Tab.Navigator>
  );
};

export default SPressPlusDashboard;

The linting gives me this error on tintColor:

No overload matches this call.
  Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error.
    Type '{ source: any; tintColor: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'tintColor' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error.
    Type '{ source: any; tintColor: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'.
      Property 'tintColor' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps> & Readonly<{ children?: ReactNode; }>'.ts(2769)
(JSX attribute) tintColor: string

Answer 1

It works if I pass tintColor inside the style property:

tabBarIcon: ({ color, size }) => (
            <Image source={Images.sPressPlusIcons.supportIcon} style={{ tintColor: color }} />
     ),