moaazsidat / react-native-qrcode-scanner

A QR code scanner component for React Native.
MIT License
2.04k stars 516 forks source link

Cannot read property 'requestPermission' of undefined #205

Open Desteel opened 5 years ago

Desteel commented 5 years ago

An error occurs while accessing permissions.

TypeError: Cannot read property 'requestPermission' of undefined

This error is located at:
    in QRCodeScanner (at Scanner.tsx:15)
    in QRScanner (at Login.tsx:36)
    in RCTView (at View.js:45)
    in View (at Login.tsx:33)

What's happening?

When I add a scanner component to the render.

How can it be reproduced?

import React, { Component } from "react";
import { AppRegistry, Text, TouchableOpacity, Linking } from "react-native";
import QRCodeScanner from "react-native-qrcode-scanner";
import styles from "./Scanner.styles";

class QRScanner extends Component {
  error: any;

  onSuccess = (e: any) => {
    Linking.openURL(e.data).catch(err => (this.error = 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>
        }
      />
    );
  }
}

AppRegistry.registerComponent("default", () => QRScanner);

export default QRScanner;
// in some component

  public render() {
    return (
      <View style={styles.container}>     
        <QRScanner />       
      </View>
    );
  }

I detected error here on step 1.

// const CAMERA_PERMISSION = "camera";

console.log(1)
Permissions.request(CAMERA_PERMISSION).then(response => {
         console.log(2)
        this.setState({
          isAuthorized: response === PERMISSION_AUTHORIZED,
          isAuthorizationChecked: true
        });
});

If i change "camera" from const CAMERA_PERMISSION = "camera"; on "ios.permission.CAMERA" from CAMERA: "ios.permission.CAMERA"; of react-native-permissions types, I achieve some result.

iacocesar commented 5 years ago

Same issue

esensei commented 5 years ago

Check this pull request https://github.com/moaazsidat/react-native-qrcode-scanner/commit/1a842ef69eda9b920533a4332bf3ffa0be35ecf5

gbalduzzi commented 5 years ago

Same for me

Desteel commented 5 years ago

I found a way out of the situation using the onBarCodeRead of react-native-camera with my handler and scanner mask.

dodeca-dev commented 5 years ago

experiencing this problem too. anyone who solved this issue?

esensei commented 5 years ago

experiencing this problem too. anyone who solved this issue?

Check this pull request 1a842ef

Desteel commented 5 years ago

experiencing this problem too. anyone who solved this issue?

You can use onBarCodeRead of react-native-camera with your handler and scanner mask.

dodeca-dev commented 5 years ago

experiencing this problem too. anyone who solved this issue?

Check this pull request 1a842ef

Works great. Thanks!

quietautumn commented 5 years ago

I have the same problem. How to solve it? The above method has no response.

gbalduzzi commented 5 years ago

I'm using the fork by @aimawari which is one commit ahead.

Use "react-native-qrcode-scanner": "github:aimawari/react-native-qrcode-scanner", in your package.json dependencies section

Note: this is a temporary solution while I wait aimawari pull request to be accepted and released on npm

JuanCamilo0809 commented 5 years ago

experiencing this problem too. anyone who solved this issue?

Check this pull request 1a842ef

But you need:

react-native-permissions 2.0.0 exactly, it is up, not work, only with the 2.0.0

gbalduzzi commented 5 years ago

@aimawari pull request has been accepted and it is included in version 1.3.0, released less than one day ago.