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 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 .

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

in my case I am facing this error Warning: Failed prop type: Invalid 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.

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 😃