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

[Zakyyy]

Describe the bug On Android when I go to background or to the app switcher the pop up appears without calling it

Steps to reproduce Steps to reproduce the behavior:

1. Go to Background/Appswitcher
2. The toast will appear

Expected behavior Nothing to show unless I call it

Environment (please complete the following information):

• OS: Android
• react-native-toast-message version: v2.1.1
• react-native version v0.66.1

[thomasarogers]

Having a similar issue when I open a mailto: url Android pops up a modal to allow Users to select which app should handle the URL and in the background a blank toast is visible

[macielrsf]

I'm facing this problem too, when I generate the .aab (Android App Bundle) on production

[hirbod]

I can confirm that this is also happening for me in expo-dev-client. As soon as I open the app switcher, it appears (and even freezes in place when I receive an SMS for example)

[IngyuTae]

Same here. Any update on this issue?

[urrvesh]

const config = { success: (props) => { return props.isVisible ? <Component /> : null } };

<Toast position={'bottom'} config={config} />

props.isVisible should work here. Working fine for me. Thanks

[hirbod]

@urrvesh thats not a good workaround unfortunately, since it breaks the hide animation on iOS.

[vasylnahuliak]

Moving the <Toast config={toastConfig}/> up in the App.js component hierarchy fixed this issue for me

Toast does not work for me if it is higher in the hierarchy than the navigation.

Could you show your App.js?

[mikicnemanjaeyc]

@vasylnahuliak you are right, lol I updated the default success modal that is being displayed: toastConfig = { success: () => <></>, }; , masking it so its not visible

[cardiffinc]

Is there any update on this? I'm facing the same issue and re-production steps is similar to comment#1

[ashish293]

const config = { success: (props) => { return props.isVisible ? <Component /> : null } };

<Toast position={'bottom'} config={config} />

props.isVisible should work here. Working fine for me. Thanks

This Worked for me, Thanks

[hirbod]

@ashish293 this will break your hide animation ;)

[hirbod]

@calintamas I'll set a bounty of 50 USD if you fix this properly at the root (without any weird null hacks) If it's fixed until Saturday, I'll increase it to 100 USD.

Whoever fix this correct first, gets the bounty!

[TheSteveHan]

@hirbod I think this might be the root cause: see if it resolves the issue for you. https://github.com/calintamas/react-native-toast-message/issues/226#issuecomment-1010124690

[hirbod]

@TheSteveHan thanks for pointing that out. I still feel like disabling the native driver is not a real solution, but I might end up to patch this platform based for android only.

[calintamas]

I also started looking into it during the weekend. Main issue is that I can't reproduce locally, but I think @TheSteveHan's solution can be a good-enough workaround for now. I'm close to exposing useNativeDriver as a prop to the Toast instance, just need to wrap a few things up

[hirbod]

I'll port your library to react-native-reanimated soon. (and most likely also to react-native-gesture-handler)

[calintamas]

I'll port your library to react-native-reanimated soon. (and most likely also to react-native-gesture-handler)

A goal of the library is to be dependency free, so I prefer digging a bit deeper before replacing Animated. And in the meantime, I can publish the native driver workaround (I'll try my best to do it later today).

Aside from that, can you give me the Android device name and OS version? Maybe I can reproduce it in the emulator.

[hirbod]

Totally relatable but since plenty of apps are expo or have REA, I don't think it's a big of a deal.

My device is Xiaomi Redmi Note 8 Android OS 10

[TheSteveHan]

The issue doesn't occur in the emulator for me either. I'm seeing this issue on 2 Samsung android devices running Android 11. Disabling useNativeDriver resolved the issue for me on both devices.

[tapz]

One way to reproduce this is to ask some permission in the native code when the app has started. This freezes the toast until the user has given the permission.

[TheSteveHan]

disabling the native driver is not a real solution

Since there's no performance concern here really, is using the native driver really a requirement @hirbod?

If using the native driver is a hard requirement, perhaps the solution might have to be something like moving the default state of the toast off of the screen and animate it in so that when the animation system is reset the toast is hidden?

[tapz]

I agree with @TheSteveHan that the toast should initially be placed outside of the screen and then transformed to the screen using the animations.

[hirbod]

Yeah, I am extremely focused on frames and for me, native driver is a hard requirement, even on such a low key animation. But I can most likely live with degraded performance on android, as it is anyway degraded compared to iOS :D.

[calintamas]

I think setting up the initial position outside the screen can be the solution indeed.

I published it as v2.2.0-beta2, please install it and see if it fixes the issue.

yarn add react-native-toast-message@2.2.0-beta2

[calintamas]

Was anyone able to test it?

[hirbod]

@calintamas I tried it. It is still flashing for a moment and disappears after. Sometimes it does not disappear at all and remains the same. I would not call it fixed

[wouterds]

Confirmed it still occurs on 2.2.0-beta2. When exiting the app by clicking the home button a success toast (default?) will temporarily popup. I ended up rendering null for success through the config as I don't use it and that's the one being displayed.

[AndreiBacescu]

@urrvesh thats not a good workaround unfortunately, since it breaks the hide animation on iOS.

Is not only iOS but Android too.

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

[HyopeR]

Hello, I have this problem too. I have an application with universal link support. I am encountering this problem in the following scenario.

"react-native-toast-message": "2.1.6",

1- A URL address is sent to the user to open it in the application. 2- The user opens the application by clicking on a URL address such as https://example.com. 3- After the application is opened, the react-native-toast-message component appears and disappears momentarily.

For those looking for a temporary and easy solution, this is what I do. The problem I encountered here was simply that the first component was automatically shown when the application was first loaded. This issue seems to be temporarily resolved when I replace the first component with an empty component.

<NavigationContainer>
  <Toast
    type={'none'}
    config={{
      none: ({...rest}) => <></>,
      success: ({...rest}) => <AuPrettyToast icon={'CheckmarkCircle'} {...rest} />,
      info: ({...rest}) => <AuPrettyToast icon={'InformationCircle'} {...rest} />,
      warning: ({...rest}) => <AuPrettyToast icon={'AlertCircle'} {...rest} />,
      error: ({...rest}) => <AuPrettyToast icon={'CloseCircle'} {...rest} />,
      basic: ({...rest}) => <AuBasicToast {...rest} />,
    }}
  />
</NavigationContainer>

[calintamas]

Released a fix in v2.2.1