Please add support for adding a custom icon before the text

[Yandamuri]

Yes, I am also looking for this feature

[kilisoria]

Hi Guys! I had the same issue but I tried to add an React element in the message and it works.

return Toast.show(
    <>
      <MessageIcon type="FontAwesome" ios={icon} android={icon} />
      <MessageText>{` ${message}`}</MessageText>
    </>,
    {`

[Yandamuri]

@kilisoria this is custom View is rendering inside the actual Toast View As shown in the below image

here background black View is Actual Toast View. Is it possible to remove this actual Toast View?

[kilisoria]

I'm not sure but I think you can try to modify the styles for Toast main container, there is a property for that, and set same background color or modify margin/padding sizes.

[Yandamuri]

@kilisoria This is how I achieved my requirement

const toastMainContianer = {
    height: 41,
    paddingLeft: 13.5,
    paddingRight: 18,
    paddingVertical: 11,
    backgroundColor: '#4B5460',
    borderRadius: 10
}

Toast.show(<View style={toastMainContianer}><Text style={{color: '#FFFFFF'}}>{message}</Text></View>, {
    duration: 1000,
    position: -99, 
    shadow: false,
    animation: true,
    hideOnPress: true,
    delay: 0,
    backgroundColor: 'F2F8FF' //This is my app background color. So that Toast main container background color will be mixed with app background color.
});

BTW, I didn't find Toast main container prop. Can you let me know the prop name and where is it mentioned in the documentation?

[kilisoria]

Hi! You have the following props:

.......
 containerStyle: {

},
textStyle: {

},
......

[Yandamuri]

Hey This is Awesome!. In fact, containerStyle and textStyleare not mentioned in the documentation. Can you tell me how to find out all the available props?

usually package maintainers are not mentioning all the available props in the documentation. Is there any way to find out through VScodeeditor?

[stanislav-sidorov-empeek]

please update types from msg: string to ReactNode

[AndreasA]

Created PR to adjust type for message: https://github.com/magicismight/react-native-root-toast/pull/150/files

EDIT: I also just found this PR: https://github.com/magicismight/react-native-root-toast/pull/111 which fixes the type and does additional stuff regarding RectNode support. Not sure if that is necessary as apparently it already works, so only the type should be wrong but maybe there are some specific components that make it necessary?

[vladhelios]

Any updates? Support react node type is really much needed

[felipejh]

Waiting for this. It would be very usefull.