react-native-ui-lib/src/incubator/toast/toast.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "Toast",
  "category": "incubator",
  "description": "A toast component for displaying non-disruptive messages to the user",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorToastScreen.tsx",
  "images": [],
  "props": [
    {"name": "visible", "type": "boolean", "description": "Whether to show or hide the toast"},
    {"name": "position", "type": "'top' | 'bottom'", "description": "The position of the toast. 'top' or 'bottom'."},
    {"name": "message", "type": "string", "description": "Toast message"},
    {"name": "messageStyle", "type": "StyleProp<TextStyle>", "description": "Toast message style"},
    {"name": "messageProps", "type": "TextProps", "description": "Toast message props"},
    {"name": "centerMessage", "type": "boolean", "description": "Should message be centered in the toast"},
    {"name": "zIndex", "type": "number", "description": "Custom zIndex for toast"},
    {"name": "elevation", "type": "number", "description": "Custom elevation", "note": "Android only"},
    {
      "name": "action",
      "type": "ButtonProps",
      "description": "A single action for the user (showLoader will override this)"
    },
    {"name": "showLoader", "type": "boolean", "description": "Whether to show a loader"},
    {"name": "onDismiss", "type": "() => void", "description": "Callback for the toast dismissal"},
    {
      "name": "swipeable",
      "type": "boolean",
      "description": "Whether to support dismissing the toast with a swipe gesture. Requires to pass onDismiss method to control visibility"
    },
    {
      "name": "autoDismiss",
      "type": "number",
      "description": "Time of milliseconds to automatically invoke the onDismiss callback"
    },
    {
      "name": "onAnimationEnd",
      "type": "(visible?: boolean) => void",
      "description": "Callback for end of toast animation"
    },
    {
      "name": "renderAttachment",
      "type": "() => JSX.Element | undefined",
      "description": "Render a custom view that will appear permanently above or below a Toast, depends on the Toast's position and animate with it when the Toast is made visible or dismissed"
    },
    {
      "name": "preset",
      "type": "ToastPreset ('success' | 'failure' | 'general' | 'offline')",
      "description": "Pass to have preset UI"
    },
    {
      "name": "enableHapticFeedback",
      "type": "boolean",
      "description": "Whether to trigger an haptic feedback once the toast is shown (requires react-native-haptic-feedback dependency)"
    },
    {"name": "testID", "type": "string", "description": "The component test id"},
    {"name": "style", "type": "ViewStyle", "description": "Toast style"},
    {"name": "containerStyle", "type": "ViewStyle", "description": "Toast container style"},
    {
      "name": "icon",
      "type": "ImageSourcePropType",
      "description": "A custom icon to render on the left side of the toast"
    },
    {"name": "iconColor", "type": "string", "description": "The icon color"},
    {"name": "backgroundColor", "type": "string", "description": "The toast background color"}
  ],
  "snippet": [
    "<Toast",
    "  visible={isVisible$1}",
    "  position={'top'$2}",
    "  autoDismiss={5000$2}",
    "  onDismiss={onDismiss$3}",
    ">"
  ],
  "docs": {
    "hero": {
      "title": "Toast",
      "description": "Toasts give quick feedback or updates without interrupting the user. They’re used for non-critical messages, like success notifications, and disappear on their own. Toasts can include one action, but it shouldn’t be “Dismiss” or “Close.”",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_cover.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "section",
            "title": "Usage Examples",
            "content": [
              {
                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
              }
            ]
          },
          {
            "type": "table",
            "columns": ["Type of message", "Preview"],
            "items": [
              {
                "title": "Generic",
                "content": [
                  {
                    "props": {
                      "visible": true,
                      "message": "Mika Or was saved to contacts.",
                      "preset": "general"
                    }
                  }
                ]
              },
              {
                "title": "Success",
                "content": [
                  {
                    "props": {
                      "visible": true,
                      "message": "Post published.",
                      "preset": "success"
                    }
                  }
                ]
              },
              {
                "title": "Validation",
                "content": [
                  {
                    "props": {
                      "visible": true,
                      "message": "Enter a card number.",
                      "preset": "failure"
                    }
                  }
                ]
              },
              {
                "title": "Offline Error",
                "content": [
                  {
                    "props": {
                      "visible": true,
                      "message": "This action is not available offline.",
                      "preset": "offline"
                    }
                  }
                ]
              }
            ],
            "title": "Types"
          },
          {
            "type": "table",
            "columns": ["Prop", "Preview"],
            "items": [
              {
                "title": "None",
                "content": [
                  {
                    "props": {
                      "visible": true,
                      "message": "Action completed."
                    }
                  }
                ]
              },
              {
                "title": "With action",
                "content": [
                  {
                    "snippet": "<Incubator.Toast visible message=\"Action completed.\" action={{label: 'Undo', onPress: () => {}}}/>"
                  }
                ]
              },
              {
                "title": "With loader",
                "content": [
                  {
                    "props": {
                      "visible": true,
                      "message": "Action completed.",
                      "showLoader": true
                    }
                  }
                ]
              }
            ],
            "title": "Accessories"
          },
          {
            "type": "section",
            "title": "Timing",
            "description": "markdown:\nToast disappears automatically after 5-10 seconds. The **default** duration depends on text length: [word count / 2] = X secs to disappear  \nExamples: \n[15 words / 2] = 7.5 secs\n[2 words / 2] = 1, but 5 secs is minimum >> 5 secs  \nWhen using Toasts in your product, keep in mind that the default display time is preset but can be adjusted for messages that need more attention or reading time. However, the duration should never be less than 5 seconds."
          },
          {
            "type": "section",
            "layout": "horizontal",
            "title": "Spec",
            "description": "markdown:\n**Positioning**\nThe Toast appears at the bottom of the screen, while keeping a spacing of S4 from the bottom of the screen, or from the bottom bar.  \nThe Toast can be placed above CTA’s in order to keep the CTA available for the user.  \nToast can be dismissed manually by swiping it down.",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_spec.png"
              }
            ]
          },
          {
            "type": "section",
            "title": "Tablet Spec",
            "description": "markdown:\nWhen displaying a Toast on a Tablet, the width of the component adjusts to the content.  \n- Min-width: 200px  \n- Max-width: 524px",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_tablet.png"
              }
            ]
          }
        ]
      },
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "list",
            "items": [
              {
                "title": "",
                "content": [
                  {
                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
                  }
                ]
              },
              {
                "title": "",
                "content": [
                  {
                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247643&embed-host=share"
                  }
                ]
              }
            ],
            "title": "Do’s & Don’ts",
            "description": "markdown:\n**Message Length**\nDo not display long messages in a Toast, keep the Toast message short and focused, yet informative.  \nFurther information regarding the phrasing of toast messages can be found in UX Writers - Toast Guidelines."
          }
        ]
      }
    ]
  }
}