react-native-toast-message: Doesnt work with react-navigation/native

I don’t know if this may help, but it didn’t work for me because I placed the Toast element above my screens. Make sure you placed the<Toast ref={(ref) => Toast.setRef(ref)} /> after all of your screens:

<NavigationContainer>
      {...}
      <Toast ref={(ref) => Toast.setRef(ref)} />
</NavigationContainer>

and not

<NavigationContainer>
      <Toast ref={(ref) => Toast.setRef(ref)} />
      {...}
</NavigationContainer>

Hey @calintamas !

When we use a modal navigation, the toast appears below the view. We are following your recommendation, no luck.

Any idea? Thank you!

EDIT

Ok, I found why and maybe this could help to more people. To get the toast correctly working when you are using modals to navigate, the presentation prop must be:

• containedModal
• containedTransparentModal

If you use another type (modal, fullScreenModal or transparentModal), iOS will place the new modal above everything, including your awesome toast.

In my App.js:

...
import Toast from 'react-native-toast-message'
...
const App = () => {
  ...
  return (
    <AuthContext.Provider value={authContext}>
      <NavigationContainer>
        {isConnected ? (
          <Drawer.Navigator initialRouteName="Home" drawerContent={props => (
            <CustomDrawer props={props} signOut={signOut} />
          )} >
            <Drawer.Screen name="Home" component={MainStackNavigator} options={{ title: "Accueil" }} />
            <Drawer.Screen name="MyOrders" component={MyOrdersStackNavigator} options={{ title: "Mes commandes" }} />
            <Drawer.Screen name="MyReservations" component={MyReservationsStackNavigator} options={{ title: "Mes réservations" }} />
          </Drawer.Navigator>
        ) : (
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="Login" options={{ title: "Connexion" }}>
              {({ navigation }) => <LoginScreen navigation={navigation} setConnected={setConnected} />}
            </Stack.Screen>
            <Stack.Screen name="Register" component={RegisterScreen} options={{ title: "Inscription" }} />
          </Stack.Navigator>
        )}
        <Toast ref={(ref) => Toast.setRef(ref)} />
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

And in my HomeScreen.js I call my Toast like that:

...
import Toast from 'react-native-toast-message'
...
const HomeScreen = ({ route, navigation }) => {
  const { toastType, toastExtra } = route.params;

  // Toast notifications
  useEffect(() => {
    if (toastType === "order_success_takeout") {
      Toast.show({
        text1: `Commande n°${toastExtra.id}`,
        text2: 'Votre commande à emporter a été envoyée avec succès.'
      });
    }
    if (toastType === "order_success_eatin") {
      Toast.show({
        text1: `Commande n°${toastExtra.id}`,
        text2: 'Votre commande sur place a été envoyée avec succès.'
      });
    }
    if (toastType === "reservation_success") {
      const date = new Date(toastExtra.date);
      Toast.show({
        text1: 'Réservation confirmée',
        text2: `Réservation d'une table de ${toastExtra.table_.place} ${toastExtra.table_.place > 1 ? "places" : "place" }, pour le service de ${toastExtra.service.startTime}h-${toastExtra.service.endTime}h le ${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getFullYear()}.`
      });
    }
  });

  return (
    ...
  );
};

Exactly as explained here https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation and I have no problem

Updated the phrasing in the readme, commit https://github.com/calintamas/react-native-toast-message/commit/1b5d936b04dc66109ece21d0cf5c22d2dcb0a1e3. I think it should be fine now.

@shlok-ps yes, you can render it alongside RootNavigator, like so

function App() {
  return (
    <>
      <RootNavigator />
      <Toast ref={(ref) => Toast.setRef(ref)} />
    </>
  )
}

@charlotteisambert This did actually help! Woah, thank you… It works perfectly now.

Yep, having the same issue! What you could do for now is to place it on the screen itself. Not the nicest way of implementing, but that is what I do for now.