Swiper freezes when adding new items

[kay-is]

I load 15 items from the server and add them to the Swiper, when I viewed 11 items, I load 15 new items, throw out the 11 already viewed and add the new ones behind the remaining 4.

Problem is now, that the swiper freezes when I do this. Sometimes it completes the current swipe after the update, sometimes it simply keeps stuck till I swipe again.

    if (itemsLeft < 5) {
      const nextPage = page + 1;
      const nextItems = await this.loadPage(nextPage);
      items.splice(0, items.length - itemsLeft);

      this.setState({
        items: [...items, ...nextItems],
        page: nextPage
      });
    }

[alexbrillant]

@kay-is thanks for pointing that out. when do you push new cards to the props ? what event callback are you using ?

componentWillReceiveProps might not be ready for the behavior you are looking for :

componentWillReceiveProps (newProps) {
    this.setState({
      firstCardIndex: newProps.cardIndex || 0,
      cards: newProps.cards,
      previousCardX: new Animated.Value(newProps.previousCardInitialPositionX),
      previousCardY: new Animated.Value(newProps.previousCardInitialPositionY),
      swipedAllCards: false,
      secondCardIndex: newProps.cards.length === 1 ? 0 : 1,
      previousCardIndex:
      newProps.cards.length === 1 ? 0 : newProps.cards.length - 1,
      panResponderLocked: newProps.cards && newProps.cards.length === 0,
      slideGesture: false
    })
  }

[kay-is]

I do it in the onSwiped callback.

Is this the wrong one?

[alexbrillant]

The onSwiped callback is the right one. I have done it before here : https://github.com/alexbrillant/react-native-deck-swiper/issues/7

I will check it out when I have time. I think the bug is related to the fact that you throw out already viewed items. Let me know if you find anything.

[kay-is]

Okay, but isn't this necessary? I mean, won't this grow too big?

[alexbrillant]

@kay-is Good question. That would indeed make sense to throw the already viewed items, but that might take a while before it gets slower.

Have you tried throwing out all the viewed items before loading the new items?

[webraptor]

Discarding viewed items will create issues for swipe back ...

[alexbrillant]

@kay-is I re-use the same three views every time : first card, second card, and swipe back card. The only thing you have to worry about is memory usage. I don't think the performance will not be affected if you add more items without discarding the other ones

[alexbrillant]

Closing the issue. Solution for now : don't throw out already viewed items from the cards props.

[georgeMorales]

Hi, thanks for this good library ... I am trying to paginate with Firebase Firestore, I have implemented it successfully in FlatList but with deck swiper I do not start the way. When I call the onSwiped method (cardIndex) making the new request with the last element I get this error ... Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

onSwiped = async () => { const {users} = this.props; let lastUsers = users && users[users.length - 1]; console.log('lastUsers', lastUsers); let nextQuery = await this.props.getUsersQuery(lastUsers); console.log('nextQuery', nextQuery); }