Expo Camera crashing on Android devices

Question

I'm trying to use Expo Camera to take pictures and scan barcodes, but for some reason whenever I run it on an Android device when I am about to use the camera the app crashes. This is the code used for taking pictures/scanning barcodes. I don't believe it is a code issue though:

import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity, Image, Alert } from 'react-native';
import { IconButton, Colors, Button } from 'react-native-paper'
import { Camera } from 'expo-camera';

const CustomBarcodeScanner = ({ handleBarCodeScanned, scanning, handleTakePhotos, handleGoBack }) => {
  const [hasPermission, setHasPermission] = useState(null)
  const [preview, setPreview] = useState(false)
  const [currentPhoto, setCurrentPhoto] = useState('')
  const [photoCount, setPhotoCount] = useState(0)

  const displaySnap = scanning ? "none" : "flex"

  const snap = async() => {
    if(this.camera){
      let photo = await this.camera.takePictureAsync({base64: true})
      setCurrentPhoto(photo['base64'])
      setPhotoCount(photoCount + 1)
      setPreview(true)
    }
  }

  const acceptPhoto = () => {
    setPreview(false)
    handleTakePhotos(currentPhoto)
    setCurrentPhoto('')
    console.log(photoCount)
    if(photoCount >= 2){
      handleGoBack()
      return
    }
    Alert.alert(
      "Tomar otra foto",
      "¿Desea tomar otra foto?",
      [
        {
          text: 'Sí',
          onPress: () => {
          }
        },
        {
          text: 'No',
          onPress: () => {
            handleGoBack()
          },
          style: "cancel"
        }
      ],
      { cancelable: false }
    )
  }

  const retakePhoto = () => {
    setPreview(false)
    setCurrentPhoto('')
  }

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })()
  }, [])

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return preview ? 
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Image style={{width: '100%', height: '70%'}} source={{ uri: `data:image/jpg;base64,${currentPhoto}` }} />
      <View style={{flexDirection: 'row'}}>
        <Button 
          mode='contained'
          color={Colors.purple500} 
          style={{padding: 10, margin: 10}}
          onPress={acceptPhoto}
        >
          Aceptar
        </Button>
        <Button
          mode='contained'
          color={Colors.purple500}
          style={{padding: 10, margin: 10}}
          onPress={retakePhoto}
        >
          Re-Tomar Foto
        </Button>
      </View>
    </View>
    :
    <View style={{ flex: 1 }}>
      <Camera
      style={{ flex: 1 }} type={Camera.Constants.Type.back} onBarCodeScanned={handleBarCodeScanned} ref={ref => {this.camera = ref}}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}
          >
          <TouchableOpacity
            style={{
              flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={handleGoBack}
          >
            <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>Regresar</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flex: 0.8,
              alignSelf: 'flex-end',
              alignItems: 'center',
              display: displaySnap
            }}
            onPress={() => snap() }
          >
            <IconButton icon='camera' background={Colors.black} size={50} color={Colors.white} />
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
}

export default CustomBarcodeScanner

I'm thinking it could be dependency related? I'm not sure if I need to install some libraries or add some code to get it to work. The error I get says Error while updating property 'nativeBackgroundAndroid' of a view managed by: RCTView

My expo version is 4.1.6

Answer 1

Apparently this is an issue with the Touchable Element with Ripple Effect. People are discussing that here.

react-native-paper seems to implement that on their button. Try to use the default button from React-Native, that should fix it :)