Create a Credit Card Validator App using React-Native?

In this article we are going to implement Credit Card Validator using React Native. The Credit card validator app is a simple application that is used to validate the card number. When a bank issues any credit card number, they don’t generate the random numbers for the card. They follow some rules to issue a new card number. for example-

• Visa Card
  • Visa cards typically have 16 digits.
  • The first digit of a Visa card is always a “4.”
• Master card
  • the master card should start with 51 to 55.
  • the length should be 16 digits.

Preview of final output: Let us have a look at how the final output will look like:

Preview image of final output

Approach:

The credit card validator app in React Native is a simple application that is used to check the validity of the card. In this app, we added a text area box in which users can enter their credit card number and check the validity of the card. We used the Validator NPM Package in the application to find the validity of the card.

Steps to Create React Native Application

Step 1: Create a react native application by using this command in command prompt

React-native init CreditCardValidator

Step 2: We will add Validator NPM Package to validate the credit card number by running the below command.

npm install validator

Example: Write the following code in App.js file

Javascript

import React, { useState } from "react";
import {
    View, Text,
    TextInput, StyleSheet
} from "react-native";
import validator from "validator";
const App = () => {
    const [errorMessage,
        setErrorMessage] = useState("");

    const validateCreditCard = (value) => {
        if (validator.isCreditCard(value)) {
            setErrorMessage(
"CreditCard Number is Valid");}
        else {
            setErrorMessage("
Enter valid CreditCard Number!");}};
    return (
        <View style={styles.container}>
            <View style={styles.image}>
                <Text style={styles.logo}>
                    GeekforGeeks
                </Text>
            </View>
            <Text style={styles.header}>
                Credit Card Validator
            </Text>
            <Text>Enter CreditCard:</Text>
            <TextInput
                style={styles.input}
                onChangeText={(text) =>
                validateCreditCard(text)}/>
            <Text style={styles.errorText}>
                {errorMessage}
            </Text>
        </View>
);};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginLeft: 20,
    },

    image: {
        alignItems: "center"
    },

    logo: {
        fontSize: 30,
        margin: 40,
        marginTop: 60,
        backgroundColor: 'lightgreen',
        borderRadius: 30
    },

    header: {
        fontSize: 24,
        fontWeight: "bold",
    },
    input: {
        borderWidth: 1,
        borderColor: "gray",
        padding: 10,
        margin: 10,
    },
    errorText: {
        fontWeight: "bold",
        color: "red",
        backgroundColor: 'yellow'

    },
});
export default App;

Steps to run your application:

Step 1: Type following command in your terminal.

npx expo start

Step 2: According to your operating system run the following command.

• To run on Android

npx react-native run-android

• To run on IOS

npx react-native run-ios

Output

Output of the App