CreditCardView validation cuts off text in Android

[jonsabogal]

If I enter an invalid cc number in Android using CreditCardView component, validation kicks in and cuts off the text fields underneath for Expiry, cvc and zip code.

Also I am not sure what causes the validation styling to kick in. If I wrap my "onSave" code under a check for cardParams not being null (I have noticed cardParams is null whenever the cc number is invalid or incomplete), it still kicks in; I assume a simple tap on the screen might trigger it? I was trying to work around this by not showing the CreditCardView validation at all and creating my own.

I haven't tested in iOS but I assume the problem isn't there because the CreditCardView is displayed all in the same row in iOS as opposed to 2 rows in android.

onSave(cardView: CreditCardView) { if (cardView.cardParams != null || cardView.cardParams != undefined) { this.creditCardView = cardView; this.setupIntentSecret$ = this.paymentFormService.getPaymentMethodSetupIntentSecret(this.user.userId); this.subscribeToSetupIntent(); } }

using ns 7.1.2.

{
"name": "@nativescript/template-tab-navigation-ng",
"main": "main.js",
"displayName": "Tabs",
"templateType": "App template",
"version": "7.0.6",
"description": "NativeScript Application",
"author": "NativeScript Team [email protected]",
"license": "SEE LICENSE IN ",
"publishConfig": {
"access": "public"
},
"keywords": [
"nstudio",
"nativescript",
"mobile",
"angular",
"{N}",
"tns",
"template",
"tab",
"navigation",
"category-general"
],
"repository": "",
"homepage": "https://github.com/NativeScript/nativescript-app-templates",
"bugs": {
"url": "https://github.com/NativeScript/NativeScript/issues"
},
"scripts": {
"lint": "tslint "src/**/*.ts""
},
"dependencies": {
"@angular/animations": "~11.0.0",
"@angular/common": "~11.0.0",
"@angular/compiler": "~11.0.0",
"@angular/core": "~11.0.0",
"@angular/forms": "~11.0.0",
"@angular/platform-browser": "~11.0.0",
"@angular/platform-browser-dynamic": "~11.0.0",
"@angular/router": "~11.0.0",
"@nativescript/angular": "~11.0.0",
"@nativescript/camera": "^5.0.8",
"@nativescript/core": "~7.1.0",
"@nativescript/firebase": "^11.1.3",
"@nativescript/theme": "~2.3.0",
"@triniwiz/nativescript-stripe": "^7.0.0-beta-0",
"reflect-metadata": "~0.1.12",
"rxjs": "^6.6.0",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/compiler-cli": "~11.0.0",
"@nativescript/android": "7.0.1",
"@nativescript/ios": "7.1.1",
"@nativescript/webpack": "~4.0.0",
"@ngtools/webpack": "~11.0.0",
"codelyzer": "~6.0.0",
"node-sass": "^4.14.1",
"tslint": "~6.1.3",
"typescript": "~4.0.0"
},
"private": "true",
"readme": "NativeScript Application"
}