Not able to re-render swiper

[sathucandy]

I am trying to add new cards to the array when we have reached index which is at 4th position from end, I am updating the array and getting the content in my console but I am not able to re-render Swiper to show the new cards after I have reached the end of my array

import React, {useState, useEffect} from 'react';
import {StyleSheet} from 'react-native';

import Swiper from 'react-native-deck-swiper';
import styled from 'styled-components';
import ReactionCTAs from '../reactionCTAs/ReactionCTAs';
import * as Progress from 'react-native-progress';

const Recommendations = () => {
  const [loading, setLoading] = useState(true);
  const [cardsState, updateCardsState] = useState({
    cards: [],
    swipedAllCards: false,
    swipeDirection: '',
    cardIndex: 0,
    pageNumber: 1,
  });

  // console.log('Loaded before component mounted');

  useEffect(() => {
    fetch(
      `https://abcde/?page=${cardsState.pageNumber}`,
      {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          Authorization: '',
        },
      },
    )
      .then((response) => response.json())
      .then((json) => {
        updateCardsState({
          ...cardsState,
          pageNumber: cardsState.pageNumber + 1,
          cards: json.data,
        });
        setLoading(false);
        console.log('Loaded after component mounted');
      })
      .catch((error) => console.error(error));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loadMoreData = () => {
    fetch(
      `https://abcde/?page=${cardsState.pageNumber}`,
      {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          Authorization: '',
        },
      },
    )
      .then((response) => response.json())
      .then((json) => {
        cardsState.cards = cardsState.cards.concat(json.data);
        updateCardsState({
          ...cardsState,
          cardIndex: cardsState.cardIndex,
          pageNumber: cardsState.pageNumber + 1,
          cards: cardsState.cards, //cardsState.cards.concat(json.data),
        });
        console.log(cardsState.cards);
      });
  };

  const renderCard = (card, index) => {
    return (
      <Card>
        <CardImage
          source={{
            uri: cardsState.cards[index].media.posters[0],
          }}>
          <ReactionCTAs
            movieId={cardsState.cards[cardsState.cardIndex].id}
            swipeLeft={swipeLeft}
            swipeRight={swipeRight}
            swipeTop={swipeTop}
            swipeBottom={swipeBottom}
          />
        </CardImage>
      </Card>
    );
  };

  const onSwiped = (type) => {
    // console.log(`on swiped ${type}`);

    if (cardsState.cardIndex === cardsState.cards.length - 4) {
      loadMoreData();
      console.log('Load more items is being called');
      console.log('Data inside cards are: ' + cardsState.cards);
    }

    updateCardsState({
      ...cardsState,
      cardIndex: cardsState.cardIndex + 1,
    });
    if (type === 'right') {
      fetch('https://abcde/', {
        method: 'POST',
        body: `{"movie":${cardsState.cards[cardsState.cardIndex].id}}`,
        headers: {
          'Content-type': 'application/json',
          Authorization: '',
        },
      });
    }
  };

  const onSwipedAllCards = () => {
    updateCardsState(
      {
        ...cardsState,
        swipedAllCards: true,
      },
      [],
    );
  };

  const swipeLeft = () => {
    cardsState.swiper.swipeLeft();
  };
  const swipeRight = () => {
    cardsState.swiper.swipeRight();
  };
  const swipeTop = () => {
    cardsState.swiper.swipeTop();
  };
  const swipeBottom = () => {
    cardsState.swiper.swipeBottom();
  };
  return loading ? (
    <Progress.CircleSnail
      size={40}
      indeterminate={true}
      color={'red'}
      style={styles.progressBar}
    />
  ) : (
    <Container>
      <Swiper
        ref={(swiper) => {
          cardsState.swiper = swiper;
        }}
        backgroundColor={'#20242b'}
        onSwiped={() => onSwiped('general')}
        onSwipedLeft={() => onSwiped('left')}
        onSwipedRight={() => {
          onSwiped('right');
        }}
        onSwipedTop={() => onSwiped('top')}
        onSwipedBottom={() => onSwiped('bottom')}
        onTapCard={swipeLeft}
        cards={cardsState.cards}
        cardIndex={cardsState.cardIndex}
        cardVerticalMargin={80}
        renderCard={renderCard}
        swipeAnimationDuration={600}
        onSwipedAll={onSwipedAllCards}
        stackScale={4.5}
        stackSize={3}
        stackSeparation={-25}
        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,
              },
            },
          },
          top: {
            title: 'SUPER LIKE',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              },
            },
          },
        }}
        animateOverlayLabelsOpacity
        animateCardOpacity
        swipeBackCard
      />
    </Container>
  );
};

const Container = styled.View`
  flex: 1;
`;

const CardImage = styled.ImageBackground`
  height: 100%;
  width: 372px;
`;

const Card = styled.View`
  flex: 1;
  border-radius: 4px;
  justify-content: center;
  background-color: #20242b;
`;

const styles = StyleSheet.create({
  progressBar: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Recommendations;

[Jacques de Villiers]

Please see #324

[Akshay Joshi]

@sathucandy were you able to fix it?

[Jorge Almonacid]

@doozie-akshay did you solve this?