I would like to change images dynamically using Deckswiper based on the content of the currently showing item.While this works fine with onSwipe events, I would like to change the image based on the content of the currently showing card. The problem is swipe events return this info after the fact whereas I need the state of the current card.
Is there an existing method to achieve this?
//Javascript
switchImage(currentCard) {
if(currentCard.description === "One") {
this.setState({image:require('./img/bg1.png')});
} else if(currentCard.description === "Two") {
this.setState({image:require('./img/bg2.png')});
}else if(currentCard.description === "Three") {
this.setState({image:require('./img/bg3.png')})
}
}
//Views
<View style={{marginLeft:10,marginRight:10,marginTop:'90%'}} >
<DeckSwiper
ref={(deck) => this.deck = deck}
dataSource={cards}
onSwipeRight={this.switchImage}
renderItem={item =>
<Card>
//Trimmed Content
</Card>
}
/>
</View>
@anesumuz this.deck._root.state has some properties like selectedItem and cardItem, which you can use for this.
Most helpful comment
@anesumuz
this.deck._root.statehas some properties likeselectedItemandcardItem, which you can use for this.