react-native-qr-decode-image-camera

1yarn add react-native-qr-decode-image
2or
3npm install react-native-qr-decode-image
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

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});