React-native-ui-kitten: Colored Icons

[chamatt]

Add ability to color Icons

I'm submitting a ...

• [ ] bug report
• [x] feature request

Issue description

Current behavior:
Currently the only way to have a colored icon is inside an "outline" button, but it has an outline and a background.

Expected behavior:
There should be a "status" prop (like nebula has) where you could input the color of the icon ("primary"|"warning"..etc).

This is specially useful if you want to use the Icon as standalone button (only the icon, no background or outline), and you want it to have a color. Currently, there is no way to do this, at least not that i know of.

But there as also other decorative uses.

[artyorsh]

Hi @chamatt :wave: Thanks for the suggestions!
Can the following code solve your issue? ;)

import { Button, Icon } from 'react-native-ui-kitten';

const StarIcon = (style) => (
  <Icon { ...style } name='star' />
);

const StarButton = (props) => (
  <Button appearance='ghost' status='primary' icon={StarIcon} />
);

This will render a transparent Button with icon colored according to the status property.

[artyorsh]

@chamatt
btw

There should be a "status" prop (like nebula has)

Does it mean your project relies on both Nebular and UI Kitten? If so, could you please share some feedback / project details (you can do it here)? We'll really appreciate it :)

[chamatt]

Thanks a lot man! I didn't know it was already possible, and it perfectly solves the use case i described.

But still, it would be pretty nice to have the ability to use colored icons standalone, or even inside another custom touchable. Because if it works inside a ghost, there's already an API to archive this effect, it's just hidden behind the {...style} destructuring.

As for the question of whether i use both, no i don't. I just got curious if that was possible in nebula because i saw that it was the web alternative to UI Kitten.

I don't use the library professionally (yet :P), I just got to know it a few weeks ago and I've been finding it pretty nice thus far. Thanks for the great work!