Toast pop up randomly when other popup/dialog opens

[Shubham-1994]

Describe the bug I have declared Toast component in the Root Container. Because of this while any other dialog or popup like Android Permission dialog appears on screen, an Empty toast also shows on top of screen.

Expected behavior Toast should not be displayed until Toast.show is called

Environment (please complete the following information):

• OS: Android
• react-native-toast-message version: ^2.1.5
• react-native version 0.67.2

[casq10pearls]

The same issue here. could you please answer us something?

[vatsalya-honeycomb]

I am also able to reproduce it in Android, IOS works fine.

[ihsan77]

@vatsalya-honeycomb is there any solution for android?

[ihsan77]

@calintamas any solution for android?

[cflorez10]

I was able to reproduce this issue in Android, although it is not a blocker for my application in production, it is definitely something that does not work as expected. It would be great if someone from core team could tell us what steps to follow to avoid this behavior or how we can help to solve it.

[Shubham-1994]

I am able to solve this by just keeping in Root Container just outside my main only. One more hack is if you are not using default success toast variant then override it with null.

[casq10pearls]

Thanks @Shubham-1994, the second option works!

[heinst]

One more hack is if you are not using default success toast variant then override it with null.

For anyone a little confused like I was, in your ToastConfig add

success: props => null,

[nlaffey]

The fix noted by @elabayoub doesn't seem to be compatible with version 2.1.5 unfortunately. The index.js file is different and I can't seem to quickly find the equivalent change.

[mehranjavid]

I was having the same issue this worked for me https://github.com/calintamas/react-native-toast-message/issues/226#issuecomment-1009841777

[rchavik]

The fix noted by @elabayoub doesn't seem to be compatible with version 2.1.5 unfortunately. The index.js file is different and I can't seem to quickly find the equivalent change.

How about this?

diff --git a/node_modules/react-native-toast-message/lib/src/ToastUI.js b/node_modules/react-native-toast-message/lib/src/ToastUI.js
index bb5ce5c..2720e98 100644
--- a/node_modules/react-native-toast-message/lib/src/ToastUI.js
+++ b/node_modules/react-native-toast-message/lib/src/ToastUI.js
@@ -34,6 +34,7 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
 export function ToastUI(props) {
     const { isVisible, options, hide } = props;
     const { position, topOffset, bottomOffset, keyboardOffset } = options;
+    if (!isVisible) return (<></>);
     return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);

[gus-t27]

The fix noted by @elabayoub doesn't seem to be compatible with version 2.1.5 unfortunately. The index.js file is different and I can't seem to quickly find the equivalent change.

How about this?

diff --git a/node_modules/react-native-toast-message/lib/src/ToastUI.js b/node_modules/react-native-toast-message/lib/src/ToastUI.js
index bb5ce5c..2720e98 100644
--- a/node_modules/react-native-toast-message/lib/src/ToastUI.js
+++ b/node_modules/react-native-toast-message/lib/src/ToastUI.js
@@ -34,6 +34,7 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
 export function ToastUI(props) {
     const { isVisible, options, hide } = props;
     const { position, topOffset, bottomOffset, keyboardOffset } = options;
+    if (!isVisible) return (<></>);
     return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);

Thanks this patch worked for me. Although one thing I noticed is now the toast doesn't have the slide off animation, it just disappears. Not a big problem but the slide on animation still works fine 🧐.. Any ideas why?

[rchavik]

The fix noted by @elabayoub doesn't seem to be compatible with version 2.1.5 unfortunately. The index.js file is different and I can't seem to quickly find the equivalent change.

How about this?

diff --git a/node_modules/react-native-toast-message/lib/src/ToastUI.js b/node_modules/react-native-toast-message/lib/src/ToastUI.js
index bb5ce5c..2720e98 100644
--- a/node_modules/react-native-toast-message/lib/src/ToastUI.js
+++ b/node_modules/react-native-toast-message/lib/src/ToastUI.js
@@ -34,6 +34,7 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
 export function ToastUI(props) {
     const { isVisible, options, hide } = props;
     const { position, topOffset, bottomOffset, keyboardOffset } = options;
+    if (!isVisible) return (<></>);
     return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);

Thanks this patch worked for me. Although one thing I noticed is now the toast doesn't have the slide off animation, it just disappears. Not a big problem but the slide on animation still works fine 🧐.. Any ideas why?

Because the component that does the animation does not get rendered at all. So instead of being able to slide offscreen, you just get an empty fragment.

[Ali-Aref]

The fix noted by @elabayoub doesn't seem to be compatible with version 2.1.5 unfortunately. The index.js file is different and I can't seem to quickly find the equivalent change.

How about this?

diff --git a/node_modules/react-native-toast-message/lib/src/ToastUI.js b/node_modules/react-native-toast-message/lib/src/ToastUI.js
index bb5ce5c..2720e98 100644
--- a/node_modules/react-native-toast-message/lib/src/ToastUI.js
+++ b/node_modules/react-native-toast-message/lib/src/ToastUI.js
@@ -34,6 +34,7 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
 export function ToastUI(props) {
     const { isVisible, options, hide } = props;
     const { position, topOffset, bottomOffset, keyboardOffset } = options;
+    if (!isVisible) return (<></>);
     return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);

Thanks this worked for me.