React native camera not working as expected with expo

Question

I want to make a qrcode reader with react native,and i'm using expo.I'm following the guide based on the official documentation here : react-native-qrcode-scanner

I've installed react-native-camera succesfully by running npm install react-native-camera --save and the following is the commande react-native link react-native-camera in the console,and it gives me the following error: By reading the doc if find that many things depend on react-native link like react-native link react-native-qrcode-scanner react-native link react-native-permissions an also after that there are some configurations like <uses-permission android:name="android.permission.VIBRATE"/> that i cannot do because i don't use react-native-cli.

score 1 · Accepted Answer · answered Jul 11 '19 at 15:06

Expo already has what you want. expo-barcode-scanner

If your version of Expo is 33, you should download it individually.

You can run expo install expo-barcode-scanner

You must request permission to access the user's camera before attempting to get it. To do this, you will want to use the Permissions API. You can see this in practice in the following example.

Basic Example

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';

import { BarCodeScanner } from 'expo-barcode-scanner';

export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
    scanned: false,
  };

  async componentDidMount() {
    this.getPermissionsAsync();
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  };

  render() {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
          justifyContent: 'flex-end',
        }}>
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={StyleSheet.absoluteFillObject}
        />

        {scanned && (
          <Button title={'Tap to Scan Again'} onPress={() => this.setState({ scanned: false })} />
        )}
      </View>
    );
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ scanned: true });
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };
}

props

onBarCodeScanned (function)

Callback that is invoked when a bar code has been successfully scanned. The callback is provided with an object of the shape { type: BarCodeScanner.Constants.BarCodeType, data: string }, where the type refers to the bar code type that was scanned and the data is the information encoded in the bar code (in this case of QR codes, this is often a URL). See BarCodeScanner.Constants.BarCodeType for supported values.

barCodeTypes (Array)

An array of bar code types. Usage: BarCodeScanner.Constants.BarCodeType.<codeType> where codeType is one of the listed above. Default: all supported bar code types. For example:

barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}

type (string)

-- Camera facing. Use one of BarCodeScanner.Constants.Type. Use either Type.front or Type.back. Same as Camera.Constants.Type. Default: Type.back.

Note: Passing undefined to the onBarCodeScanned prop will result in no scanning. This can be used to effectively "pause" the scanner so that it doesn't continually scan even after data has been retrieved.

score 0 · Answer 2 · answered Nov 23 '19 at 07:27

0

if you are using expo, you will have npx. You can run any react-native command with npx. Hence:

npx react-native link react-native-camera

answered Nov 23 '19 at 07:27

Jarod Law Ding Yong

5,697
2
24
16

React native camera not working as expected with expo

2 Answers2