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

[nguyenductoan1995]

[chernandezq]

I have the same issue, any updates ?

[zidun]

i

I have the same issue, any updates ?

+1

[calintamas]

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]

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

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

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:

1. Have a navigation container in App.js with the v2.0.0 toast inside at the bottom of the container.
2. 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]

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]

Hey @calintamas, I tried it no luck unfortunately.

[claudiozam]

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]

@calintamas any updates or way to fix it ?

[zidun]

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]

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

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

[claudiozam]

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]

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

[AronBe]

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]

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]

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]

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]

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]

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]

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

[hirbod]

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

[sznrbrt]

    "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]

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>
    )
  );