sbycrosz / react-native-credit-card-input

Easy, cross-platform credit-card input for your React Native Project! Start accepting payment πŸ’° in your app today!
MIT License
1.46k stars 699 forks source link

Applying transformation to X axis too #221

Closed mariovillamizar closed 2 months ago

mariovillamizar commented 2 years ago

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

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

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-credit-card-input/src/CardView.js b/node_modules/react-native-credit-card-input/src/CardView.js
index 96510cd..dd1de8f 100644
--- a/node_modules/react-native-credit-card-input/src/CardView.js
+++ b/node_modules/react-native-credit-card-input/src/CardView.js
@@ -118,10 +118,11 @@ export default class CardView extends Component {
     const isAmex = brand === "american-express";
     const shouldFlip = !isAmex && focused === "cvc";

-    const containerSize = { ...BASE_SIZE, height: BASE_SIZE.height * scale };
+    const containerSize = { height: BASE_SIZE.height * scale, width: BASE_SIZE.width * scale };
     const transform = { transform: [
       { scale },
-      { translateY: ((BASE_SIZE.height * (scale - 1) / 2)) },
+      { translateY: (-BASE_SIZE.height / scale / 2) + (BASE_SIZE.height / 2) },
+      { translateX: (-BASE_SIZE.width / scale / 2) + (BASE_SIZE.width / 2) }
     ] };

     return (

This issue body was partially generated by patch-package.