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

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

import React, { memo } from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
  ActivityIndicator
} from "react-native";
import { colors, MAX_FORM_WIDTH } from "../theme";

const Footer = ({
  color = colors.main,
  isSending,
  sendForm,
  isPreview,
  button,
  submitButton
}) => {
  const submitBackground = {
    backgroundColor: color || colors.main
  };
  return React.createElement(
    View,
    {
      style: styles.container
    },
    !isPreview &&
      React.createElement(
        View,
        {
          style: [
            styles.submitContainer,
            {
              opacity: isSending ? 0.6 : 1
            }
          ]
        },
        React.createElement(
          TouchableOpacity,
          {
            activeOpacity: isSending ? 1 : 0.8,
            style: [submitBackground, styles.submitButton],
            onPress: sendForm
          },
          isSending
            ? React.createElement(ActivityIndicator, {
                size: "small",
                color: colors.white
              })
            : React.createElement(
                Text,
                {
                  style: styles.submitText
                },
                submitButton || button
              )
        )
      )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    width: "100%"
  },
  submitContainer: {
    display: "flex",
    width: "100%",
    maxWidth: MAX_FORM_WIDTH,
    paddingVertical: 12,
    paddingHorizontal: 24
  },
  submitButton: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 6,
    paddingHorizontal: 20,
    paddingVertical: 14,
    width: "100%",
    maxHeight: 46
  },
  submitText: {
    fontSize: 16,
    color: colors.white,
    fontWeight: "bold"
  }
});
export default memo(Footer);