toast.show is not a function (it is undefined)]

[shyammanek]

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

export default function Toast() {

const toast = useToast();

toast.show("Hello World");

}

Current behaviour

LOG error [TypeError: toast.show is not a function (it is undefined)]

Expected behaviour

Show Toast Notification

Code sample

For Syntax Highlighting check this link

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios or android	both
react-native	0.73.4
react-native-toast-notifications	^3.4.0
node
npm or yarn

[Somnus007]

I got the same problem~

[usmanabid94]

I am getting the same issue is there any specific reason for this or update on this issue?

[mahmingtea]

you are calling toast before it is loaded. Use it like this

const toast = useToast();
const isToastLoaded = () => {
    return Object.entries(toast).length === 0;
  };
useEffect(() => {
    if (!isToastLoaded()) {
      toast.show("Loading...")
     }
},[isToastLoaded()])

[yasiraktunc]

Can you fixed this bug

[arnnis]

toast must be called after initial render of application. i.e inside a useEffect(() => toast.show(), [])

[yasiraktunc]

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

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

  return (
    <ToastContext.Provider value={refState as any}>
      <Toast` ref={toastRef} />
      {refState && children}
    </ToastContext.Provider>
  );
};`
``` Override ToastProvider and  this is working true