Implementing Credit Card Scanning in React Native Apps

Setting Up the Project

To get started, create a new React Native project by running the following command in your terminal:

npx react-native init CreditCardScanner

Open the project in your preferred IDE and replace the code in the App.tsx file with the following:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View>
      <Text>Credit Card Scanner</Text>
    </View>
  );
};

export default App;

Integrating Text Recognition

To integrate text recognition, we’ll use the react-native-text-recognition library. Install the library by running the following command:

npm install react-native-text-recognition

Next, install the required helper libraries:

npm install react-native-vision-camera react-native-image-crop-picker

Capturing and Recognizing Credit Cards

To capture and recognize credit cards, we’ll create two functions: pickAndRecognize and captureAndRecognize. These functions will handle image picking and camera capture, respectively.

import React, { useState } from 'react';
import { View, Text, Image } from 'react-native';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import { recognizeText } from 'react-native-text-recognition';

const App = () => {
  const [image, setImage] = useState(null);
  const [recognizedText, setRecognizedText] = useState('');

  const pickAndRecognize = async () => {
    const result = await launchImageLibrary({
      mediaType: 'photo',
      maxWidth: 1000,
      maxHeight: 1000,
    });

    if (result.assets) {
      const asset = result.assets[0];
      const recognizedText = await recognizeText(asset.uri);
      setRecognizedText(recognizedText);
    }
  };

  const captureAndRecognize = async () => {
    const result = await launchCamera({
      mediaType: 'photo',
      maxWidth: 1000,
      maxHeight: 1000,
    });

    if (result.assets) {
      const asset = result.assets[0];
      const recognizedText = await recognizeText(asset.uri);
      setRecognizedText(recognizedText);
    }
  };

  // ...
};

Validating Credit Card Numbers

To validate credit card numbers, we’ll use a regular expression.

const validateCardNumber = (cardNumber: string) => {
  const regex = /^\d{16}$/;
  return regex.test(cardNumber);
};

Formatting Credit Card Numbers

To format credit card numbers, we’ll use a utility function.

const formatCardNumber = (cardNumber: string) => {
  return cardNumber.replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, '$1 $2 $3 $4');
};

Displaying Recognized Text

Finally, let’s display the recognized text in our UI.

return (
  <View>
    <Text>Credit Card Scanner</Text>
    <Button title="Pick Image" onPress={pickAndRecognize} />
    <Button title="Capture Image" onPress={captureAndRecognize} />
    {recognizedText ? (
      <Text>Recognized Text: {formatCardNumber(recognizedText)}</Text>
    ) : null}
  </View>
);