Giters

alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Strategy for dynamic list

matt-way opened this issue · comments

commented

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.

commented

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).
commented

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

commented

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.

commented

@webraptor is the code supposed to be like this?

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

@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.

commented

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

commented

Yes. shouldComponentUpdate checks whether cards have changed or not.

commented

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

commented

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.

commented

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

commented

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

commented

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.

commented

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?

commented

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

commented

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

commented

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.

commented

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.

commented

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.

commented

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

commented

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?

commented

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",
commented

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.

commented

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

commented

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.

commented

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.

commented

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.

commented

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.