@react-native-ohos/react-native-credit-card-input 1.0.1-rc.1

package/lib/commonjs/LiteCreditCardInput.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _Icons = _interopRequireDefault(require("./Icons.js"));
+var _useCreditCardForm = require("./useCreditCardForm.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const s = _reactNative.StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden'
+  },
+  icon: {
+    width: 48,
+    height: 40,
+    resizeMode: 'contain'
+  },
+  expanded: {
+    flex: 1
+  },
+  hidden: {
+    width: 0
+  },
+  leftPart: {
+    overflow: 'hidden'
+  },
+  rightPart: {
+    overflow: 'hidden',
+    flexDirection: 'row'
+  },
+  last4: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  numberInput: {
+    width: 1000
+  },
+  expiryInput: {
+    width: 80
+  },
+  cvcInput: {
+    width: 80
+  },
+  last4Input: {
+    width: 60,
+    marginLeft: 20
+  },
+  input: {
+    height: 40,
+    fontSize: 16,
+    // // @ts-expect-error outlineWidth is used to hide the text-input outline on react-native-web
+    outlineWidth: 0
+  }
+});
+const LiteCreditCardInput = props => {
+  const {
+    autoFocus = false,
+    style,
+    inputStyle,
+    placeholderColor = 'darkgray',
+    placeholders = {
+      number: '1234 5678 1234 5678',
+      expiry: 'MM/YY',
+      cvc: 'CVC'
+    },
+    onChange = () => {},
+    onFocusField = () => {},
+    testID
+  } = props;
+  const _onChange = formData => {
+    // Focus next field when number/expiry field become valid
+    if (status.number !== 'valid' && formData.status.number === 'valid') {
+      toggleFormState();
+      expiryInput.current?.focus();
+    }
+    if (status.expiry !== 'valid' && formData.status.expiry === 'valid') {
+      cvcInput.current?.focus();
+    }
+    onChange(formData);
+  };
+  const {
+    values,
+    status,
+    onChangeValue
+  } = (0, _useCreditCardForm.useCreditCardForm)(_onChange);
+  const [showRightPart, setShowRightPart] = (0, _react.useState)(false);
+  const toggleFormState = (0, _react.useCallback)(() => {
+    _reactNative.LayoutAnimation.easeInEaseOut();
+    setShowRightPart(v => !v);
+  }, []);
+  const numberInput = (0, _react.useRef)(null);
+  const expiryInput = (0, _react.useRef)(null);
+  const cvcInput = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (autoFocus) numberInput.current?.focus();
+  }, [autoFocus]);
+  const cardIcon = (0, _react.useMemo)(() => {
+    if (values.type && _Icons.default[values.type]) return _Icons.default[values.type];
+    return _Icons.default.placeholder;
+  }, [values.type]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [s.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [s.leftPart, showRightPart ? s.hidden : s.expanded],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [s.numberInput],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: numberInput,
+          keyboardType: "default",
+          style: [s.input, inputStyle],
+          placeholderTextColor: placeholderColor,
+          placeholder: placeholders.number,
+          value: values.number,
+          onChangeText: v => onChangeValue('number', v),
+          onFocus: () => onFocusField('number'),
+          autoCorrect: false,
+          underlineColorAndroid: 'transparent',
+          testID: "CC_NUMBER"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      activeOpacity: 0.8,
+      onPress: toggleFormState,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+        style: s.icon,
+        source: {
+          uri: cardIcon
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [s.rightPart, showRightPart ? s.expanded : s.hidden],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        activeOpacity: 0.8,
+        onPress: toggleFormState,
+        style: s.last4,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          pointerEvents: 'none',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            keyboardType: "default",
+            value: status.number === 'valid' ? values.number.slice(values.number.length - 4) : '',
+            style: [s.input, s.last4Input],
+            readOnly: true
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: s.expiryInput,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: expiryInput,
+          keyboardType: "default",
+          style: [s.input, inputStyle],
+          placeholderTextColor: placeholderColor,
+          placeholder: placeholders.expiry,
+          value: values.expiry,
+          onChangeText: v => onChangeValue('expiry', v),
+          onFocus: () => onFocusField('expiry'),
+          autoCorrect: false,
+          underlineColorAndroid: 'transparent',
+          testID: "CC_EXPIRY"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: s.cvcInput,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: cvcInput,
+          keyboardType: "default",
+          style: [s.input, inputStyle],
+          placeholderTextColor: placeholderColor,
+          placeholder: placeholders.cvc,
+          value: values.cvc,
+          onChangeText: v => onChangeValue('cvc', v),
+          onFocus: () => onFocusField('cvc'),
+          autoCorrect: false,
+          underlineColorAndroid: 'transparent',
+          testID: "CC_CVC"
+        })
+      })]
+    })]
+  });
+};
+var _default = exports.default = LiteCreditCardInput;
+//# sourceMappingURL=LiteCreditCardInput.js.map

package/lib/commonjs/LiteCreditCardInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_Icons","_interopRequireDefault","_useCreditCardForm","_jsxRuntime","e","__esModule","default","s","StyleSheet","create","container","paddingVertical","paddingHorizontal","flexDirection","alignItems","overflow","icon","width","height","resizeMode","expanded","flex","hidden","leftPart","rightPart","last4","justifyContent","numberInput","expiryInput","cvcInput","last4Input","marginLeft","input","fontSize","outlineWidth","LiteCreditCardInput","props","autoFocus","style","inputStyle","placeholderColor","placeholders","number","expiry","cvc","onChange","onFocusField","testID","_onChange","formData","status","toggleFormState","current","focus","values","onChangeValue","useCreditCardForm","showRightPart","setShowRightPart","useState","useCallback","LayoutAnimation","easeInEaseOut","v","useRef","useEffect","cardIcon","useMemo","type","Icons","placeholder","jsxs","View","children","jsx","TextInput","ref","keyboardType","placeholderTextColor","value","onChangeText","onFocus","autoCorrect","underlineColorAndroid","TouchableOpacity","activeOpacity","onPress","Image","source","uri","pointerEvents","slice","length","readOnly","_default","exports"],"sourceRoot":"..\\..\\src","sources":["LiteCreditCardInput.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CreditCardInput", {
+  enumerable: true,
+  get: function () {
+    return _CreditCardInput.default;
+  }
+});
+Object.defineProperty(exports, "CreditCardView", {
+  enumerable: true,
+  get: function () {
+    return _CreditCardView.default;
+  }
+});
+Object.defineProperty(exports, "LiteCreditCardInput", {
+  enumerable: true,
+  get: function () {
+    return _LiteCreditCardInput.default;
+  }
+});
+Object.defineProperty(exports, "useCreditCardForm", {
+  enumerable: true,
+  get: function () {
+    return _useCreditCardForm.useCreditCardForm;
+  }
+});
+var _CreditCardView = _interopRequireDefault(require("./CreditCardView.js"));
+var _CreditCardInput = _interopRequireDefault(require("./CreditCardInput.js"));
+var _LiteCreditCardInput = _interopRequireDefault(require("./LiteCreditCardInput.js"));
+var _useCreditCardForm = require("./useCreditCardForm.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_CreditCardView","_interopRequireDefault","require","_CreditCardInput","_LiteCreditCardInput","_useCreditCardForm","e","__esModule","default"],"sourceRoot":"..\\..\\src","sources":["index.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,oBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,kBAAA,GAAAH,OAAA;AAO6B,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/commonjs/useCreditCardForm.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCreditCardForm = void 0;
+var _react = require("react");
+var _cardValidator = _interopRequireDefault(require("card-validator"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// --- Utilities
+
+const toStatus = validation => {
+  return validation.isValid ? 'valid' : validation.isPotentiallyValid ? 'incomplete' : 'invalid';
+};
+const removeNonNumber = (string = '') => string.replace(/[^\d]/g, '');
+const limitLength = (string = '', maxLength) => string.slice(0, maxLength);
+const addGaps = (string = '', gaps) => {
+  const offsets = [0].concat(gaps).concat([string.length]);
+  return offsets.map((end, index) => {
+    if (index === 0) return '';
+    const start = offsets[index - 1] || 0;
+    return string.slice(start, end);
+  }).filter(part => part !== '').join(' ');
+};
+const formatCardNumber = (number, maxLength, gaps) => {
+  const numberSanitized = removeNonNumber(number);
+  const lengthSanitized = limitLength(numberSanitized, maxLength);
+  const formatted = addGaps(lengthSanitized, gaps);
+  return formatted;
+};
+const formatCardExpiry = expiry => {
+  const sanitized = limitLength(removeNonNumber(expiry), 4);
+  if (sanitized.match(/^[2-9]$/)) {
+    return `0${sanitized}`;
+  }
+  if (sanitized.length > 2) {
+    return `${sanitized.substr(0, 2)}/${sanitized.substr(2, sanitized.length)}`;
+  }
+  return sanitized;
+};
+const formatCardCVC = (cvc, cvcMaxLength) => {
+  return limitLength(removeNonNumber(cvc), cvcMaxLength);
+};
+const useCreditCardForm = onChange => {
+  const [formState, setFormState] = (0, _react.useState)({
+    number: 'incomplete',
+    expiry: 'incomplete',
+    cvc: 'incomplete'
+  });
+  const [values, setValues] = (0, _react.useState)({
+    number: '',
+    expiry: '',
+    cvc: '',
+    type: undefined
+  });
+  const onChangeValue = (0, _react.useCallback)((field, value) => {
+    const newValues = {
+      ...values,
+      [field]: value
+    };
+    const numberValidation = _cardValidator.default.number(newValues.number);
+
+    // When card issuer cant be detected, use these default (3 digit CVC, 16 digit card number with spaces every 4 digit)
+    const cvcMaxLength = numberValidation.card?.code.size || 3;
+    const cardNumberGaps = numberValidation.card?.gaps || [4, 8, 12];
+    const cardNumberMaxLength =
+    // Credit card number can vary. Use the longest possible as maximum (otherwise fallback to 16)
+    Math.max(...(numberValidation.card?.lengths || [16]));
+    const newFormattedValues = {
+      number: formatCardNumber(newValues.number, cardNumberMaxLength, cardNumberGaps),
+      expiry: formatCardExpiry(newValues.expiry),
+      cvc: formatCardCVC(newValues.cvc, cvcMaxLength),
+      type: numberValidation.card?.type
+    };
+    const newFormState = {
+      number: toStatus(_cardValidator.default.number(newFormattedValues.number)),
+      expiry: toStatus(_cardValidator.default.expirationDate(newFormattedValues.expiry)),
+      cvc: toStatus(_cardValidator.default.cvv(newFormattedValues.cvc, cvcMaxLength))
+    };
+    setValues(newFormattedValues);
+    setFormState(newFormState);
+    onChange({
+      valid: newFormState.number === 'valid' && newFormState.expiry === 'valid' && newFormState.cvc === 'valid',
+      values: newFormattedValues,
+      status: newFormState
+    });
+  }, [values, onChange]);
+  return {
+    values,
+    status: formState,
+    onChangeValue
+  };
+};
+exports.useCreditCardForm = useCreditCardForm;
+//# sourceMappingURL=useCreditCardForm.js.map

package/lib/commonjs/useCreditCardForm.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_cardValidator","_interopRequireDefault","e","__esModule","default","toStatus","validation","isValid","isPotentiallyValid","removeNonNumber","string","replace","limitLength","maxLength","slice","addGaps","gaps","offsets","concat","length","map","end","index","start","filter","part","join","formatCardNumber","number","numberSanitized","lengthSanitized","formatted","formatCardExpiry","expiry","sanitized","match","substr","formatCardCVC","cvc","cvcMaxLength","useCreditCardForm","onChange","formState","setFormState","useState","values","setValues","type","undefined","onChangeValue","useCallback","field","value","newValues","numberValidation","cardValidator","card","code","size","cardNumberGaps","cardNumberMaxLength","Math","max","lengths","newFormattedValues","newFormState","expirationDate","cvv","valid","status","exports"],"sourceRoot":"..\\..\\src","sources":["useCreditCardForm.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/CreditCardInput.js

@@ -0,0 +1,134 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { useCreditCardForm } from "./useCreditCardForm.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const s = StyleSheet.create({
+  container: {
+    paddingVertical: 15,
+    paddingHorizontal: 15
+  },
+  icon: {
+    width: 48,
+    height: 40,
+    resizeMode: 'contain'
+  },
+  numberInput: {},
+  extraContainer: {
+    flexDirection: 'row',
+    marginTop: 15
+  },
+  expiryInputContainer: {
+    flex: 1,
+    marginRight: 5
+  },
+  cvcInputContainer: {
+    flex: 1,
+    marginLeft: 5
+  },
+  input: {
+    height: 40,
+    fontSize: 16,
+    borderBottomColor: 'darkgray',
+    borderBottomWidth: 1,
+    // // @ts-expect-error outlineWidth is used to hide the text-input outline on react-native-web
+    outlineWidth: 0
+  },
+  inputLabel: {
+    fontSize: 14,
+    fontWeight: 600
+  }
+});
+const CreditCardInput = props => {
+  const {
+    autoFocus,
+    style,
+    labelStyle,
+    inputStyle,
+    placeholderColor = 'darkgray',
+    labels = {
+      number: 'CARD NUMBER',
+      expiry: 'EXPIRY',
+      cvc: 'CVC/CVV'
+    },
+    placeholders = {
+      number: '1234 5678 1234 5678',
+      expiry: 'MM/YY',
+      cvc: 'CVC'
+    },
+    onChange = () => {},
+    onFocusField = () => {},
+    testID
+  } = props;
+  const {
+    values,
+    onChangeValue
+  } = useCreditCardForm(onChange);
+  const numberInput = useRef(null);
+  useEffect(() => {
+    if (autoFocus) numberInput.current?.focus();
+  }, [autoFocus]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [s.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [s.numberInput],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [s.inputLabel, labelStyle],
+        children: labels.number
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: numberInput,
+        keyboardType: "default",
+        style: [s.input, inputStyle],
+        placeholderTextColor: placeholderColor,
+        placeholder: placeholders.number,
+        value: values.number,
+        onChangeText: v => onChangeValue('number', v),
+        onFocus: () => onFocusField('number'),
+        autoCorrect: false,
+        underlineColorAndroid: 'transparent',
+        testID: "CC_NUMBER"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [s.extraContainer],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: s.expiryInputContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [s.inputLabel, labelStyle],
+          children: labels.expiry
+        }), /*#__PURE__*/_jsx(TextInput, {
+          keyboardType: "default",
+          style: [s.input, inputStyle],
+          placeholderTextColor: placeholderColor,
+          placeholder: placeholders.expiry,
+          value: values.expiry,
+          onChangeText: v => onChangeValue('expiry', v),
+          onFocus: () => onFocusField('expiry'),
+          autoCorrect: false,
+          underlineColorAndroid: 'transparent',
+          testID: "CC_EXPIRY"
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: s.cvcInputContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [s.inputLabel, labelStyle],
+          children: labels.cvc
+        }), /*#__PURE__*/_jsx(TextInput, {
+          keyboardType: "default",
+          style: [s.input, inputStyle],
+          placeholderTextColor: placeholderColor,
+          placeholder: placeholders.cvc,
+          value: values.cvc,
+          onChangeText: v => onChangeValue('cvc', v),
+          onFocus: () => onFocusField('cvc'),
+          autoCorrect: false,
+          underlineColorAndroid: 'transparent',
+          testID: "CC_CVC"
+        })]
+      })]
+    })]
+  });
+};
+export default CreditCardInput;
+//# sourceMappingURL=CreditCardInput.js.map

package/lib/module/CreditCardInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","StyleSheet","Text","TextInput","View","useCreditCardForm","jsx","_jsx","jsxs","_jsxs","s","create","container","paddingVertical","paddingHorizontal","icon","width","height","resizeMode","numberInput","extraContainer","flexDirection","marginTop","expiryInputContainer","flex","marginRight","cvcInputContainer","marginLeft","input","fontSize","borderBottomColor","borderBottomWidth","outlineWidth","inputLabel","fontWeight","CreditCardInput","props","autoFocus","style","labelStyle","inputStyle","placeholderColor","labels","number","expiry","cvc","placeholders","onChange","onFocusField","testID","values","onChangeValue","current","focus","children","ref","keyboardType","placeholderTextColor","placeholder","value","onChangeText","v","onFocus","autoCorrect","underlineColorAndroid"],"sourceRoot":"..\\..\\src","sources":["CreditCardInput.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/CreditCardView.js

@@ -0,0 +1,170 @@
+"use strict";
+
+import { Image, ImageBackground, Platform, StyleSheet, Text, View } from 'react-native';
+import FlipCard from 'react-native-flip-card';
+import Icons from "./Icons.js";
+import { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CARD_SIZE = {
+  width: 300,
+  height: 190
+};
+const s = StyleSheet.create({
+  cardContainer: {},
+  cardFace: {
+    backgroundColor: '#444',
+    borderRadius: 10
+  },
+  cardMagneticStripe: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 30,
+    height: 40,
+    backgroundColor: '#000'
+  },
+  icon: {
+    position: 'absolute',
+    top: 15,
+    right: 15,
+    width: 60,
+    height: 40,
+    resizeMode: 'contain'
+  },
+  baseText: {
+    color: 'rgba(255, 255, 255, 0.5)',
+    backgroundColor: 'transparent'
+  },
+  placeholder: {
+    color: 'rgba(255, 255, 255, 0.5)'
+  },
+  focusedField: {
+    fontWeight: 'bold',
+    color: 'rgba(255, 255, 255, 1)'
+  },
+  number: {
+    fontSize: 21,
+    position: 'absolute',
+    top: 95,
+    left: 28
+  },
+  name: {
+    fontSize: 16,
+    position: 'absolute',
+    bottom: 20,
+    left: 25,
+    right: 100
+  },
+  expiryLabel: {
+    fontSize: 9,
+    position: 'absolute',
+    bottom: 40,
+    left: 218
+  },
+  expiry: {
+    fontSize: 16,
+    position: 'absolute',
+    bottom: 20,
+    left: 220
+  },
+  amexCVC: {
+    fontSize: 16,
+    position: 'absolute',
+    top: 73,
+    right: 30
+  },
+  cvc: {
+    fontSize: 16,
+    position: 'absolute',
+    top: 80,
+    right: 30
+  }
+});
+const CreditCardView = props => {
+  const {
+    focusedField,
+    type,
+    name,
+    number,
+    expiry,
+    cvc,
+    placeholders = {
+      number: '•••• •••• •••• ••••',
+      name: '',
+      expiry: '••/••',
+      cvc: '•••'
+    },
+    imageFront,
+    imageBack,
+    fontFamily = Platform.select({
+      ios: 'Courier',
+      android: 'monospace',
+      web: 'monospace'
+    }),
+    style
+  } = props;
+  const isAmex = type === 'american-express';
+  const shouldShowCardBack = !isAmex && focusedField === 'cvc';
+  const cardIcon = useMemo(() => {
+    if (type && Icons[type]) return Icons[type];
+    return null;
+  }, [type]);
+  return /*#__PURE__*/_jsx(View, {
+    style: [s.cardContainer, CARD_SIZE, style],
+    children: /*#__PURE__*/_jsxs(FlipCard, {
+      flipHorizontal: true,
+      flipVertical: false,
+      friction: 10,
+      perspective: 2000,
+      clickable: false,
+      flip: shouldShowCardBack,
+      children: [/*#__PURE__*/_jsxs(ImageBackground, {
+        style: [CARD_SIZE, s.cardFace],
+        source: imageFront,
+        children: [!!cardIcon && /*#__PURE__*/_jsx(Image, {
+          style: [s.icon],
+          source: {
+            uri: cardIcon
+          }
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [s.baseText, {
+            fontFamily
+          }, s.number, !number && s.placeholder, focusedField === 'number' && s.focusedField],
+          children: !number ? placeholders.number : number
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [s.baseText, {
+            fontFamily
+          }, s.name, !name && s.placeholder, focusedField === 'name' && s.focusedField],
+          numberOfLines: 1,
+          children: !name ? placeholders.name : name.toUpperCase()
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [s.baseText, {
+            fontFamily
+          }, s.expiryLabel, s.placeholder, focusedField === 'expiry' && s.focusedField],
+          children: "MONTH/YEAR"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [s.baseText, {
+            fontFamily
+          }, s.expiry, !expiry && s.placeholder, focusedField === 'expiry' && s.focusedField],
+          children: !expiry ? placeholders.expiry : expiry
+        }), isAmex && /*#__PURE__*/_jsx(Text, {
+          style: [s.baseText, {
+            fontFamily
+          }, s.amexCVC, !cvc && s.placeholder, focusedField === 'cvc' && s.focusedField],
+          children: !cvc ? placeholders.cvc : cvc
+        })]
+      }), /*#__PURE__*/_jsxs(ImageBackground, {
+        style: [CARD_SIZE, s.cardFace],
+        source: imageBack,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: s.cardMagneticStripe
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [s.baseText, s.cvc, !cvc && s.placeholder, focusedField === 'cvc' && s.focusedField],
+          children: !cvc ? placeholders.cvc : cvc
+        })]
+      })]
+    })
+  });
+};
+export default CreditCardView;
+//# sourceMappingURL=CreditCardView.js.map