rn-credit-card-textinput

rn-credit-card-textinput

A Fully customizable react-native credit card TextInput

Hi, I'm Orji! 👋

🚀 About Me

I'm a full stack developer but I'm more Front-end inclined... I build awesome react and react-native apps!

Demo

Installation

To deploy this project run

  npm install rn-credit-card-textinput
   or

   yarn add rn-credit-card-textinput

Features

• Credit card validation
• Supports cards like VISA, Master card, Amex, Discover,Maestro,VisaElectron etc
• Works on Expo and bare react-native projects
• Cross-platform

Screenshots

Props

inherits all React-native TextInput Props

Prop	Type	Required
inputStyle	TextStyle	no
labelStyle	TextStyle	no
inputWrapStyle	ViewStyle	no
cardInputContainerStyle	ViewStyle	no
cardInputContainerStyle	ViewStyle	no
errorColor	string	no
labelColor	string	no
focusColor	string	no
defaultBorderColor	string	no
placeholder	string	no
error	string	no
touched	boolean	no
label	string	no
value	string	no
updateTextVal	func	yes
updateCardDateText	func	yes

Usage/Examples

import {useState} from "react";
import {KeyboardAvoidingView, Platform, StyleSheet, View} from 'react-native';
import {CardNumberTextInput, CardDateTextInput} from "../src/index";


export default function App() {
    const [cardValue, setCardValue] = useState('');
    const [focusCardNum, setFocusCardNum] = useState<boolean>(false);

    const [cardDateValue, setCardDateValue] = useState('');
    const [focusCardDateNum, setFocusCardDateNum] = useState<boolean>(false);


    const updateText = (cardNum: string) => {
        setCardValue(cardNum)
    }
    const updateCardDate = (cardNum: string) => {
        setCardDateValue(cardNum)
    }


    return (
        <View style={styles.container}>
            <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={{
                width: '90%',
            }}>
                <CardNumberTextInput
                    autoFocus={true}
                    focus={focusCardNum}
                    onFocus={() => setFocusCardNum(true)}
                    onBlur={(e) => {
                        setFocusCardNum(false);
                    }}
                    label="Card number"
                    errorColor={"red"}
                    defaultBorderColor={"#ddd"}
                    inputWrapStyle={{
                        width:'100%',
                        height:60
                    }}
                    inputStyle={{
                        fontFamily: 'GT-medium',
                        color: '#333'
                    }}
                    defaultValue={cardValue}
                    focusColor={"blue"}
                    placeholder={"Credit card"}
                    updateTextVal={(text) => {
                        updateText(text)
                    }}/>

                <CardDateTextInput
                    errorColor={"red"}
                    labelColor={"#ddd"}
                    focusColor={"#1c32a0"}
                    defaultBorderColor={"#ddd"}
                    placeholder={"MM/YY"}
                    label={"Expiry date"}
                    focus={focusCardDateNum}
                    updateCardDateText={(t) => {
                        updateCardDate(t)
                    }}
                    onFocus={() => setFocusCardDateNum(true)}
                    labelStyle={{
                        color: '#333',
                        fontWeight: '400'
                    }}
                    inputWrapStyle={{
                        borderRadius: 10,
                        borderWidth: 1,

                    }}
                    placeholderTextColor={"#ccc"}
                    value={cardDateValue}
                    defaultValue={cardDateValue}
                    inputStyle={{
                        color: '#333',
                        fontWeight: 'bold',
                    }}/>


            </KeyboardAvoidingView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: '100%',
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});