Heyy
I have created a page where it is loading data from the async database and displaying it, this code works fine on web development but when I open this screen on expo go the app crashes I don't know what the problem is and I am new to the expo and react native. Here is my code
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
TouchableOpacity,
Button,
FlatList,
SafeAreaView,
} from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Icon from "react-native-vector-icons/MaterialIcons";
import React, { useState, useEffect } from "react";
const Cart = () => {
const getData = async (value) => {
try {
const data = await AsyncStorage.getItem("cart");
const dataArray = data ? JSON.parse(data) : [];
return dataArray;
} catch (e) {
// error reading value
console.log(e);
}
};
const [data, setData] = useState([]);
const [ShowApp, setShowApp] = useState(false);
//Get the cart from the AsyncStorage
useEffect(() => {
async function toGetSomething(value) {
const cartArray = await getData();
setData(cartArray);
setInterval(() => {
setShowApp(true);
}, 1000);
}
toGetSomething();
}, []);
const renderItem = ({ item, index }) => (
<View style={style.cartItem} key={index}>
{console.log(item)}
<Image source={item.image} style={style.cartImage} />
<View style={style.cartItemInfo} key={index + "InsideOfAView"}>
<Text style={style.cartItemTitle}>{item.name}</Text>
<Text style={style.cartItemPrice}>${item.price}</Text>
<View
style={style.quantityContainer}
key={index + index + "InsideOfAView"}
>
<View
style={style.quantity}
key={index + index + index + "InsideOfAView"}
>
<Icon
name="remove"
size={28}
onPress={async (value) => {
if (data[index].quantity > 1) {
data[index].quantity = data[index].quantity - 1;
data[index].wholeData.quantity = data[index].quantity;
console.log(data[index].quantity);
setShowApp(false);
setInterval(() => {
setShowApp(true);
}, 10);
const cart = await AsyncStorage.getItem("cart");
const cartArray = data;
await AsyncStorage.setItem("cart", JSON.stringify(cartArray));
}
}}
/>
<Text style={{ fontSize: 20, fontWeight: "bold" }}>
{data[index].quantity}
</Text>
<Icon
name="add"
size={28}
onPress={async (value) => {
data[index].quantity = data[index].quantity + 1;
data[index].wholeData.quantity = data[index].quantity;
console.log(data[index].quantity);
setShowApp(false);
setInterval(() => {
setShowApp(true);
}, 10);
const cart = await AsyncStorage.getItem("cart");
const cartArray = data;
await AsyncStorage.setItem("cart", JSON.stringify(cartArray));
}}
/>
</View>
</View>
<TouchableOpacity
style={style.cartItemRemove}
onPress={async () => {
if (data.length > 1) {
data.splice(index, 1);
const cart = await AsyncStorage.getItem("cart");
const cartArray = data;
await AsyncStorage.setItem("cart", JSON.stringify(cartArray));
} else {
data.splice(index, 1);
await AsyncStorage.removeItem("cart");
}
setShowApp(false);
setInterval(() => {
setShowApp(true);
}, 10);
}}
>
<Text>Remove</Text>
</TouchableOpacity>
</View>
</View>
);
return (
<ScrollView>
<SafeAreaView style={style.container}>
{ShowApp && (
<FlatList
initialNumToRender={1}
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>
)}
{!ShowApp && <Text style={style.Loading}>Loading...</Text>}
</SafeAreaView>
</ScrollView>
);
};
const style = StyleSheet.create({
Loading: {
fontSize: 20,
textAlign: "center",
marginTop: "50%",
},
cartItem: {
flexDirection: "flex",
flex: 1,
flexWrap: "wrap",
justifyContent: "space-between",
alignItems: "center",
gap: 10,
padding: 10,
margin: 5,
backgroundColor: "#fff",
borderRadius: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
height: 200,
},
cartImage: {
width: "50%",
height: "100%",
aspectRation: 1,
resizeMode: "contain",
},
cartItemText: {
fontSize: 18,
fontWeight: "bold",
marginLeft: 10,
},
cartItemPrice: {
fontSize: 18,
fontWeight: "bold",
marginRight: 10,
},
cartItemButton: {
backgroundColor: "#fff",
borderRadius: 5,
padding: 10,
margin: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
cartItemButtonText: {
fontSize: 18,
fontWeight: "bold",
margin: 5,
},
quantityContainer: {
backgroundColor: "#f2f2f2",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
padding: 10,
margin: 5,
borderRadius: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
quantity: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
cartItemPrice: {
fontSize: 18,
fontWeight: "bold",
marginRight: 10,
backgroundColor: "green",
color: "white",
padding: 10,
borderRadius: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
cartItemInfo: {
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
width: "70%",
marginRight: 10,
},
cartItemTitle: {
fontSize: 18,
fontWeight: "bold",
marginBottom: 5,
},
cartItemRemove: {
backgroundColor: "red",
borderRadius: 5,
padding: 10,
margin: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
color: "white",
},
});
export default Cart;
This is the database array for reference
[
{
name: "PVC",
price: 150,
quantity: 1,
image:
"https://media.istockphoto.com/vectors/student-id-card-university-school-college-identity-card-vector-vector-id1154987560?k=20&m=1154987560&s=612x612&w=0&h=MKX_OQzrHT0i9eb3ExwfIrCndKj49CY-NVAUKUa6zYg=",
wholeData: {
about:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sapien massa, sollicitudin vel ante et, commodo laoreet nibh. Duis nec iaculis purus. Cras nec mollis enim. Quisque eleifend justo a accumsan ultrices. Phasellus non elit sagittis, scelerisque lacus sit amet, rhoncus ligula. Proin luctus leo ac diam laoreet mattis. In hac habitasse platea dictumst. Vivamus eget arcu nisi. Nam laoreet pharetra porta. Nulla cursus iaculis sem nec suscipit. Suspendisse et quam nec magna pharetra ullamcorper vitae ac erat. Nunc vel sapien augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur cursus ligula quis pulvinar consequat. Phasellus vitae ultrices dolor.",
img: "https://media.istockphoto.com/vectors/student-id-card-university-school-college-identity-card-vector-vector-id1154987560?k=20&m=1154987560&s=612x612&w=0&h=MKX_OQzrHT0i9eb3ExwfIrCndKj49CY-NVAUKUa6zYg=",
name: "PVC",
price: 150,
},
},
];
If you can fix this then please send the whole code
