2.0.0 • Published 3 years ago
react-native-instapay-qr v2.0.0
React Native InstaPay QR
Extract relevant data from InstaPay QR code.
Compatibility
iOS | Android | Web | Windows | macOS | |
---|---|---|---|---|---|
Expo | :white_check_mark: | :white_check_mark: | :white_check_mark: | :no_entry_sign: | :no_entry_sign: |
Native | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: | :x: |
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
:bulb: 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.