https://github.com/orjiace/rn-credit-card-textinput
A fully customizable react native credit card TextInput with typescript support
https://github.com/orjiace/rn-credit-card-textinput
android expo ios react-native
Last synced: 9 months ago
JSON representation
A fully customizable react native credit card TextInput with typescript support
- Host: GitHub
- URL: https://github.com/orjiace/rn-credit-card-textinput
- Owner: orjiAce
- Created: 2022-01-21T17:47:50.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-02T19:37:00.000Z (over 4 years ago)
- Last Synced: 2025-06-28T10:49:36.341Z (about 1 year ago)
- Topics: android, expo, ios, react-native
- Language: TypeScript
- Homepage:
- Size: 2.09 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# 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
```bash
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
```javascript
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(false);
const [cardDateValue, setCardDateValue] = useState('');
const [focusCardDateNum, setFocusCardDateNum] = useState(false);
const updateText = (cardNum: string) => {
setCardValue(cardNum)
}
const updateCardDate = (cardNum: string) => {
setCardDateValue(cardNum)
}
return (
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)
}}/>
{
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',
}}/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
```