React-native-deck-swiper: how to dynamical render cards(shows blank screen)

[yadav-durgesh]

through pagination my data are should get rendered and should display but for some reason, it shows a blank screen, On first API call 10 data are visible but afterward on the second API it doesn't render the data in the card. Can anyone help?

[garfieldnate]

Your description is extremely vague. Could you put together an example program (as small as possible) that you think should work but which does not work? This would help us to help you.

[yadav-durgesh]

when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards state in onSwipedAllCards using _getRecommendations function).
However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then it's blank.
As per my example, the first two cards will be displayed and then again two cards would get render and will be seen.

Below is the code. please have a look, would love to get help as soon as possible.

class Swiper extends React.Component {
    constructor(props) {
        super(props);        
        this.state = {
            cards: [],
            swipedAllCards: false, // if true show default image
            swipedCards:false,  // if true disable swipe card
            cardIndex: 0,
        };
        this._openSwipDetails = this._openSwipDetails.bind(this);
        this._disLike = this._disLike.bind(this);
        this._like = this._like.bind(this);
        this._swipe = this._swipe.bind(this);
        this.onSwipedAllCards = this.onSwipedAllCards.bind(this);
        this._getRecommendations = this._getRecommendations.bind(this);
        this._getRecommendations();
    }
    /**
     * function to get card data(dynamically)
     */
    _getRecommendations = () => {
        let cards = [{id:1,name:'abc', primary_photo:'demo1.png'}, {id:2,name:'xyz', primary_photo:'demo2.png'}];
        let cardIndex = this.state.cardIndex + 1;

        this.setState({cards: cards, swipedAllCards: false, swipedCards: false, cardIndex:cardIndex });
    }

    _disLike = (index) => {
        console.log('Dis Like');   
    }

    _swipe = (swipe) => {
        if(swipe == "left") {
            this.swiper.swipeLeft(); 
        }else{
            this.swiper.swipeRight(); 
        }
    }

    _like = (index) => {
        console.log('Like Swipe');           
    }

    _openSwipDetails = (index) => {
        console.log(this.state.cards[index]);        
    };

    /**
     * Onswipe all card append again the cards (dynamically by api)
     */
    onSwipedAllCards = () => {
        let cardIndex = this.state.cardIndex;
        this._getRecommendations();
    };

    renderCard = (card, index) => {
        return (
            <View key={card.id} index={index}>
                <Card>
                    <CardItem cardBody style={styles.CardImage}>
                        <Thumbnail square large source={card.primary_photo} />
                    </CardItem>
                    <CardItem cardBody>
                        <Text >{card.name}</Text>
                    </CardItem>
                </Card>
            </View>)
    };

    render() {
        return (

            <ScrollView contentContainerStyle={{flex:1,height:'100%',width:'100%'}} refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={() => {this._getRecommendations()}} /> }>
             {this.state.swipedAllCards && ( <View style={{height:'100%',alignItems:'center',justifyContent:'center'}}>
                            <Image source={TopImage}  resizeMode="cover" />
                </View>)}
            <View >              
            <Swiper
                ref={swiper => {
                    this.swiper = swiper
                }}
                cards={this.state.cards}
                renderCard={this.renderCard}
                onSwipedAll={this.onSwipedAllCards}                
                onSwipedLeft={(index) => this._disLike(index)}
                onSwipedRight={(index) => this._like(index)}
                onTapCard={(index) => this._openSwipDetails(index)}
                cardVerticalMargin={55}
                disableRightSwipe={this.state.swipedCards}
                disableLeftSwipe={this.state.swipedCards}
                verticalSwipe={false}
                showSecondCard={true}
                backgroundColor={'#E5E5E5'}
                cardIndex={this.state.cardIndex}
            ></Swiper>
            </View>
            </ScrollView>
        );
    }
}

[yadav-durgesh]

when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards state in onSwipedAllCards using _getRecommendations function).
However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then it's blank.
As per my example, the first two cards will be displayed and then again two cards would get render and will be seen.

Below is the code. please have a look, would love to get help as soon as possible.

class Swiper extends React.Component {
    constructor(props) {
        super(props);        
        this.state = {
            cards: [],
            swipedAllCards: false, // if true show default image
            swipedCards:false,  // if true disable swipe card
            cardIndex: 0,
        };
        this._openSwipDetails = this._openSwipDetails.bind(this);
        this._disLike = this._disLike.bind(this);
        this._like = this._like.bind(this);
        this._swipe = this._swipe.bind(this);
        this.onSwipedAllCards = this.onSwipedAllCards.bind(this);
        this._getRecommendations = this._getRecommendations.bind(this);
        this._getRecommendations();
    }
    /**
     * function to get card data(dynamically)
     */
    _getRecommendations = () => {
        let cards = [{id:1,name:'abc', primary_photo:'demo1.png'}, {id:2,name:'xyz', primary_photo:'demo2.png'}];
        let cardIndex = this.state.cardIndex + 1;

        this.setState({cards: cards, swipedAllCards: false, swipedCards: false, cardIndex:cardIndex });
    }

    _disLike = (index) => {
        console.log('Dis Like');   
    }

    _swipe = (swipe) => {
        if(swipe == "left") {
            this.swiper.swipeLeft(); 
        }else{
            this.swiper.swipeRight(); 
        }
    }

    _like = (index) => {
        console.log('Like Swipe');           
    }

    _openSwipDetails = (index) => {
        console.log(this.state.cards[index]);        
    };

    /**
     * Onswipe all card append again the cards (dynamically by api)
     */
    onSwipedAllCards = () => {
        let cardIndex = this.state.cardIndex;
        this._getRecommendations();
    };

    renderCard = (card, index) => {
        return (
            <View key={card.id} index={index}>
                <Card>
                    <CardItem cardBody style={styles.CardImage}>
                        <Thumbnail square large source={card.primary_photo} />
                    </CardItem>
                    <CardItem cardBody>
                        <Text >{card.name}</Text>
                    </CardItem>
                </Card>
            </View>)
    };

    render() {
        return (

            <ScrollView contentContainerStyle={{flex:1,height:'100%',width:'100%'}} refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={() => {this._getRecommendations()}} /> }>
             {this.state.swipedAllCards && ( <View style={{height:'100%',alignItems:'center',justifyContent:'center'}}>
                            <Image source={TopImage}  resizeMode="cover" />
                </View>)}
            <View >              
            <Swiper
                ref={swiper => {
                    this.swiper = swiper
                }}
                cards={this.state.cards}
                renderCard={this.renderCard}
                onSwipedAll={this.onSwipedAllCards}                
                onSwipedLeft={(index) => this._disLike(index)}
                onSwipedRight={(index) => this._like(index)}
                onTapCard={(index) => this._openSwipDetails(index)}
                cardVerticalMargin={55}
                disableRightSwipe={this.state.swipedCards}
                disableLeftSwipe={this.state.swipedCards}
                verticalSwipe={false}
                showSecondCard={true}
                backgroundColor={'#E5E5E5'}
                cardIndex={this.state.cardIndex}
            ></Swiper>
            </View>
            </ScrollView>
        );
    }
}

Can any help me

[mazenchami]

@yadav-durgesh you closed this task but didn't post your solution. how did you resolve this?

[kurtiev]

@mazenchami did you find something?

[mazenchami]

@kurtiev unfortunately not. i think i ended up changing the UI/UX to handle my use case.
it would be ideal if @yadav-durgesh posted the solution

[kurtiev]

In some comments i found that we shouldn't modify initial array of cards.
I agree with this, because i had some different troubles. So guess need just do something like this

<>
loadingData ? <Text>Loading...</Text> : <Swiper/>
</>

[webraptor]

In some comments i found that we shouldn't modify initial array of cards.
I agree with this, because i had some different troubles. So guess need just do something like this

<>
loadingData ? <Text>Loading...</Text> : <Swiper/>
</>

@kurtiev yes, that's correct. That's how we also did it back when we were using the swiper package.

[yadav-durgesh]

@yadav-durgesh you closed this task but didn't post your solution. how did you resolve this?

I actually created my own customised swipper. which was more simpler and faster. I am also sorry for replying late.

[sv1226]

@yadav-durgesh you closed this task but didn't post your solution. how did you resolve this?

I actually created my own customised swipper. which was more simpler and faster. I am also sorry for replying late.

Hey Can you post the code of the swiper that you have created, it will be helpful for evryone. 👍