Installations

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

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.21.2

NPM Version

6.14.17 Score

72.1

Supply Chain

98.9

Quality

75.4

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

1

Total

27

Closed

3

Merged

23

Issues

Open

10

Total

16

Closed

6

Releases

8

1.1.3

Published on 18 Feb 2023

1.1.2

Published on 20 Jan 2023

1.1.1

Published on 20 Jul 2022

1.1.0

Published on 29 Jun 2022

1.0.7

Published on 04 Dec 2021

1.0.6

Published on 21 Nov 2021

View all 8 releases

Contributors

6

Unable to fetch Contributors

View all 6 contributors

Languages

4

JavaScript

Java

Objective-C

Ruby

JavaScript (72.33%)

Java (17.93%)

Objective-C (7.16%)

Ruby (2.59%)

Developer

deepanrajkumar

Download Statistics

Total Downloads

114,622

Last Day

97

Last Week

418

Last Month

1,986

Last Year

30,345

GitHub Statistics

35 Stars

90 Commits

31 Forks

4 Watching

2 Branches

6 Contributors

Maintainers

1

Package Meta Information

Latest Version

1.1.3

Package Id

react-native-qr-decode-image-camera@1.1.3

Unpacked Size

111.63 kB

Size

64.57 kB

File Count

25

NPM Version

6.14.17

Node Version

14.21.2

Publised On

18 Feb 2023

Total Downloads

Cumulative downloads

Total Downloads

114,622

Last day

-4%

97

Compared to previous day

Last week

-29.5%

418

Compared to previous week

Last month

-18.1%

1,986

Compared to previous month

Last year

-34.9%

30,345

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

prop-types

Dev Dependencies

2

react react-native

Versions

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

7

SAST

Determines if the project uses static code analysis.

4

Security-Policy

Determines if the project has published a security policy.

3

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

Score

3.6

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-native-qr-decode-image-camera

react-native-qr-decode-image-camera

Installations

Developer Guide

No

CommonJS

14.21.2

6.14.17

Score

Pull Requests

1

27

3

23

Issues

10

16

6

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

deepanrajkumar

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

114,622

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

react-native-qr-decode-image-camera

Install react native camera and give necessary permission

Example

QRreader

QRscanner

10

10

9

7

4

3

2

0

0

0

0

0

0

3.6

/10