Showing toast on modal

[arnnis]

Showing toast on modal

[bhushan-patil-official]

If anyone still having a problem after @arnnis workaround, some more information on it.

import Toast from "react-native-fast-toast";

export Component = () => {
    const toastRef = useRef();
    useEffect(() => {
       toastRef?.current?.show("Hello world") // that's how you should call the toast
    }, []);
    return (
        <Modal>
            .....
            <Toast ref={toastRef} />
        </Modal>
    );
}

[carrie503]

If you want to use useToast() like me (I have too many custom types and I don't want to use ref)

I suggest you can do like this:

export function CustomToastProvider(props: Props): JSX.Element {
  const { children } = props;

  return (
    <ToastProvider
      offsetTop={TOAST_OFFSET_TOP}
      placement={TOAST_PLACEMENT}
      duration={TOAST_DURATION}
      renderType={RENDER_TYPE}
    >
      {children}
    </ToastProvider>
  );
}

interface Props {
  children: React.ReactNode;
}

export default function ModalScreenWrapper(props: Props): JSX.Element {
  const { children } = props;

  return <CustomToastProvider>{children}</CustomToastProvider>;
}

export default function ModalScreen(): JSX.Element {
  return (
    <ModalScreenWrapper>
      <ContentScreen />
    </ModalScreenWrapper>
  );
}

function NewsContentScreen(): JSX.Element {
    const toast = useToast();
    return (
      <Button onPress={() => toast.show('hi')} />
    );
}

Hope this comment is helpful ❤️

[arnnis]

The Modal component is a native view that sits on top of the rest of react-native application. The only way to put something above it is to put something in the modal itself, or alternately to use a JS only implementation of a Modal.

As a workaround you can put toast inside modal like this:

import Toast from "react-native-fast-toast";

export Component = () => {
    const toastRef = useRef();
    return (
        <Modal>
            .....
            <Toast ref={toastRef} />
        </Modal>

}

[Jamal-ReachFirst]

I am using useToast() and don't want to create another ref.