When modal request permission appear then the modal toast on the previous screen also appears -> android #226

nguyenductoan1995 · 2021-07-29T11:03:03Z

chernandezq · 2021-08-26T20:53:56Z

I have the same issue, any updates ?

zidun · 2021-08-31T12:01:25Z

i

I have the same issue, any updates ?

+1

calintamas · 2021-11-04T17:48:14Z

Fixed in v2.0.0. Read the complete changelog.

If you find any issues with the v2 implementation, feel free to reopen this issue. Thanks!

chernandezq · 2021-11-04T20:24:01Z

@calintamas thank you for you support but I continue having the same issue in Android, already I update to the latest version 2.0.0

calintamas · 2021-11-05T04:32:21Z

@chernandezq Can you add a code sample showing how are you rendering the Toast component?

Maybe you could fill in the bug report template, so I can have a better chance at debugging this issue:

**Describe the bug**
A clear and concise description of what the bug is.

**Steps to reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Tap on '....'
3. Scroll down to '....'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Code sample**
To help debugging, please add a code sample that reproduces the issue.

**Environment (please complete the following information):**
 - OS: [iOS, Android, Web]
 - react-native-toast-message version: [e.g. v2.0.0]
 - react-native version [e.g. v0.65.0]

**Additional context**
Add any other context about the problem here.

Majid3ziz · 2021-11-08T07:01:56Z

Hey @calintamas, we like your package and we appreciate your efforts. I'm having the same issue here:

Describe the bug
Whenever a native permission is asked, the toast appears at top even if it wasn't triggered before.

Steps to reproduce
Steps to reproduce the behavior:

Have a navigation container in App.js with the v2.0.0 toast inside at the bottom of the container.
triggering any native android request permission.

Expected behavior
The toast should not appear at all. Unless I trigger it.
Screenshots
If applicable, add screenshots to help explain your problem.

Code sample
To help debugging, please add a code sample that reproduces the issue.

Environment (please complete the following information):

OS: Android
Android version 8
Samsung Galaxy Note 8
react-native-toast-message version: v2.0.0
react-native version: v0.64.0

calintamas · 2021-11-08T07:38:45Z

Hi @Majid3ziz, try rendering the Toast alongside the navigation container, like this:

https://github.com/calintamas/react-native-toast-message/blob/main/docs/navigation-usage.md

Let me know if it works

Majid3ziz · 2021-11-08T07:49:21Z

Hey @calintamas, I tried it no luck unfortunately.

claudiozam · 2021-11-09T18:18:13Z

Hi @calintamas I have the same issue only in Android. It's related to the change of state of the application (foreground to background for example).

I'm using appstate https://reactnative.dev/docs/appstate

Thats why @Majid3ziz have the same issue when he ask for permisions or in my case when i request google login.

chernandez-leantech · 2021-11-12T13:47:09Z

@calintamas any updates or way to fix it ?

zidun · 2021-11-12T13:57:14Z

Hi Guys, i fork the library and i added validation on rendering the view and my issue was resolved!

check my commit on this link

calintamas · 2021-11-12T14:03:28Z

@calintamas any updates or way to fix it ?

I haven't got the chance to investigate the issue further. I'll try this weekend and let you know

claudiozam · 2021-11-12T14:13:30Z

@zidun are you using the last version of the react-native-toast-message code?

claudiozam · 2021-11-12T14:41:51Z

Thanks @zidun. My new patch is working. @calintamas @Majid3ziz

diff --git a/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.js b/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.js
index 6be5fe8..fcf9414 100644
--- a/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.js
+++ b/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.js
@@ -66,7 +66,7 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
const newAnimationValue = isVisible ? 1 : 0;
animate(newAnimationValue);
}, [animate, isVisible]);

return (<Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} {...panResponder.panHandlers}>

return (isVisible && <Animated.View testID={getTestId('AnimatedContainer')} onLayout={computeViewDimensions} style={[styles.base, styles[position], animationStyles]} {...panResponder.panHandlers}>
{children}
</Animated.View>);
}

Majid3ziz · 2021-11-14T06:18:49Z

Thanks @zidun for the solution! @calintamas is the solution viable to be included in the next release?

AronBe · 2021-11-19T12:47:23Z

This issue happens on my Android app when I open a url with Linking as well, an empty success toast just happens to appear from nowhere. The solution with isVisible flag resolves the issue

calintamas · 2021-11-21T17:43:04Z

Thanks @zidun for the solution! @calintamas is the solution viable to be included in the next release?

Unfortunately, by doing this isVisible fix the hide animation will no longer happen.

So, I'll look into other solutions, but for the moment I can't seem to reproduce the issue either (running on Android 10)

Menardi · 2022-01-11T10:51:10Z

I've been seeing this issue too, although in a slightly different situation. I have a checkout flow in a Modal, and at the end of it, I open Stripe's checkout modal. When the Stripe checkout modal opens, an empty toast shows at the top of the screen (underneath the Stripe modal, but above the checkout modal).

Following the modal guide, I have <Toast> inside the modal, as well as the top level in App.tsx. This issue doesn't seem to happen if I remove the <Toast> inside the modal, keeping only the top-level one.

As @claudiozam said, it seems to be related to the state of the application changing. In my case, using AppState.addEventListener, I can see that the state changes to background when the Stripe modal is opened (presumably it is a different Activity). I'm guessing the same happens when permission prompts are shown, as others are seeing.

Disabling the native animations fixes this issue for me. I can only assume that when an app is in the background, the native animation system is turned off, and components end up in their default state. I think the Toast's default position is at the top of the screen, and then moved off screen by the animation system. So if the animation system is not active, then the Toast will be shown on screen.

Obviously it's not ideal to not use the native animations, but since the slide animation is pretty basic, I don't think it should be much of a problem. @calintamas What do you think of turning off native animations by default, and having a useNativeDriver prop allowing users to override it, with a note in the README explaining the potential issues? Or keep the default as true, but add the prop to allow useNativeDriver to be set to false to fix this issue where necessary.

By the way, this is my patch if anyone is interested (use it with patch-package):

diff --git a/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js b/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
index 511b693..a63c11a 100644
--- a/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
+++ b/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
@@ -15,7 +15,7 @@ export function useSlideAnimation({ position, height, topOffset, bottomOffset, k
     const animate = React.useCallback((toValue) => {
         Animated.spring(animatedValue.current, {
             toValue,
-            useNativeDriver: true,
+            useNativeDriver: false,
             friction: 8
         }).start();
     }, []);

zidun · 2022-01-11T16:16:43Z

Thank

I've been seeing this issue too, although in a slightly different situation. I have a checkout flow in a Modal, and at the end of it, I open Stripe's checkout modal. When the Stripe checkout modal opens, an empty toast shows at the top of the screen (underneath the Stripe modal, but above the checkout modal).

Following the modal guide, I have <Toast> inside the modal, as well as the top level in App.tsx. This issue doesn't seem to happen if I remove the <Toast> inside the modal, keeping only the top-level one.

As @claudiozam said, it seems to be related to the state of the application changing. In my case, using AppState.addEventListener, I can see that the state changes to background when the Stripe modal is opened (presumably it is a different Activity). I'm guessing the same happens when permission prompts are shown, as others are seeing.

Disabling the native animations fixes this issue for me. I can only assume that when an app is in the background, the native animation system is turned off, and components end up in their default state. I think the Toast's default position is at the top of the screen, and then moved off screen by the animation system. So if the animation system is not active, then the Toast will be shown on screen.

Obviously it's not ideal to not use the native animations, but since the slide animation is pretty basic, I don't think it should be much of a problem. @calintamas What do you think of turning off native animations by default, and having a useNativeDriver prop allowing users to override it, with a note in the README explaining the potential issues? Or keep the default as true, but add the prop to allow useNativeDriver to be set to false to fix this issue where necessary.

By the way, this is my patch if anyone is interested (use it with patch-package):
diff --git a/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js b/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
index 511b693..a63c11a 100644
--- a/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
+++ b/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
@@ -15,7 +15,7 @@ export function useSlideAnimation({ position, height, topOffset, bottomOffset, k
     const animate = React.useCallback((toValue) => {
         Animated.spring(animatedValue.current, {
             toValue,
-            useNativeDriver: true,
+            useNativeDriver: false,
             friction: 8
         }).start();
     }, []);

Thank you @Menardi working well

Hi @calintamas could you add new props for useNativeDriver ?

calintamas · 2022-02-08T15:43:05Z

Hi @zidun, @Menardi, thanks for looking into it. I think a default as true and a prop on the main <Toast /> instance would be a good-enough solution for now.

I'll try to add it in the following days

jzxchiang1 · 2022-03-11T05:18:33Z

I've been seeing this issue too, although in a slightly different situation. I have a checkout flow in a Modal, and at the end of it, I open Stripe's checkout modal. When the Stripe checkout modal opens, an empty toast shows at the top of the screen (underneath the Stripe modal, but above the checkout modal).

Following the modal guide, I have <Toast> inside the modal, as well as the top level in App.tsx. This issue doesn't seem to happen if I remove the <Toast> inside the modal, keeping only the top-level one.

As @claudiozam said, it seems to be related to the state of the application changing. In my case, using AppState.addEventListener, I can see that the state changes to background when the Stripe modal is opened (presumably it is a different Activity). I'm guessing the same happens when permission prompts are shown, as others are seeing.

Disabling the native animations fixes this issue for me. I can only assume that when an app is in the background, the native animation system is turned off, and components end up in their default state. I think the Toast's default position is at the top of the screen, and then moved off screen by the animation system. So if the animation system is not active, then the Toast will be shown on screen.

Obviously it's not ideal to not use the native animations, but since the slide animation is pretty basic, I don't think it should be much of a problem. @calintamas What do you think of turning off native animations by default, and having a useNativeDriver prop allowing users to override it, with a note in the README explaining the potential issues? Or keep the default as true, but add the prop to allow useNativeDriver to be set to false to fix this issue where necessary.

By the way, this is my patch if anyone is interested (use it with patch-package):
diff --git a/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js b/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
index 511b693..a63c11a 100644
--- a/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
+++ b/node_modules/react-native-toast-message/lib/src/hooks/useSlideAnimation.js
@@ -15,7 +15,7 @@ export function useSlideAnimation({ position, height, topOffset, bottomOffset, k
     const animate = React.useCallback((toValue) => {
         Animated.spring(animatedValue.current, {
             toValue,
-            useNativeDriver: true,
+            useNativeDriver: false,
             friction: 8
         }).start();
     }, []);

This fixed it for me. Thank you!

jeremiahtam · 2022-04-10T15:53:07Z

This solved my problem. It seems this issue has not been fixed yet in the latest update.

hirbod · 2022-06-01T11:29:31Z

I think I am going to port this library to Reanimated to get rid of the bare RN Animation System.

sznrbrt · 2022-08-15T22:35:05Z

    "react": "17.0.2",
    "react-dom": "18.1.0",
    "react-native": "0.68.1",
    "react-native-toast-message": "2.1.5",

The issue still persist, but solution by @Menardi works! Cheers!

ZohaibNaseer786 · 2024-01-02T13:22:13Z

Add isVisible in this file src/components/AnimatedContainer

 return (
    isVisible && ( //  <---- add here
      <Animated.View
        testID={getTestId("AnimatedContainer")}
        onLayout={computeViewDimensions}
        style={[styles.base, styles[position], animationStyles]}
        // This container View is never the target of touch events but its subviews can be.
        // By doing this, tapping buttons behind the Toast is allowed
        pointerEvents={isVisible ? "box-none" : "none"}
        {...panResponder.panHandlers}
      >
        {children}
      </Animated.View>
    )
  );

calintamas added bug Something isn't working v2 Bug fixed / feature added in v2 labels Oct 21, 2021

calintamas closed this as completed Nov 4, 2021

calintamas reopened this Nov 5, 2021

calintamas removed the v2 Bug fixed / feature added in v2 label Dec 5, 2021

jzxchiang1 mentioned this issue Mar 11, 2022

Info toast in iOS #132

Closed

TheSteveHan mentioned this issue Jun 1, 2022

On going to background or app switcher on Android the popup appears #300

Closed

kv77724-dot mentioned this issue Nov 4, 2022

Toast appears behind the modal #419

Open

mehranjavid mentioned this issue Apr 16, 2023

Toast pop up randomly when other popup/dialog opens #428

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When modal request permission appear then the modal toast on the previous screen also appears -> android #226

When modal request permission appear then the modal toast on the previous screen also appears -> android #226

nguyenductoan1995 commented Jul 29, 2021

chernandezq commented Aug 26, 2021

zidun commented Aug 31, 2021

calintamas commented Nov 4, 2021

chernandezq commented Nov 4, 2021 •

edited

Loading

calintamas commented Nov 5, 2021 •

edited

Loading

Majid3ziz commented Nov 8, 2021

calintamas commented Nov 8, 2021

Majid3ziz commented Nov 8, 2021

claudiozam commented Nov 9, 2021 •

edited

Loading

chernandez-leantech commented Nov 12, 2021

zidun commented Nov 12, 2021 •

edited

Loading

calintamas commented Nov 12, 2021

claudiozam commented Nov 12, 2021

claudiozam commented Nov 12, 2021

Majid3ziz commented Nov 14, 2021

AronBe commented Nov 19, 2021 •

edited

Loading

calintamas commented Nov 21, 2021

Menardi commented Jan 11, 2022

zidun commented Jan 11, 2022

calintamas commented Feb 8, 2022

jzxchiang1 commented Mar 11, 2022

jeremiahtam commented Apr 10, 2022

hirbod commented Jun 1, 2022

sznrbrt commented Aug 15, 2022

ZohaibNaseer786 commented Jan 2, 2024

When modal request permission appear then the modal toast on the previous screen also appears -> android #226

When modal request permission appear then the modal toast on the previous screen also appears -> android #226

Comments

nguyenductoan1995 commented Jul 29, 2021

chernandezq commented Aug 26, 2021

zidun commented Aug 31, 2021

calintamas commented Nov 4, 2021

chernandezq commented Nov 4, 2021 • edited Loading

calintamas commented Nov 5, 2021 • edited Loading

Majid3ziz commented Nov 8, 2021

calintamas commented Nov 8, 2021

Majid3ziz commented Nov 8, 2021

claudiozam commented Nov 9, 2021 • edited Loading

chernandez-leantech commented Nov 12, 2021

zidun commented Nov 12, 2021 • edited Loading

calintamas commented Nov 12, 2021

claudiozam commented Nov 12, 2021

claudiozam commented Nov 12, 2021

Majid3ziz commented Nov 14, 2021

AronBe commented Nov 19, 2021 • edited Loading

calintamas commented Nov 21, 2021

Menardi commented Jan 11, 2022

zidun commented Jan 11, 2022

calintamas commented Feb 8, 2022

jzxchiang1 commented Mar 11, 2022

jeremiahtam commented Apr 10, 2022

hirbod commented Jun 1, 2022

sznrbrt commented Aug 15, 2022

ZohaibNaseer786 commented Jan 2, 2024

chernandezq commented Nov 4, 2021 •

edited

Loading

calintamas commented Nov 5, 2021 •

edited

Loading

claudiozam commented Nov 9, 2021 •

edited

Loading

zidun commented Nov 12, 2021 •

edited

Loading

AronBe commented Nov 19, 2021 •

edited

Loading