Allow children components in renderCard to swipe horizontally or vertically

[tehwayne]

I was unsuccessful using zIndex, is it currently possible to have a flatlist that is scrollable inside the card?

[webraptor]

I don't think so as the card catches touch for movement.

[rubencodes]

I'd also like to know more about this^. I'd like to have a scrollview inside the card. Is this possible? Seems like it should be allowed if verticalSwipe is disabled.

[MamyChow]

same prob, i would like a scrollview inside card. Any solution?

[MamyChow]

I find something, i create a custom scrollview and i use it in the renderCard Swiper's prop. It's not working for the first card but it's working for the others. If someone find why it's not working for the first one tell me ;)

Swiper code

        <Swiper 
        ref={swiper => {
        this.swiper = swiper
        }}
        containerStyle={{backgroundColor : 'transparent'}}
        cards={['1', '2', '3', '4', '5', '6', '7']}
        renderCard={this.renderCard}
        cardVerticalMargin= {diago * 0.17}
        cardStyle={{alignItems: 'center'}}
        stackSize = {2}
        stackSeparation={0}
        verticalSwipe={false}
        >
        </Swiper>

Custom Scrollview code

componentDidMount() {
	this._scrollView.scrollResponderHandleStartShouldSetResponder = () => true
}

render() {
	return (
		<ScrollView ref={x => this._scrollView = x} {...this.props}>
			{this.props.children}
		</ScrollView>
	)
}

[rubencodes]

Yeah I experienced the same with that code snippet^. Worked pretty well otherwise, hard to know why it doesn't work for the first card but I'll dig into it.

[bernhardt1]

hey @rubencodes or @MamyChow

Did you ever figure out why the first card won't respond to swipes? I have the same issue.

Will let you know if I find a solution.

[bernhardt1]

I was able to get this working like so:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ScrollView, TouchableWithoutFeedback, View } from 'react-native';

class SwiperScrollView extends Component {
  static propTypes = {
    children: PropTypes.any,
  };

  componentDidMount() {
    this._scrollView.scrollResponderHandleStartShouldSetResponder = () => true;
  }

  render() {
    return (
      <ScrollView ref={x => this._scrollView = x} {...this.props}>
        <TouchableWithoutFeedback>
          <View style={{ flex: 1 }}>
            {this.props.children}
          </View>
        </TouchableWithoutFeedback>
      </ScrollView>
    );
  }
}

export default SwiperScrollView;

This stackoverflow was helpful: https://stackoverflow.com/questions/29756217/react-native-nested-scrollview-locking-up/41753389#41753389

[rubencodes]

I think this was fixed at some point, or at least it's working for me now, as long as verticalSwipe flag is set to false—no need for the scroll view hack at all.

If you want to dig into the code, this happens here: https://github.com/alexbrillant/react-native-deck-swiper/blob/master/Swiper.js#L123:L129

Basically if some threshold isn't hit, and the verticalSwipe is false, the swipe gesture gets disabled.

---

Personally, I found the verticalSwipe=false behavior kinda not great. For the brave among you, I've had nothing but great results setting verticalSwipe=true, and removing the !this.props.verticalSwipe check from line 127. This lets you move the card on both axes, but still disables vertical scrolling when it doesn't hit the threshold.

[thame]

I can confirm that this is working on the latest version of react-native (0.62.2). It appears that wrapping ScrollView contents with TouchableWithoutFeedback is required.

[nescroft]

i think the issue is actually that the renderOverlayLabel has a width and height of 100% and a flex:1 with absolute position so it is covering the scrollview.. the 'like' and 'nope' is covering the scrollview. at least that is part of the issue. in swiper.js

[sirajalam049]

TouchableWithoutFeedback didn't work for me, but TouchableOpacity did. To avoid feedback on touch give activeOpacity to 1

[eashan-mathur]

That was it ^ TouchableWithoutFeedback didn't work but TouchableOpacity Worked

[AnatuGreen]

That was it ^ TouchableWithoutFeedback didn't work but TouchableOpacity Worked

Hi, please can you provide your code where this is working? I have wrapped with TouchableOpacity and nothing is happening

[AnatuGreen]

If anyone is still having this issue, here is the latest solution in January 2022:

You have to cover the child or children of the View inside your 'renderCard' with a 'ScrollView' and a TouchableOpacity. See the section of the code below:

.... renderCard = (cards, index) => { return (

  <View style={styles.card}>

  <ScrollView>
  <TouchableOpacity>

   <Text> {cards} </Text>

   </TouchableOpacity>
   </ScrollView>

  </View>
)

}; ....

Remember to disable vertical scrolling first using verticalSwipe={false} if you wish.

Also, to reduce the opacity change on <TouchOpacity> when you scroll, use the activeOpacity prop to manually edit this, like: : <TouchableOpacity activeOpacity={.7}>

[AnatuGreen]

If anyone is still having this issue, here is the latest solution in January 2022:

You have to cover the child or children of the View inside your 'renderCard' with a 'ScrollView' and a TouchableOpacity. See the section of the code below:

.... renderCard = (cards, index) => { return (

  <View style={styles.card}>

  <ScrollView>
  <TouchableOpacity>

   <Text> {cards} </Text>

   </TouchableOpacity>
   </ScrollView>

  </View>
)

}; ....

Remember to disable vertical scrolling first using verticalSwipe={false} if you wish.

Also, to reduce the opacity change on when you scroll, use the activeOpacity prop to manually edit this, like: : <TouchableOpacity activeOpacity={.7}>

TouchableWithoutFeedback is great too.

[farazirfan47]

Can we also manage horizontal scrolling?