I cannot get the barcode scanner component to work

Expo SDK
1

I took the code from the snack example

here is my code

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView,
  TextInput,
  Button,
  TouchableOpacity,
  TouchableHighlight,

} from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

class share extends Component {

 
  static navigationOptions = {
    title: 'share',
    tabBarLabel: 'share',
    
  }
  state = {
    hasCameraPermission: null,
  }

  componentDidMount() {
    this._requestCameraPermission();
  }

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

  render() {
    const { hasCameraPermission } = this.state;
    if (hasCameraPermission === null) {
      return <View />;
    } else if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    } else {
      return (
        <View style={{flex: 1}}>
          <BarCodeScanner
            onBarCodeRead={this._handleBarCodeRead}
            
          />
        </View>
      );
    }
  }

  _handleBarCodeRead = (data) => {
    alert(JSON.stringify(data));
  }
    
    
  }


const styles = {
  
};
export default shop;
1 Like
2

Hi, can you describe a little more about what happens when you try to run it? Are you getting an error? A blank white screen?

4

not getting an error, I can console.log from the componentwillmount function. It just shows a blank screen and nothing else

5

Okay, it looks like the code you removed (StyleSheet) was giving the scanner its size. Without that it has 0 height and 0 width, much like a <View /> would. Just add style={{width: 200, height: 200}}.

6

Thank you very much. Quite embarrassed by the fact that I missed that

7

Happens to the best of us :slight_smile: