Support icon as component instead of only image

[thebergamo]

Hi,

First of all, after getting know this lib I fall in love, so cheers guys!

Would you be open to support passing icon in those components as component instead of supporting only images.

For example when we've the Chip component we would use it like this:

import { Chip } from 'react-native-ui-lib';
import Icon from 'react-native-vector-icons/MaterialIcons';

export default (props) => 
<Chip label="3km" icon={<Icon name="map" />} />

I believe it's quite standard using react-native-vector-icons, so we could have a more connected ecosystem.

If you're open to have it as an option into those components, I would create a PR for it :)

[dhcmega]

Hi, is there any change to have this? thanks!

[ethanshar]

Added to our board

[lidord-wix]

Hey @thebergamo and @dhcmega,
We can add it to our Chip component, there are other components you would like to have this support in?

[thebergamo]

I believe all components that have option to pass a image could benefit from being able to pass a component to it :)

[dhcmega]

@lidord-wix hi! Out of the top of my head, I think I would use it as transparent back button for the header, regular buttons, lists and custom touchable buttons for the "home/desktop" of my app. Thanks!

[richardrobberse]

@lidord-wix @ethanshar I think I'm facing a similar issue - trying to pass an icon coming from @expo/vector-icons to the rightIconSource prop of the Picker component. Kind of expected the render function to work no matter where the icon is coming from? Any ideas?

[lidord-wix]

Hey @richardrobberse,
We're working on a new TextField component with trailingAccessory and leadingAccessory props that doing the functionality you described, this TextField will be used by our Picker component so you'll be able to use it there soon :)

[mlabrum]

TabBar.Item is another candidate for this.

I've even tried using the react-native-vector-icons getImageSource to pass the image directly to it

<TabBar.Item key={label} label={label} onPress={onPress} icon={Icon.getImageSourceSync("account-arrow-left", 20, "red")}/>

[lidord-wix]

@thebergamo, @dhcmega, @richardrobberse, @mlabrum,
I'm closing this issue since we added the required support to most of our main components.
If there's a specific need, please open an issue for that and we'll address it.

[ConnorLanglois]

Hi, can we get support for this for the Toast component "icon" prop?

[lidord-wix]

Hi @ConnorLanglois,
You can pass your custom content as the Toast children.
Please let me know if it doesn't work for you :)

[MLaidlawScott]

Hello. Firstly, thanks for this library and the docs and examples. Really enjoying using it.

I’m wondering if there is support or plans to add support for using icons from @expo/vector-icons in the iconSource prop of Button components.

Or, if it is possible to load specific icons using Assets.loadAssetGroup that would allow them to be used in iconSource.

Thanks

[lidord-wix]

Hello @MLaidlawScott,
You can pass any component you wish as a child of our <Button /> component, to have a custom button (example).
Also, you can see here an example for how to use the loadAssetsGroup