From ac3bd33dcd61244ef7ca74398af6614741a2117a Mon Sep 17 00:00:00 2001
From: Tosif Khan <khantosif1993@gmail.com>
Date: Mon, 31 Aug 2020 18:39:38 +0530
Subject: [PATCH] fixed style of inputContainer for vertical orientation

---
 src/CreditCardInput.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/CreditCardInput.js b/src/CreditCardInput.js
index 3f1a40c4..532d1a66 100644
--- a/src/CreditCardInput.js
+++ b/src/CreditCardInput.js
@@ -25,6 +25,9 @@ const s = StyleSheet.create({
   inputContainer: {
     marginLeft: 20,
   },
+  inputContainerForVerticalOrientation: {
+    marginTop: 5,
+  },
   inputLabel: {
     fontWeight: "bold",
   },
@@ -170,21 +173,21 @@ export default class CreditCardInput extends Component {
           style={s.form}>
           <CCInput {...this._inputProps("number")}
             keyboardType="numeric"
-            containerStyle={[s.inputContainer, inputContainerStyle, { width: CARD_NUMBER_INPUT_WIDTH }]} />
+            containerStyle={[formFieldsDirection=="vertical" ? s.inputContainerForVerticalOrientation : s.inputContainer, inputContainerStyle, { width: CARD_NUMBER_INPUT_WIDTH }]} />
           <CCInput {...this._inputProps("expiry")}
             keyboardType="numeric"
-            containerStyle={[s.inputContainer, inputContainerStyle, { width: EXPIRY_INPUT_WIDTH }]} />
+            containerStyle={[formFieldsDirection=="vertical" ? s.inputContainerForVerticalOrientation : s.inputContainer, inputContainerStyle, { width: EXPIRY_INPUT_WIDTH }]} />
           { requiresCVC &&
             <CCInput {...this._inputProps("cvc")}
               keyboardType="numeric"
-              containerStyle={[s.inputContainer, inputContainerStyle, { width: CVC_INPUT_WIDTH }]} /> }
+              containerStyle={[formFieldsDirection=="vertical" ? s.inputContainerForVerticalOrientation : s.inputContainer, inputContainerStyle, { width: CVC_INPUT_WIDTH }]} /> }
           { requiresName &&
             <CCInput {...this._inputProps("name")}
-              containerStyle={[s.inputContainer, inputContainerStyle, { width: NAME_INPUT_WIDTH }]} /> }
+              containerStyle={[formFieldsDirection=="vertical" ? s.inputContainerForVerticalOrientation : s.inputContainer, inputContainerStyle, { width: NAME_INPUT_WIDTH }]} /> }
           { requiresPostalCode &&
             <CCInput {...this._inputProps("postalCode")}
               keyboardType="numeric"
-              containerStyle={[s.inputContainer, inputContainerStyle, { width: POSTAL_CODE_INPUT_WIDTH }]} /> }
+              containerStyle={[formFieldsDirection=="vertical" ? s.inputContainerForVerticalOrientation : s.inputContainer, inputContainerStyle, { width: POSTAL_CODE_INPUT_WIDTH }]} /> }
         </ScrollView>
       </View>
     );