Create a Credit Card Validator App using React-Native?

Last Updated : 01 Jun, 2025

In this article, we are going to implement a 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 a 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.

Playground

Note: This Section is to interact with the app which you are going to build.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app that is as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press " a" as mentioned in the image below.
- For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Add dependencies

Now, run the below command to install the validator, which is used to validate the credit card number in this article.

npm install validator

Step 4: Start Coding

-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.

Let's dive into the code in detail.

- Import libraries:

Import required libraries at the top of the file.

JavaScript

// Import useState hook from React for state management
import { useState } from "react";
// Import necessary components from react-native
import {
	View,        // Container component for layout
	Text,        // Component for displaying text
	TextInput,   // Component for user text input
	StyleSheet   // Utility for creating styles
} from "react-native";
// Import validator library for validation functions
import validator from "validator";

- StyleSheet:

Create a StyleSheet to style components like container, header, input, etc.

JavaScript

// Styles for the components
const styles = StyleSheet.create({
	container: {
		flex: 1,           // Take full available space
		marginLeft: 20,    // Left margin
		justifyContent: "center", // Center items vertically
	},
	// Header style
	header: {
		fontSize: 24,         // Header font size
		fontWeight: "bold",   // Bold text
	},
	input: {
		borderWidth: 1,       // Border thickness
		borderColor: "gray",  // Border color
		padding: 10,          // Padding inside input
		margin: 10,           // Margin around input
	},
	errorText: {
		fontWeight: "bold",   // Bold text
		color: "red",         // Text color
		backgroundColor: 'yellow' // Background color
	},
});

- Title Text:

This title explains what the app does. We use the text "Credit Card Validator" to show that the app is to validate a credit card.

JavaScript

{/* Title text */}
<Text style={styles.header}>
	Credit Card Validator
</Text>

- TextInput:

This component is used to take input, i.e, "Credit card number" from the user.

It is designed by keeping a Text component having text "Enter CreditCard:" before a TextInput component is to indicate that the TextInput is to enter credit card number for validation and when ever user enters a new text or modifying the existing text it will automatically calls validateCreditCard function using the onChangeText prop in TextInput, which enable automatic validation while user is entering credit card number.

JavaScript

{/* Label for input */}
<Text>Enter CreditCard:</Text>
{/* Text input for credit card number, calls validateCreditCard on change */}
<TextInput
	style={styles.input}
	onChangeText={(text) => validateCreditCard(text)}
/>

- validateCreditCard:

This function is used to validate the credit card number by using the isCreditCard prop from the validator library.

If it is valid, then it will update the value of state variable Message to "CreaditCard Number is Valid".
else it assigns text like "Enter valid CreditCard Number!" to convey you entered wrong credit card number.

After the update, we will use the Message variable to display the outcome.

JavaScript

// State to hold error or success message
const [Message, setMessage] = useState("");

// Function to validate credit card number using validator library
const validateCreditCard = (value) => {
	if (validator.isCreditCard(value)) {
		// If valid, set success message
		setMessage("CreditCard Number is Valid");
	} else {
		// If invalid, set error message
		setMessage("Enter valid CreditCard Number!");
	}
};


{/* Below code placed after TextInput Component */}
{/* Display error or success message */}
<Text style={styles.errorText}>
	{Message}
</Text>

Now, wrap all design code with a View component, return it from the App component, and place all methods and useState within the App component. Ensure to export the App.

Complete Source Code

App.js:

App.js

// Import useState hook from React for state management
import { useState } from "react";
// Import necessary components from react-native
import {
	View,        // Container component for layout
	Text,        // Component for displaying text
	TextInput,   // Component for user text input
	StyleSheet   // Utility for creating styles
} from "react-native";
// Import validator library for validation functions
import validator from "validator";

// Main App component
const App = () => {
	// State to hold error or success message
	const [errorMessage, setErrorMessage] = useState("");

	// Function to validate credit card number using validator library
	const validateCreditCard = (value) => {
		if (validator.isCreditCard(value)) {
			// If valid, set success message
			setErrorMessage("CreditCard Number is Valid");
		} else {
			// If invalid, set error message
			setErrorMessage("Enter valid CreditCard Number!");
		}
	};

	return (
		// Main container view
		<View style={styles.container}>
			{/* Header text */}
			<Text style={styles.header}>
				Credit Card Validator
			</Text>
			{/* Label for input */}
			<Text>Enter CreditCard:</Text>
			{/* Text input for credit card number, calls validateCreditCard on change */}
			<TextInput
				style={styles.input}
				onChangeText={(text) => validateCreditCard(text)}
			/>
			{/* Display error or success message */}
			<Text style={styles.errorText}>
				{errorMessage}
			</Text>
		</View>
	);
};

// Styles for the components
const styles = StyleSheet.create({
	container: {
		flex: 1,           // Take full available space
		marginLeft: 20,    // Left margin
		justifyContent: "center", // Center items vertically
	},
	// Header style
	header: {
		fontSize: 24,         // Header font size
		fontWeight: "bold",   // Bold text
	},
	input: {
		borderWidth: 1,       // Border thickness
		borderColor: "gray",  // Border color
		padding: 10,          // Padding inside input
		margin: 10,           // Margin around input
	},
	errorText: {
		fontWeight: "bold",   // Bold text
		color: "red",         // Text color
		backgroundColor: 'yellow' // Background color
	},
});

// Export the App component as default
export default App;