\n\nCode:\n\n```js\n\n// or\n\n```\n\n\n# Features\n* Skeuomorphic credit-card 💳 (inspired by: [card](https://jessepollak.github.io/card/), [react-native-credit-card](https://github.com/akashahmad/react-native-vertical-input-credit-card))\n* **!!NEW!!** Now you could scale the Credit Card for smaller screens\n* **!!NEW!!** Now you could use CardView as a Component. example use case: showing saved payment details, etc.\n* Lite version for smaller screens (or if skeuomorphic is not really your thing)\n* Credit-card input validations & formatting while you're typing\n* Form is fully navigatable using keypad\n* Works on both Android and iOS\n\n\nthen add these lines in your react-native codebase\n\n```js\nimport { CreditCardInput, LiteCreditCardInput } from \"react-native-vertical-input-credit-card\";\n\n\n// or\n\n\n// Note: You'll need to enable LayoutAnimation on android to see LiteCreditCardInput's animations\n// UIManager.setLayoutAnimationEnabledExperimental(true);\n\n```\n\nAnd then on your onChange handler:\n\n```js\n_onChange => form => console.log(form);\n\n// will print:\n{\n valid: true, // will be true once all fields are \"valid\" (time to enable the submit button)\n values: { // will be in the sanitized and formatted form\n \tnumber: \"4242 4242\",\n \texpiry: \"06/19\",\n \tcvc: \"300\",\n \ttype: \"visa\", // will be one of [null, \"visa\", \"master-card\", \"american-express\", \"diners-club\", \"discover\", \"jcb\", \"unionpay\", \"maestro\"]\n \tname: \"Sam\",\n \tpostalCode: \"34567\",\n },\n status: { // will be one of [\"incomplete\", \"invalid\", and \"valid\"]\n\tnumber: \"incomplete\",\n\texpiry: \"incomplete\",\n\tcvc: \"incomplete\",\n\tname: \"incomplete\", \n\tpostalCode: \"incomplete\",\n },\n};\n\n// Notes: \n// cvc, name, & postalCode will only be available when the respective props is enabled (e.g. requiresName, requiresCVC)\n```\n\n# Props\n\n## LiteCreditCardInput\n| Property | Type | Description |\n| --- | --- | --- |\n|autoFocus | PropTypes.bool | Automatically focus Card Number field on render|\n|onChange | PropTypes.func | Receives a `formData` object every time the form changes |\n|onFocus | PropTypes.func | Receives the name of currently focused field |\n|placeholders | PropTypes.object | Defaults to `{ number: \"1234 5678 1234 5678\", expiry: \"MM/YY\", cvc: \"CVC\" }` |\n|inputStyle | Text.propTypes.style | Style for credit-card form's textInput |\n|validColor | PropTypes.string | Color that will be applied for valid text input. Defaults to: \"{inputStyle.color}\" |\n|invalidColor | PropTypes.string | Color that will be applied for invalid text input. Defaults to: \"red\" |\n|placeholderColor | PropTypes.string | Color that will be applied for text input placeholder. Defaults to: \"gray\" |\n| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).\n\n#### NOTES\nLiteCreditCardInput does not support `requiresName`, `requiresCVC`, and `requiresPostalCode` at the moment, PRs are welcome :party:\n\n\n## CreditCardInput\n| Property | Type | Description |\n| --- | --- | --- |\n|autoFocus | PropTypes.bool | Automatically focus Card Number field on render|\n|onChange | PropTypes.func | Receives a `formData` object every time the form changes |\n|onFocus | PropTypes.func | Receives the name of currently focused field |\n|labels | PropTypes.object | Defaults to `{ number: \"CARD NUMBER\", expiry: \"EXPIRY\", cvc: \"CVC/CCV\" }` |\n|placeholders | PropTypes.object | Defaults to `{ number: \"1234 5678 1234 5678\", expiry: \"MM/YY\", cvc: \"CVC\" }` |\n|cardScale | PropTypes.number | Scales the credit-card view. Defaults to `1`, which translates to `{ width: 300, height: 190 }` |\n|cardFontFamily | PropTypes.string | Font family for the CreditCardView, works best with monospace fonts. Defaults to Courier (iOS) or monospace (android) |\n|cardImageFront | PropTypes.number | Image for the credit-card view `e.g. require(\"./card.png\")` |\n|cardImageBack | PropTypes.number | Image for the credit-card view `e.g. require(\"./card.png\")` |\n|labelStyle | Text.propTypes.style | Style for credit-card form's labels |\n|inputStyle | Text.propTypes.style | Style for credit-card form's textInput |\n|inputContainerStyle | ViewPropTypes.style | Style for textInput's container Defaults to: `{ borderBottomWidth: 1, borderBottomColor: \"black\" }` |\n|validColor | PropTypes.string | Color that will be applied for valid text input. Defaults to: \"{inputStyle.color}\" |\n|invalidColor | PropTypes.string | Color that will be applied for invalid text input. Defaults to: \"red\" |\n|placeholderColor | PropTypes.string | Color that will be applied for text input placeholder. Defaults to: \"gray\" |\n|requiresName | PropTypes.bool | Shows cardholder's name field Default to `false` |\n|requiresCVC | PropTypes.bool | Shows CVC field Default to `true` |\n|requiresPostalCode | PropTypes.bool | Shows postalCode field Default to `false` |\n|validatePostalCode | PropTypes.func | Function to validate postalCode, expects `incomplete`, `valid`, or `invalid` as return values|\n|allowScroll | PropTypes.bool | enables horizontal scrolling on CreditCardInput Defaults to `false` |\n|cardBrandIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |\n| additionalInputsProps | PropTypes.objectOf(TextInput.propTypes) | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in [RN TextInput](https://facebook.github.io/react-native/docs/textinput.html).\n\n##CardView\n\n| Property | Type | Description |\n| --- | --- | --- |\n|focused | PropTypes.string | Determines the front face of the card|\n|brand | PropTypes.string | Brand of the credit card|\n|name | PropTypes.string | Cardholder's name (Use empty string if you need to hide the placeholder) |\n|number | PropTypes.string | Credit card number (you'll need to the formatting yourself) |\n|expiry | PropTypes.string | Credit card expiry (should be in MM/YY format)|\n|cvc | PropTypes.string | Credit card CVC |\n|placeholder | PropTypes.object | Placeholder texts|\n|scale | PropTypes.number | Scales the card|\n|fontFamily | PropTypes.string | Defaults to `Courier` and `monospace` in iOS and Android respectively|\n|imageFront | PropTypes.number | Image for the credit-card |\n|imageBack | PropTypes.number | Image for the credit-card |\n|customIcons | PropTypes.object | brand icons for CardView. see `./src/Icons.js` for details |\n\n#### Note on additionalInputsProps\n\nadditionalInputsProps gives you more control over the inputs in LiteCreditCardInput and CreditCardInput. An example object is as follows:\n```javascript\naddtionalInputsProps = {\n name: {\n defaultValue: 'my name',\n maxLength: 40,\n },\n postalCode: {\n returnKeyType: 'go',\n },\n};\n```\n\nThe above would set the default value of the name field to `my name` and limit the input to a maximum of 40 character. In addition, it would set the returnKeyType of the postalcode field to `go`.\n\n# Methods\n## setValues\nSet values into credit card form\n\n\n```js\n\t// sets 4242 on credit card number field\n\t// other fields will stay unchanged\n\tthis.refs.CCInput.setValues({ number: \"4242\" });\n```\n\n**Known issues:** clearing a field e.g. `setValues({ expiry: \"\" })` will trigger the logic to `move to previous field` and trigger other kind of weird side effects. **PR plz**\n\n\n## focus\nfocus on to specified field\n\n```js\n\t// focus to expiry field\n\tthis.refs.CCInput.focus(\"expiry\");\n```\n\n# Example\n\nIn the `example` directory, run:\n\n```bash\nnpm install\n\nreact-native run-ios\n# or\nreact-native run-android\n```\n\n# Missing Something? Something is not working?\n* Open a GitHub issue, or\n* Send a pull request :D\n* Make sure `npm run lint` passed\n\n# Future Improvement\n* Add unit tests\n* Create example with [react-native-awesome-card-io](https://github.com/Kerumen/react-native-awesome-card-io)\n\n# Breaking Changes from 0.2.*\n* `cardViewSize` prop are removed from `CreditCardInput`, use `cardScale` instead (because changing the size will break most of the texts)\n* `bgColor` prop are removed from `CreditCardInput`, ask your designer friend to make a credit card image instead (or use the prebundled image)\n* `imageFront` and `imageBack` props are renamed to `cardImageFront` and `cardImageBack` respectively,\n* Android `monospace` fonts doesn't looks as nice as iOS `Courier`, bundle custom fonts into your app and override the default using `cardFontFamily` instead\n\n# Production App using react-native-vertical-input-credit-card\n* Grain.com.sg ([iOS](https://grain.com.sg/mobile/ios/download), [Android](https://grain.com.sg/mobile/android/download)) – Gourmet food delivery in Singapore\n","readmeFilename":"readme.md"}
![](\"https://github.com/akashahmad/react-native-vertical-input-credit-card/blob/master/preview-ios.gif?raw=true\")
\n![](\"https://github.com/akashahmad/react-native-vertical-input-credit-card/blob/master/preview-ios-lite.gif?raw=true\")
\n![](\"https://github.com/akashahmad/react-native-vertical-input-credit-card/blob/master/preview-android.gif?raw=true\")
\n![](\"https://github.com/akashahmad/react-native-vertical-input-credit-card/blob/master/preview-android-lite.gif?raw=true\")
\n