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

[justasam]

Issue type

I'm submitting a ... (check one with "x")

• [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

[artyorsh]

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]

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 :)

[tgdn]

What's the state of this?

[artyorsh]

@tgdn I guess this is fixed in latest versions. Furthermore, we have released @ui-kitten/eva-icons package which works pretty well with all components distributed with UI Kitten

[deveshrawat]

it still not fixed i am facing the same issue .

[0plus1]

This still happens when using BottomNavigationTab

[artyorsh]

Hi everyone 👋

This still happens just because by default we expect the icon to be an Image. Since vector icons rely on the Text component, this issue occurs.

You're able to configure 3rd party icon libraries by following this guide. We explain how to use react-native-vector-icons package, but the same technique can be applied to @expo/vector-icons

[seyaobey]

@artyorsh the link to the guide is broken
I landed here from this stackoverflow question

[artyorsh]

@seyaobey sorry, we've updated docs recently. 3rd party icons guide is now here

[lyonsbp]

I still have this issue, even when using the @ui-kitten/eva-icons package. I get the error: "TypeError: Undefined is not an object (evaluating 'iconElement.props').

I am following the "Bottom navigation with icons" example here: https://akveo.github.io/react-native-ui-kitten/docs/components/bottom-navigation/overview#bottomnavigationtab

I have the icons setup in the repo already, and they work in other components like buttons etc. I also cannot find any live examples online of bottom nav working with icons. Can you confirm it works?

[artyorsh]

@lyonsbp yes I can. Can you please provide related code and library versions?

[lyonsbp]

Sure. Its a private repo for an internal hackathon but I can share the relevant 2 files.

App.js:

import React from 'react';
import {StyleSheet, View, StatusBar} from 'react-native';
import 'react-native-gesture-handler';
import {Colors} from 'react-native/Libraries/NewAppScreen';

import {
  ApplicationProvider,
  Button,
  IconRegistry,
  Icon,
} from '@ui-kitten/components';
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import {mapping, light as theme} from '@eva-design/eva';
import {AppNav} from './src/components/AppNav/AppNav';

export const FacebookIcon = style => <Icon name="facebook" {...style} />;

export const LoginButton = () => <Button icon={FacebookIcon}>Icon Test</Button>;

const App = () => {
  return (
    <React.Fragment>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider mapping={mapping} theme={theme}>
        <StatusBar barStyle="dark-content" />
        <View>
          <LoginButton />
        </View>
        <AppNav />
      </ApplicationProvider>
    </React.Fragment>
  );
};

AppNav.js

const BookmarkIcon = style => {
  <Icon name="bookmark-outline" {...style} />;
};

const HomeIcon = style => {
  <Icon name="home-outline" {...style} />;
};

const SearchIcon = style => {
  <Icon name="search-outline" {...style} />;
};

const TabBarComponent = ({navigation}) => {
  const onSelect = index => {
    const selectedTabRoute = navigation.state.routes[index];
    navigation.navigate(selectedTabRoute.routeName);
  };

  return (
    <SafeAreaView>
      <BottomNavigation
        selectedIndex={navigation.state.index}
        onSelect={onSelect}>
        <BottomNavigationTab title="SAVED" />
        <BottomNavigationTab title="COOKTENT" />
        <BottomNavigationTab title="SEARCH" />
      </BottomNavigation>
    </SafeAreaView>
  );
};

If you need anything else let me know. The nav works great as is without the icons. However, if I replace the title="Saved" prop with icon={BookmarkIcon} I get the error I stated earlier.
The icon in the app.js file works great so I know the icons are working right. @artyorsh

[artyorsh]

@lyonsbp You can find live examples of BottomNavigation with icons by the link you shared. Could you clarify you have tintColor orUndefined is not an object issue? Also, can you confirm it will lead to the same error when using within navigator? (I mean in case it's rendered somewhere deeper in tree hierarchy)