npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-qrcode-scanner-spatacus

v1.0.0

Published

A QR code scanner for React Native.

Downloads

1

Readme

react-native-qrcode-scanner-spatacus

更改相机依赖库为 react-native-camera-kit-spatacus

npm version Backers on Open Collective Sponsors on Open Collective

A QR code scanner component for React Native built on top of react-native-camera by Lochlan Wansbrough

Please note, this will also function as a generic barcode scanner by the virtue of the above module supporting barcode scanning, however, this module was initially built as a QR code scanner.

This module was originally written because the author couldn't find a module that could be simply plugged into a project without requiring too much setup.

Looking for active contributors. See Contribution guide for more details.

Please note: Most of the support on debugging new issues, especially with Android, relies on the open source community. The project is on the look out for active contributors who want to maintain this library more rigorously.

Getting started

Requirements

iOS 10

With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microsphone is accessed for the first time</string>

Android 7

With Android 7 and higher you need to add the "Vibration" permission to your AndroidManifest.xml of your project. This should be found in your android/app/src/main/AndroidManifest.xml Add the following:

<uses-permission android:name="android.permission.VIBRATE"/>

react-native-camera

react-native-camera is a dependency for this package that you'll need to add to your project. To install, run the following commands:

  1. npm install react-native-camera --save
  2. react-native link react-native-camera

New Version/Migration

If using an older version of this module with RCTCamera you will need to follow the docs here to move from the old RCTCamera to the new RNCamera. You will then need to install it as above.

Versions of this library > 0.0.30 will not support react-native-camera versions less than 1.0.0.

To install and start using react-native-qrcode-scanner-spatacus:

npm install react-native-qrcode-scanner-spatacus --save
npm install react-native-permissions --save
react-native link react-native-qrcode-scanner-spatacus
react-native link react-native-permissions

Usage

To use react-native-qrcode-scanner-spatacus, import the react-native-qrcode-scanner-spatacus module and use the <QRCodeScanner /> tag. More usage examples can be seen under the examples/ folder.

Here is an example of basic usage:

'use strict';

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Linking
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner-spatacus';
import { RNCamera } from 'react-native-camera';

class ScanScreen extends Component {
  onSuccess = e => {
    Linking.openURL(e.data).catch(err =>
      console.error('An error occured', err)
    );
  };

  render() {
    return (
      <QRCodeScanner
        onRead={this.onSuccess}
      
        topContent={
          <Text style={styles.centerText}>
            Go to{' '}
            <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on
            your computer and scan the QR code.
          </Text>
        }
        bottomContent={
          <TouchableOpacity style={styles.buttonTouchable}>
            <Text style={styles.buttonText}>OK. Got it!</Text>
          </TouchableOpacity>
        }
      />
    );
  }
}

const styles = StyleSheet.create({
  centerText: {
    flex: 1,
    fontSize: 18,
    padding: 32,
    color: '#777'
  },
  textBold: {
    fontWeight: '500',
    color: '#000'
  },
  buttonText: {
    fontSize: 21,
    color: 'rgb(0,122,255)'
  },
  buttonTouchable: {
    padding: 16
  }
});

AppRegistry.registerComponent('default', () => ScanScreen);

Screenshot of the above:

screenshot 2017-05-02 15 06 33

Please open an issue if something doesn't work or is not clear enough.

Methods

reactivate()

Call this method to programmatically enabling scanning again. Use this by attaching a ref like so <QRCodeScanner ref={(node) => { this.scanner = node }}> and calling this.scanner.reactivate()

Props

onRead (required)

propType: func.isRequired default: (e) => (console.log('QR code scanned!', e))

Will call this specified method when a QR code or a barcode is detected in the camera's view passing in the event emitted upon reading the code.

fadeIn

propType: bool default: true

When set to true this ensures that the camera view fades in after the initial load up instead of being rendered immediately. Set this to false to prevent the animated fade in of the camera view.

reactivate

propType: bool default: false

When set to false, when a QR code is scanned, the QRCodeScanner will not scan another code until it is re-rendered. When set to true this will reactivate the scanning ability of the component.

reactivateTimeout

propType: number default: 0

Use this to configure how long it should take before the QRCodeScanner should reactivate.

flashMode

propType: RNCamera.Constants.FlashMode default: RNCamera.Constants.FlashMode.auto

Flash modes

FYI: react-native-camera/flashMode

  • RNCamera.Constants.FlashMode.off turns it off.
  • RNCamera.Constants.FlashMode.on means camera will use flash in all photos taken.
  • RNCamera.Constants.FlashMode.auto leaves your phone to decide when to use flash when taking photos, based on the lightning conditions that the camera observes.
  • RNCamera.Constants.FlashMode.torch turns on torch mode, meaning the flash light will be turned on all the time (even before taking photo) just like a flashlight.

topContent

propType: oneOfType([ PropTypes.element, PropTypes.string, ])

Use this to render any additional content at the top of the camera view.

bottomContent

propType: oneOfType([ PropTypes.element, PropTypes.string, ])

Use this to render any additional content at the bottom of the camera view.

containerStyle

propType: any

Use this to pass styling for the outermost container. Useful for adding margin/padding to account for navigation bar.

cameraStyle

propType: any

Use this to pass or overwrite styling for the camera window rendered.

topViewStyle

propType: any

Use this to pass or overwrite styling for the <View> that contains the topContent prop.

bottomViewStyle

propType: any

Use this to pass or overwrite styling for the <View> that contains the bottomContent prop.

showMarker

propType: boolean default: false

Use this to show marker on the camera scanning window.

customMarker

propType: element

Pass a RN element/component to use it as a custom marker.

markerStyle

propType: any

Use this to add custom styling to the default marker.

notAuthorizedView

propType: element

Pass a RN element/component to use it when no permissions given to the camera (iOS only).

cameraType

propType: oneOf(['front', 'back']) default: 'back'

Use this to control which camera to use for scanning QR codes, defaults to rear camera.

checkAndroid6Permissions

propType: bool default: false

Use this to enable permission checking on Android 6

permissionDialogTitle

propType: string default: 'Info'

Use this to set permission dialog title (Android only).

permissionDialogMessage

propType: string default: 'Need camera permission'

Use this to set permission dialog message (Android only).

buttonPositive

propType: string default: 'OK'

Use this to set permission dialog button text (Android only).

cameraProps

propType: object

Properties to be passed to the Camera component.

Contributors

This project exists thanks to all the people who contribute. We're immensely gratetful to everyone who has taken the time to submit pull requests, spent time debugging or filing issues.

Backers & Sponsors

Most of the core contributors maintain this library, add new features, and review PRs in their free time. If you're using react-native-qrcode-scanner-spatacus in a commercial app, or have found it to be valuable, please considering backing or sponsoring the project on OpenCollective. Please note that you do not need to give any amount of money in order to use this library.

This is how the donations will be used:

  • Allow the core contributors to work on react-native-qrcode-scanner-spatacus
  • Thank contributors if they invested a large amount of time in contributing
  • Setup a contributor bounty program to encourage participation
  • Fees for money handling

Thank you to all our backers & sponsors! 🙏

[Become a backer] [Become a sponsor]

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

License

See LICENSE.md

Thanks

Thanks to Lochlan Wansbrough for the react-native-camera module which provided me with an awesome example of how to set up this module.

This QR code scanner was inspired by the QR code scanner within Whatsapp.