Nativebase: DeckSwiper swipe on button press not working

Created on 21 Feb 2017 · 10Comments · Source: GeekyAnts/NativeBase

My problem is in reference to the issue here https://github.com/GeekyAnts/NativeBase/issues/416
I want to click a button and the action of it would cause the deck swiper move to the next item in the deck. I have followed the instructions in the above link, it doesn't seem to work

  `<DeckSwiper`
              ref={(ds) => {this.deckSwiper = ds;}}
              dataSource={cards}
              onSwipeLeft={this.callLeftSwipe}
              onSwipeRight={this.callRightSwipe}
              renderItem={item =>

                    <Card style={{ elevation: 3 }}>
                        <CardItem>
                            <Left>
                                <Thumbnail source={item.image} />
                            </Left>
                            <Body>
                                <Text>{item.text}</Text>
                                <Text note>NativeBase</Text>
                            </Body>
                        </CardItem>
                        <CardItem cardBody>
                                <Text style={{ width: screenWidth, height: screenheight }}>Cool</Text>
                                <TouchableOpacity  onPress={() => {
                                  this.setCurrentItem(item);
                                  this.setModalVisible(true,item)
                                  }} >
                                 <Image style={{ resizeMode: 'cover', width: screenWidth, height: screenheight }} source={item.image} />
                                </TouchableOpacity>

                                </CardItem>
                        <CardItem>
                            <Icon onPress={() => this.deckSwiper.swipeRight()} name="md-thumbs-up" style={{ color: '#ED4A6A' }} />
                            <Text>{item.name}</Text>
                        </CardItem>
                    </Card>
                  }
            />`

P.S I have noticed that I can access the props of the deckSwiper and call the custom methods I have written for handling a swipe such as onPress={() => this.deckSwiper.props.onSwipeRight()} it ends up calling the callRightSwipe method. However this doesn't solve the problem wherein the card would change to the next one in the deck. Any idea what the problem could be?

Source

blaziken105

Most helpful comment

@ryannewton native-base version?

shivrajkumar on 31 Mar 2017

👍2

All 10 comments

I have the same issue.

sullof on 1 Mar 2017

try onPress={() => this.deckSwiper._root.swipeRight()}

shivrajkumar on 1 Mar 2017

Thanks but that command crashes the app because this.deckSwiper._root is undefined.

sullof on 2 Mar 2017

Can you check with v2.0.12 if it works?
deckswiper
Should be fixed.

sankhadeeproy007 on 3 Mar 2017

This isn't working for me either. Is there something else I need to do to access _root.

When I console.log(this.deckSwiper) it has these properties:
_reactInternalInstance: ReactCompositeComponentWrapper
context: Object
isMounted: (...)
props: Object
refs: Object
replaceState: (...)
resolveConnectedComponentStyle: ()
setWrappedInstance : ()
state: Object
updater: Object
wrappedInstance: DeckSwiper
__proto__: ReactComponent

ryannewton on 31 Mar 2017

@ryannewton native-base version?

shivrajkumar on 31 Mar 2017

👍2

@shivrajkumar I was on 2.0.9. Just upgraded and that solved it.
Thanks!

ryannewton on 31 Mar 2017

👍1

This seems to have broken in 2.1.4.
Any idea what the new API is?

ryannewton on 12 Jun 2017

👍1

@akhil-geekyants Seeing the same issue in "native-base": "2.1.3" with undefined this.__deckSwiper.

My gist is linked here but this._deckSwiper._root is undefined.
Is there a different way of accessing the swipe props in this version of native-base perhaps?

https://gist.github.com/BrianJVarley/6066e4a29d234c2de40e14bf7d69f601