toast showing without calling it

[alainib]

Describe the bug not sure how to explain this , i have a toast that show alone without calling it ( i know you think i'm crazy )

i can precisly trigger this strange behavor

i have only one import of Toast in the app that show toast

in App.tsx

    import {createContext} from 'react';
    export const ToastContext = createContext<{openToast: Function}>({});

    const openToast = (ns: any) => {  ShowToastMessage(ns);     };

   return (
        <ToastContext.Provider value={{openToast}}>
              <SafeAreaProvider> .... </SafeAreaProvider>
        </ToastContext.Provider >
        <Toast config={toastConfig} />
    );

and how ShowToastMessage is declared in another file

import Toast from 'react-native-toast-message';
export const ShowToastMessage = ({
  text,
  keyboardVisible,
  type,
  autoHide = true,
}: ToastType) => {
  try {
    console.log('-------- ShowToastMessage ---------');
    console.log('-');
    console.log(text);
    console.log('-');
    console.log('------------------');

    if (typeof text === 'string' && text?.trim()?.length > 0) {
      Toast.show({
        type,
        text1: text,
        position: keyboardVisible ? 'top' : 'bottom',
        autoHide,
        onShow: () => {       console.log(       '------------------------------------------------------ onShow',    );        },
        onHide: () =>{          console.log(            '------------------------------------------------------   onHide',         );        },
      }) 
};

so i should have few lines of log when toast is displayed. when i trigger it myself i have, but when i disconnect the app a toast appear alone

this is a video

i already triggered a toast before recording and it show logs in the console ( ShowToastMessage a été archivé ) and i have console.log onShow and onHide , then i click on "Se deconnecter", nothing appear in console but we clearly see a toast on the bottom of the app when spashscreen appear again (at 6 secondes ) with the content of last triggered toast ( "Le Gift.cool a été archivé" )

https://github.com/calintamas/react-native-toast-message/assets/7910081/5a3ed766-e165-4714-bae0-5690a665902a

Environment

• OS: Android
• react-native-toast-message version: 2.1.6
• react-native version 0.71.12 and 0.72.6

[vgsnv]

I'm facing the same problem. When requesting media rights, popped up. It turned out to be fixed only by changing the Toast type string. Was 'messenger' became 'messenger-asdfasdf'

[SMJ93]

I had the same issue - I fixed by adding a check for text1 to my custom Toast component. If no text1 is set, return null:

const Toast = ({type, text1}: PropTypes) => {
  const {backgroundColor, IconComponent} = toastTypes[type];

  if (!text1) {
    return null;
  }

  return (
    <SafeAreaView edges={['top']} style={[styles.container]}>
    ...
    </SafeAreaView>
  );
};

[chetanbhadarka]

I also facing same issue, I have setup Toast in App.js file and using redux I'm showing toast in app. It's working fine as expected but only in one use-case it's not working fine. Facing issue only for android.

Use Case:

• I've facebook login implement with firebase and I'm using react-native-fbsdk-next dependency for it.
• when i press facebook login button it'll start to show my custom loading screen as animated view with position absolute.
• but somehow while i press fb login button, empty toast is appeared on the top of the screen(as you can see in video).
• also I verified that toast is not calling from redux side. then why should it appeared.

I can provide more details as per needed. thank you in advance.

https://github.com/calintamas/react-native-toast-message/assets/42044786/e3ca33ea-8500-4aa1-9c10-6d68b6555548

[MilanBarande]

I am encountering the same issue as you @chetanbhadarka when I open a browser page from within the app. Did you end up finding any solution? I tried explicitly calling the hide method before I open the link but with no success

[chetanbhadarka]

I am encountering the same issue as you @chetanbhadarka when I open a browser page from within the app. Did you end up finding any solution? I tried explicitly calling the hide method before I open the link but with no success

@MilanBarande, Not yet brother.

[MilanBarande]

I have tweaked an ugly hack. Keeping a boolean in a context to conditionally render the RNToast component in my root component. When I need to open a browser link, I set this boolean to false. It's working, but I really don't like it, as I'm causing unnecessary re-rendering to my entire components tree... @chetanbhadarka

[sainjay]

Facing the same problem in Expo 50, show up the Toast at top without calling it. Places i observed it shows up:

1. Expo Debugger is open
2. When requesting Device permissions

[alainib]

@sainjay try a patch package

[sainjay]

@alainib Can you share the link for patch file too 😀

@sainjay try a patch package

[alainib]

@alainib Can you share the link for patch file too 😀

@sainjay try a 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 33f0b87..97e2423 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
@@ -16,7 +16,7 @@ export function useSlideAnimation({ position, height, topOffset, bottomOffset, k
     const animate = React.useCallback((toValue) => {
         Animated.spring(animatedValue.current, {
             toValue,
-            useNativeDriver,
+            useNativeDriver: false,
             friction: 8
         }).start();
     }, []);

[chiragbhaiji]

In my case memoizing the Toast component worked.

I created a wrapper component like the following:

const CustomToast = React.memo(() => <Toast config={toastConfig} />)

And then used it in place of

<Toast config={toastConfig} />