Doesnt work with react-navigation/native #195

activebiz · 2021-05-18T12:21:32Z

The toaster doesnt appear when using @react-navigation/native lib. Have followed as shown in https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

I have placed <Toast/ > as last element inside <NavigationContainer>....</NavigationContainer>.

Any one else having same issue?

The text was updated successfully, but these errors were encountered:

lucswart · 2021-05-18T19:06:25Z

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.

Skkay · 2021-05-18T21:25:17Z

Works perfectly for me on Android using Expo with:

react-native-cli: 2.0.1
react-native: 0.63.2
@react-navigation/native: 5.9.4

PopBot · 2021-05-24T01:37:48Z

Are you all on Expo? I'm running on Expo and having issues as well with React Native Navigation.

ronmara · 2021-05-24T16:50:35Z

Could you post your code?

Skkay · 2021-05-25T16:29:31Z

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

charlotteisambert · 2021-05-26T08:04:46Z

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>

lucswart · 2021-05-26T08:49:11Z

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

anoop0567 · 2021-05-31T16:56:19Z

maybe this can help, I just removed React.useEffect and it's worked

React.useEffect(() => {
    Toast.show({
      text1: 'Hello',
      text2: 'This is some something 👋'
    });
}, []);

changed to

Toast.show({
    text1: 'Hello',
    text2: 'This is some something 👋'
});

I was getting this error before

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

PopBot · 2021-06-06T21:03:41Z

I can verify, placing Toast after screens works for me!

shlok-ps · 2021-06-23T04:09:25Z

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>

I can use Toast inside navigation with this. But not outside of it. Is there a way to run it both inside and outside of Navigation Container.

calintamas · 2021-06-23T06:17:13Z

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

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

MorenoMdz · 2021-06-23T23:02:37Z

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>

This is actually the solution, if someone has time please add this as a note to the repo readme.md ;)

calintamas · 2021-06-24T16:53:08Z

Updated the phrasing in the readme, commit 1b5d936. I think it should be fine now.

AdriaRios · 2021-08-02T06:31:46Z

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.

rush86999 · 2021-08-20T14:26:41Z

can confirm the toast is hidden behind status bar using the recommended approach. It is also visible for some reason instead of being hidden. This is a bare react native with expo unimodules and react navigation.

EDIT: Can confirm it works by putting it under the root navigation component (in the bottom) instead of the container from the initial entry at App.tsx

return (
    <SafeAreaView style={styles.container}>
      <StatusBar />
          <UserNavigation />
      <Toast ref={(ref) => Toast.setRef(ref)} />
  </SafeAreaView>
  )

calintamas · 2021-11-09T13:41:50Z

Make sure to render the Toast outside the SafeAreaView component.

In your case,

  return (
    <>
      <SafeAreaView style={styles.container}>
        <StatusBar />
        <UserNavigation />
      </SafeAreaView>
      <Toast ref={(ref) => Toast.setRef(ref)} />  {/* ref is not needed when using v2 /*}
    </>
  );

calintamas · 2021-11-21T19:32:42Z

Closing as the docs have been updated for v2. If there are any other issues, feel free to re-open

dsws · 2022-07-15T02:15:50Z

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>

Thank you!

joerush18 · 2023-07-19T03:46:56Z

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>

This worked for me.

calintamas added the docs label Oct 22, 2021

calintamas closed this as completed Nov 21, 2021

devoren mentioned this issue Nov 2, 2023

Modal prompts on iOS overlay the toast #494

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesnt work with react-navigation/native #195

Doesnt work with react-navigation/native #195

activebiz commented May 18, 2021

lucswart commented May 18, 2021 •

edited

Loading

Skkay commented May 18, 2021

PopBot commented May 24, 2021

ronmara commented May 24, 2021

Skkay commented May 25, 2021

charlotteisambert commented May 26, 2021

lucswart commented May 26, 2021

anoop0567 commented May 31, 2021 •

edited

Loading

PopBot commented Jun 6, 2021

shlok-ps commented Jun 23, 2021

calintamas commented Jun 23, 2021

MorenoMdz commented Jun 23, 2021

calintamas commented Jun 24, 2021

AdriaRios commented Aug 2, 2021 •

edited

Loading

rush86999 commented Aug 20, 2021 •

edited

Loading

calintamas commented Nov 9, 2021 •

edited

Loading

calintamas commented Nov 21, 2021

dsws commented Jul 15, 2022

joerush18 commented Jul 19, 2023

Doesnt work with react-navigation/native #195

Doesnt work with react-navigation/native #195

Comments

activebiz commented May 18, 2021

lucswart commented May 18, 2021 • edited Loading

Skkay commented May 18, 2021

PopBot commented May 24, 2021

ronmara commented May 24, 2021

Skkay commented May 25, 2021

charlotteisambert commented May 26, 2021

lucswart commented May 26, 2021

anoop0567 commented May 31, 2021 • edited Loading

PopBot commented Jun 6, 2021

shlok-ps commented Jun 23, 2021

calintamas commented Jun 23, 2021

MorenoMdz commented Jun 23, 2021

calintamas commented Jun 24, 2021

AdriaRios commented Aug 2, 2021 • edited Loading

rush86999 commented Aug 20, 2021 • edited Loading

calintamas commented Nov 9, 2021 • edited Loading

calintamas commented Nov 21, 2021

dsws commented Jul 15, 2022

joerush18 commented Jul 19, 2023

lucswart commented May 18, 2021 •

edited

Loading

anoop0567 commented May 31, 2021 •

edited

Loading

AdriaRios commented Aug 2, 2021 •

edited

Loading

rush86999 commented Aug 20, 2021 •

edited

Loading

calintamas commented Nov 9, 2021 •

edited

Loading