react-native-root-toast icon indicating copy to clipboard operation
react-native-root-toast copied to clipboard

Please add support for adding a custom icon before the text

Open KaranChimple opened this issue 4 years ago • 12 comments

KaranChimple avatar Apr 23 '20 12:04 KaranChimple

Yes, I am also looking for this feature

Yandamuri avatar Jan 07 '21 10:01 Yandamuri

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>
    </>,
    {`

kilisoria avatar Feb 12 '21 22:02 kilisoria

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

Screenshot_1613478193

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

Yandamuri avatar Feb 16 '21 12:02 Yandamuri

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.

kilisoria avatar Feb 16 '21 19:02 kilisoria

@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?

Yandamuri avatar Feb 17 '21 06:02 Yandamuri

Hi! You have the following props:

.......
 containerStyle: {
      
},
textStyle: {
        
},
......

image

kilisoria avatar Feb 17 '21 11:02 kilisoria

Hey This is Awesome!. In fact, containerStyle and textStyle are 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 VScode editor?

Yandamuri avatar Feb 18 '21 03:02 Yandamuri

please update types from msg: string to ReactNode

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?

AndreasA avatar Nov 26 '21 06:11 AndreasA

Any updates? Support react node type is really much needed

vladhelios avatar Jun 10 '24 12:06 vladhelios