style.js

import { StyleSheet, Platform } from "react-native";
import { Colors, Typography, Mixins } from "../../styles";

const SIZE_10 = 10;
const SIZE_20 = 20;
const SIZE_30 = 30;
const SIZE_40 = 40;
const PERCENT_100 = "100%";
const BORDER_RADIUS = Typography["BORDER_RADIUS"];
const PRIMARY_COLOR = Colors["PRIMARY"];
const WHITE_COLOR = Colors["WHITE"];
const BLACK_COLOR = Colors["BLACK"];
const GREY_COLOR = Colors["GREY"];
const LIGHT_GREY = Colors["LIGHT_GREY"];
const BUTTON_WRAPPER_PADDING = Mixins["padding"](0, SIZE_40, 80, SIZE_40);
const BUTTON_PADDING = Mixins["padding"](SIZE_10, 0, SIZE_10, 0);
const FORM_MARGIN = Mixins["margin"](0, 25, 0, 25);
const FORM_PADDING = Mixins["padding"](0, 15, 0, 15);

export const styles = StyleSheet.create({
  container: { flex: 1 },
  primaryBackgroundColor: { backgroundColor: PRIMARY_COLOR },
  whiteBackgroundColor: { backgroundColor: WHITE_COLOR },
  wrapper: {
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    width: PERCENT_100,
    height: PERCENT_100,
  },
  imageWrapper: { flexGrow: 1, justifyContent: "center" },
  buttonWrapper: {
    paddingBottom: BUTTON_WRAPPER_PADDING["paddingBottom"],
    width: PERCENT_100,
    paddingLeft: BUTTON_WRAPPER_PADDING["paddingLeft"],
    paddingRight: BUTTON_WRAPPER_PADDING["paddingRight"],
  },
  primaryButton: {
    backgroundColor: PRIMARY_COLOR,
    borderRadius: BORDER_RADIUS,
    borderColor: PRIMARY_COLOR,
    justifyContent: "center",
    width: PERCENT_100,
    borderWidth: 2,
    marginTop: SIZE_20,
    paddingTop: BUTTON_PADDING["paddingTop"],
    paddingBottom: BUTTON_PADDING["paddingBottom"],
  },
  borderColor: {
    borderColor: WHITE_COLOR,
  },
  buttonText: {
    fontSize: Typography["FONT_SIZE_18"],
    fontWeight: "500",
  },
  primaryButtonText: { color: WHITE_COLOR },
  whiteButtonText: { color: PRIMARY_COLOR },
  whiteButton: {
    backgroundColor: WHITE_COLOR,
    borderRadius: BORDER_RADIUS,
    borderColor: PRIMARY_COLOR,
    width: PERCENT_100,
    justifyContent: "center",
    paddingTop: BUTTON_PADDING["paddingTop"],
    paddingBottom: BUTTON_PADDING["paddingBottom"],
  },
  form: {
    marginLeft: FORM_MARGIN["marginLeft"],
    marginRight: FORM_MARGIN["marginRight"],
    marginTop: 30,
  },
  formInput: {
    borderRadius: BORDER_RADIUS,
    paddingLeft: FORM_PADDING["paddingLeft"],
    paddingRight: FORM_PADDING["paddingRight"],
  },
  marginTop: {
    marginTop: SIZE_30,
  },
  marginBottom: {
    marginBottom: SIZE_30,
  },
  disabledButton: {
    backgroundColor: GREY_COLOR,
    borderRadius: BORDER_RADIUS,
    borderColor: GREY_COLOR,
    borderWidth: 2,
    marginTop: SIZE_20,
    justifyContent: "center",
    width: PERCENT_100,
    paddingTop: BUTTON_PADDING["paddingTop"],
    paddingBottom: BUTTON_PADDING["paddingBottom"],
  },
  emailError: {
    color: "red",
    fontSize: 14,
    marginTop: 8,
    marginBottom: 2,
    paddingLeft: 5,
  },
  countryPickerWrapper: {
    flexDirection: "row",
    width: PERCENT_100,
    borderRadius: BORDER_RADIUS,
  },
  countryPickerInput: {
    width: "30%",
    alignSelf: "flex-end",
    backgroundColor: GREY_COLOR,
    height: PERCENT_100,
    marginLeft: 0,
    paddingLeft: "2%",
    borderColor: "transparent",
  },
  countryCodeText: {
    color: BLACK_COLOR,
    fontSize: Typography["FONT_SIZE_16"],
  },
  phoneNumberWrapper: { width: "60%", borderColor: "transparent" },
  phoneNumberInput: {
    color: BLACK_COLOR,
    fontSize: Typography["FONT_SIZE_18"],
    paddingLeft: SIZE_10,
  },
  arrowIconStyle: {
    color: LIGHT_GREY,
    position: "absolute",
    left: "85%",
    width: "100%",
  },
  blackColor: { color: BLACK_COLOR },
  headerStyle: { color: WHITE_COLOR },
  placeholderStyle: { color: LIGHT_GREY },
  pickerStyle: {
    borderColor: GREY_COLOR,
    borderWidth: 1,
    width: "100%",
    paddingLeft: 5,
    ...Platform.select({
      android: {
        marginLeft: SIZE_10,
      },
    }),
  },
  itemStyle: { borderRadius: 5, paddingLeft: 5 },
  title: {
    textAlign: "center",
    fontSize: Typography["FONT_SIZE_24"],
    fontWeight: "600",
  },
  description: {
    textAlign: "center",
    color: LIGHT_GREY,
    lineHeight: 23,
    fontWeight: "500",
    paddingTop: SIZE_10,
  },
  boxShadow: {
    backgroundColor: WHITE_COLOR,
    borderRadius: 5,
    padding: SIZE_20,
    shadowColor: BLACK_COLOR,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 15,
    marginBottom: 25,
  },
  flexRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingBottom: SIZE_20,
  },
  fontSize24: { fontSize: Typography["FONT_SIZE_24"] },
  requiredColor: { color: "red" },
  label: {
    fontSize: Typography["FONT_SIZE_16"],
    paddingBottom: SIZE_10,
  },
  fontWeightBold: { fontWeight: "600" },
  uploadButtonWrapper: { flexDirection: "row", justifyContent: "flex-end" },
  uploadButton: { backgroundColor: PRIMARY_COLOR, marginTop: SIZE_20 },
  uploadDisabledButton: { backgroundColor: GREY_COLOR, marginTop: SIZE_20 },
  uploadIcon: { marginRight: 0, color: WHITE_COLOR },
  uploadText: {
    paddingLeft: 7,
    fontSize: Typography["FONT_SIZE_18"],
    fontWeight: "500",
    color: WHITE_COLOR,
  },
});


//import { styles } from "./Styles";
// style={[styles.container, styles.whiteBackgroundColor]}