vds_quiz/vds-app/App/components/Button.js

import React from "react"
import { View, TouchableOpacity, Text, StyleSheet, ImageBackground } from "react-native"
import { colors } from "../components/Variables"

const bgImage = require("../assets/buttonBg.png")

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.white_alpha,
    borderWidth: 4,
    borderColor: 'transparent',
    borderRadius: 5,
    //paddingHorizontal: 20,
    paddingVertical: 15,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    marginTop: 15
  },
  noPadding: {
    paddingHorizontal: 0,
    paddingVertical: 0,
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center"
  },
  subtitle: {
    color: colors.white,
    fontSize: 15,
    textAlign: "center"
  },
  shadow: {
    textShadowColor: 'rgba(0, 0, 0, 0.45)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 2
  },
  buttonContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: 20,
    justifyContent: "space-between",
    overflow: "hidden",
    borderRadius: 5
  },
  buttonBg: {
    flex: 1,
    paddingVertical: 15,
    height: '100%',
    width: '100%',
    resizeMode: 'cover'
  },
  buttonPadding: {
    paddingHorizontal: 20
  }
})

export const Button = ({ text, subtitle = null, isBig = false, colorize = false, color = false, noPadding = false, noBorder = false, halfSize = false, hasShadow = false, hasBg = false,  onPress = false }) => {

  const buttonBig = isBig ? {fontSize: 25} : {}
  const isClicked = colorize.clicked == colorize.id
  let buttonColor = {backgroundColor: colors.white_alpha}
  let planeButton = noPadding ? { borderRadius: 0, marginTop: 0, borderWidth: 0, borderBottomWidth: 1, borderColor: colors.white_alpha} : {}
  let noBorderButton = noBorder ? { borderWidth: 0, borderBottomWidth: 0} : {}
  let isHalf = halfSize ? { width: "48%", marginHorizontal: "1%"} : {}

  if(colorize && colorize.answered) {

    if(colorize.isCorrect) {
      buttonColor = {backgroundColor: colors.green_light, borderColor: isClicked ? colors.white_alpha : 'transparent'}
    } else {
      if(isClicked) {
        buttonColor = {backgroundColor: colors.red_light, borderColor: isClicked ? colors.white_alpha : 'transparent'}
      }
    }
  }

  if(color) {
    buttonColor = {backgroundColor: color, borderColor: 'transparent'}
  }

  if(onPress) {
    if(hasBg) {
      if(subtitle) {
        return (
          <TouchableOpacity onPress={onPress} style={[styles.button, styles.noPadding, buttonColor, planeButton, noBorderButton, isHalf]}>
            <ImageBackground source={bgImage} style={styles.buttonBg}>
              <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '', {fontWeight: "500"}]}>{text}</Text>
              <Text style={[styles.subtitle, styles.buttonPadding, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
            </ImageBackground>
          </TouchableOpacity>
        )
      } else {
        return (
          <TouchableOpacity onPress={onPress} style={[styles.button, styles.noPadding, buttonColor, planeButton, noBorderButton, isHalf]}>
            <ImageBackground source={bgImage} style={styles.buttonBg}>
              <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
            </ImageBackground>
          </TouchableOpacity>
        )
      }
    } else {
      if(subtitle) {
        return (
          <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
            <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '', {fontWeight: "500"}]}>{text}</Text>
            <Text style={[styles.subtitle, styles.buttonPadding, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
          </TouchableOpacity>
        )
      } else {
        return (
          <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
            <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
          </TouchableOpacity>
        )
      }
    }
  } else {
    if(subtitle) {
      return (
        <View style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
          <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : ''], {fontWeight: "500"}}>{text}</Text>
          <Text style={[styles.subtitle, styles.buttonPadding, hasShadow ? styles.shadow : '']}>{subtitle}</Text>
        </View>
      )
    } else {
      return (
        <View style={[styles.button, buttonColor, planeButton, noBorderButton, isHalf]}>
          <Text style={[styles.text, styles.buttonPadding, buttonBig, hasShadow ? styles.shadow : '']}>{text}</Text>
        </View>
      )
    }
  }
}


export const ButtonContainer = ({ children, isBoxed = false}) => {

  let boxedStyle = isBoxed ? {borderWidth: 2, borderColor: colors.white_alpha2} : {}

  return (
    <View style={[styles.buttonContainer, boxedStyle]}>{children}</View>
  )
}