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

Usage

card's structure:

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