I want to render a list of product with a button to add the product to the basket when the user clicks on the button replaced with a counter to let the user selects the quantity of that product.
screenshot of the screen:
the problem is when the user scrolls down and while the flat list renders the new items the green button freezes for a second before changing the counter.
the flat list code:
<FlatList
data={products}
renderItem={renderPrices}
numColumns={1}
keyExtractor={(item, index) => index.toString()}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
ListFooterComponent={() =>
loading ? (
<View style={styles.spinnerContainer}>
<Spinner size="giant" />
</View>
) : !productStore.moreItems ? (
<View style={{ justifyContent: 'center', alignItems: 'center', paddingVertical: 20, backgroundColor: Colors.secondary500, marginHorizontal: 3 }}>
{IconComponent(evaIcons.done, Colors.black900, { width: 30, height: 30 })}
<Text>سلات قائمة ديل منتجات</Text>
</View>
) : null
}
nestedScrollEnabled={true}
onEndReached={() => getProductList()}
onEndReachedThreshold={0.5}
/>
the product component the flat list renders:
return (
<Layout style={styles.container}>
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Image
source={{
uri: image
}}
resizeMode="contain"
style={{ width: 100, height: 70 }}
/>
<View style={styles.priceContainer}>
<Text style={styles.priceText}>{price.price}</Text>
<Text style={styles.currencyText}>دم</Text>
</View>
<PriceType
quantityType={
price.sellUnit === SellUnitEnum.ATOMIC
? price.atomicRtlName
: price.packingRtlName
}
/>
</View>
<View style={{ flex: 3 }}>
<View
style={{
flex: 1,
flexDirection: "row-reverse",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text
style={{
width: "75%",
textAlign: "right",
fontFamily: "almarai-bold",
marginRight: 3,
}}
>
{price.rtlName}
</Text>
{/* <AwalPoint points={price.points} /> */}
<AwalPoint points={price.points} backgroundColor={Colors.gray200} textColor={Colors.gray800} />
</View>
<View style={{ flex: 1, flexDirection: "row-reverse" }}>
<PackageQuantity
title={price.atomicRtlName.toString() + " في"}
packageName={price.packingRtlName}
quantity={price.packageQuantity.toString()}
image={require("../assets/surprise.png")}
backgroundColor={Colors.primary400}
containerStyle={{ flex: 1 }}
/>
<PackageQuantity
title="تمن"
packageName={
price.sellUnit === "ATOMIC"
? price.packingRtlName
: price.atomicRtlName
}
quantity={
(price.sellUnit === "ATOMIC"
? (price.price * price.packageQuantity).toFixed(2)
: (price.price / price.packageQuantity).toFixed(2)
).toString() + " دم"
}
image={require("../assets/dollar.png")}
backgroundColor={Colors.secondary400}
containerStyle={{ flex: 1.5 }}
/>
</View>
<View style={{ flex: 1, flexDirection: "row", paddingBottom: 7 }}>
{basketItem === undefined && !isFocused ? (
<Button
style={{
height: 45,
borderWidth: 0,
borderRadius: 100,
backgroundColor: Colors.secondary500,
}}
onPress={() => {
console.log("button clicked: ");
useDispatch(updateItems({ item: price, quantity: 1, error: undefined, productImage: image }));
}}
accessoryRight={IconComponent(evaIcons.cart, Colors.white500)}
>
{(props) => (
<Text
{...props}
style={{
fontFamily: "almarai-bold",
fontSize: 15,
color: Colors.white500,
}}
>
أضف إلى السلة
</Text>
)}
</Button>
) : (
<CounterInput
style={{ flex: 1 }}
priceId={price.id}
isFocused={isFocused}
setIsFocused={setIsFocused}
maxValue={price.storeQuantity}
buttonStyle={{ backgroundColor: Colors.primary500, borderWidth: 0 }}
/>
)}
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-end' }}>
{(price.isDiscountable === true) ?
<View style={{ flexDirection: 'row-reverse', justifyContent: 'center', alignItems: 'center' }}>
<Image
source={require("../assets/promo.png")}
resizeMode="contain"
style={{ width: 30, height: 30 }}
/>
<Text style={{ textAlign: 'center', fontFamily: 'almarai-regular' }}>فيه روميز</Text>
</View> : null}
</View>
</View>
</View>
</Layout>
);
