React-Native-Credit-Card-Animated-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.

Installation :

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

Usage :

import CreditCardUI from "react-native-credi-card-ui";

export default function Example(){
    return (
        <CreditCardUI 
            creditCardNumber="4242424242424242"
            cardCVC="123"
            cardHolderGender="miss"
            cardHolderName="Maria James"
            cardExpiryDate="11/23"
            frontImg={{uri:""}} // or require("")
            backImg={{uri:""}}
            textColor="yellow"
            secureCardNbr={true}
        />
    )
}

You can also check a more complete example from here

Props :

Props Description Required Default
bankName The credit card bank name No BANK OF SOMETHING
bankLogo In case you wanna add the credit card bank logo (image source) No null
hideCardChip If it's true, the default cedit card chip will be hidden, of type bool No false
creditCardNumber The credit card number, of type String Yes "4242424242424242"
cardCVC Credit card CVC Yes 123
flipHorizontal To make the card view flip horizontally No true
flipVertical To make the card view flip vertically No false
onFlipEnd The action to execute once the flip ends No ()=>void 0
onFlipStart The action to execute when the flip starts No ()=>void 0
cardHolderGender The credit card holder's gender, of type String has to be one of "mr","miss","mrs" No "mr"
cardHolderName Credit card holder's name Yes "Tomas Edison"
cardExpiryDate Credit Card Expiry Data, of type String Yes "02/24"
frontImg Image source to be set as the front side image of the card view, has to be : {uri:"your_url"} or require("local_path") No require("./assets/images/cardImg.png")
backImg Image source to be set as the back side image of the card view, has to be : {uri:"your_url"} or require("local_path") No require("./assets/images/cardImg.png")
textColor The color of the printed text on the card view, of type String No "white"
cardWidth The card view width No Dimensions.get('window').width - 20
cardHeight The card view height No 200
secureCardNbr This props is quite important, it enables securely hiding the credit card sensitive information such as the card's number and CVC, if it's true only the last four digits of the card's number will be displayed and others as stars "*", same as CVC with the one last digit. of type bool No false

GitHub

https://github.com/BLemine/rn-credit-card-ui