search

alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
1.56k stars 466 forks source link

Rerender the specific card #233

Open leon2835 opened 5 years ago

leon2835 commented 5 years ago

Hi there, currently if i setState, the whole swiper will be re-render but not the renderCard function. How can i do in order to re-render the renderCard (current index) as well? Because now if i'm showing url1, and my currentViewIndex from 0 and increase to 1, but the swiper still remain showing the url1 instead of url2 even i setState.

Example: [[{url: url1}, {url: url2}], [{url: url3}, {url: url4}]]

renderCard = (card, index) =>{ //card = [{url: url1}, {url: url2}] index =0 return ( <Image source={{ uri: card[this.getIndex(index)].media_url }}/> ); }

getIndex(index) { //this.state.currentCardIndex is = current swiper card index //this.state.currentViewIndex will be 0, and if i tap the image, it will + 1 meaning that will show the second item //return 0 is to ensure that the next card might be only have 1 url instead of 2 url;

if (index == this.state.currentCardIndex) return this.state.currentViewIndex; return 0; }

Hope you can understand. Thank You very much.

webraptor commented 5 years ago

renderCard method returns the card and it's index, so you don't need the getIndex method at all: <Image source={{ uri: card.url }}/>, based on your cards array [[{url: url1}, {url: url2}], [{url: url3}, {url: url4}]]