react-native-qr-decode-image-camera

1.1.3 • Public • Published

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

Package Sidebar

Install

npm i react-native-qr-decode-image-camera

Weekly Downloads

683

Version

1.1.3

License

MIT

Unpacked Size

114 kB

Total Files

25

Last publish

Collaborators

  • princedeepan