Add prop to prevent manual dismissing (dragging) of the Toast message

[go-sean-go]

Is your feature request related to a problem? Please describe. I have a long-running Toast that shows the user the state of a process that can take 10-15 seconds (or even more). This is a custom component, i.e.

import CustomToastComponent from '../components/customToastComponent';

<Toast config={{
  'custom': CustomToastComponent
}} />

Not sure whether this would occur on a Base toast component (?), but I don't see any relevant props & I imagine for this use case the custom component is more common anyway.

Describe the solution you'd like I'd like a prop that prevents dragging or dismissing the Toast (except by explicit code-level action, i.e. Toast.hide()). Basically ensuring that the Toast stays on-screen until I dismiss it code-wise.

Describe alternatives you've considered I tried using various forms of the pointer-events value on my custom components and their children, but I couldn't get that working as well as simply removing the drag gesture would.

[sedoyjan]

@go-sean-go I have same trouble and I solved it like this:

const toastConfig: ToastConfig = {
  success: props => (
    <Box position="relative" width={'100%'} height={0}>
      <Box
        position="absolute"
        backgroundColor="green"
        width={'100%'}
        paddingHorizontal="24"
        flexDirection="column"
        alignItems="center"
        paddingVertical="16"
        pointerEvents="none"
      >
        <SafeAreaView style={commonStyle.wrapper} edges={edges}>
          <Label variant="body_16" color="white">
            {props.text1}
          </Label>
        </SafeAreaView>
      </Box>
    </Box>
  ),

  error: props => (
    <Box position="relative" width={'100%'} height={0}>
      <Box
        position="absolute"
        backgroundColor="red"
        width={'100%'}
        paddingHorizontal="24"
        flexDirection="column"
        alignItems="center"
        paddingVertical="16"
        pointerEvents="none"
      >
        <SafeAreaView style={commonStyle.wrapper} edges={edges}>
          <Label variant="body_16" color="white">
            {props.text1}
          </Label>
        </SafeAreaView>
      </Box>
    </Box>
  ),
};Ï

As I understand wrapper view for the passed children is catching gestures, so if you will provide 0 height for relative vuew and absolute view inside you won't be able to dismiss manually