{"id":25803269,"url":"https://github.com/orjiace/rn-credit-card-textinput","last_synced_at":"2025-10-11T21:32:07.572Z","repository":{"id":109008490,"uuid":"450587227","full_name":"orjiAce/rn-credit-card-textinput","owner":"orjiAce","description":"A fully customizable react native credit card TextInput with typescript support","archived":false,"fork":false,"pushed_at":"2022-03-02T19:37:00.000Z","size":2187,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T10:49:36.341Z","etag":null,"topics":["android","expo","ios","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orjiAce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://www.buymeacoffee.com/orjiace"]}},"created_at":"2022-01-21T17:47:50.000Z","updated_at":"2022-12-08T16:11:42.000Z","dependencies_parsed_at":"2023-05-19T15:46:09.217Z","dependency_job_id":null,"html_url":"https://github.com/orjiAce/rn-credit-card-textinput","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/orjiAce/rn-credit-card-textinput","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orjiAce%2Frn-credit-card-textinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orjiAce%2Frn-credit-card-textinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orjiAce%2Frn-credit-card-textinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orjiAce%2Frn-credit-card-textinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orjiAce","download_url":"https://codeload.github.com/orjiAce/rn-credit-card-textinput/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orjiAce%2Frn-credit-card-textinput/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265179341,"owners_count":23723452,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","expo","ios","react-native"],"created_at":"2025-02-27T17:44:43.302Z","updated_at":"2025-10-11T21:32:02.533Z","avatar_url":"https://github.com/orjiAce.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/orjiace"],"categories":[],"sub_categories":[],"readme":"\n# rn-credit-card-textinput\n\nA Fully customizable react-native credit card TextInput\n\n\n# Hi, I'm Orji! 👋\n\n\n## 🚀 About Me\nI'm a full stack developer but I'm more Front-end inclined...\nI build awesome react and react-native apps!\n\n\n## Demo\n\n![Demo](https://video.twimg.com/ext_tw_video/1484521738771783685/pu/vid/320x690/JMn941zui3CljFWo.mp4?tag=12)\n\n\n## Installation\n\nTo deploy this project run\n\n```bash\n  npm install rn-credit-card-textinput\n   or\n\n   yarn add rn-credit-card-textinput\n```\n\n\n## Features\n\n- Credit card validation\n- Supports cards like VISA, Master card, Amex, Discover,Maestro,VisaElectron etc\n- Works on Expo and bare react-native projects\n- Cross-platform\n\n\n## Screenshots\n\n![App Screenshot](https://github.com/orjiAce/rn-credit-card-textinput/blob/master/Webp.net-resizeimage.png)\n\n## Props\ninherits all React-native TextInput Props\n\u003c!-- TABLE_GENERATE_START --\u003e\n\n| Prop       | Type      | Required |\n|------------|-----------|----------\n| inputStyle | TextStyle | no       |\n| labelStyle | TextStyle | no       |\n| inputWrapStyle | ViewStyle | no       |\n| cardInputContainerStyle | ViewStyle | no       |\n| cardInputContainerStyle | ViewStyle | no       |\n| errorColor | string    | no       |\n| labelColor | string    | no       |\n| focusColor | string    | no       |\n| defaultBorderColor | string    | no       |\n| placeholder | string    | no       |\n| error | string    | no       |\n| touched | boolean   | no       |\n| label | string    | no       |\n| value | string    | no       |\n| updateTextVal | func      | yes      |\n| updateCardDateText | func      | yes      |\n\n\u003c!-- TABLE_GENERATE_END --\u003e\n## Usage/Examples\n\n```javascript\n\nimport {useState} from \"react\";\nimport {KeyboardAvoidingView, Platform, StyleSheet, View} from 'react-native';\nimport {CardNumberTextInput, CardDateTextInput} from \"../src/index\";\n\n\nexport default function App() {\n    const [cardValue, setCardValue] = useState('');\n    const [focusCardNum, setFocusCardNum] = useState\u003cboolean\u003e(false);\n\n    const [cardDateValue, setCardDateValue] = useState('');\n    const [focusCardDateNum, setFocusCardDateNum] = useState\u003cboolean\u003e(false);\n\n\n    const updateText = (cardNum: string) =\u003e {\n        setCardValue(cardNum)\n    }\n    const updateCardDate = (cardNum: string) =\u003e {\n        setCardDateValue(cardNum)\n    }\n\n\n    return (\n        \u003cView style={styles.container}\u003e\n            \u003cKeyboardAvoidingView behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"} style={{\n                width: '90%',\n            }}\u003e\n                \u003cCardNumberTextInput\n                    autoFocus={true}\n                    focus={focusCardNum}\n                    onFocus={() =\u003e setFocusCardNum(true)}\n                    onBlur={(e) =\u003e {\n                        setFocusCardNum(false);\n                    }}\n                    label=\"Card number\"\n                    errorColor={\"red\"}\n                    defaultBorderColor={\"#ddd\"}\n                    inputWrapStyle={{\n                        width:'100%',\n                        height:60\n                    }}\n                    inputStyle={{\n                        fontFamily: 'GT-medium',\n                        color: '#333'\n                    }}\n                    defaultValue={cardValue}\n                    focusColor={\"blue\"}\n                    placeholder={\"Credit card\"}\n                    updateTextVal={(text) =\u003e {\n                        updateText(text)\n                    }}/\u003e\n\n                \u003cCardDateTextInput\n                    errorColor={\"red\"}\n                    labelColor={\"#ddd\"}\n                    focusColor={\"#1c32a0\"}\n                    defaultBorderColor={\"#ddd\"}\n                    placeholder={\"MM/YY\"}\n                    label={\"Expiry date\"}\n                    focus={focusCardDateNum}\n                    updateCardDateText={(t) =\u003e {\n                        updateCardDate(t)\n                    }}\n                    onFocus={() =\u003e setFocusCardDateNum(true)}\n                    labelStyle={{\n                        color: '#333',\n                        fontWeight: '400'\n                    }}\n                    inputWrapStyle={{\n                        borderRadius: 10,\n                        borderWidth: 1,\n\n                    }}\n                    placeholderTextColor={\"#ccc\"}\n                    value={cardDateValue}\n                    defaultValue={cardDateValue}\n                    inputStyle={{\n                        color: '#333',\n                        fontWeight: 'bold',\n                    }}/\u003e\n\n\n            \u003c/KeyboardAvoidingView\u003e\n        \u003c/View\u003e\n    );\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        width: '100%',\n        backgroundColor: '#fff',\n        alignItems: 'center',\n        justifyContent: 'center',\n    },\n});\n\n\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forjiace%2Frn-credit-card-textinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forjiace%2Frn-credit-card-textinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forjiace%2Frn-credit-card-textinput/lists"}