GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.2k stars 2.39k forks source link

How to access the current item in Deckswiper #1057

Closed fitzmode closed 7 years ago

fitzmode commented 7 years ago

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.

How do I access the currently showing card with Deckswiper?

Is there an existing method to achieve this?

native-base: 2.1.5, react: 16.0.0-alpha.12, react-native:0.45.1

//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>
akhil-ga commented 7 years ago

@anesumuz this.deck._root.state has some properties like selectedItem and cardItem, which you can use for this.