Custom Toast messages are never unmounted

[go-sean-go]

Describe the bug When using a custom toast component, i.e.

import CustomToastComponent from '../components/customToastComponent';

<Toast config={{
  'custom': CustomToastComponent
}} />

...the custom component is never unmounted. Specifically, React Hooks return functions are never called, i.e.

const CustomToastComponent = () => {
  useEffect(() => {
    console.log('mounting Toast!'); // <~~ called on Toast.show()
    return () => {
      console.log('unmounting Toast!'); // <~~ NEVER called, even on Toast.hide() or manual dismiss by the user
    };
  }, []);
};

export default CustomToastComponent;

This creates various challenges in managing the lifecycle of the Toast and state.

Steps to reproduce

1. Implement custom toast component and register it with <Toast config={} />
2. Call Toast.show() - LOG: mounting Toast!
3. After some duration, call Toast.hide() - no LOG events

Expected behavior Toast.hide() should unmount the component after it's off-screen, i.e. LOG: unmounting Toast!.

Screenshots n/a

Code sample See above.

Environment (please complete the following information):

• OS: iOS 15.2 (did not test on other platforms)
• react-native-toast-message version: 2.1.5
• react-native version: 0.69.4

Additional context n/a

[ajaysaini-sgvu]

I am also facing same issue. Items behind the custom toast are not clickable.

[adam-govan]

I'm running into the same issue here now. has there been any progress around this?

[go-sean-go]

Revisiting after ~6 months, maybe some kind of config param could drive this (destroyOnHide, idk).

[CodeWithRomaen]

Revisiting after ~6 months, maybe some kind of config param could drive this (destroyOnHide, idk).

Agreed! We could have an extra config like mentioned.

Same issue still present. For me if I create a custom toast and call it with some text and then hide it and call it again with new text, the old toast is shown with the previous text