moaazsidat / react-native-qrcode-scanner Goto Github PK

I am learning to use React Native. I made all the setting changes as mentioned in the article and used the sample example in my index.android.js. However when I run the project I don't see anything on the emulator. Am I doing something wrong?

I am using Stack Navigator from React Navigation. And when I read QR code and moving to next component but camera still works and vibrates. I set reactivate={true} and reactivateTimeout={5000}

How can I show camera view on fullscreen?

below code not work

  _topContent(){
    return(
      <View style={{height:0}}></View>
    )
  }
  _bottomContent(){
    return(
      <View style={{height:0}}></View>
    )
  }
  _onRead(){
    console.log(123213123123213);
  }
  render(){
    return(
      <View style={styles.container}>
        <QRCodeScanner
          style={{flex:1}}
          topContent={this._topContent()}
          bottomContent={this._bottomContent()}
          onRead={() => this._onRead()}
        />
      </View>
    )
  }

I get a redbox error on Android when the app starts on latest version:

 undefined is not an object (evaluating styles.notAuthorizedView)

On Android has error: Camera No Authorized on v 0.0.28

Hi,
I am not sure this is the right location but:
what is the best way to validate the QR-Code I scan with my application (using react-native-camera).
I want to show an error message, or something like that, when the qr-code was not sent from specific location?

something like digital signature or RS256/HS256 scenarios (https://stackoverflow.com/questions/39239051/rs256-vs-hs256-whats-the-difference)

How can I get the code after read it?
Thanks!

Hi, I am not able to scan the QR Code with text content, it looks like only able to scan QR Code with HTTP link content, please help

Hello,

Thank you for this project which is working perfectly.

I want to discuss about the hardcoded top margin line 138 in index.js:

  ...
  render() {
    return (
      <View style={{
          flex: 1,
          marginTop: 64, //               <-- this line
        }}>
        <View style={[styles.infoView, this.props.topViewStyle]}>
          {this._renderTopContent()}
        </View>
        {this._renderCamera()}
        <View style={[styles.infoView, this.props.bottomViewStyle]}>
          {this._renderBottomContent()}
        </View>
      </View>
    )
  }
  ...

This prevents me from making the camera fill the screen vertically, see this Android screenshot:

  <QRCodeScanner onRead={this.handleRead} />

I believe this property was added to compensate for the navigation bar. Since a navigation bar doesn't always have a height of 64, I would suggest removing this line and allow the parent component to manage the margin himself. This way, we could adapt the necessary margin depending on how we manage the navigation bar.

If that makes sense, I would be happy to make a PR for this.

Thanks for this useful plugin !

It is very easy to use but i just wonder why it vibrates so frequently even if when reactivateTimeout={2000} or reactive={false}

cant it vibrate once not everytime when it see qcode

Thanks in Advnace

I just realise that my app still able to scan QR code after even navigate from the scanning screen to home screen. Its just happening in iOS.

My code:

<NavigatorIOS
                        initialRoute={{
                            component: QRCodeScanner,
                            title: 'Scan Code',
                            navigationBarHidden: true,
                            passProps: {
                                onRead: this.onSuccess.bind(this),
                                topViewStyle: {flex: 0, height: 0},
                                bottomViewStyle: {flex: 1, padding: 0},
                                showMarker: true,
                                bottomContent: (
                                    <View>
                                        {this.state.statusContent}
                                    </View>
                                ),
                            },
                        }}
                        style={{flex: 1}}
                    />

Is it a bug in the scanner or I'm doing something wrong?

I'm using .navigate() to go back to home screen

Please tell me in deep how to use this.

I'm developing on expo and what it does it gets rid of the android and ios folders and creates its own folders. So where can I find the "AndroidManifest.xml" and "Info.plist" or something equivalent for expo.

Hey folks, looking for Android developer to help tackle Android specific issues that come along in this project. If you're interested in helping out, leave a comment below. Thanks and cheers!

I have an application which uses TabNavigator from react-navigation in the main screen. One of the tabs is the one that contains the QRCodeScanner component. When the main screen is loading (with all tabs), the application crashes.

Versions in use:

"react-native-camera": "0.10.0",
"react-native-qrcode-scanner": "0.0.28",
"react-navigation": "^1.0.0-beta.22"

Let's add prettier. Would be nice to have consistent styling across the project using prettier/lint-staged/husky, without having to think about it too much.

scanning work, but showing white blank screen instead of showing camera view.
sometimes app is not response at all

What's happening?

Get the below error when try to scan barcode.

How can it be reproduced?

I used example-code and it works but when try to scan barcode, it display error screen:

Screen of line no: 23,24

Chorme Debug mode screen:

Build details?

Node.js version:8.10.0
React Native version: 0.54.2
React Native version CLI: 2.0.1
React Native platform + platform version: Windows 10 pro, Android 7.0, etc

Close. Its working with QRcode but i was trying barcode. Closing issue.

In my app the user scans a qr code, the returned data is then passed to another scene using a Navigator, when they navigate back to scan another code the app crashes.

I have other scenes in the app that can be navigated back and forth to but when returning to the scene with the scanner in it always crashes (without stack trace or errors)

It might be something like the scanner is still running in the background (the phone alerts me that this app is draining battery)

Any advice would be appreciated

The app will crash if permissions are not give to the app.

My idea is to introduce:

  componentWillMount () {
    if (Platform.OS === 'ios') {
      Camera.checkVideoAuthorizationStatus().then(isAuthorised => {
        this.setState({ isAuthorised })
      })
    }
  }

Hope it helps.

Can I from your module have access to features like turning on flash from the camera module you used to implement this scanner?

i have message error in first run. the react native camera and qr code has been installed, but i get the error message : Could not find com.github.react-native-community:cameraview:d5d9b0d925494ef451ce3eef3fdf14cc874d9baa.
Required by:
QRDemo:app:unspecified > QRDemo:react-native-camera:unspecified

can you help me to solve that

The QR code scanner component has it so that a vibrate event is sent upon successfully reading a code. However, calling Vibration.vibrate() doesn't seem to work. Will have to investigate further.

How can i Add Camera Permission for android devices..?
I have added this..
permissionDialogTitle: "Info",
permissionDialogMessage: "Need camera permission",
checkAndroid6Permissions: false,
but not working..

Hi,

Thank you for making this available to the community! I'm using the React Navigation library to navigate to another screen upon a successful QR code scan.

I have reactivate set to false (the default) so that the app isn't constantly vibrating/trying to scan another QR code while I'm on another "screen" of the app. However, when I navigate back to my screen/component that contains the QRCodeScanner component, render() must not be called again because I cannot scan another QR code.

Can you please tell me how I can get QRCodeScanner to scan again when navigating back to it? Thank you!

I'm trying to reactivate the camera after the user acknowledges that their last scan failed.

Alert.alert(
	"Didn't Work",
	"We couldn't find an event for this code.",
	[
		{
			text: "OK",
			onPress: () => {
				setTimeout(() => {
					qrCodeScanner.reactivate();
				} , 1000)
			}
		}
	]
);

In debugging I can see that qrCodeScanner is correctly set as my reference, but this call errors and tells me that reactivate is not a function.

All the examples you created use NavigatorIOS to build the scene. But i'm in a project that already uses ReactNavigation.

How can I combine both and have a scene that uses the component?

on Android <5 'request' promise resolves to 'true' instead of 'granted': https://facebook.github.io/react-native/docs/permissionsandroid.html

And hence not authorized view is shown always:

I'm using react-native v0.49 and i have error when i run qrcode scanner.

cannot read property oneOftype undefined

import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    Linking,
    StyleSheet,
} from 'react-native';
import { style } from './style';
import { globalStyle } from '../../../assets/styles/globalStyle';

// redux
import { connect } from 'react-redux';
import * as actions from '../../../actions';


//third party library
import QRCodeScanner from 'react-native-qrcode-scanner';


class ScanPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            barcodeText: ''
        }

    }
    onSuccess(e) {
        this.setState({ barcodeText: e.data });
        console.log(e);
    }

    render() {
        const { } = style;


        return (
            <QRCodeScanner
                onRead={this.onSuccess.bind(this)}
                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 mapStateToProps = () => {

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

export default connect(null, actions)(ScanPage);

I checked into the node_modules the react-native-qcode-scanner folder into examples and I did exaclty the example. in addition in index.js of this folder of the plugin I see the oneOfType property but I don't see any wrong from my side. t

First, I'm fairly new to RN development so if this is an easy issue I apologize for the dumb question.

When I go about installing I follow the instructions to install react-native-camera (including linking). Which installs [email protected]. When I run the react-native-qrcode-scanner I receive the error: UNMET PEER DEPENDENCY [email protected]. In the peer dependencies section of the package.json I see this: "react-native-camera": "^0.10.0". I don't know exactly what the ^ means, but wondering if that's causing a problem. I'm fine installing THAT version of camera but was hoping someone had a better idea.

Thanks!

Hey guys, thanks for the great job you've done!
However, I am not able to custom the marker.
I just tried to pass your marker and change the color, but it doesn't show up

<QRCodeScanner cameraStyle={styles.cameraContainer}
onRead={() => console.warn('Success')}
customMarker={<CustomQrMarker />}
/>

custom Marker :

      <View style={styles.rectangleContainer}>
        <View style={styles.rectangle} />
      </View>

custom marker style :

rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  rectangle: {
    height: 250,
    width: 250,
    borderWidth: 2,
    borderColor: 'green',
    backgroundColor: 'transparent'
  }

thanks for helping

Hi! Thank you for this package.
Just use it for app, and don't want to use another package only for android.
Any progress on android?

When clicking on the camera scan area, the entire app loses focus and Android goes to the phone's HOME screen.

Using Android 5.1.1. Do you have a way (prop?) to prevent this? Is this normal?

//this is scanPager

 import React, { Component } from 'react';

 import {
   AppRegistry,
   StyleSheet,
   NavigatorIOS,
   Dimensions,
   View,
   Text,
   TouchableHighlight
 } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
 import QRCodeScanner from 'react-native-qrcode-scanner';

 export default class WarehouseOutScan extends Component {
   static navigationOptions = ({navigation,screenProps}) => ({
       headerLeft:(
         <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 60,height: 40}}>
           <TouchableHighlight underlayColor='#EEEEF4' disabled={thes.state.disabled} onPress={() => {
             const { goBack } = navigation;
             goBack();
           }}>
             <View style={{marginRight: 20, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 60, height: 40}}>
               <Icon name='angle-left' size={35} color='black' />
             </View>
           </TouchableHighlight>
         </View>
       ),
   });

   constructor(props) {
     super(props);
     this.onSuccess = this.onSuccess.bind(this);
   }

   onSuccess(e) {
     const { goBack } = this.props.navigation;
     this.props.data.navigation.state.params.callback(e.data);
     goBack();
   }

   render() {
     return (
        <QRCodeScanner
          onRead={()=>this.onSuccess(e)}
          fadeIn={false}
          cameraStyle={{height: DeviceHeight}}
          showMarker={true}
        />
     )
   }
 }

 const styles = StyleSheet.create({
   zeroContainer: {
     height: 0,
     flex: 0,
   },

   cameraContainer: {
     height: Dimensions.get('window').height,
   },
 });

AppRegistry.registerComponent('demo', () => WarehouseOutScan);

//this is usePage

      <View style={[styles.valueCell,{borderWidth: 1, borderStyle: 'dashed', borderColor: 'black', marginLeft: 20, width:((DeviceWidth-30)*(1/5)), height:(DeviceHeight/16)}]}>
        <TouchableHighlight underlayColor='gray' disabled={thes.state.disabled} onPress={() => {
          const { navigate } = this.props.navigation;
          navigate('WarehouseOutScan', {
            callback: (trackingNumber)=>{
              this.setState({trackingNumber: trackingNumber});
            }
          });
        }}>
          <View style={[styles.valueCell,{width:((DeviceWidth-30)*(1/5)), height:(DeviceHeight/16)}]}>
            <Image source={Scanner} resizeMode='stretch' style={{width: 30, height: 30}}/>
          </View>
        </TouchableHighlight>
      </View>

========================================================================
onSuccess(e) {
const { goBack } = this.props.navigation;
this.props.data.navigation.state.params.callback(e.data);
goBack();
}

question:
what's the structure of the return value (e);

I followed the instructions from this link:
#61
"Camera not authorize" message is gone but the screen is blank.
I turn the camera on and use the device built-in camera app to confirm that the camera works.
Then I restarted the android device, turn on the camera again and try the qr scanner but still see the white screen.
Can this be fixed?
Android 4.2.2, 4.2, 5.0 failed

Hello @moaazsidat ,

I'm having similar issue as declare here

What's happening?

I integrate react-native-camera and also tried given example on react-native-camera page which you can show by clicking here.
It's working fine for me.
after that i integrate react-native-qrcode-scanner & it showing me totally blank screen.

How can it be reproduced?

after integrate react-native-qrcode-scanner it showing me blank screen

Build details?

I'm working on..
"react": "^16.3.0-alpha.1",
"react-native": "0.54.2",
"react-native-camera": "git+https://[email protected]/react-native-community/react-native-camera",
"react-navigation": "^1.5.7"

I'm using Android Nougat .
please check attached screen sort

I followed all the steps to install the lib and all seems works fine, but when I install the app in a real device, I got never see the camera permission request.

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

I see "Camera not authorized" in the view.

Any help?

I have added the QRCodeScanner inside a View which is around 1/3 of the page height (and almost 100% of the page width).

I noticed that the marker is still large and that the detection of the QR is better on a corner than in the middle. Also the scanner requires more space and makes the ScrollView have a scrollbar.

I added width, height props to cameraStyle, is this the correct approach? The marker is still very large (part of it shows out of the view). Is the QR detection depended on that?

NavigatorIOS is not working for android, is there any sample for android development?

When reactivate is set to false, after the first scan, each time a qr code is scanned, the phone vibrates, and the user might think they're actually scanning something.

Android is broken on the latest release due to this error. Looks like this was fixed in #49

Can we get a new version deployed to NPM?

I've got

undefined is not an object(evaluating 'NativeModule.CameraManager.Aspect')

Error on launching this,
but I've fixed this issue with this code.

npm install -g rnpm
rnpm link react-native-camera
rnpm link react-native-qrcode-scanner

However, there was Security Crash issue with iOS10, which enforces to add Message to info.plist(can be found at Xcode's project-info-Privacy - Camera Usage Description.
I have to add String words and then passed iOS's security crack.

Error message was:

The app’s Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data.

I hope someone can get solution on this.
Here's some info for this:
http://useyourloaf.com/blog/privacy-settings-in-ios-10/

The link to the screenshot in the readme is broken. Could you please fix it so we can see what this will look like when implemented? Thanks.

I am getting Camera not authorized error on android 5.1 device. Camera loads well on emulator with android 6.

<QRCodeScanner ref={(node) => {this.scanner = node}}>

instead of

<QRCodeScanner ref={(node) = this.scanner = node}>

solved it for me at least. PS thanks for the module :)

I want to use in android 5.1 and also iOS 8 version, any suggestion.