Icons are assumed to be Image components

[jadnco]

It would be nice to be able to render any component with the renderIcon and renderSelectedIcon properties. Using <Text /> or <View /> works fine, but this warning pops up:

Warning: Failed propType: Invalid props.style key `tintColor` supplied to `View`

I ran into this while implementing react-native-vector-icons - which uses <Text />.

[windy]

+1 I have the same problem, hope author can merge this earlier.

[anywhy]

+1 I have the same problem，wants help.

[charlesLin]

+1 The same issue. Please help.

[timscott]

Is there a workaround?

[CaryLandholt]

+1 - tried to resolve this several times, went down a rabbit hole… would really appreciate some help on this

[simlegate]

is there any update?

[bingoyan]

I use this way to solve this issue. Use renderIcon and renderSelectedIcon, then the [Warning] disappeared.

const tabBarItems = [
    { title: 'home', icon:() => <Icon name={'home'} size={30} /> , icon_selected:() => <Icon name={'home'} color = {'#4F8EF7'} size={30} /> , component: HomeContainer },
    { title: 'mark', icon:() => <Icon name={'bookmark'} size={30} />, icon_selected:() => <Icon name={'bookmark'} color = {'#4F8EF7'} size={30} /> , component: HomeContainer },
]

<TabNavigator tabBarStyle={{ height: 60 }}> 
                {
                    tabBarItems.map((controller, i) => {
                        let Component = controller.component;
                        return (
                            <TabNavigator.Item
                                key= {i}
                                selected={this.state.selectedTab === controller.title}
                                title={controller.title}
                                **renderIcon = {controller.icon}
                                renderSelectedIcon = {controller.icon_selected}**
                                onPress={() => this.setState({ selectedTab: controller.title }) }>

                                <Component navigator = {this.props.navigator} {...this.props}/>
                            </TabNavigator.Item>
                        )
                    })
                }
</TabNavigator >

[timscott]

Thanks @bingoyan. Works for me. Adding renderSelectedIcon for every TabNavigator.Item makes the warning go away.

[ptomasroos]

Will close since this issue is more than a year, feel free to a open a new if this is still a issue.