Skipperlla / rn-swiper-list

⚡ Lightning fast and customizable tinder-like swiper for React Native
https://www.npmjs.com/package/rn-swiper-list
MIT License
157 stars 15 forks source link

New Data fetching does not update the UI #38

Open urielbitton opened 1 month ago

urielbitton commented 1 month ago

When I fetch new data from my server the swiper does not update the UI with the new cards.

Here's my code:

<Swiper cardStyle={styles.cardStyle} data={suggestedUsers} renderCard={renderSuggestions} onSwipeRight={handleSwipeRight} onSwipeLeft={handleSwipeLeft} onIndexChange={handleIndexChange} disableTopSwipe disableBottomSwipe />

const handleIndexChange = () => { if (index === 0) return; if (index % 5 === 0) { fetchMoreSuggestedUsers(); //when I console log this I see the refreshed data, but it isn't updating the UI... } }

Is this intentional and there is a workaround or is this a bug?

ayech0x2 commented 1 month ago

Apparently you need to unmount and mount the component that holds the swiper, im in a situation where i need to repeat the data or fetch new items, i created a isFinished state that control wether the swiper is mounted technically or not, once isFinished = true i unmount, isFinished is false i mount. But in your case you just need to replace the swiper with a loading indicator with a caption like "Loading more data" once your new data is there, isLoading will become false and voilà you got your swiper shown with new data.

alkeshjethva commented 1 month ago

I am facing the same problem,

my state got updated but the UI is not getting updated (new data should be loaded with the left cards as a user can continue swipes)

is there any update on this?

Skipperlla commented 1 month ago

@ayech0x2 @urielbitton @alkeshjethva I don't have much time to look here if you can solve this and open a pr I can read it as soon as possible, otherwise I plan to solve all the issues in a period of 2-3 weeks, so I have to wait a little longer.

bastiandev commented 4 weeks ago

I encountered the same issue, but got a workaround: Set the key prop on the Swiper component and change its value together with the new data (e.g. with an unique value from the data or with a simple counter). This also freshly remounts the component like @ayech0x2 suggested, but without an intermediate loading view.

Skipperlla commented 3 weeks ago

this weekend I will look at this and all other issues and pr's and close them, I apologize to all of you one by one for keeping you waiting so long @bastiandev @alkeshjethva @ayech0x2 @urielbitton