Weird top padding while scaling

[mariovillamizar]

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..5b2a2ee 100644
--- a/node_modules/react-native-credit-card-input/src/CardView.js
+++ b/node_modules/react-native-credit-card-input/src/CardView.js
@@ -121,7 +121,7 @@ export default class CardView extends Component {
     const containerSize = { ...BASE_SIZE, height: BASE_SIZE.height * scale };
     const transform = { transform: [
       { scale },
-      { translateY: ((BASE_SIZE.height * (scale - 1) / 2)) },
+      { translateY: (-BASE_SIZE.height / scale / 2) + (BASE_SIZE.height / 2) }
     ] };

     return (

This issue body was partially generated by patch-package.

Consider this case: I'm wrapping the cards with a view. When scaling the cards, there is a weird top padding in the parent view.

By fixing the translateY value I was able to fix it: