feat: add frontImage and backImage props

SConaway · Oct 30, 2020 · de99a11 · de99a11
1 parent 1b31d42
commit de99a11
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -114,6 +114,33 @@ export default function App() {
             fontColor="#222"
           />
         </View>
+        <View style={styles.cardContainer}>
+          <CreditCardDisplay
+            number={3542424242424242}
+            cvc={123}
+            expiration="06/21"
+            name="John J. Doe"
+            fontColor="#222"
+            frontImage={{
+              uri:
+                'https://p.kindpng.com/picc/s/252-2524416_credit-card-hd-png-download.png',
+            }}
+            // You can do the same thing with backImage,
+            // just I didn't see any blank card images to use at the time
+          />
+        </View>
+        <View style={styles.cardContainer}>
+          <CreditCardDisplay
+            number={6242424242424242}
+            cvc={123}
+            expiration="06/21"
+            name="John J. Doe"
+            fontColor="#222"
+            frontImage={require('./assets/images/blankCard.png')}
+            // You can do the same thing with backImage,
+            // just I didn't see any blank card images to use at the time
+          />
+        </View>
       </ScrollView>
     </View>
   );

diff --git a/example/src/assets/images/blankCard.png b/example/src/assets/images/blankCard.png
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  ImageBackground,
+  Image,
+  ImageSourcePropType,
+} from 'react-native';
 
 import FlipCard from 'react-native-flip-card';
 import creditcardutils from 'creditcardutils';
@@ -26,6 +33,12 @@ type Props = {
   /** Additional styles to apply to the back of the card */
   backStyles?: object;
 
+  /** Alternate image to use for the front of the card */
+  frontImage?: ImageSourcePropType;
+
+  /** Alternate image to use for the back of the card */
+  backImage?: ImageSourcePropType;
+
   /** Additional styles to apply to the component from `react-native-flip-card` */
   cardStyles?: object;
 
@@ -59,6 +72,8 @@ const defaultProps = {
   friction: 6,
   flipped: false,
   borderRadius: 20,
+  frontImage: require('./assets/images/card-front.png'),
+  backImage: require('./assets/images/card-back.png'),
 };
 
 const CreditCardDisplay = (props: Props) => {
@@ -132,7 +147,7 @@ const CreditCardDisplay = (props: Props) => {
         <View style={props.frontStyles}>
           <View style={{ height: props.height, width: props.width }}>
             <ImageBackground
-              source={require('./assets/images/card-front.png')}
+              source={props.frontImage}
               style={styles.imageBackground}
               imageStyle={{ borderRadius: props.borderRadius }}
             >
@@ -228,7 +243,7 @@ const CreditCardDisplay = (props: Props) => {
         <View style={props.backStyles}>
           <View style={{ height: props.height, width: props.width }}>
             <ImageBackground
-              source={require('./assets/images/card-back.png')}
+              source={props.backImage}
               style={styles.imageBackground}
               imageStyle={{ borderRadius: 15 }}
             >