Expo-built App keeps restarting after successful built - react-native

Question

I have created a screen where user should scan a QR code before a few button is showed to them. The function is working fine in the development environment, however when I built the APK file and try to scan a QR code, suddenly the app crash and restart.
From what I've read so far, I think the problem may be due to the async function which prevent the qrscanned handler function to run. but I may be wrong and I'm trying not to break the code. I'd like to ask if any of you can point out where should I change in order to solve the problem. The following is the code for the screen.
import React, { useState, useEffect, useContext } from 'react';
import { Text, View, StyleSheet, Button, ImageBackground, Picker, Alert, ScrollView, FlatList } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Card } from 'react-native-paper';
import {AuthContext} from '../components/context';
const ScannerScreen = ({navigation}) => {
const { employeeNameDetails } = useContext(AuthContext);
var username = employeeNameDetails();
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [data, setData] = useState('Scan QR Code');
const [itemData, setItemData] = useState([]);
const [room, setRoom] = useState('');
const [roomName, setRoomName] = useState([]);
const [bilik, setBilik] = useState(false);
const updateRoom = () =>{
if(room != 'PILIH BILIK'){
var updateAPI = "https://example.com/api/setroom.php"
var header ={
'Accept': 'application/json',
'Content-type': 'application/json'
};
var itemdata ={
roomName: room,
asetID: data
};
fetch(
updateAPI,
{
method: 'POST',
headers: header,
body: JSON.stringify(itemdata)
}
)
.then((response)=>response.json())
.then((response)=>
{
if (response[0].isCorrect ==1){
Alert.alert(
"Berjaya","Bilik telah ditetapkan"
)}
else{
Alert.alert(
"Error","Tiada maklumat item dalam database"
)
}
}
)
.catch((error)=>{
alert("Error" + error);
})
}else{
Alert.alert(
"Error!","Sila pilih bilik."
)
}}
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ data }) => {
setScanned(true);
setData(data);
var searchAPI = "https://example.com/api/searchitembyid.php";
var header = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
var itemdata = {
itemid: data
};
fetch(
searchAPI,
{
method: 'POST',
headers: header,
body: JSON.stringify(itemdata)
}
)
.then((response)=>response.json())
.then((responseJSON)=>{
setItemData(responseJSON)
});
var roomAPI = "https://example.com/api/getroom.php";
var roomheader = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
var roomdata = {
username: username
};
fetch(
roomAPI,
{
method: 'POST',
headers: roomheader,
body: JSON.stringify(roomdata)
}
)
.then((response)=>response.json())
.then((responseJSON)=>{
setRoomName(responseJSON)
});
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
const _renderItem = ({item, index}) =>{
return(
<View>
<Text style={styles.trackingNo}>{item.itemname}</Text>
<Text style={styles.trackingNo}>{item.nosiri}</Text>
</View>
)
}
return (
<ImageBackground
source={require('../assets/background-image.jpg')}
style={styles.image}>
<ScrollView style={styles.container}>
<View style={styles.top}>
<Text style={styles.title}>Scan Item</Text>
</View>
<View style={styles.barcodeSection}>
<Card>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={styles.barcode}
/></Card>
</View>
<View style={styles.bottomSection}>
<Card>
{scanned &&
<Button color="#fbf32f" title={'Scan Again'} onPress={() => {setScanned(false); setData('Scan QR Code')}} />}
{scanned &&
<View>
<FlatList
data={itemData}
renderItem={_renderItem}
keyExtractor={(item,index)=> index.toString()}
/>
<Text style={styles.btnText}>Set Room</Text>
<Picker
selectedValue={room}
style={styles.pickerInput}
onValueChange={(itemValue, itemIndex) => setRoom(itemValue)}>
{roomName.map((item, index) => {
return (< Picker.Item label={item.roomname} value={item.roomname} key={index} />);
})}
</Picker></View>
}
{scanned && <TouchableOpacity
style={styles.btn}
onPress={updateRoom}
><Text style={styles.btnText}>Tetapkan Bilik</Text></TouchableOpacity>
}
</Card></View>
</ScrollView></ImageBackground>
);
}
export default ScannerScreen;
Any suggestion or solution is greatly appreciated. Thanks guys.