react-native-surveys/Forms/components/StatusScreen.js

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

import React, { memo, useEffect } from "react";
import { View, Text, StyleSheet, Animated, Platform } from "react-native";
import { colors } from "../theme";
import {
  COMPLETE_STATUS,
  ERROR_STATUS,
  PREVIEW_STATUS,
  TEMPLATE_STATUS
} from "../helpers";
import { CompleteIcon, ErrorIcon } from "../assets/icons";

const StatusScreen = ({ form, status, iframe }) => {
  const { backgroundColor, label } = form;
  const fadeAnim = new Animated.Value(0);
  let title, description;
  let type = form.type;
  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000
    }).start();
  }, [fadeAnim]);

  switch (status) {
    case PREVIEW_STATUS:
      title = label;
      description = "This is just a preview.";
      break;

    case TEMPLATE_STATUS:
      title = label;
      description =
        "This is just a template. To use it, click Use Template on the top-left side of the screen.";
      break;

    case COMPLETE_STATUS:
      let complete = form.complete || {};
      title = complete.title;
      description = complete.description;
      break;

    case ERROR_STATUS:
      let error = form.error || {};
      type = "error";
      title = error.title;
      description = error.description;
      break;

    default:
  }

  const background = {
    backgroundColor: backgroundColor || "#ffffff",
    height: Platform.OS === "web" ? (iframe ? "100%" : "100vh") : "100%"
  };
  return React.createElement(
    View,
    {
      style: [background, styles.container]
    },
    React.createElement(
      Animated.View,
      {
        style: [
          {
            opacity: fadeAnim
          },
          styles.animated
        ]
      },
      type !== "error"
        ? React.createElement(CompleteIcon, null)
        : React.createElement(ErrorIcon, null),
      React.createElement(
        Text,
        {
          style: styles.header
        },
        title
      ),
      React.createElement(
        View,
        {
          style: styles.descriptionWrapper
        },
        React.createElement(
          Text,
          {
            style: styles.description
          },
          description
        )
      )
    )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    width: "100%",
    alignItems: "center",
    justifyContent: "center"
  },
  animated: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 20,
    paddingVertical: 80
  },
  header: {
    fontSize: 20,
    lineHeight: 24,
    color: colors.primary,
    paddingTop: 16,
    margin: 0,
    fontWeight: "bold"
  },
  descriptionWrapper: {
    maxWidth: 360,
    padding: 8
  },
  description: {
    color: colors.darkgrey,
    fontSize: 16,
    lineHeight: 24,
    textAlign: "center"
  }
});
export default memo(StatusScreen);