Unable to do asynchronous concatenating

Thanks for the awesome library. I am trying to fetch more cards when the cards are almost finished to increase performance. State gets updated with new concatenated cards but the swiper doesn’t render new cards. I am attaching code of my component for your reference. Can you please check and suggest what can I do to fix it. This is the code of my file:-

`import React, { Component } from ‘react’ import Swiper from ‘react-native-deck-swiper’ import { Button, StyleSheet, Text, View, Image } from ‘react-native’ import { Card, ListItem, Icon } from ‘react-native-elements’ import { DataCall } from ‘…/utils/DataCall’; import { Loading } from ‘./LoadingComponent’; import Pure from ‘./PureComponent’;

// demo purposes only function * range (start, end) { for (let i = start; i <= end; i++) { yield i } }

class Exemple extends Component { constructor (props) { super(props) this.state = { swipedAllCards: false, swipeDirection: ‘’, cardIndex: 0, cards: [], count: 1 } this.inProgressNetworkReq = false; }

componentWillMount() {
    this.fetchInitialData();
}

componentDidMount(){
    this.mounted = true;
}
async fetchInitialData() {
    //To prevent redundant fetch requests. Needed because cases of quick up/down scroll can trigger onEndReached
    //more than once
    this.inProgressNetworkReq = true;
    const cards = await DataCall.get(this.state.count, this.props.category, 9);
    this.inProgressNetworkReq = false;
    if(cards && this.mounted){
        this.setState({
            cards: this.state.cards.concat(cards),
            count: this.state.count + 1,
        });
    }
}

async fetchMoreData() {
    const cards = await DataCall.get(this.state.count, this.props.category, 9);
    if(cards){
        this.setState({
            cards: this.state.cards.concat(cards)
        })
    }
}

renderCard = (dish, index) => {
    if(dish){
        return (
            <Pure dish={dish} index={index} />
        )
    }
};

onSwiped = (index) => {
    console.log(`on swiped ${index}`)

    if(index==3){
        this.fetchMoreData();
    }
}

onSwipedAllCards = () => {
    this.setState({
        swipedAllCards: true
    })
};

swipeLeft = () => {
    this.swiper.swipeLeft()
};

render () {
    if(this.inProgressNetworkReq){
        return(
            <Loading/>
        )
    }
    else{
        return (
            <View style={styles.container}>
                <Swiper
                    ref={swiper => {
                        this.swiper = swiper
                    }}
                    horizontalSwipe = {false}
                    onSwiped={(index) => this.onSwiped(index)}
                    cards={this.state.cards}
                    cardIndex={this.state.cardIndex}
                    cardVerticalMargin={0}
                    renderCard={this.renderCard}
                    onSwipedAll={this.onSwipedAllCards}
                    stackSize={3}
                    stackSeparation={15}
                    overlayLabels={{
                        bottom: {
                            title: 'BLEAH',
                            style: {
                                label: {
                                    backgroundColor: 'black',
                                    borderColor: 'black',
                                    color: 'white',
                                    borderWidth: 1
                                },
                                wrapper: {
                                    flexDirection: 'column',
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }
                            }
                        },
                        left: {
                            title: 'NOPE',
                            style: {
                                label: {
                                    backgroundColor: 'black',
                                    borderColor: 'black',
                                    color: 'white',
                                    borderWidth: 1
                                },
                                wrapper: {
                                    flexDirection: 'column',
                                    alignItems: 'flex-end',
                                    justifyContent: 'flex-start',
                                    marginTop: 30,
                                    marginLeft: -30
                                }
                            }
                        },
                        right: {
                            title: 'LIKE',
                            style: {
                                label: {
                                    backgroundColor: 'black',
                                    borderColor: 'black',
                                    color: 'white',
                                    borderWidth: 1
                                },
                                wrapper: {
                                    flexDirection: 'column',
                                    alignItems: 'flex-start',
                                    justifyContent: 'flex-start',
                                    marginTop: 30,
                                    marginLeft: 30
                                }
                            }
                        }
                    }}
                    animateOverlayLabelsOpacity
                    animateCardOpacity
                    swipeBackCard
                >
                </Swiper>
            </View>
        )
    }
}

}

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#F5FCFF’ } })

export default Exemple; `

[dochathuc]

Until v1.5.26, this library had componentWillReceiveProps method, however for some reasons it has been removed. I believe most developers are fetching new cards on swipe therefore a PR would be a better solution for the community instead of a fork. @dochathuc What do you think?

@markhomoki Yes, I have just created a fork yesterday. I’ll test more with the fork and then create a PR if it is fine.

[mightym]

Double checked my issue. In the current version shouldComponentUpdate receives the new array of cards as props. And also return true but the card stack itself doesn’t update. https://github.com/alexbrillant/react-native-deck-swiper/blob/master/Swiper.js#L81