toast.show is not a function

[arnnis]

toast.show is not a function

[mehmetsalihyaldiz]

Before
<ToastProvider> <RestOfYourApp /> <ToastProvider/>

After
<ToastProvider> <RestOfYourApp /> </ToastProvider>

[omeranar1]

I have the same issue

          <StatusBar backgroundColor={'#1976d2'} />
          <Provider store={store}>
          <ToastProvider>
            <NavigationContainer>
              <AppStack />
            </NavigationContainer>
            </ToastProvider>
          </Provider>

      <ToastProvider>
        <StatusBar backgroundColor={'#1976d2'} />
        <Provider store={store}>
          <NavigationContainer>
            <AppStack />
          </NavigationContainer>
        </Provider>
      </ToastProvider>

---

dont use;

   useEffect(() => {
     toast.show("Hello World")
   }, [])

use;

      <Button
        title='Show toast'
        onPress={showToast}
      />

[itsramiel]

The issue is that on the first render the toast object is an empty object and only after a the useEffect is ran, the empty object is replaced with an object that contain the methods also as a state, so your component needs to rerender to get the new object which hold the methods. You can see from this code how it is initially an empty object at first and then it is populated. This from the source code

import React, { FC, useEffect, useRef, useState } from "react";
import ToastContext from "./context";
import Toast, { Props } from "../toast-container";

const ToastProvider: FC<Props> = ({ children, ...props }) => {
  const toastRef = useRef(null);
  const [refState, setRefState] = useState({});

  useEffect(() => {
    setRefState(toastRef.current as any);
  }, []);

  return (
    <ToastContext.Provider value={refState as any}>
      {children}
      <Toast ref={toastRef} {...props} />
    </ToastContext.Provider>
  );
};

export default ToastProvider;

I would have opened a pull request to address this but I have already opened a pull request to fix components under toast not being able to be pressed, but the author seems to be inactive

[WyattSmithTritium]

Also having this problem. I have a toast instance for each screen and it works everywhere except my splash screen.

[nikki-cat]

I have the same issue

[ailouranada]

I had the same issue. This solved the problem. Wrap your components inside App.js with ToastProvider

[brunomacedo]

I also had the same issue. Move the StatusBar to outside the ToastProvider and it works well.

• Before

<ToastProvider>
    <HomeScreen />
    <StatusBar style="auto" />
</ToastProvider>

• Fixed

<>
    <ToastProvider>
        <HomeScreen />
    </ToastProvider>
    <StatusBar style="auto" />
</>

[ailouranada]

Guys thank you so much for the great library! Please can you help me with this error))

Current behaviour

The app crashes with error:

toast.show is not a function. (In 'toast.show('Hello World')', 'toast.show' is undefined

After the app launching get render error.

Expected behaviour

Expect app is not crashing and notification is appearing.

Code sample

I use the same code from your example:

import { useToast } from "react-native-toast-notifications";

const Component = () => {
  const toast = useToast();

  useEffect(() => {
    toast.show("Hello World");
  }, []);
};

and before it I wrapped my app.tsx to provider:

  <ToastProvider>
     <RestOfYourApp />
  <ToastProvider/>

Screenshots (if applicable)

What have you tried

Your Environment

software version
ios or android both platform
react-native 0.64
react-native-toast-notifications 3.2.3
node 14.18.3
yarn 1.22.17

I had the same issue. This solved the problem. Wrap your components inside App.js with ToastProvider

[rogerkerse]

It is not great, but I solved it by doing this in typescript

const toast = useToast()

useEffect(() => {
    toast.show?.('Hello World')
}, [toast])

[ShivamJoker]

It is not great, but I solved it by doing this in typescript

const toast = useToast()

useEffect(() => {
    toast.show?.('Hello World')
}, [toast])

This seems to work but I would like this to be fixed

[notblessy]

Hey I have same issue, but I solved it by using React.useState() like this:

const toast = useToast()

const [message, setMessage] = useState(null)

useEffect(() => {
    if (message) {
      toast.show(message, {
        type: 'danger'
      })
      setMessage(null)
    }
  }, [toast]);

Now if I set message with string, it will show the toast.

I think this is not a perfect solution but since the author seems to be inactive, this solution works perfectly on me.

[tahola]

I have the issue on some components, my solution is to put the toast in useEffect, that's not clean but it work...

  React.useEffect(() => {
    if (toast) {
      toast.show(message);
    }
  }, [toast]);