If I touch and hold toast, it never hides

[calintamas]

Not sure if it is intentional behavior, but if I touch and hold toast, it never hides (autoHide is set to true). The hiding animation takes place, but toast stays on screen infinitely. You may need to pull your finger down a bit after the hiding animation is complete in order to display toast again. I get this behavior on iOS as well as Android. Package version: 2.1.0

Originally posted by @danieldaukapp in #280 (comment)

[dev-babar]

Yeah, also facing the same issue, touch and swipe lil bit down and hold then release, it never hides. And if you hold longer it hide and reappear when release the touch.

[pankaj-k-simformsolutions]

@calintamas any update on this

[doougui]

Facing the same issue here.

[sushantWemotive]

same issue here

[mrshahzeb7]

any solution ?

[mrshahzeb7]

used this logic
it is working for me

const {isVisible} = props;

const [isVisibleToast, setisVisibleToast] = useState(false);

useEffect(() => {
if (isVisible) {
setisVisibleToast(true);
} else {
setTimeout(() => {
setisVisibleToast(false);
}, 2000);
}
}, [isVisible]);

return isVisibleToast ? (

{
//custom Toast
}
)
:
null

[LukasMod]

Same issue here, toasts won't hide. I would say it's critical bug.

[oakmegaeddie]

I guess the reason is that after visibilityTime, the toast is still being pressed, so it can't hide after release.
The solution to fix this bug in the library code would be check whether it should hide or not after release.

[KoenVerhulst]

Any plans in fixing this?

[knightmate]

@calintamas Hi, do you have any updates on this? I've also encountered this bug on Android. Should I address it?

[mleister97]

The issue persists in 2024...

[ianvasco]

Just applied a patch from my side that will prevent the 2nd non-closable toast message from being there. We'll be running some QA testing to check if it doesn't affect other features and then I can consider creating a Pull Request to fix that issue!

EDIT

Solution has been problematic when running QA regressions, I'll update a workaround here when finding an stable solution.

[pepperinpeppermint314159]

node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.d.ts
in function: animatedValueFor

add this:

    const { dy, numberActiveTouches } = gesture;  // use numberActiveTouches

    switch (position) {
        case 'bottom':
            if (!numberActiveTouches) return boundValue(0) // add this
            return boundValue(1 - dy / damping);
        case 'top':
            if (!numberActiveTouches) return boundValue(0) // add this
            return boundValue(1 + dy / damping);
        default:
            throw new Error(`Toast position: ${position} not implemented`);
    }

[Meet-Kapadiya]

Still it recreates a new instance

media_20240723_101907_3362853197575039291.mp4