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> );