arnnis/react-native-toast-notifications

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

Opened this issue · 6 comments

shyammanek commented

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 commented

I got the same problem~

usmanabid94 commented

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

mahmingtea commented

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()])
  • 👍1
yasiraktunc commented

Can you fixed this bug

arnnis commented

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

yasiraktunc commented 
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
  • 👍1