Configurable label for MONTH/YEAR text on the front card image

[caballerof]

Hi juandl! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-credit-card-input-plus@0.4.7 for the project I'm working on.

On the front image of the CreditCardInput component, there is a label above the expiration date with the text 'MONTH/YEAR'. I needed to change that text to Spanish but realized that the text was hardcoded in the component. So, I added a new prop to the component. Maybe this change could be helpful to other people. If you want to add it, here is the code.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-credit-card-input-plus/src/CardView.js b/node_modules/react-native-credit-card-input-plus/src/CardView.js
index 7e345e0..e4e2dc1 100644
--- a/node_modules/react-native-credit-card-input-plus/src/CardView.js
+++ b/node_modules/react-native-credit-card-input-plus/src/CardView.js
@@ -84,6 +84,7 @@ const CardView = ({
   cvc,
   customIcons,
   placeholder,
+  labelImageFront,
   imageFront,
   imageBack,
   scale,
@@ -182,7 +183,7 @@ const CardView = ({
               focused === "expiry" && s.focused,
             ]}
           >
-            MONTH/YEAR
+            { labelImageFront }
           </Text>
           <Text
             style={[
@@ -238,6 +239,7 @@ CardView.propTypes = {
   expiry: PropTypes.string,
   cvc: PropTypes.string,
   placeholder: PropTypes.object,
+  labelImageFront: PropTypes.string,

   scale: PropTypes.number,
   fontFamily: PropTypes.string,
@@ -254,6 +256,7 @@ CardView.defaultProps = {
     expiry: "••/••",
     cvc: "•••",
   },
+  labelImageFront: 'MONTH/YEAR',

   scale: 1,
   fontFamily: Platform.select({ ios: "Courier", android: "monospace" }),
diff --git a/node_modules/react-native-credit-card-input-plus/src/CreditCardInput.js b/node_modules/react-native-credit-card-input-plus/src/CreditCardInput.js
index 8e64eac..72b7ec5 100644
--- a/node_modules/react-native-credit-card-input-plus/src/CreditCardInput.js
+++ b/node_modules/react-native-credit-card-input-plus/src/CreditCardInput.js
@@ -64,6 +64,7 @@ export default class CreditCardInput extends Component {
     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
     placeholderColor: PropTypes.string,
+    labelImageFront: PropTypes.string,

     cardImageFront: PropTypes.number,
     cardImageBack: PropTypes.number,
@@ -93,6 +94,7 @@ export default class CreditCardInput extends Component {
       cvc: "CVC",
       postalCode: "34567",
     },
+    labelImageFront: 'MONTH/YEAR',
     inputContainerStyle: {},
     validColor: "",
     invalidColor: "red",
@@ -202,6 +204,7 @@ export default class CreditCardInput extends Component {
       cardScale,
       cardFontFamily,
       cardBrandIcons,
+      labelImageFront,
     } = this.props;

     return (
@@ -219,6 +222,7 @@ export default class CreditCardInput extends Component {
             number={number}
             expiry={expiry}
             cvc={cvc}
+            labelImageFront={labelImageFront}
           />
         </View>

This issue body was partially generated by patch-package.

[juandl]

Hello, will be done in https://github.com/juandl/react-native-credit-card-input-plus/issues/21