Barcode scanner crashing

Expo SDK
1

Hi guys,

I’m making an app where people can scan in pictures of their books. On the scan page, they will have a flatlist with each item containing a ‘scan a book’ button where they can click it and it changes the state SCAN to true to use the Camera as a barcode scanner (and also sets the height and zindex of the renderscanner component to make it visible).

This causes my app to crash if I click the scan a book button too quickly after I navigate to the page. This is obviously a huge problem as my testers have had it crash about 1 in 5 times.

I’ve tried it with the BarcodeScanner component from Expo and it still crashes.

Any advice on this?

Expo: V32.0.0 and 33.0.0 (crashes on both)

renderCamera() {
    if (this.state.SCAN === true) {
      try {
      return <Camera barCodeScannerSettings={{
        barCodeTypes: [BarCodeScanner.Constants.BarCodeType.ean13]
      }}
      style={{flex: 1, zIndex: -2}}
      onBarCodeScanned={ data => this.scannedbarcode(data)} />
    } catch (e) {
      console.log(e)

    }
    }
  }

  RenderScanner() {
      return (
      <View style={{flex: 1, width: '100%', height: this.state.height, zIndex: this.state.zindex, position: 'absolute'}}>
        <Button
          icon={ <Icon name="close" size={20} color="red"/> }
            buttonStyle={{position: 'absolute', alignSelf: 'center', backgroundColor: '#4c5454',width:SCREEN_WIDTH/2}}
            containerStyle={{position:'absolute', alignSelf: 'center', width: SCREEN_WIDTH/2}}
            title='cancel'
            onPress={this.setscanfalse}
          />
  
          <View style={{alignSelf: 'center', height: '15%', width: '70%', borderWidth: 4,marginTop: SCREEN_HEIGHT/2.2, borderColor:'red', position:'absolute', backgroundColor:'transparent', y:200 }} 
          />
        
      {this.renderCamera()}
      </View>)
    // } return ;
  }

  
render() {

  return (
    <View style={{flex: 1}}>
    {this.RenderScanner()}
    <FlatList keyExtractor={(item, index) => index.toString()} data={['pic1','pic2','pic3','pic4','pic5','pic6']} extraData={this.state.rerender} 

renderItem={({item,index}) => {
      let numb = item.slice(-1);
      return (
        
      <View style={{flex: 1}}>

                <Button
                        onPress={() => this.setState({SCAN: true, booktochange: item, height: '100%', zindex: 100})}
                        title='Scan a book'
                        buttonStyle={{backgroundColor: '#24b9ed'}}
                />

            </View>
2

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