fix: display on small screens / small cards overflowing

SConaway · Sep 14, 2020 · 0606898 · 0606898
1 parent f2e1a73
commit 0606898
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -29,6 +29,7 @@ export default function App() {
             cvc={123}
             expiration="06/21"
             name="John J. Doe"
+            since={2004}
           />
         </View>
         <View style={styles.cardContainer}>
@@ -60,6 +61,7 @@ export default function App() {
             cvc={123}
             expiration="06/21"
             name="John J. Doe"
+            borderRadius={50}
           />
         </View>
         <View style={styles.cardContainer}>

diff --git a/src/index.tsx b/src/index.tsx
@@ -43,14 +43,18 @@ type Props = {
 
   /** Is the card flipped? Use this to programmatically `flip` the card. */
   flipped?: boolean;
+
+  /** Border Radius to use on the images */
+  borderRadius?: number;
 } & typeof defaultProps;
 
 const defaultProps = {
   height: 190,
   width: 300,
-  fontSize: 20,
+  fontSize: 15,
   friction: 6,
   flipped: false,
+  borderRadius: 20,
 };
 
 const CreditCardDisplay = (props: Props) => {
@@ -126,10 +130,10 @@ const CreditCardDisplay = (props: Props) => {
             <ImageBackground
               source={require('./assets/images/card-front.png')}
               style={styles.imageBackground}
-              imageStyle={{ borderRadius: 15 }}
+              imageStyle={{ borderRadius: props.borderRadius }}
             >
               <View style={styles.imageContainer}>
-                <View style={{ height: '50%' }} />
+                <View style={{ flexGrow: 1 }} />
 
                 <Text
                   style={{
@@ -141,7 +145,7 @@ const CreditCardDisplay = (props: Props) => {
                   {creditcardutils.formatCardNumber(String(props.number))}
                 </Text>
 
-                <View style={{ flexDirection: 'row' }}>
+                <View style={styles.rowContainer}>
                   <View style={styles.groupContainer}>
                     {props.since && (
                       <>
@@ -191,11 +195,11 @@ const CreditCardDisplay = (props: Props) => {
                       </>
                     )}
                   </View>
-                  <View style={styles.cardImageContainer}>
+                  <View style={styles.cardTypeIconContainer}>
                     {cardTypeIcon && (
                       <Image
                         source={cardTypeIcon}
-                        style={styles.cardImage}
+                        style={styles.cardTypeIcon}
                         resizeMode="contain"
                       />
                     )}
@@ -258,18 +262,24 @@ const styles = StyleSheet.create({
   },
   imageContainer: {
     padding: 15,
+    flex: 1,
   },
-  cardImageContainer: {
+  cardTypeIconContainer: {
     justifyContent: 'center',
     height: 27,
     width: 27 * (125 / 80),
     alignItems: 'center',
+    backgroundColor: 'orange',
   },
-  cardImage: {
+  cardTypeIcon: {
     height: 25,
     width: 25 * (125 / 80),
     backgroundColor: 'white',
   },
+  rowContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
 });
 
 CreditCardDisplay.defaultProps = defaultProps;