{"id":13632535,"url":"https://github.com/halilb/rn-credit-card","last_synced_at":"2025-04-05T05:05:33.158Z","repository":{"id":45563898,"uuid":"326265200","full_name":"halilb/rn-credit-card","owner":"halilb","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-07T06:38:09.000Z","size":7410,"stargazers_count":233,"open_issues_count":8,"forks_count":66,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-29T04:09:22.209Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halilb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-02T20:27:44.000Z","updated_at":"2025-01-20T15:19:58.000Z","dependencies_parsed_at":"2023-01-24T13:46:15.780Z","dependency_job_id":null,"html_url":"https://github.com/halilb/rn-credit-card","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Frn-credit-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Frn-credit-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Frn-credit-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halilb%2Frn-credit-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halilb","download_url":"https://codeload.github.com/halilb/rn-credit-card/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289426,"owners_count":20914464,"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":[],"created_at":"2024-08-01T22:03:06.173Z","updated_at":"2025-04-05T05:05:33.139Z","avatar_url":"https://github.com/halilb.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Native Credit Card\n\nThis is a fully functional and animated credit card form library, and it's ready to use 🚀\n\n![horizontal demo](./assets/card-form-first-low.gif)\n\n---\n\n## Features\n\n- Works on iOS and Android.\n- Validations.\n- Card icon animation with `Lottie`.\n- Card flip animation with [react-native-card-flip](https://github.com/lhandel/react-native-card-flip).\n- Possible to access all `react-hook-form` methods.\n- TypeScript code base.\n- Works on `Expo`.\n\n## Blog Post\n\nThis repository also contains my initial work of building a simple react native form with `react-hook-form` without any fancy animations. You may read it on my blog: [React Native Form Management Tutorial](https://bilir.me/blog/react-native-form-management-tutorial).\n\n## Installation\n\nInstall the library first:\n\n```\nnpm install rn-credit-card\n// OR\nyarn add rn-credit-card\n```\n\nInstall `react-hook-form`:\n\n```\nnpm install react-hook-form\n// OR\nyarn add react-hook-form\n```\n\n**Note**: The latest version of this project works with `react-hook-form` version `\u003e7.0.0`. Stick with the version `0.2.0` if you'd like to use it with `react-hook-form: \u003c7.0.0`:\n\n```\nnpm install rn-credit-card@0.2.0\n```\n\nYou also need to install `lottie-react-native` if you want to display card icon animations. Please note that this is optional, and the library will display simple card icons if `Lottie` is not present:\n\n```\nnpm install lottie-react-native\n// OR\nyarn add lottie-react-native\n```\n\nIf you'd like to use the library on Android, make sure you're using a `lottie-react-native` version greater than `3.0.0`. The animations are not working on `2.x.x` versions.\n\nAdditional steps might be needed depending on your platform. Please check [lottie-react-native documentation](https://github.com/lottie-react-native/lottie-react-native#installing-react-native--0600).\n\n### Configuring Fonts\n\nThe library uses [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) font by default. If you'd like to keep it that way, you need to import `RobotoMono_400Regular` and `RobotoMono_700Bold` fonts to your project. Please see [Expo](https://docs.expo.io/versions/latest/sdk/font/) or [this dev.to post](https://dev.to/aneeqakhan/add-custom-fonts-in-react-native-0-63-for-ios-and-android-3a9e) for more information.\n\nYou may also use custom fonts with this library. Please see [#fonts](#fonts) section.\n\n## Usage\n\nYou need to create a `react-hook-form` and pass it down to the `CreditCardForm` through `FormProvider` context. This structure helps you accessing every propery and method of the form so you can build some features on top of the library.\n\nThe library is written in TypeScript, and types are also available out of the box. You may use `FormModel` to type your form.\n\nHere is a fully functional example with `KeyboardAvodingView`, which manages the scroll position when keyboard is open.\n\n```tsx\nimport React from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport {\n  Alert,\n  StyleSheet,\n  KeyboardAvoidingView,\n  Platform,\n  SafeAreaView,\n} from 'react-native'\nimport LottieView from 'lottie-react-native'\nimport CreditCardForm, { Button, FormModel } from 'rn-credit-card'\n\nconst App: React.FC = () =\u003e {\n  const formMethods = useForm\u003cFormModel\u003e({\n    // to trigger the validation on the blur event\n    mode: 'onBlur',\n    defaultValues: {\n      holderName: '',\n      cardNumber: '',\n      expiration: '',\n      cvv: '',\n    },\n  })\n  const { handleSubmit, formState } = formMethods\n\n  function onSubmit(model: FormModel) {\n    Alert.alert('Success: ' + JSON.stringify(model, null, 2))\n  }\n\n  return (\n    \u003cFormProvider {...formMethods}\u003e\n      \u003cSafeAreaView style={styles.container}\u003e\n        \u003cKeyboardAvoidingView\n          style={styles.avoider}\n          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}\n        \u003e\n          \u003cCreditCardForm\n            LottieView={LottieView}\n            horizontalStart\n            overrides={{\n              labelText: {\n                marginTop: 16,\n              },\n            }}\n          /\u003e\n        \u003c/KeyboardAvoidingView\u003e\n        {formState.isValid \u0026\u0026 (\n          \u003cButton\n            style={styles.button}\n            title={'CONFIRM PAYMENT'}\n            onPress={handleSubmit(onSubmit)}\n          /\u003e\n        )}\n      \u003c/SafeAreaView\u003e\n    \u003c/FormProvider\u003e\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  avoider: {\n    flex: 1,\n    padding: 36,\n  },\n  button: {\n    margin: 36,\n    marginTop: 0,\n  },\n})\n\nexport default App\n```\n\nIf you are not using TypeScipt on your project, simply remove `FormModel` references from the example above.\n\n## Available Props\n\n### LottieView\n\nThis prop takes the default exported value of `lottie-react-native` library. This is optional because `Lottie` might require additional configuration steps. The library will display simple png card icons if this prop is not provided.\n\nPlease remember you need a `lottie-react-native` version greater than `3.x.x` to make it work on Android.\n\n| type | default   | required | platform    |\n| ---- | --------- | -------- | ----------- |\n| any  | undefined | NO       | iOS/Android |\n\nExample:\n\n```tsx\nimport LottieView from 'lottie-react-native'\n;\u003cCreditCardForm LottieView={LottieView} /\u003e\n```\n\n### horizontalStart\n\nThis makes the form start with a horizontal scroll. This is the default behaviour.\n\nThis feature is not working on Android due to a weird problem happening when the `ScrollView` is switched from `horizontal`.\n\n| type    | default | required | platform |\n| ------- | ------- | -------- | -------- |\n| boolean | true    | NO       | iOS only |\n\nThis is the outcome when `horizontalStart` is `false`:\n\n![vertical](./assets/card-form-second-low.gif)\n\n### formOnly\n\nWhen true, it hides the card view and displays the credit card form only.\n\n| type    | default | required | platform    |\n| ------- | ------- | -------- | ----------- |\n| boolean | false   | NO       | iOS/Android |\n\n### backgroundImage\n\nYou may use this prop to replace the background image of the card preview.\n\n| type            | default   | required | platform    |\n| --------------- | --------- | -------- | ----------- |\n| React.ReactNode | undefined | NO       | iOS/Android |\n\nExample:\n\n```tsx\n\u003cCreditCardForm\n  backgroundImage={\n    \u003cImage\n      style={{\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        borderRadius: 12,\n      }}\n      source={background}\n    /\u003e\n  }\n/\u003e\n```\n\n### fonts\n\n`fonts` props take an object with two fields:\n\n| field         | type   | default               | required |\n| ------------- | ------ | --------------------- | -------- |\n| fonts.regular | string | RobotoMono_400Regular | NO       |\n| fonts.bold    | string | RobotoMono_700Bold    | NO       |\n\nPlease note that you should use a [Monospaced font](https://en.wikipedia.org/wiki/Monospaced_font) for the best user experience. The fixed width helps maintaining the same card number width while the user types.\n\nExample:\n\n```tsx\n\u003cCreditCardForm\n  fonts={{\n    regular: 'RobotoMono_400Regular',\n    bold: 'RobotoMono_700Bold',\n  }}\n/\u003e\n```\n\n### inputColors\n\nYou may modify the `TextInput` colors using this. It's an object with three optional fields:\n\n| field   | type   | default | required |\n| ------- | ------ | ------- | -------- |\n| focused | string | #080F9C | NO       |\n| errored | string | #B00020 | NO       |\n| regular | string | #B9C4CA | NO       |\n\nExample:\n\n```tsx\n\u003cCreditCardForm\n  inputColors={{\n    focused: '#080F9C',\n    errored: '#B00020',\n    regular: '#B9C4CA',\n  }}\n/\u003e\n```\n\n### translations\n\nAn optional object that takes a string for each displayed text on the library. You may use it to modify any or all of those displayed texts.\n\n| type         | default   | required | platform    |\n| ------------ | --------- | -------- | ----------- |\n| Translations | undefined | NO       | iOS/Android |\n\nExample:\n\n```tsx\n\u003cCreditCardForm\n  // those are the default values\n  translations={{\n    cardNumber: 'Card Number',\n    cardHolderName: 'Cardholder Name',\n    nameSurname: 'Name Surname',\n    mmYY: 'MM/YY',\n    expiration: 'Expiration',\n    securityCode: 'Security Code',\n    next: 'Next',\n    done: 'Done',\n    cardNumberRequired: 'Card number is required.',\n    cardNumberInvalid: 'This card number looks invalid.',\n    cardHolderNameRequired: 'Cardholder name is required.',\n    cardHolderNameInvalid: 'This cardholder name looks invalid.',\n    expirationRequired: 'Expiration date is required.',\n    expirationInvalid: 'This expiration date looks invalid.',\n    securityCodeRequired: 'Security code is required.',\n    securityCodeInvalid: 'This security date looks invalid.',\n  }}\n/\u003e\n```\n\n### overrides\n\nThis props might be used to override some component styles within the library. All fields are optional.\n\n| field             | type                   |\n| ----------------- | ---------------------- |\n| cardPreview       | ViewStyle or TextStyle |\n| labelText         | TextStyle              |\n| cardHolderPreview | TextStyle              |\n| expirationPreview | ViewStyle or TextStyle |\n| outline           | ViewStyle              |\n| input             | ViewStyle              |\n| labelContainer    | ViewStyle              |\n| inputLabel        | TextStyle              |\n| errorText         | TextStyle              |\n\n\n\n### requiresName\n\nAn optional prop that allows you to hide the cardholder Name from both the form and the card view. \nWhen false, it hides the CardHolder Name field.\n\n| type         | default   | required | platform    |\n| ------------ | --------- | -------- | ----------- |\n| boolean      | true      | NO       | iOS/Android |\n\nExample\n \n```tsx\n\u003cCreditCardForm\n  LottieView={LottieView}\n  horizontalStart\n  requiresName={false}\n/\u003e\n```\n\n\n## Credits\n\n- The design is from [Pawel Szymankiewicz](https://dribbble.com/shots/6440077-Add-a-New-Credit-Card-alternate-flow).\n- Card icon animations are from [Tim John](https://lottiefiles.com/timjohn).\n\n## Licence\n\n[MIT](http://opensource.org/licenses/mit-license.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalilb%2Frn-credit-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalilb%2Frn-credit-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalilb%2Frn-credit-card/lists"}