react-native-qr-decode-image-camera

1yarn add react-native-qr-decode-image-camera
2or
3npm install react-native-qr-decode-image-camera
4run
5npm install

Install react native camera and give necessary permission

1then run
2
3cd ios
4pod install

1then
2react-native run-android
3or
4react-native run-ios
5

Example

1import React, { Component } from "react";
2import {
3  Platform,
4  StyleSheet,
5  Text,
6  View,
7  TouchableOpacity
8} from "react-native";
9import { QRscanner } from "react-native-qr-decode-image-camera";
10
11export default class Scanner extends Component {
12  constructor(props) {
13    super(props);
14    this.state = {
15      flashMode: false,
16      zoom: 0.2
17    };
18  }
19  render() {
20    return (
21      <View style={styles.container}>
22        <QRscanner
23          onRead={this.onRead}
24          renderBottomView={this.bottomView}
25          flashMode={this.state.flashMode}
26          zoom={this.state.zoom}
27          finderY={50}
28        />
29      </View>
30    );
31  }
32  bottomView = () => {
33    return (
34      <View
35        style={{ flex: 1, flexDirection: "row", backgroundColor: "#0000004D" }}
36      >
37        <TouchableOpacity
38          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
39          onPress={() => this.setState({ flashMode: !this.state.flashMode })}
40        >
41          <Text style={{ color: "#fff" }}>йоба-боба-функция</Text>
42        </TouchableOpacity>
43      </View>
44    );
45  };
46  onRead = res => {
47    console.log(res);
48  };
49}
50const styles = StyleSheet.create({
51  container: {
52    flex: 1,
53    backgroundColor: "#000"
54  }
55});

QRreader

1import React, { Component } from "react";
2import {
3  Platform,
4  StyleSheet,
5  Text,
6  View,
7  TouchableOpacity
8} from "react-native";
9import { QRreader } from "react-native-qr-decode-image-camera";
10import ImagePicker from "react-native-image-picker";
11
12export default class Scanner extends Component {
13  constructor(props) {
14    super(props);
15    this.state = {
16      reader: {
17        message: null,
18        data: null
19      }
20    };
21  }
22  render() {
23    return (
24      <View style={styles.container}>
25        <TouchableOpacity
26          onPress={() => {
27            this.openPhoto();
28          }}
29        >
30          <Text style={{ marginTop: 20 }}>просто кек бля</Text>
31        </TouchableOpacity>
32        <View>
33          {!this.state.reader ? (
34            <Text>
35              {!this.state.reader.message ? "" : `${this.state.reader.message}`}
36            </Text>
37          ) : (
38            <Text>
39              {!this.state.reader.message
40                ? ""
41                : `${this.state.reader.message}:${this.state.reader.data}`}
42            </Text>
43          )}
44        </View>
45      </View>
46    );
47  }
48
49  openPhoto() {
50    console.log("ImagePicker");
51    ImagePicker.launchImageLibrary({}, response => {
52      console.log("Response = ", response);
53
54      if (response.didCancel) {
55        console.log("User cancelled image picker");
56      } else if (response.error) {
57        console.log("ImagePicker Error: ", response.error);
58      } else if (response.customButton) {
59        console.log("User tapped custom button: ", response.customButton);
60      } else {
61        if (response.uri) {
62          var path = response.path;
63          if (!path) {
64            path = response.uri;
65          }
66          QRreader(path)
67            .then(data => {
68              this.setState({
69                reader: {
70                  message: "message",
71                  data: data
72                }
73              });
74              setTimeout(() => {
75                this.setState({
76                  reader: {
77                    message: null,
78                    data: null
79                  }
80                });
81              }, 10000);
82            })
83            .catch(err => {
84              this.setState({
85                reader: {
86                  message: "message",
87                  data: null
88                }
89              });
90            });
91        }
92      }
93    });
94  }
95}
96const styles = StyleSheet.create({
97  container: {
98    flex: 1,
99    backgroundColor: "#fff"
100  }
101});

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