react-native-ui-kitten: Bottom navigation with icons: invalid props tintColor

Issue type

I’m submitting a … (check one with “x”)

bug report?
feature request

Issue description

Current behavior: When I add any icons to bottom tab navigation (e.g. @expo/vector-icons) it shows me Warning: Failed prop type: Invalid props.style key tintColor supplied to Text.

Expected behavior: no warnings.

Steps to reproduce: I’ve basically copy-pasted “With React Navigation API and usage example” from Bottom Navigation documentation and added few icons from @expo/vector-icons to the tabs.

Related code:

import { MaterialIcons } from '@expo/vector-icons';

const WalletIcon = ({ tintColor }) => 
  <MaterialIcons color={tintColor} name="compare-arrows" size={24} />

<BottomNavigationTab title='Accounts' icon={WalletIcon} />

Other information:

OS, device, package version

WIN10, Android Emulator API 29

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16

Most upvoted comments

it still not fixed i am facing the same issue .

PrognosticatorR on Oct 22, 2019

Fortunately, we’ve already faced this issue and currently working on it. The reason is that vector-icons render a Text, which we didn’t expect to be returned from icon prop. This will be fixed in the next version

Thanks for reporting this

artyorsh on Jul 27, 2019

in my case I am facing this error Warning: Failed prop type: Invalid props.style key tintColor supplied to Text while using @expo/vector-icons as Input’s accessory, quick fix for me is to wrap icon with fragment and warning will disappear.

NazarDevsMedia on Mar 2, 2023

There are two options for you now:

Configure YellowBox to ignore this type of warning
Use any other icons library that renders SVG (e.g Eva Icons), or simply use an Image component

Again, the fix will be available in the next release 😃

artyorsh on Jul 27, 2019