react-native-surveys/Forms/components/Toast/ToastWrapper.js

Build your own forms, surveys and polls for your React Native apps.

import * as React from "react";
import { Toast } from "./Toast";
import { View, StyleSheet, Dimensions, Platform } from "react-native";
const { width } = Dimensions.get("window");

const ToastWrapper = props => {
  const {
    verticalPosition,
    horizontalPosition,
    toasts,
    children,
    margin
  } = props;
  const marginStyle = {
    margin: margin || 0
  };

  switch (horizontalPosition) {
    case "center":
      const currentWidth = Platform.OS === "web" ? window.innerWidth : width;
      marginStyle.left = currentWidth / 2 - 160;
      break;

    case "left":
      marginStyle.left = 5;
      break;

    case "right":
      marginStyle.right = 5;
      break;

    default:
  }

  switch (verticalPosition) {
    case "top":
      let top = Platform.OS === "web" && window.innerWidth <= 500 ? 67 : 20;

      if (window.ReactNativeWebView || window.INTERCOM) {
        top = 20;
      }

      marginStyle.top = top;
      break;

    case "bottom":
      marginStyle.bottom = 20;
      break;

    default:
  }

  return React.createElement(
    View,
    {
      style: [styles.container, marginStyle]
    },
    children,
    toasts.map(({ id, variant, content, onClose, removable, action }) =>
      React.createElement(
        Toast,
        {
          key: id,
          variant: variant,
          onClose: onClose,
          removable: removable,
          action: action
        },
        content
      )
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    zIndex: 20000,
    position: Platform.OS === "web" ? "fixed" : "absolute"
  }
});
ToastWrapper.defaultProps = {
  toasts: [],
  block: false,
  verticalPosition: "top",
  horizontalPosition: "center"
};
export default ToastWrapper;