TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

rn-credit-card-ui :

A Credit Card React-Native UI component, it uses react-native-flip-card to flip the UI component smoothly and creditcardutils to validate the given credit card number.

If no type was detected (invalid number), no logo will be shown.

Screens :


Installation :

npm i rn-credit-card-ui
# or if you're using yarn : 
yarn add rn-credit-card-ui

Usage :

import CreditCardUI from "rn-credit-card-ui";

export default function Example(){
    return (
            holderName="Maria James"
            bankName={"Bank of Sky"}

You can also check a more complete example from here

Props :

Props Description Type Required Default
frontImage The card front image ImageSourcePropType No require("./assets/images/cardImg.png")
backImg The card back image ImageSourcePropType No require("./assets/images/cardImg.png")
textColor The card elements color string No "white"
cardWidth The width of the card element string or number No 85%
cardHeight The height of the card element string or number No 20%
isCardChipShown To show the card chip element or not boolean No true
bankLogo Bank logo image ImageSourcePropType No undefined
bankName The bank name string No ""
bankLogoContainerStyle The style of the view wrapper of the bank's logo and name ViewStyle No undefined
cardNumber The credit card number string Yes 4242424242424242
expiryDate The card expiry date string Yes 11/27
cvc The cvc code string or number Yes 123
holderName The credit card holder's name string Yes Maria James
holderNameStyle The style of the holder's name text element TextStyle No undefined
isCardNumberShown To show the card's number in full format or in secure format boolean Yes true
holderGender The card holder's gender status string Yes "mr"
isHorizontalFlipEnabled To enable the card element horizontal flip boolean No true
isVerticalFlipEnabled To enable the card element vertical flip boolean No false
cardFrontContainerStyle The style of font card ViewStyle No undefined
cardFrontImageStyle The style of font card image ImageStyle No undefined
cardBackContainerStyle The style of card's back side ViewStyle No undefined
cardBackImageStyle The style of card's back image ImageStyle No undefined
cardNumberContainerStyle The style of card's number view container ViewStyle No undefined
cardNumberLabel The card's number label string No ""
cardNumberLabelStyle The card's number label style TextStyle No undefined
cardNumberStyle The card's number style TextStyle No undefined
cvcStyle The CVC style TextStyle No undefined
cvcLabel The CVC label string No ""
cvcLabelStyle The CVC label style TextStyle No undefined
dateContainerStyle The card's expiry date view container style ViewStyle No undefined
dateLabel The expiry date label string No "EXP DATE"
dateLabelStyle The expiry date label style TextStyle No undefined
dateStyle The expiry date style TextStyle No undefined
bankNameStyle The bank's name style TextStyle No undefined
bankLogoStyle The bank's logo style ImageStyle No undefined
cardTypeLogoStyle The card's type logo style ImageStyle No undefined
cardChip The card's chip element ImageSourcePropType No undefined
cardChipStyle The card's chip style ImageStyle No undefined
blackBannerStyle The card's back side black banner ViewStyle No undefined
blackBannerStyle The card's back side black banner ViewStyle No undefined
whiteBannerStyle The card's back side white banner ViewStyle No undefined
onFlipStart callback to execute when the flip event starts (isFlipped: boolean) => void No ()=>void 0
onFlipEnd callback to execute when the flip event ends (isFlipped: boolean) => void No ()=>void 0

Contribution :

Feel free to contribute to this project by sending your custom PR here.

Package Sidebar


npm i rn-credit-card-ui

Weekly Downloads






Unpacked Size

679 kB

Total Files


Last publish


  • sherlock_lemine