react-native-qr-decode-image-camera
v1.1.3
Published
Decode react native from gallery and camera
Downloads
2,701
Maintainers
Readme
react-native-qr-decode-image-camera
yarn add react-native-qr-decode-image-camera
or
npm install react-native-qr-decode-image-camera
run
npm install
Install react native camera and give necessary permission
then run
cd ios
pod install
then
react-native run-android
or
react-native run-ios
Example
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity
} from "react-native";
import { QRscanner } from "react-native-qr-decode-image-camera";
export default class Scanner extends Component {
constructor(props) {
super(props);
this.state = {
flashMode: false,
zoom: 0.2
};
}
render() {
return (
<View style={styles.container}>
<QRscanner
onRead={this.onRead}
renderBottomView={this.bottomView}
flashMode={this.state.flashMode}
zoom={this.state.zoom}
finderY={50}
/>
</View>
);
}
bottomView = () => {
return (
<View
style={{ flex: 1, flexDirection: "row", backgroundColor: "#0000004D" }}
>
<TouchableOpacity
style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
onPress={() => this.setState({ flashMode: !this.state.flashMode })}
>
<Text style={{ color: "#fff" }}>йоба-боба-функция</Text>
</TouchableOpacity>
</View>
);
};
onRead = res => {
console.log(res);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#000"
}
});
QRreader
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity
} from "react-native";
import { QRreader } from "react-native-qr-decode-image-camera";
import ImagePicker from "react-native-image-picker";
export default class Scanner extends Component {
constructor(props) {
super(props);
this.state = {
reader: {
message: null,
data: null
}
};
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
this.openPhoto();
}}
>
<Text style={{ marginTop: 20 }}>просто кек бля</Text>
</TouchableOpacity>
<View>
{!this.state.reader ? (
<Text>
{!this.state.reader.message ? "" : `${this.state.reader.message}`}
</Text>
) : (
<Text>
{!this.state.reader.message
? ""
: `${this.state.reader.message}:${this.state.reader.data}`}
</Text>
)}
</View>
</View>
);
}
openPhoto() {
console.log("ImagePicker");
ImagePicker.launchImageLibrary({}, response => {
console.log("Response = ", response);
if (response.didCancel) {
console.log("User cancelled image picker");
} else if (response.error) {
console.log("ImagePicker Error: ", response.error);
} else if (response.customButton) {
console.log("User tapped custom button: ", response.customButton);
} else {
if (response.uri) {
var path = response.path;
if (!path) {
path = response.uri;
}
QRreader(path)
.then(data => {
this.setState({
reader: {
message: "message",
data: data
}
});
setTimeout(() => {
this.setState({
reader: {
message: null,
data: null
}
});
}, 10000);
})
.catch(err => {
this.setState({
reader: {
message: "message",
data: null
}
});
});
}
}
});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});
QRscanner
| method | type | example | Remarks | | ------------------ | ------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | isRepeatScan | boolean | false | whether to allow repeated scanning | | zoom | number | 0 | Camera focal length range 0-1 | | flashMode | bool | false | Turn on the flashlight | | onRead | func | (res) => {} | scan callback | | maskColor | string | '# 0000004D' | mask layer color | | borderColor | string | '# 000000' | border color | | cornerColor | string | '# 22ff00' | Color of corner of scan frame | | borderWidth | number | 0 | border width of scan frame | | cornerBorderWidth | number | 4 | border width of scan frame corner | | cornerBorderLength | number | 20 | width and height of the corner of the scan frame | | rectHeight | number | 200 | Scan frame height | | rectWidth | number | 200 | Scan Frame Width | | finderX | number | 0 | scan frame X axis offset | | finderY | number | 0 | scan frame Y axis offset | | isCornerOffset | bool | true | whether the corners are offset | | cornerOffsetSize | number | 1 | offset | | bottomHeight | number | 100 | Reserved height at the bottom | | scanBarAnimateTime | number | 2500 | scan line time | | scanBarColor | string | '# 22ff00' | scan line color | | scanBarImage | any | null | scan line image | | scanBarHeight | number | 1.5 | scan line height | | scanBarMargin | number | 6 | scanline left and right margin | | hintText | string | 'Put QR code / bar code into the box and scan it automatically' | | | hintTextStyle | object | {color: '# fff', fontSize: 14, backgroundColor: 'transparent'} | hint string style | | hintTextPosition | number | 130 | I dick knows that in this column the shot is written in Chinese understand it yourself))) | | | renderTopView | func | () => {} | render top View | | renderBottomView | func | () => <View style = {{flex: 1, backgroundColor: '# 0000004D'}} /> | render bottom View | | isShowScanBar | bool | true | whether to show scan lines | | topViewStyle | object | null | render top container style | | bottomViewStyle | object | null | render bottom container style |