Open Cantum2 opened 3 years ago
mirza-osv
commented
3 years ago Can you try to update the value of cardIndex ( index) in the parent component as shown here https://github.com/alexbrillant/react-native-deck-swiper#updating-props-on-card-content-dynamic-card-content
Cantum2
commented
3 years ago I have done this and the renderCard function in the Swiper does not get triggered thus resulting in the new items not rendering. I am still stuck on this, the behavior is exactly the same. Please let me know if you see something wrong here.
...
const getProductsByTag = () => {
console.log('fetching products', tags);
setLoading(true);
axios.get('/products/list', {
params: { tags: tags.join(','), page, size: 5 }
}).then((res) => {
const { products: internalProds, count } = res.data;
const productResponse: IProduct[] = internalProds;
console.log(count);
setLoading(false);
setTotalSize(count);
setProducts(products.concat(productResponse));
}).catch((err) => {
setError('Error getting products');
})
}
...
const userLikeProduct = (product: IProduct) => {
setIndex((index + 1) % products.length);
transitionRef.current.animateNextTransition();
const likeActions = [
// calls removed for brevity
]
Promise.all(likeActions).then((res) => {
if (products.length - 2 <= index) {
console.log('getting more products in like product')
setPage(page++)
getProductsByTag();
}
}).catch((err) => {
console.log("Error in user like product")
})
}
...
<View style={{ height: 25 }} />
<View style={SwipeStyles.swiperContainer}>
<SimplySwiper index={index} onUserLike={userLikeProduct} onUserDislike={userDislikeProduct} products={products}/>
</View>
......
interface props {
index: number;
onUserLike: (product: IProduct) => void;
onUserDislike: (product: IProduct) => void;
products: IProduct[];
}
...
const renderCard = (tProduct: IProduct, tIndex: number) => {
console.log('Render card', tProduct._id, tIndex)
return <ProductCard key={tProduct._id} index={tIndex} card={tProduct} />
}
...
export const SimplySwiper: FC<props> = ({ index, onUserDislike, onUserLike, products }) => {
return (
<Swiper ref={swiperRef}
cards={products}
cardIndex={index}
renderCard={(card, cardIndex) => renderCard(card, cardIndex)}
onSwipedRight={(num) => onUserLike(products[index])}
onSwipedLeft={(num) => onUserDislike(products[index])}
backgroundColor={'transparent'}
onTapCard={() => onUserDislike(products[index])}
cardVerticalMargin={0}
...
felire
commented
3 years ago I am having exactly the same issue
Cantum2
commented
3 years ago I believe many people have had this issue. Its a massive bummer that they will not fix it. I still dont have a solution...
kitmade
commented
3 years ago hey guys, i'm facing the same issue here, we've tried push method to initial list in reducer or use the spread operator, but still not be able to show the data when we're receiving from server (but it only happens on the 1st time get data from server, all time after that Swiper works just fine).
felire
commented
3 years ago Okey, I could make it work but with a lot of hacks: It is something like this:
This is how I implement the CustomSwiper, which implement the swiper:
<CustomSwiper
pets={[...candidates, { image: noMatchPets }]}
onSwipedRight={onSwipe('like')}
onSwipedLeft={onSwipe('dislike')}
initialIndex={swipeIndex.current + 1}
key={candidates.length}
onTapCard={onTapCard}
ref={swiper}
isLastDataSet={isLastDataSet}
offset={OFFSET}
type={'match'}
/>I am updating the key whenever the length of the candidates change so it will re-render, and since that is rerendering I can send it a reference and it will take the value of that reference to set the initial-value, since the list of candidates already has the old values but I am like ignoring them on the re-render because they were already swiped.
I mean, I had to make re-renders constantly whenever the data is modified.
I am re-rendering when the user unfocus the screen too.
Cantum2
commented
3 years ago The solution mentioned by @felire worked! Simply adding the length of the array as the key re-rendered my list with my paginated data. Here is what my code looks like that contains this:
...
export const SimplySwiper: FC<props> = ({ index, onUserDislike, onUserLike, products }) => {
return (
<Swiper ref={swiperRef}
cards={products}
cardIndex={index}
renderCard={(card, cardIndex) => renderCard(card, cardIndex)}
onSwipedRight={(num) => onUserLike(products[index])}
onSwipedLeft={(num) => onUserDislike(products[index])}
backgroundColor={'transparent'}
onTapCard={() => onUserDislike(products[index])}
cardVerticalMargin={0}
cardHorizontalMargin={5}
stackSize={stackSize}
key={products.length} // HERE IS THE SOLUTION
stackScale={3}
stackSeparation={2}
animateOverlayLabelsOpacity
animateCardOpacity
showSecondCard={true}
disableTopSwipe
disableBottomSwipe
...I do believe this solution is a bit of a hack as we have to rerender the entire list every single swipe. I would like to leave this issue open as this issue has happened for dozens of developers and it would be great if the maintainers implemented a more elegant solution for this.
farazirfan47
commented
2 years ago By simply adding the componentDidUpdate method in Swiper.js we can dynamically update cards without any lag or something.
componentDidUpdate(prevProps){
if(prevProps.cards.length != this.props.cards.length){
this.setState({
cards: this.props.cards
})
}
}
salemshah
commented
2 years ago "👁️👁️SIMPLE" I had the same issue, but I solved it with @felire 's help
const [cards, setCards] = useState(['DO', 'MORE', 'OF', 'WHAT', 'MAKES', 'YOU', 'HAPPY']) //main
const updateCards = () => {
setCards(["jan", "khan", "karim"]) // These cards appear after all main cards have been swiped 👈
}
return (
<Swiper
cards={cards}
renderCard={(card) =><Card title={card} />}
key={cards.length} // important to add 👈👈👈
onSwipedAll={updateCards}/>
)
bsmithcompsci
commented
2 years ago const HomeView = () => {
// Some hooks to do our madness.
const [cards, setCards] = useState<Profile[]>(data);
const [cardLength, setCardLength] = useState<number>(data.length);
var cardStack : Swiper<Profile>|undefined = undefined; // Store off a reference of the swiper.
const updateCards = () => {
setCards(data); // Update with the new cards that we want, but it won't be rendered yet.
setCardLength(0); // Lie to the UI that we have nothing in our cards!
cardStack.forceUpdate(()=>{
setCardLength(data.length); // Now tell the truth, we have a new length of cards.
});
}
return (
<Swiper<Profile>
cards={cards}
key={cardLength}
renderCard={(item) => {
return (
<MyCardComponent
image={item.image}
name={item.name}
onPressLeft={() => cardStack.swipeLeft()}
onPressRight={() => cardStack.swipeRight()}
/>
)
}}
ref={(ref)=>{ cardStack = ref; }}
onSwipedAll={updateCards}
backgroundColor={'#4FD0E9'}
stackSize= {3}
animateOverlayLabelsOpacity
animateCardOpacity
swipeBackCard
/>
);
};This was my solve. You have to play a little bit with the key, apparently that triggers the actual "re-render" of the Swiper. Also make sure you are making this a component, otherwise you cannot use the hooks. And this was written for Typescript, so if you cannot have the strong types, remove them and you got Javascript. Happy coding! 😄
1finedev
commented
1 year ago Thank you very much @bsmithcompsci
Issue
When dynamically adding elements to the Swiper card prop, the newly added properties will not appear on the screen.
Longer Description
My issue comes from the following situation: My data is paginated, so I get the first page of data initially which consists of 5 elements which loads just fine and I am able to swipe on them no problem. I begin to load page two when the user is 2 away from the end of the five, once the data is returned I concat the array returned with page 2 data on to the array of page 1 data. This is where the issue is: The first five from page 1 show perfectly fine and I am able to interact with them flawlessly but when I try to concat page two to the existing array passed into the props of the Swiper the new items dont show up.
Expectation
I would expect when I modify the array being passed into the cards prop that change is reflected in the swiper and I can interact with the newly added array elements
Video
Ignore Ugly UI, its under construction...
https://user-images.githubusercontent.com/26589485/109442265-f091cc00-79f4-11eb-8eaf-132eb5552208.mp4
As you can see in the video the total property correctly updates to 10 after the second page of data is loaded in but once I reach the end of the first pages data the swiper fails to show the next 5 elements (the second page)
Related issues I have visited numerous times
153, This Comment, #192, #189, and This Section in the Readme
Code
Swiper
Package.json
If there is anything else you would like to see from me please feel free to let me know. Thank you.