sometimes toast message isn't popping up [bug]

[CostasCF]

Description for reproduction: If you load a toast message from one screen by clicking a button and quickly navigate to another screen before the toast message is rendered, then the toast messages will not pop up if you click that button again when you navigate back. You need to restart the app to fix this behaviour.

Any idea how to avoid this or why is this happening?

[enestatli]

@CostasCF I couldn't reproduce such behaviour, can you please share an example repo?

[CostasCF]

@enestatli thanks for your attention.

Here is how I use it:

const saveToFavourites = () => {
   // .. 
     showToastable({
            // title: strings.favourites,
            messageStyle: {
              fontWeight: "600",
              textAlign: "center",
              fontSize: 16,
            },
            message: `${strings.favouriteStopMessage}`,
            status: "info",
            duration: 2300,
            animationInTiming: 1000,
            animationOutTiming: 1000,
          });
  //..
}

         <>
          <TouchableOpacity
            onPress={saveToFavourites}
            title="Info"
            color="#fff"
          >
            {isFavourite ? (
              <MaterialIcons name="favorite" size={30} color="red" />
            ) : (
              <MaterialIcons
                name="favorite-border"
                size={30}
                color={theme.text}
              />
            )}
          </TouchableOpacity>
          <Toastable />
         </>

It works fine but when I click the button and navigate to another screen before the message finishes loading and return back, reclick the button, nothing appears. I will try to debug more. Am I using it wrong?

[enestatli]

@enestatli thanks for your attention.

Here is how I use it:

const saveToFavourites = () => {
   // .. 
     showToastable({
            // title: strings.favourites,
            messageStyle: {
              fontWeight: "600",
              textAlign: "center",
              fontSize: 16,
            },
            message: `${strings.favouriteStopMessage}`,
            status: "info",
            duration: 2300,
            animationInTiming: 1000,
            animationOutTiming: 1000,
          });
  //..
}

         <>
          <TouchableOpacity
            onPress={saveToFavourites}
            title="Info"
            color="#fff"
          >
            {isFavourite ? (
              <MaterialIcons name="favorite" size={30} color="red" />
            ) : (
              <MaterialIcons
                name="favorite-border"
                size={30}
                color={theme.text}
              />
            )}
          </TouchableOpacity>
          <Toastable />
         </>

It works fine but when I click the button and navigate to another screen before the message finishes loading and return back, reclick the button, nothing appears. I will try to debug more. Am I using it wrong?

Thank you. Can you please move <Toastable /> to root? It could be under Providers, or App.tsx etc. anywhere above the navigation.

I think I need to update examples currently cause confusion probably. You only need to add <Toastable /> once and it should be placed top of the navigation

[CostasCF]

Thank you, that fixed the issue! Yeah, maybe it wasn't that clear in the documentation, but I have only around 6 months of experience in react native, so I probably missed it or something. Anyway, your suggested solution works, thanks!