android – Update the bottomOffset of react-native-toast-message

Currently the behaviour of the toast is not working the way I am expecting it so I’ll explain.

Right Behaviour : For example I have 3 pages
So from page1 the toast pops out with a visibilityTime(duration) of 6000(6 seconds) so before the duration time out or before the toast fades I change the page to page2 so it should still see the toast with the updated bottomOffset because the time did not run out yet. Then for example the time runs out before I changes to page3 it should not re-render the toast but instead do nothing because it is only a 1 time toast pop .

Behaviour Currently: For example I have 3 pages
So the from page1 the toast pops out with the same visibilityTime and then I waited till the visibilityTime runs out then change the page to page2 it re-renders the toast and also reset the visibilityTime to the 6 seconds again so everytime I change the page to a certain page the toast keeps poping out where in it should not . It should only update the bottomOffset

here’s my code

useEffect(() => {
    const handleStateChange: EventListenerCallback<
      NavigationContainerEventMap,
      'state'
    > = event => {
      const state = event.data.state; // this can be use later on
      const routes = navigationContainerRef?.current?.getCurrentRoute()?.name;

      if (state) {
        let _toastPosition = 0;
        switch (routes) {
          case 'Page1':
          case 'Page2':
          case 'Page3':
          case 'Page4':
          case 'Page5':
            _toastPosition = 130;
            break;
        }
        setToastPosition(_toastPosition);
      }
    };

    const navigationRef = navigationContainerRef?.current;
    if (navigationRef) {
      navigationRef.addListener('state', handleStateChange);
    }
    return () => {
      if (navigationRef) {
        navigationRef.removeListener('state', handleStateChange);
      }
    };
  }, [navigationContainerRef]);

  useEffect(() => {
    if (navigationContainerRef?.current) {
      if (
        navigationContainerRef.current
          .getState()
          ?.routes.some(route => route.name === 'Notification')
      ) {
        // already showing Notification screen (or its child),
        // no need to show toast
        Toast.hide();
        // no need to proceed the rest
        return;
      }
    }
    if (toastContentAvailable) {
      console.log('Being called here again!');
      Toast.show({
        type: 'customToast',
        text1: `${numOfUnreadNotifications}`, // Pass the text content directly
        text2: notificationToastSubtitle,
        position: 'bottom',
        onPress: onNotificationToastView,
        bottomOffset: toastPosition,
        visibilityTime: TOAST_DURATION,
      });
    } else {
      console.log('Null here!');
      Toast.hide();
    }
  }, [
    navigationContainerRef,
    notificationToastSubtitle,
    numOfUnreadNotifications,
    onNotificationToastView,
    toastContentAvailable,
    toastPosition,
  ]);

So is there like a way I can get the remaining duration so that I can just put the remaining duration on the visibilityTime so that even if it shows the new toast instance it has only the visibilityTime of the remaining duration left from the first toast then I will just have a condition that if the remaining duration is less than 0 something like that then don’t show the toast.show()