Strategy for dynamic list

Question

Strategy for dynamic list

matt-way opened this issue 7 years ago · 27 comments

I am using firebase, and updating properties of items on swipe that would cause them not be rendered next time. This issue is that this is screwing up the index.

For example, the swiper initialises with 5 cards. When the first card is swiped, a property on that object is changed which propagates back, causing a re-render, however this time because of the update there is only 4 cards (the first is no longer in the list). This causes the swiper to skip the current card, because the index is now 1, but the index should change back to zero.

Any ideas for how to get around this?

Just to recap, the issue is removing the first card in the list on every swipe causes the indexes to stuff up.

Answer 1 · 2018-05-24T13:07:26.000Z

You can set the cardIndex on your parent component whenever you want the deck to re-render, as in your case, when you update a property on some card.

const { cardIndex } = this.props;
return (<Swiper
    ref={ swiper => this.swiper = swiper }
    {...customSwiperProps}
    cardIndex={cardIndex}
  />
);```

Passing along the cardIndex to the swiper will allow you to modify it (aka reset or whatever) externally, thus triggering a re-render of the deck of cards. All onSwipe callbacks return the cardIndex, so you can use that to push the updated cardIndex to your state (redux or whatever you're using).

Answer 2 · 2018-05-25T02:16:20.000Z

should we add this to the readme ? should we close this issue ?

Answer 3 · 2018-05-25T09:32:21.000Z

Yeah it might be useful in the readme since info about what happens when card content changes is not displayed anywhere.
PS: I think I'll add it on a bugfix PR later today.

Answer 4 · 2018-05-28T15:17:32.000Z

@webraptor is the code supposed to be like this?

const { cardIndex } = this.props;
return (
  <Swiper
    ref={swiper => this.swiper = swiper}
    {...customSwiperProps}
    cardIndex={cardIndex}
  />
);

Answer 5 · 2018-05-29T12:21:54.000Z

@vinayr Yes! nice catch. Must have miss deleted some bits here and there. Also used that to copy paste into the updated readme.
@alexbrillant we should correct it in the next version.

Answer 6 · 2018-06-07T09:00:54.000Z

Thanks, what If I change any value in object externally of the current card,does it automatically re-renders ?

Answer 7 · 2018-06-07T13:31:13.000Z

Yes. shouldComponentUpdate checks whether cards have changed or not.

Answer 8 · 2018-07-06T06:56:16.000Z

Is it possible to customize shouldComponentUpdate? I update cards on swipe, however would like to prevent re-rendering of the cards until I restart the swiper from the start

Answer 9 · 2018-07-06T08:03:03.000Z

Well shouldComponentUpdate does exactly what it's supposed to do. Prevent re-rendering of cards unless they actually change. Perhaps share the code so that we can help you out? The other solution would be to fork the project so that you customise in your own way the method.

Answer 10 · 2018-07-07T06:16:53.000Z

@webraptor fair enough, I'll try a check in the parent component instead

Answer 11 · 2018-09-27T09:44:42.000Z

@matt-way / @alexbrillant / @tehwayne Is this issue still present, or can we close this down?

Answer 12 · 2019-04-10T22:08:40.000Z

Not sure if this is the same base issue, but when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards prop in onSwipedAll).
However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then its blank.

Answer 13 · 2019-08-07T11:38:37.000Z

You can set the cardIndex on your parent component whenever you want the deck to re-render, as in your case, when you update a property on some card.

const { cardIndex } = this.props;
return (<Swiper
    ref={ swiper => this.swiper = swiper }
    {...customSwiperProps}
    cardIndex={cardIndex}
  />
);```

Passing along the cardIndex to the swiper will allow you to modify it (aka reset or whatever) externally, thus triggering a re-render of the deck of cards. All onSwipe callbacks return the cardIndex, so you can use that to push the updated cardIndex to your state (redux or whatever you're using).

Sorry for my noobness! I really do not understand how to use this piece of code. I have built another component called MySwiper with that code inside... and called it from parent component but i have not understood how to pass {...customSwiperProps}. They are undefined in parent. And should do i use ref prop in parent too?

Answer 14 · 2019-08-20T11:15:07.000Z

Not sure if this is the same base issue, but when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards prop in onSwipedAll).
However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then its blank.

+1

Answer 15 · 2020-06-23T04:41:18.000Z

I am passing updated cards to the swiper and it's not updating. Is this issue going to be fixed? If I update the cards..i don't want to update the index...the state of the index should be maintained by the swiper

Answer 16 · 2020-08-29T18:47:40.000Z

I can't figure out how to make this work, I can create a deck, swipe it away, update the underlying array, force update the component that has the Swiper in it, but the deck stays gone, the cards don't show up again. Changing the card index doesn't do anything, am I missing something?

[edit], okay, you need to edit the stack BEFORE it runs out, not after, or on the last card.

Answer 17 · 2020-12-19T09:10:16.000Z

Not sure if this is the same base issue, but when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards prop in onSwipedAll).
However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then its blank.

For those of you who are still having an issue, I've created PR for a workaround. Hope this helps.

Answer 18 · 2020-12-24T09:00:33.000Z

Not sure if this is the same base issue, but when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards prop in onSwipedAll).

However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then its blank.

For those of you who are still having an issue, I've created PR for a workaround. Hope this helps.

Is there a way I can use this now? Maybe show me how to download it pointing to your branch?

Or show me how to use the npm module patch thingy. I can't seem to get this go work, using react functional components.

Answer 19 · 2020-12-24T09:08:21.000Z

The PR is made against the repo that is no longer maintained. Current npm releases are made from https://github.com/webraptor/react-native-deck-swiper so please open PRs against that one

Answer 20 · 2020-12-24T09:16:10.000Z

The PR is made against the repo that is no longer maintained. Current npm releases are made from https://github.com/webraptor/react-native-deck-swiper so please open PRs against that one

It looks like that one has the same npm install name. How would npm know which one to install? Or was the npm module swapped to the new one already?

Answer 21 · 2020-12-24T09:43:58.000Z

Not sure if this is the same base issue, but when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards prop in onSwipedAll).

However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then its blank.

For those of you who are still having an issue, I've created PR for a workaround. Hope this helps.

Is there a way I can use this now? Maybe show me how to download it pointing to your branch?

Or show me how to use the npm module patch thingy. I can't seem to get this go work, using react functional components.

You can just install this like below in your package.json.

"react-native-deck-swiper": "git+https://github.com/collectors-dev/react-native-deck-swiper.git#1.0.0",

Answer 22 · 2020-12-24T09:44:11.000Z

The PR is made against the repo that is no longer maintained. Current npm releases are made from https://github.com/webraptor/react-native-deck-swiper so please open PRs against that one

Will do thanks.

Answer 23 · 2020-12-24T12:45:06.000Z

The PR is made against the repo that is no longer maintained. Current npm releases are made from https://github.com/webraptor/react-native-deck-swiper so please open PRs against that one

It looks like that one has the same npm install name. How would npm know which one to install? Or was the npm module swapped to the new one already?

Yes. npm was switched a few months back. You can double check the homepage / repository links from https://www.npmjs.com/package/react-native-deck-swiper

Answer 24 · 2021-01-14T06:50:01.000Z

The PR is made against the repo that is no longer maintained. Current npm releases are made from https://github.com/webraptor/react-native-deck-swiper so please open PRs against that one

Will do thanks.

Just wanted to know if is this done? As the feature still not working.

Answer 25 · 2021-01-14T06:55:42.000Z

Not sure if this is the same base issue, but when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards prop in onSwipedAll).

However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then its blank.

For those of you who are still having an issue, I've created PR for a workaround. Hope this helps.

Is there a way I can use this now? Maybe show me how to download it pointing to your branch?
Or show me how to use the npm module patch thingy. I can't seem to get this go work, using react functional components.

You can just install this like below in your package.json.
"react-native-deck-swiper": "git+https://github.com/collectors-dev/react-native-deck-swiper.git#1.0.0",

This is throwing error ViewOverflow not defined. Also no typings.

Answer 26 · 2021-01-14T06:58:44.000Z

Not sure if this is the same base issue, but when I get to the end of my list of cards, sometimes I add more cards (update the underlying array for the cards prop in onSwipedAll).

However, the card deck isn't re-rendering with the new list. The last card gets swiped away and then its blank.

For those of you who are still having an issue, I've created PR for a workaround. Hope this helps.

Is there a way I can use this now? Maybe show me how to download it pointing to your branch?
Or show me how to use the npm module patch thingy. I can't seem to get this go work, using react functional components.

You can just install this like below in your package.json.
"react-native-deck-swiper": "git+https://github.com/collectors-dev/react-native-deck-swiper.git#1.0.0",
This is throwing error ViewOverflow not defined. Also no typings.

That's probably a fork of an older version of the package. version 2.0.4 removed react-native-view-overflow from the source and this error no longer occurs.

Answer 27 · 2021-01-14T07:00:08.000Z

The PR is made against the repo that is no longer maintained. Current npm releases are made from https://github.com/webraptor/react-native-deck-swiper so please open PRs against that one

Will do thanks.

Just wanted to know if is this done? As the feature still not working.

There were no open PRs for this particular issue. However, properly managing the swiper parent's state as described above allows updating the swiper without issues.