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