Expo Camera crashing on Android devices - react-native

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 :)