shakeel0581 / react-native-qr-decode-image-camera

Decode react native from gallery and camera

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