https://github.com/watanabeyu/react-native-qrimage-decoder
QR image decoder for React Native
https://github.com/watanabeyu/react-native-qrimage-decoder
expo javascript qrcode react-native
Last synced: 25 days ago
JSON representation
QR image decoder for React Native
- Host: GitHub
- URL: https://github.com/watanabeyu/react-native-qrimage-decoder
- Owner: watanabeyu
- License: mit
- Created: 2018-03-03T09:27:13.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-03T10:13:19.000Z (about 7 years ago)
- Last Synced: 2025-04-08T16:47:36.400Z (28 days ago)
- Topics: expo, javascript, qrcode, react-native
- Language: JavaScript
- Homepage: https://exp.host/@watanabe_yu/react-native-qrimage-decoder-example
- Size: 421 KB
- Stars: 13
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-native-qrimage-decoder
QR image decoder libraries require linking...
So this library does not require linking.
But now still require Expo on Android.
I will response as soon as possible not require Expo on Android.
## Instration
```bash
npm install react-native-qrimage-decoder --save
```
## Usage
```js
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Alert,
WebView,
} from 'react-native';
import { ImagePicker, Constants, FileSystem } from 'expo';
import QRdecoder from 'react-native-qrimage-decoder';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
},
button: {
width: '100%',
backgroundColor: Constants.manifest.primaryColor,
paddingVertical: 20,
paddingHorizontal: 40,
marginVertical: 20,
marginHorizontal: 20,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
},
});
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
src: null,
};
}
onPressPath = async (e) => {
try {
const image = await ImagePicker.launchImageLibraryAsync({
mediaTypes: 'Images',
});
this.setState({
src: image.uri,
});
} catch (err) {
console.log(err);
}
}
onPressBase64 = async (e) => {
try {
const image = await ImagePicker.launchImageLibraryAsync({
mediaTypes: 'Images',
allowsEditing: true,
aspect: [1, 1],
base64: true,
});
if (image.uri.lastIndexOf('.') > 0) {
let mimetype;
const ext = image.uri.substr(image.uri.lastIndexOf('.')).toLowerCase();
if (ext === '.jpg' || ext === '.jpeg' || ext === '.jpe') {
mimetype = 'image/jpeg';
} else if (ext === '.png') {
mimetype = 'image/png';
} else if (ext === '.gif') {
mimetype = 'image/gif';
}
if (mimetype) {
this.setState({
src: `data:${mimetype};base64,${image.base64}`,
});
}
}
} catch (err) {
console.log(err);
}
}
onSuccess = (data) => {
Alert.alert('成功', data);
}
onError = (data) => {
Alert.alert('エラー', data);
}
render() {
return (
画像を選択{'\n'}return image uri(path)
画像を選択{'\n'}return image base64
);
}
}
```
Checkout [example](example).
## QRdecoder API
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| src | string | null | Image path(file:///xxxxxx or https://xxxxx or http://xxxxx) or `data:${mimetype};base64,${image.base64}` |
| onSuccess | func | (data) => {} | Called when qr decode success. |
| onError | func | (data) => {} | Called when qr decode error. |
onError, return data(string) is below.
* QR code not found : `error decoding QR Code`
* Image load failed : `Failed to load the image`
**Note : dataURL suppoert is iOS only.**