rn-card-flip

React Native Flip Card Input

Card Input component for React Code:

<CardInput
  cardFlip={this.state.cardFlip} //use to flip card after input expiry date
  cardNumber={this.state.cardNumber} //use to manage card number state
  name={this.state.name} //use to manage card holder name state
  expiry={this.state.expiry} // use to manage card expiry state
  cvv={this.state.cvv} // use to manage card CVV state
  input={this.state.selectedInput} // use to manage and highlight current editable field
  namePlaceholder={this.state.namePlaceholder} // use to manage name placeholder state
  cardNumberPlaceholder={this.state.cardNumberPlaceholder} // use to manage card number placeholder state
  cardType={this.state.cardType} // use to manage card type state
  cardBackgroundColor={'black'} // use to manage card background color
/>

Usage

npm i --save rn-card-flip

then add these lines in your react-native codebase

import {CardInput} from 'rn-card-flip';
 
<CardInput
  cardFlip={this.state.cardFlip}
  cardNumber={this.state.cardNumber}
  name={this.state.name}
  expiry={this.state.expiry}
  cvv={this.state.cvv}
  input={this.state.selectedInput}
  namePlaceholder={this.state.namePlaceholder}
  cardNumberPlaceholder={this.state.cardNumberPlaceholder}
  cardType={this.state.cardType}
/>;