dcangulo / react-native-instapay-qr

Extract relevant data from InstaPay QR code.

React Native InstaPay QR

Extract relevant data from InstaPay QR code.

Compatibility

	iOS	Android	Web	Windows	macOS
Expo	✅	✅	✅	🚫	🚫
Native	✅	✅	✅	❌	❌

Installation

yarn add react-native-instapay-qr
npx pod-install # iOS Only

Android

Add the following to your AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />

iOS

Add the following to your Info.plist:

<key>NSCameraUsageDescription</key>
<string/>

Installation (Expo)

expo install react-native-instapay-qr expo-camera expo-barcode-scanner
npx pod-install # iOS Only

💡 If you use the Expo managed workflow you will see "CocoaPods is not supported in this project" - this is fine, it's not necessary.

Usage

import { useState } from 'react';
import InstaPayQr from 'react-native-instapay-qr';

function App() {
  const [scanning, setScanning] = useState(true);

  const onRead = (data, errors) {
    if (errors.length > 0) return;

    console.log(data);
    setScanning(false);
  };

  return (
    <InstaPayQr
      style={{ height: 300, width: 300 }}
      cameraStyle={{ flex: 1 }}
      onRead={onRead}
      scanning={scanning}
    />
  );
}

Response Data

{
  countryCode: 'PH',
  city: 'Makati',
  name: 'Account Name',
  accountNumber: 'XXXXXXXXXXXX',
  swiftCode: 'UBPHPHMMXXX',
  bankName: 'UNION BANK OF THE PHILIPPINES',
}

Props

Attribute	Type	Default
style	React Native Style	{}
cameraStyle	React Native Style	{}
onRead	Function	() => null
scanning	Boolean	true
children	Node	null

Upgrading

See UPGRADING.md

Changelogs

See CHANGELOGS.md

Contributing

See CONTRIBUTING.md

License

Copyright © 2022 David Angulo, released under the MIT license, see LICENSE.