I implemented react-native-root-toast in my expo application, I am using expo 51, please refer below code to understand the problem
<code>const bgColor = {
'error': {
color: '#DA5C53',
iconName: <WarningIcon size="5" color="error.800" alignSelf="center" mr="5"/>,
iconColor: "error.800"
},
'success': {
color: '#36AE7C',
iconName: <CheckCircleIcon size="5" color="success.800" alignSelf="center" mr="5"/>,
iconColor: "success.800"
},
'info': {
color: '#4D96FF',
iconName: <InfoIcon size="5" color="info.800" alignSelf="center" mr="5"/>,
iconColor: "info.800"
}
}
export function ShowToast({
id,
status,
title,
description
}: toastType){
if(description == undefined){
description = "Some error occured"
}
console.log(description, "description")
let toast = Toast.show("Some error occured", {
duration: Toast.durations.LONG,
position: Toast.positions.BOTTOM,
backgroundColor: bgColor[status].color ,
delay: 2000,
hideOnPress: true,
opacity: 1,
shadow: true,
animation: true,
})
setTimeout(() => {
Toast.hide(toast);
}, 5000)
}
</code>
<code>const bgColor = {
'error': {
color: '#DA5C53',
iconName: <WarningIcon size="5" color="error.800" alignSelf="center" mr="5"/>,
iconColor: "error.800"
},
'success': {
color: '#36AE7C',
iconName: <CheckCircleIcon size="5" color="success.800" alignSelf="center" mr="5"/>,
iconColor: "success.800"
},
'info': {
color: '#4D96FF',
iconName: <InfoIcon size="5" color="info.800" alignSelf="center" mr="5"/>,
iconColor: "info.800"
}
}
export function ShowToast({
id,
status,
title,
description
}: toastType){
if(description == undefined){
description = "Some error occured"
}
console.log(description, "description")
let toast = Toast.show("Some error occured", {
duration: Toast.durations.LONG,
position: Toast.positions.BOTTOM,
backgroundColor: bgColor[status].color ,
delay: 2000,
hideOnPress: true,
opacity: 1,
shadow: true,
animation: true,
})
setTimeout(() => {
Toast.hide(toast);
}, 5000)
}
</code>
const bgColor = {
'error': {
color: '#DA5C53',
iconName: <WarningIcon size="5" color="error.800" alignSelf="center" mr="5"/>,
iconColor: "error.800"
},
'success': {
color: '#36AE7C',
iconName: <CheckCircleIcon size="5" color="success.800" alignSelf="center" mr="5"/>,
iconColor: "success.800"
},
'info': {
color: '#4D96FF',
iconName: <InfoIcon size="5" color="info.800" alignSelf="center" mr="5"/>,
iconColor: "info.800"
}
}
export function ShowToast({
id,
status,
title,
description
}: toastType){
if(description == undefined){
description = "Some error occured"
}
console.log(description, "description")
let toast = Toast.show("Some error occured", {
duration: Toast.durations.LONG,
position: Toast.positions.BOTTOM,
backgroundColor: bgColor[status].color ,
delay: 2000,
hideOnPress: true,
opacity: 1,
shadow: true,
animation: true,
})
setTimeout(() => {
Toast.hide(toast);
}, 5000)
}
I used different toastOptions but not working, help me How to fix it?