onBarCodeRead returning undefined

Expo SDK
1

when ever i scan a barcode in it reads but does not send any data or type and just sends an undefined value for it and thus i get an undifined is not a function error when I pass it to my action


import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { connect } from 'react-redux';
import { Button } from "react-native-elements";
import { BarCodeScanner, Permissions } from "expo";
import { itemUPC } from "../actions";
import { PRIMARY_COLOR } from "../constants/style";


class CameraScreen extends Component {

  static navigationOptions = ({ navigation }) => (
    {
       // tabBarVisible: false,
        title: "Camera",
        tabBarLabel: "main",
        headerTitleStyle: {
          textAlign: "center",
          alignSelf: "center"
        }, 
        headerLeft: (
            <Button
              navigate={navigation.navigate}
              large
              icon={{ name: "menu" }}
              backgroundColor={PRIMARY_COLOR}
              onPress={() => navigation.navigate("DrawerOpen")}
            />
          )
        });
        state = {
          hasCameraPermission: null
        };
      
        async componentWillMount() {
          const { status } = await Permissions.askAsync(Permissions.CAMERA);
          this.setState({ hasCameraPermission: status === 'granted' });
          }
          _handleBarCodeRead = (code) => {
            this.props.navigation.navigate('searchResults');
            this.props.itemUPC(code);
          }
        
        render() {
          const { hasCameraPermission } = this.state;
      
          if (hasCameraPermission === null) {
            return <Text>Requesting for camera permission</Text>;
          } else if (hasCameraPermission === false) {
            return <Text>No access to camera</Text>;
          } else {
            return (
              <View style={{ flex: 1 }}>
                <BarCodeScanner
                  torchMode="on"
                  onBarCodeRead={this._handleBarCodeRead}
                  style={StyleSheet.absoluteFill}
                />
              </View>
            );
          }
        }
      }
        
  
  export default connect(null, itemUPC)(CameraScreen);
2

notice in https://docs.expo.io/versions/latest/sdk/bar-code-scanner.html that the “code” is not passed as a param, it’s an object that has properties type and data

1 Like
3

i changed it and am still getting the same error

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { connect } from 'react-redux';
import { Button } from "react-native-elements";
import { BarCodeScanner, Permissions } from "expo";
import { itemUPC } from "../actions";
import { PRIMARY_COLOR } from "../constants/style";


class CameraScreen extends Component {

  static navigationOptions = ({ navigation }) => (
    {
       // tabBarVisible: false,
        title: "Camera",
        tabBarLabel: "main",
        headerTitleStyle: {
          textAlign: "center",
          alignSelf: "center"
        }, 
        headerLeft: (
            <Button
              navigate={navigation.navigate}
              large
              icon={{ name: "menu" }}
              backgroundColor={PRIMARY_COLOR}
              onPress={() => navigation.navigate("DrawerOpen")}
            />
          )
        });
        state = {
          hasCameraPermission: null
        };
      
        async componentWillMount() {
          const { status } = await Permissions.askAsync(Permissions.CAMERA);
          this.setState({ hasCameraPermission: status === 'granted' });
          }
          _handleBarCodeRead = ({ type, data }) => {
            this.props.navigation.navigate('searchResults');
            this.props.itemUPC({ type, data });
          }
        
        render() {
          const { hasCameraPermission } = this.state;
      
          if (hasCameraPermission === null) {
            return <Text>Requesting for camera permission</Text>;
          } else if (hasCameraPermission === false) {
            return <Text>No access to camera</Text>;
          } else {
            return (
              <View style={{ flex: 1 }}>
                <BarCodeScanner
                  torchMode="on"
                  onBarCodeRead={this._handleBarCodeRead}
                  style={StyleSheet.absoluteFill}
                />
              </View>
            );
          }
        }
      }
        
  
  export default connect(null, itemUPC)(CameraScreen);
4

hi there

hard to diagnose as i can’t run that example. you might want to try simplifying that component, you’ll see that this works as expected here: https://snack.expo.io/@notbrent/qr-example

probably the navigation or itemUPC props aren’t available for some reason related to how you’ve structured your code outside of this component.

5

i just fond the error forgot to use {} around the itemUPC in the connect function.

1 Like
6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.