not working properly with scrollview

[mirza-osv]

Swiping card gets stuck in the middle if using scrollview

[eyalabs]

Sorry, but this is not supported and will not be supported as it is bad UX practice.

You should always avoid using 2 "scrollables" within each other even if they work in different "directions". There is an acceptable case when you use an horizontal scrollable within a vertical one but in the case of cards, they are swappable in x & y axis this causes conflicts with other scrollable parent.

[mirza-osv]

I just want to swipe either left side or right side, so If I choose horizontal scroll for this, will it work? I have a long screen in which swipe cards are top position and it needs scrollview mandatorily

[eyalabs]

Try using dragY=false prop. When I tested it it didn't work #4.

I didn't fix it because there isn't enough demand.

[mirza-osv]

Yeah, I too tested with dragY=false but it doesn't work

[mirza-osv]

I have been using react-native-deck-swiper and it is well support in ScrollView. However, the issue there is It is swiping two cards with one swipe which is bizarre.

[eyalabs]

fixed in latest ver #4

[mirza-osv]

@eyalabs I just updated the latest one but cards still getting stuck while scrolling vertically in the content even with dragY = {false} Do we have any method which can be called while onSwiping so that I can disable scrolling

[eyalabs]

Please attach a gif of the problem

[mirza-osv]

Here is the GIF link https://gifyu.com/image/ZfQC [sorry image is a bit slow but consider that as normal]

Code

<ScrollView onScroll={this.onScroll} scrollEventThrottle={32}>
                <View style={{ minHeight: 500 }}>
                    <SwipeCards
                        dragY={false}
                        cards={this.state.cards}
                        renderCard={cardData => <Card {...cardData} />}
                        renderNoMoreCards={() => <NoMoreCards />}
                        handleYup={this.handleYup}
                        handleNope={this.handleNope}
                        handleMaybe={this.handleMaybe}
                        stack={true}
                    />
                </View>
                <View>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                    <Text>test</Text>
                </View>
            </ScrollView>

[eyalabs]

I tested it with:

<ScrollView scrollEventThrottle={32}>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Cards />
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
        <Text>test</Text>
      </ScrollView>

And it works fine. And as I said before, this is bad design - there will be conflicts. Maybe your problem is with <ScrollView onScroll={this.onScroll} scrollEventThrottle={32}>.

[mirza-osv]

This definitely works fine without <ScrollView/> If my screen is long enough I will have no choice to scroll except using <ScrollView>. Can you suggest something? Basically the issue arises when you begin to scroll while swiping.

[eyalabs]

You can see from the code that I did exactly as you did, just removed onScroll={this.onScroll} from the ScrollView. Please look at my test code and the gif, both are the result of using ScrollView

[mirza-osv]

I've remove onScroll={this.onScroll} but still same response. Can you just half drag, scroll and leave your mouse you will surely notice that card get stuck

[eyalabs]

This happens only for iOS. On Android it works great. What I suggest is that you use allowGestureTermination={false} in the swipe cards. This fixes the problem for iOS.

[mirza-osv]

Thank you this have fixed the issue for me. Is there any way to reduce the sensitivity of swiping? As I scrolling (without swiping), somewhere it is touching the swiping items and slightly its moving right-left

[eyalabs]

@mirza-osv check #10 - it will be included in v3.0