How to use iconMap

[udarts]

There is not much documentation, which could be very useful for a lot of people. I have a question on how to use the iconMap.

Can you provide documentation on how to add custom images for the toolbar?

[astraeapark]

i referenced #57 and it's working well

[udarts]

Thanks for your reply. I have been trying to use that:

actions={[
    actions.setBold,
    actions.setItalic,
    actions.setUnderline
]}
iconMap={{
    [actions.setBold]: () => (<Icon name='bold' size={20} color='grey'/>),
    [actions.setItalic]: () => (<Icon name='italic' size={20} color='grey'/>),
    [actions.setUnderline]: () => (<Icon name='underline' size={20} color='grey'/>)
}}

But I see no icons, just the grey bar.

[omnikitty]

        {icon ? <Image source={icon} style={{tintColor: selected ? this.props.selectedIconTint : this.props.iconTint}}/> : null}

This is the code that renders the toolbar icon in RichTextToolbar.js. icon is the appropriate entry in the iconMap for the action. So you need an image path that will work for the Image source prop. Try something like

iconMap={{
    [actions.setBold]: () => ('../path/to/image.png')

[udarts]

Hi there, sorry for the late reply.

I want to use icons instead of image files for the actions. This because in android one of the files is giving an error (something with png rendered as flat file). Is there a way to use vector icons instead of images?

I am trying it as well, to see how to do it.

[udarts]

@astraeapark oh man, I didn't read the whole thing, just checked your comment and the commit and it works indeed. This should be pulled into the master file, so we can use icons instead of images.

[TharaViswa]

Hi ..Can someone help me to load icons in tool bar.. I tried #57 solution. but still unable to see icons

[tobiaskusnaman]

Actually, you don't have to set the list of iconMap as a function, just pass the path of your image (must be an image), because the package will render it as an <Image source={icon path}/>

iconMap={{
            [actions.setBold]: require(path to your image),
            [actions.setItalic]: require(path to your image),
        }}