From 4541579bdba6d82c31980b15c8a85a5899551a90 Mon Sep 17 00:00:00 2001
From: Sam Aryasa <sambya@aryasa.net>
Date: Tue, 6 Dec 2016 10:20:22 +0800
Subject: [PATCH] Add scale props to resize CardView

---
 src/CardView.js        | 28 ++++++++++++++++------------
 src/CreditCardInput.js |  3 +++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/CardView.js b/src/CardView.js
index 79b75b4f..4ab3adf1 100644
--- a/src/CardView.js
+++ b/src/CardView.js
@@ -10,15 +10,11 @@ import {
 import Icons from "./Icons";
 import FlipCard from "react-native-flip-card";
 
+const BASE_SIZE = { width: 300, height: 190 };
+
 const s = StyleSheet.create({
-  cardContainer: {
-    width: 300,
-    height: 190,
-  },
-  cardFace: {
-    width: 300,
-    height: 190,
-  },
+  cardContainer: {},
+  cardFace: {},
   placeholder: {
     color: "rgba(255, 255, 255, 0.5)",
   },
@@ -86,6 +82,7 @@ export default class CardView extends Component {
     cvc: PropTypes.string,
     placeholder: PropTypes.object,
 
+    scale: PropTypes.number,
     imageFront: PropTypes.number,
     imageBack: PropTypes.number,
   };
@@ -99,6 +96,7 @@ export default class CardView extends Component {
       cvc: "•••",
     },
 
+    scale: 1,
     imageFront: require("../images/card-front.png"),
     imageBack: require("../images/card-back.png"),
   };
@@ -106,13 +104,19 @@ export default class CardView extends Component {
   render() {
     const { focused,
       brand, name, number, expiry, cvc,
-      placeholder, imageFront, imageBack } = this.props;
+      placeholder, imageFront, imageBack, scale } = this.props;
 
     const isAmex = brand === "american-express";
     const shouldFlip = !isAmex && focused === "cvc";
 
+    const containerSize = { ...BASE_SIZE,  height: BASE_SIZE.height * scale };
+    const transform = {  transform: [
+      { scale }, 
+      { translateY: ((BASE_SIZE.height * (scale - 1) / 2)) },
+    ] }
+
     return (
-      <View style={[s.cardContainer]}>
+      <View style={[s.cardContainer, containerSize]}>
         <FlipCard style={{ borderWidth: 0 }}
             flipHorizontal
             flipVertical={false}
@@ -120,7 +124,7 @@ export default class CardView extends Component {
             perspective={2000}
             clickable={false}
             flip={shouldFlip}>
-          <Image style={[s.cardFace]}
+          <Image style={[BASE_SIZE, s.cardFace, transform]}
               source={imageFront}>
               <Image style={[s.icon]}
                   source={{ uri: Icons[brand] }} />
@@ -142,7 +146,7 @@ export default class CardView extends Component {
                     { !cvc ? placeholder.cvc : cvc }
                   </Text> }
           </Image>
-          <Image style={[s.cardFace]}
+          <Image style={[BASE_SIZE, s.cardFace, transform]}
               source={imageBack}>
               <Text style={[s.baseText, s.cvc, !cvc && s.placeholder]}>
                 { !cvc ? placeholder.cvc : cvc }
diff --git a/src/CreditCardInput.js b/src/CreditCardInput.js
index b3e6f32b..e607491c 100644
--- a/src/CreditCardInput.js
+++ b/src/CreditCardInput.js
@@ -54,6 +54,7 @@ export default class CreditCardInput extends Component {
     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
     placeholderColor: PropTypes.string,
+    cardScale: PropTypes.number,
   };
 
   componentDidMount = () => this._focus(this.props.focused);
@@ -103,12 +104,14 @@ export default class CreditCardInput extends Component {
       imageFront, imageBack, inputContainerStyle,
       values: { number, expiry, cvc, name, type }, focused,
       requiresName, requiresCVC, requiresPostalCode,
+      cardScale,
     } = this.props;
 
     return (
       <View style={s.container}>
         <CreditCard focused={focused}
             brand={type}
+            scale={cardScale}
             imageFront={imageFront}
             imageBack={imageBack}
             name={requiresName ? name : " "}