ScrollView not working
export default function MenuItem() {
return(
<ScrollView showsVerticalScrollIndicator={false}>
{foods.map((food, index)=>(
<View key={index}>
<View style={styles.menuItemStyle}>
<FoodInfo food={food} />
<FoodImage food={food} />
</View>
</View>
))}
</ScrollView>
);
}
You should use Flatlist! its best option for optimizing and memory leaking.
export default function MenuItem() {
const renderItem = ({item, index}) => {
return (
<View key={index}>
<View style={styles.menuItemStyle}>
<FoodInfo food={item} />
<FoodImage food={item} />
</View>
</View>
)
}
return(
<FlatList
data={foods}
renderItem={renderItem}
keyExtractor={(item, i) => String(i)}
showsVerticalScrollIndicator={false} />
);
}