react-native-lite-credit-card-input

Minimal credit card input for RN using React hooks.

Description:

This module is a reimplementation of Lite Credit Card Input from https://github.com/sbycrosz/react-native-credit-card-input/tree/master/src.

As of this writing, the previous module has not been updated in 3+ years and uses older, deprecated react life cycle methods causing yellow box messages.

This reimplementation is a standalone implementation using React hooks.

The input area contains no default border. You can add your own via the style prop. See example below.

Installation

yarn add react-native-lite-credit-card-input

or

npm install react-native-lite-credit-card-input

https://www.npmjs.com/package/react-native-lite-credit-card-input

Props

Prop
onChange	Returns a card object * see below
style	Override styles * see example below

Usage

import {LiteCreditCardInput} from 'react-native-lite-credit-card-input'

card's structure:

 {
   valid: boolean,
   type: string, // ('visa', 'american-express', et al.)
   values: {
     number: string,  // card number, no spaces
     expiry: string,  // expiry date "MM/YY"  --- with slash
     cvc: string, // 3 or 4 digit
   }
 }

Example Code

import React from 'react'
import {View, Text} from 'react-native'
import {LiteCreditCardInput} from 'react-native-lite-credit-card-input'

const Example = props => {

  const [card, setCard] = React.useState({})

  return(
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <LiteCreditCardInput onChange={setCard} style={{borderWidth:1}} />
      <View>
        <Text>{JSON.stringify(card, null, 2)}</Text>
      </View>
    </View>
  )
}

export default Example