I use React Native Camera to be able to scan barcodes and right now I'm trying to show a Modal when barcode checks with the item in database.
The error I'm getting is:
Error: checkBarcode(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
What should I do to get this working. What am I doing wrong?
Code:
CheckBarcode(scanResult) {
const product = DataBase.find((codeMetadata) => {
return codeMetadata.id === scanResult.data;
});
if (this.barCodeRead) {
if (product) {
this.barCodeRead = false;
this.setModalVisible(true);
return (
<View>
<Text>{product.company}</Text>
<Text>{product.name}</Text>
<Text>{product.gluten}</Text>
<Text>{product.ingredients}</Text>
<Text>{product.id}</Text>
</View>
);
} else {
this.barCodeRead = true;
return (
<View>
<Text>Produkten finns inte</Text>
</View>
);
}
}
}
Modal:
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
this.setModalVisible(!modalVisible);
}}
>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.8)",
}}
>
<View
style={{
backgroundColor: "#fff",
padding: 35,
borderRadius: 10,
width: "80%",
height: "80%",
}}
>
<View
style={{
borderTopWidth: 1,
borderTopColor: "#000",
marginBottom: 10,
}}
>
<this.CheckBarcode />
</View>
<View>
<TouchableOpacity
style={{}}
onPress={() => {
this.setModalVisible(!modalVisible);
this.barCodeRead = true;
}}
>
<Text style={{ alignSelf: "center", color: "#FF0000" }}>Skanna</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
I Fixed it by myself. By just taking a pause from the project, I realized how easy it was to fix the problem.
this.state = {
modalVisible: false,
company: [],
name: [],
gluten: [],
ingredients: [],
id: [],
}
checkBarcode(scanResult) {
const product = DataBase.find((codeMetadata) => {
return codeMetadata.id === scanResult.data;
});
if (this.barCodeRead) {
if (product) {
this.barCodeRead = false;
this.setState({
modalVisible: true,
company: [product.company],
name: [product.name],
gluten: [product.gluten],
ingredients: [product.ingredients],
id: [product.id],
});
} else {
}
}
}