Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

Overview

React Native Credit Card Input

Easy (and good looking) credit-card input for your React Native Project 💳 💳

Code:

<CreditCardInput onChange={this._onChange} />
// or
<LiteCreditCardInput onChange={this._onChange} />

Features

  • Skeuomorphic credit-card 💳 (inspired by: card, react-native-credit-card)
  • !!NEW!! Now you could scale the Credit Card for smaller screens
  • !!NEW!! Now you could use CardView as a Component. example use case: showing saved payment details, etc.
  • Lite version for smaller screens (or if skeuomorphic is not really your thing)
  • Credit-card input validations & formatting while you're typing
  • Form is fully navigatable using keypad
  • Works on both Android and iOS

Usage

npm i --save react-native-credit-card-input

then add these lines in your react-native codebase

import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input";

<CreditCardInput onChange={this._onChange} />
// or
<LiteCreditCardInput onChange={this._onChange} />

// Note: You'll need to enable LayoutAnimation on android to see LiteCreditCardInput's animations
// UIManager.setLayoutAnimationEnabledExperimental(true);

And then on your onChange handler:

_onChange => form => console.log(form);

// will print:
{
  valid: true, // will be true once all fields are "valid" (time to enable the submit button)
  values: { // will be in the sanitized and formatted form
  	number: "4242 4242",
  	expiry: "06/19",
  	cvc: "300",
  	type: "visa", // will be one of [null, "visa", "master-card", "american-express", "diners-club", "discover", "jcb", "unionpay", "maestro"]
  	name: "Sam",
  	postalCode: "34567",
  },
  status: {  // will be one of ["incomplete", "invalid", and "valid"]
	number: "incomplete",
	expiry: "incomplete",
	cvc: "incomplete",
	name: "incomplete", 
	postalCode: "incomplete",
  },
};

// Notes: 
// cvc, name, & postalCode will only be available when the respective props is enabled (e.g. requiresName, requiresCVC)

Props

LiteCreditCardInput

Property Type Description
autoFocus PropTypes.bool Automatically focus Card Number field on render
onChange PropTypes.func Receives a formData object every time the form changes
onFocus PropTypes.func Receives the name of currently focused field
placeholders PropTypes.object Defaults to
{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" }
inputStyle Text.propTypes.style Style for credit-card form's textInput
validColor PropTypes.string Color that will be applied for valid text input. Defaults to: "{inputStyle.color}"
invalidColor PropTypes.string Color that will be applied for invalid text input. Defaults to: "red"
placeholderColor PropTypes.string Color that will be applied for text input placeholder. Defaults to: "gray"
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.

NOTES

LiteCreditCardInput does not support requiresName, requiresCVC, and requiresPostalCode at the moment, PRs are welcome :party:

CreditCardInput

Property Type Description
autoFocus PropTypes.bool Automatically focus Card Number field on render
onChange PropTypes.func Receives a formData object every time the form changes
onFocus PropTypes.func Receives the name of currently focused field
labels PropTypes.object Defaults to
{ number: "CARD NUMBER", expiry: "EXPIRY", cvc: "CVC/CCV" }
placeholders PropTypes.object Defaults to
{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" }
cardScale PropTypes.number Scales the credit-card view.
Defaults to 1, which translates to { width: 300, height: 190 }
cardFontFamily PropTypes.string Font family for the CreditCardView, works best with monospace fonts. Defaults to Courier (iOS) or monospace (android)
cardImageFront PropTypes.number Image for the credit-card view e.g. require("./card.png")
cardImageBack PropTypes.number Image for the credit-card view e.g. require("./card.png")
labelStyle Text.propTypes.style Style for credit-card form's labels
inputStyle Text.propTypes.style Style for credit-card form's textInput
inputContainerStyle ViewPropTypes.style Style for textInput's container
Defaults to: { borderBottomWidth: 1, borderBottomColor: "black" }
validColor PropTypes.string Color that will be applied for valid text input. Defaults to: "{inputStyle.color}"
invalidColor PropTypes.string Color that will be applied for invalid text input. Defaults to: "red"
placeholderColor PropTypes.string Color that will be applied for text input placeholder. Defaults to: "gray"
requiresName PropTypes.bool Shows cardholder's name field
Default to false
requiresCVC PropTypes.bool Shows CVC field
Default to true
requiresPostalCode PropTypes.bool Shows postalCode field
Default to false
validatePostalCode PropTypes.func Function to validate postalCode, expects incomplete, valid, or invalid as return values
allowScroll PropTypes.bool enables horizontal scrolling on CreditCardInput
Defaults to false
cardBrandIcons PropTypes.object brand icons for CardView. see ./src/Icons.js for details
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.

##CardView

Property Type Description
focused PropTypes.string Determines the front face of the card
brand PropTypes.string Brand of the credit card
name PropTypes.string Cardholder's name (Use empty string if you need to hide the placeholder)
number PropTypes.string Credit card number (you'll need to the formatting yourself)
expiry PropTypes.string Credit card expiry (should be in MM/YY format)
cvc PropTypes.string Credit card CVC
placeholder PropTypes.object Placeholder texts
scale PropTypes.number Scales the card
fontFamily PropTypes.string Defaults to Courier and monospace in iOS and Android respectively
imageFront PropTypes.number Image for the credit-card
imageBack PropTypes.number Image for the credit-card
customIcons PropTypes.object brand icons for CardView. see ./src/Icons.js for details

Note on additionalInputsProps

additionalInputsProps gives you more control over the inputs in LiteCreditCardInput and CreditCardInput. An example object is as follows:

addtionalInputsProps = {
  name: {
    defaultValue: 'my name',
    maxLength: 40,
  },
  postalCode: {
    returnKeyType: 'go',
  },
};

The 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.

Methods

setValues

Set values into credit card form

	// sets 4242 on credit card number field
	// other fields will stay unchanged
	this.refs.CCInput.setValues({ number: "4242" });

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

focus

focus on to specified field

	// focus to expiry field
	this.refs.CCInput.focus("expiry");

Example

Expo Snack

In the example directory, run:

npm install

react-native run-ios
# or
react-native run-android

Missing Something? Something is not working?

  • Open a GitHub issue, or
  • Send a pull request :D
  • Make sure npm run lint passed

Future Improvement

Breaking Changes from 0.2.*

  • cardViewSize prop are removed from CreditCardInput, use cardScale instead (because changing the size will break most of the texts)
  • bgColor prop are removed from CreditCardInput, ask your designer friend to make a credit card image instead (or use the prebundled image)
  • imageFront and imageBack props are renamed to cardImageFront and cardImageBack respectively,
  • Android monospace fonts doesn't looks as nice as iOS Courier, bundle custom fonts into your app and override the default using cardFontFamily instead

Production App using react-native-credit-card-input

  • Grain.com.sg (iOS, Android) – Gourmet food delivery in Singapore
Issues
  • Missing Card Holder Field

    Missing Card Holder Field

    Card Holder field it's a important field, cards can't be processed without cardholder.

    help wanted 
    opened by rturk 15
  • Inputs styles

    Inputs styles

    Hello, is it possible to set width to input fields passing it trough props?

    opened by makasimenator 10
  • Pass other input properties to each input

    Pass other input properties to each input

    I wanted a way to pass additional input props to my inputs. For example, what if you want the returnKeyType to be different than the default.

    additionalInputProps is an object that has keys that correspond to the names of each field. You can pass down any props as documented in the RN docs. Let me know if you need anything else for this PR.

    opened by sscaff1 10
  • LiteCreditCardInput input focusing breaks with RN version > 0.37 (Release Build Configuration)

    LiteCreditCardInput input focusing breaks with RN version > 0.37 (Release Build Configuration)

    I recently noticed that focusing of CCInput components in LiteCreditCardInput is not working as expected only when my project's build configuration is set to Release.

    • I was using react-native-credit-card-input v0.2.6, but am experiencing this same issue with v0.3.3.
    • I've confirmed this issue with React Native versions 0.38, 0.39, and 0.40.
    • Temporarily reverting to React Native 0.37 has allowed me to work around this for now.

    I'd appreciate any insight or ideas about why this might be happening.

    Thanks!

    opened by andybangs 9
  • _react2.proptypes.string undefined is not an object

    _react2.proptypes.string undefined is not an object

    opened by yokesharun 7
  • Broke on >= RN36

    Broke on >= RN36

    https://github.com/sonnylazuardi/react-native-credit-card/issues/7

    opened by sibelius 6
  • feature/keyboardShouldPersistTapsUpdate

    feature/keyboardShouldPersistTapsUpdate

    updating keyboardShouldPersistTaps to always since true and false is deprecated.

    opened by j-mendez 5
  • Added compatibility for react 16

    Added compatibility for react 16

    Use prop-types external package instead of deprecated/removed React.PropType.

    opened by brunocascio 5
  • Amex CVV is located in the front, ideally the card should not flip

    Amex CVV is located in the front, ideally the card should not flip

    Amex CVV is located in the front, ideally the card should not flip this UI is only expected in Visa and MasterCard cards

    opened by rturk 4
  • Postal code field doesnt accept US ZIP codes

    Postal code field doesnt accept US ZIP codes

    Postal Code field doesn't return true for valid US ZIP codes. It expects 6 digits to return true.

    connectToState.js line 38

    validatePostalCode: (postalCode = "") => { return postalCode.match(/^\d{6}$/) ? "valid" : <--- this has to check for both 5 and 6 digits postalCode.length > 6 ? "invalid" : "incomplete"; },

    opened by sajithevolvier 4
  • Bump tmpl from 1.0.4 to 1.0.5 in /example

    Bump tmpl from 1.0.4 to 1.0.5 in /example

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.5 to 1.0.7 in /example

    Bump path-parse from 1.0.5 to 1.0.7 in /example

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.5 to 1.0.7

    Bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tar from 2.2.1 to 2.2.2 in /example

    Bump tar from 2.2.1 to 2.2.2 in /example

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Is credit or debit?

    Is credit or debit?

    Hi👋 I wanted to know if there is any way to differentiate between credit and debit cards, to save that value and make a payment later. Thanks!

    opened by chulas21 0
  • Focus Bug on LiteCreditCardInput (Temp Workaround)

    Focus Bug on LiteCreditCardInput (Temp Workaround)

    Hi! 👋

    Firstly, thanks for your work on this project! 🙂

    Today I used patch-package to patch [email protected] for the project I'm working on.

    Here is the diff that solved my problem:

    diff --git a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
    index a5f166b..4bae28e 100644
    --- a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
    +++ b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
    @@ -96,7 +96,7 @@ export default class LiteCreditCardInput extends Component {
       componentDidMount = () => this._focus(this.props.focused);
     
       componentWillReceiveProps = newProps => {
    -    if (this.props.focused !== newProps.focused) this._focus(newProps.focused);
    +    if (this.props.focused !== newProps.focused && newProps.focused !== 'name') this._focus(newProps.focused);
       };
     
       _focusNumber = () => this._focus("number");
    

    This issue body was partially generated by patch-package.

    opened by SilvioLuis 0
  • Bump merge from 1.2.0 to 1.2.1 in /example

    Bump merge from 1.2.0 to 1.2.1 in /example

    Bumps merge from 1.2.0 to 1.2.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump trim from 0.0.1 to 0.0.3 in /example

    Bump trim from 0.0.1 to 0.0.3 in /example

    Bumps trim from 0.0.1 to 0.0.3.

    Changelog

    Sourced from trim's changelog.

    0.0.3 / 2020-11-04

    • fix: bump component.json

    0.0.2 / 2020-11-04

    • Fix possible regex dos vulnerability (Patrick Way)
    Commits
    Maintainer changes

    This version was pushed to npm by trott, a new releaser for trim since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.5.0 to 2.8.9 in /example

    Bump hosted-git-info from 2.5.0 to 2.8.9 in /example

    Bumps hosted-git-info from 2.5.0 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.3.3)
  • v0.3.3(Dec 30, 2016)

  • v0.3.2(Dec 26, 2016)

    • Prop to enable horizontal swiping on form https://github.com/sbycrosz/react-native-credit-card-input/pull/22
    • Adding feature replace brand icons https://github.com/sbycrosz/react-native-credit-card-input/pull/21
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Dec 6, 2016)

    Breaking Changes from 0.2.*

    • cardViewSize prop are removed from CreditCardInput, use cardScale instead (because changing the size will break most of the texts)
    • bgColor prop are removed from CreditCardInput, ask your designer friend to make a credit card image instead (or use the prebundled image)
    • imageFront and imageBack props are renamed to cardImageFront and cardImageBack respectively,
    • Android monospace fonts doesn't looks as nice as iOS Courier, bundle custom fonts into your app and override the default using cardFontFamily instead
    Source code(tar.gz)
    Source code(zip)
  • v0.2.4(Sep 17, 2016)

    • Now you could use requiresName, requiresCVC, and requiresPostalCode to toggle the displayed fields of CreditCardInput.
    • onChange will not receive focused value, because focusing on a field will not trigger onChange event which might cause rage, confusion, and pain when using the focused value
    • Now you could use onFocus to properly get the currently focused field (e.g. when you want to display a help text just like this)
    Source code(tar.gz)
    Source code(zip)
Owner
Sam Aryasa
Sam Aryasa
Tinder-like swipe cards for your React Native app

Swipe Cards for React Native A package based on @brentvatne's awesome example. Quick Start npm install --save react-native-swipe-cards Create a module

Meteor Factory 1.1k Oct 3, 2021
Cross Platform React Native UI Toolkit

Cross-Platform React Native UI Toolkit

React Native Elements 21.5k Oct 18, 2021
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 3 Oct 11, 2021
A react native card component

React Native Card View Only tested in IOS, but I think should works in Android too. Try it with Exponent Install npm install --save react-native-card-

Jack Lam 105 May 26, 2021
A pure javascript masked text and input text component for React-Native.

react-native-masked-text This is a simple masked text (normal text and input text) component for React-Native. Alert Hey guys! Unfortunatelly I'm not

Ben-hur Santos Ott 1.5k Oct 12, 2021
Pixel–perfect, native–looking typographic styles for React Native ✒️

Pixel–perfect, native–looking typographic styles for React Native. Why Creating great Text Styles in React Native is not a simple task, it requires a

Hector Garcia 3.3k Oct 14, 2021
Native CardView for react-native (All Android version and iOS)

react-native-card-view Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop). Website Material Design Card Spec CardView

Kishan Vaghela 460 Oct 12, 2021
A customizable React Native 3D card/credit-card component.

About A customizable React Native 3D card/credit-card component ?? Dependencies This lib uses react-native-linear-gradient, so it is needed for this l

Caio Nilton Lemos Barroso 4 Sep 16, 2021
Card Media component for React Native

react-native-card-media Card Media component for React Native. Also supports multiple image layout. single & double three & four five Installation npm

Dondoko Susumu 68 Aug 9, 2021
Text input mask for React Native on iOS and Android.

Text input mask for React Native, Android and iOS

null 1k Oct 17, 2021
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.7k Oct 12, 2021
A material design card component, customizable and versatile

react-native-material-cards A material design card component, customizable and versatile. See Google Material Design for more info on Cards. Installat

Swapnil Devesh 116 Oct 9, 2021
[DEPRECATED] Calendar Component for React Native

⚠️ Deprecated ⚠️ This library is no longer being actively maintained. Try https://github.com/wix/react-native-calendars react-native-calendar A <Calen

Christopher Dro 544 Sep 7, 2021
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 294 Oct 17, 2021
Text input mask for React Native, Android and iOS

react-native-text-input-mask Text input mask for React Native on iOS and Android. Examples Setup npm install --save react-native-text-input-mask # --

null 1k Oct 11, 2021
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

react-native-snap-carousel ✨ Some great news for you, fellow plugin user! ?? Head over there now to learn more about all the goodness that's coming yo

Meliorence 9k Oct 12, 2021
The best large list component for React Native.

react-native-largelist React-native-largelist is a very high performance large list component for React-Native. (iOS & Android) Now V3 is available. V

石破天惊 2.1k Oct 14, 2021
:package: Android Native Kit for React-Native

React Native Android Kit A set of native Android UI components and modules for React Native framework. The purpose of this kit is to offer to React Na

Ayoub Adib 112 Oct 3, 2021