Toast | NativeBase

Toast is used to show alerts on top of an overlay. Toast will close itself when the close button is clicked on or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place.

Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.

Import

Copy
import { useToast } from 'native-base';

Examples

Basic


Playground
const Example = () => {
  const toast = useToast();
  return <Button onPress={() => toast.show({
    title: "Hello world"
  })}>
      Bottom
    </Button>;
};const Example = () => {
  const toast = useToast();
  return <Button onPress={() => toast.show({
    title: "Hello world"
  })}>
      Bottom
    </Button>;
};

Position


Playground
const Example = () => {
  const toast = useToast();
  return <VStack space={2}>
      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "bottom"
    })}>
        Bottom
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "top"
    })}>
        Top
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "top-left"
    })}>
        Top left
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "top-right",
      backgroundColor: "pink.400"
    })}>
        Top right
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "bottom-left"
    })}>
        Bottom left
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "bottom-right"
    })}>
        Bottom right
      </Button>
    </VStack>;
};const Example = () => {
  const toast = useToast();
  return <VStack space={2}>
      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "bottom"
    })}>
        Bottom
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "top"
    })}>
        Top
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "top-left"
    })}>
        Top left
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "top-right",
      backgroundColor: "pink.400"
    })}>
        Top right
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "bottom-left"
    })}>
        Bottom left
      </Button>

      <Button onPress={() => toast.show({
      title: "Hello world",
      placement: "bottom-right"
    })}>
        Bottom right
      </Button>
    </VStack>;
};

Custom component

Display a custom component instead of the default Toast UI.


Playground
const Example = () => {
  const toast = useToast();
  return <Button onPress={() => {
    toast.show({
      render: () => {
        return <Box bg="teal.500" px={4} py={3} rounded="md" mb={5}>
                Hi, Nice to see you ( ´ ∀ ` )ﾉ
              </Box>;
      }
    });
  }}>
      Custom Toast
    </Button>;
};const Example = () => {
  const toast = useToast();
  return <Button onPress={() => {
    toast.show({
      render: () => {
        return <Box bg="teal.500" px={4} py={3} rounded="md" mb={5}>
                Hi, Nice to see you ( ´ ∀ ` )ﾉ
              </Box>;
      }
    });
  }}>
      Custom Toast
    </Button>;
};

Closing Toasts

Toasts can be closed imperatively, individually (via the close instance method), or all together (via the closeAll instance method).


Playground
const Example = () => {
  const toast = useToast();
  const toastIdRef = React.useRef();

  function close() {
    if (toastIdRef.current) {
      toast.close(toastIdRef.current);
    }
  }

  function closeAll() {
    toast.closeAll();
  }

  function addToast() {
    toastIdRef.current = toast.show({
      title: "Hi, Nice to see you ( ´ ∀ ` )ﾉ"
    });
  }

  return <Stack direction={{
    base: "column",
    md: "row"
  }} space={2}>
      <Button onPress={addToast}>Toast</Button>
      <Button onPress={close} variant="outline">
        Close last toast
      </Button>
      <Button onPress={closeAll} variant="outline">
        Close all toasts
      </Button>
    </Stack>;
};const Example = () => {
  const toast = useToast();
  const toastIdRef = React.useRef();

  function close() {
    if (toastIdRef.current) {
      toast.close(toastIdRef.current);
    }
  }

  function closeAll() {
    toast.closeAll();
  }

  function addToast() {
    toastIdRef.current = toast.show({
      title: "Hi, Nice to see you ( ´ ∀ ` )ﾉ"
    });
  }

  return <Stack direction={{
    base: "column",
    md: "row"
  }} space={2}>
      <Button onPress={addToast}>Toast</Button>
      <Button onPress={close} variant="outline">
        Close last toast
      </Button>
      <Button onPress={closeAll} variant="outline">
        Close all toasts
      </Button>
    </Stack>;
};

Status

You can use status to change the color of your toasts. Toast uses the same variants as the

Alert

component.


Playground
const Example = () => {
  const toast = useToast();
  return <VStack space={2}>
      <Button onPress={() => toast.show({
      title: "Account verified",
      status: "success",
      description: "Thanks for signing up with us."
    })}>
        Success
      </Button>

      <Button onPress={() => toast.show({
      title: "Something went wrong",
      status: "error",
      description: "Please create a support ticket from the support page"
    })}>
        Error
      </Button>

      <Button onPress={() => toast.show({
      title: "Network connection restored",
      status: "info",
      description: "This is to inform you that your network connectivity is restored"
    })}>
        Info
      </Button>

      <Button onPress={() => toast.show({
      title: "Invalid email address",
      status: "warning",
      description: "Please enter a valid email address"
    })}>
        Warning
      </Button>
    </VStack>;
};const Example = () => {
  const toast = useToast();
  return <VStack space={2}>
      <Button onPress={() => toast.show({
      title: "Account verified",
      status: "success",
      description: "Thanks for signing up with us."
    })}>
        Success
      </Button>

      <Button onPress={() => toast.show({
      title: "Something went wrong",
      status: "error",
      description: "Please create a support ticket from the support page"
    })}>
        Error
      </Button>

      <Button onPress={() => toast.show({
      title: "Network connection restored",
      status: "info",
      description: "This is to inform you that your network connectivity is restored"
    })}>
        Info
      </Button>

      <Button onPress={() => toast.show({
      title: "Invalid email address",
      status: "warning",
      description: "Please enter a valid email address"
    })}>
        Warning
      </Button>
    </VStack>;
};

Preventing Duplicate Toast

In some cases, you might need to prevent duplicates of specific toasts. To achieve this, you need to pass an id and use the toast.isActive method to determine when to call toast.show(...).


Playground
function Example() {
  const toast = useToast();
  const id = "test-toast";
  return <Button onPress={() => {
    if (!toast.isActive(id)) {
      toast.show({
        id,
        title: "Hey! You can't create a duplicate toast"
      });
    }
  }}>
      Click me!
    </Button>;
}function Example() {
  const toast = useToast();
  const id = "test-toast";
  return <Button onPress={() => {
    if (!toast.isActive(id)) {
      toast.show({
        id,
        title: "Hey! You can't create a duplicate toast"
      });
    }
  }}>
      Click me!
    </Button>;
}