Archriss' showcase app swipe behaviour

[grundmanise]

Hi,

Can you please share what animationFunc & animationOptions do you use in the Archriss' showcase app? The feeling of the swipe in the example app and in the Archriss' showcase app drastically differ...

[bd-arc]

@grundmanise Well, nothing but the default values. But I'm pretty sure that what you're experiencing has to do with this.

I assume you are testing on an iOS device, aren't you? Can you try setting enableMomentum to false and see if this solves the 'feeling' issue?

[bd-arc]

@grundmanise Setting the ScrollView prop decelerationRate to 'fast' will probably help too ;)

[bd-arc]

Closing as there was no feedback.
Feel free to reopen if the provided suggestions didn't fix it for you.

[prithsharma]

While enableMomentumhelps, I am still not able to achieve the 'displaying one main slide' behavior.
For example, setting enableMomentum={false} and deceleration={'fast'} would achieve moving only one slide on every scroll - but the scroll still goes far to further slides and then moves reversely to snap to only the next item.
Something like this -

If the gif is too fast, this is what is happening(according to my best guess) -
When a finger is swiped quickly, the ScrollView scrolls far enough(as it should have in the ScrollView). But then due to enableSnap, the scroll is snapped to the slide next to the starting slide(note that enableMomentum is set to false).
Ideally, the decelerationRate prop(that is supported only on iOS) should solve this by not letting the scroll move far after the finger has been lifted. But that doesn't seem to solve the issue.

What I want to do ideally is something like below -

In this, the carousel moves only one slide however fast you swipe the scroll.

[bd-arc]

@prithsharma Thank you for the screencasts and the detailed explanation. To be honest, handling momentum is really tricky since there are huge differences between Android and iOS regarding ScrollView's behavior.

The app has been published with version 1.4.0 of the plugin, before we tried to enhance momentum's handling. Would you mind trying with that version and see if that solves the issue for you? Note that you will have to use two deprecated props, items and renderItem:

    _renderItem (data, index) {
        return (
            ...
        );
    }

    render () {
        <Carousel
          items={this.state.entries}
          renderItem={this._renderItem}
          sliderWidth={sliderWidth}
          itemWidth={itemWidth}
        />
    }

[prithsharma]

Thank you for the reply.
I tried doing this -

• used version 1.4.0
• kept enableMomentum as false and decelerationRate as fast.
• refactored for using the old props, like you mentioned

With only these 2 changes on my earlier code, I didn't see any resolution of the problem quoted above. If anything, the snapping also became a little unpredictable. On a fast swipe, the scroll moving till after the next slide was still happening. Any more suggestions?

The bad thing is that I am not able to understand what is going inside and thus I almost feel dumb(:D) debugging this. @bd-arc can you help me with some pointers on what had changed since 1.4.0 that made you think that reverting to 1.4.0 could have solved this issue. If I understand better, maybe I' be able to give a better issue report and hopefully contribute.

[bd-arc]

@prithsharma Hi, I understand your need for clarification ;)

Since 1.5.0, we started using the onMomentumScrollEnd callback instead of relying solely on onScrollEndDrag. Unfortunately, momentum handling is both tricky and a bit buggy. Furthermore, its React Native implementation varies greatly between iOS and Android (see #34 for more information). That's why we're currently considering implementing our own PanResponder (#40), but this might take a while since it's not exactly a piece of cake.

What I can do for you at the moment is sharing our exact configuration for the Archriss app, which is pretty straightforward:

• version 1.4.0 of the plugin
• no enableMomentum prop (not implemented at that time)
• showsHorizontalScrollIndicator={false}
• snapOnAndroid={true}
• inactiveSlideScale={0.95}
• inactiveSlideOpacity={0.65}
• removeClippedSubviews={false}

Setting snapOnAndroid to true might be the missing part in your case, since its default value is false with version 1.4.0.

Hope that helps!

[prithsharma]

Thanks a lot! Let me try this out and get back.

[prithsharma]

Thanks a lot again for sharing this.
I tried this out and I actually realized that the weird behavior that I have specified in my first GIF is actually the behavior of the Archriss Android app too. Explaining it better than before below -
Let's say there are 4 cards/slides - A, B, C, and D. If you are one slide A and swipe very fast, the ScrollView ends up scrolling to a C or D(momentarily) and then snaps to B. Attaching a GIF of the Archriss Android app(in slow motion) showing the same behavior:-

In the GIF above, consider the card with title 'ACTUALITÉS ...' to be A, the next one(ARTICLE TYPE) to be B and the one next to B(SIGNALER) to be C. And you'd see that starting from A, when you swipe very fast - you momentarily see C and then the view snaps to B. Note that in the GIF, I have tried to reset the first card to be 'ACTUALITÉS' to maintain A, B, C positions.

Updating the GIF for ideal behavior below:- (basically, this extra scroll to slide C shouldn't happen)

[bd-arc]

@prithsharma I totally get you, and that's what we're aiming at. Unfortunately, we rely on the RN ScrollView implementation at the moment, which clearly lacks some granularity to suit our needs.

That's why we're considering implementing our own PanResponder (see #40), but this is a whole new level. I'm afraid that, for now, you won't be able to provide the "feeling" you're after.

[prithsharma]

Very well. Thank you @bd-arc for talking through this. Appreciate it.
I'll be on the lookout. Will also see if I can contribute anything.

[jasongrishkoff]

Hi @prithsharma did you get anywhere accomplishing the one-at-a-time feel you were going for? Trying to build a player similar to Spotify with album artwork in the carousel, but am also encountering this issue where a fast swipe will go from A -> D, then snap back to B.

[bd-arc]

Hi @jasongrishkoff,

I'm currently trying to hack a way around ScrollView's erratic behavior. This is far from easy, but I'll let you know if I manage to achieve something useful.

[jasongrishkoff]

Thanks @bd-arc! Ultimately just trying to force it to do one slide at a time, regardless of what sort of swipe action the user initiates.

[bd-arc]

Hi @jasongrishkoff,

I've just released version 3.2.0 which should help with your issue. Don't forget to test without enabling JS Dev Mode.

Note that there are a lot of issues at stake with how the carousel behave on Android, but it all comes down to React Native's implementation. In the near future, I'll be working on a custom scroller/PanResponder implementation in order to greatly enhance carousel's behavior and "feeling".

[jasongrishkoff]

Thanks, @bd-arc. Testing this now. Does the below config look right for forcing a 1-at-a-time config?

            <ScrollView
              style={scrollview}
              scrollEventThrottle={200}
              directionalLockEnabled={true}
              decelerationRate={'fast'}
            >
                 <Carousel
                    ref={'carousel'}
                    data={data}
                    renderItem={this.renderItem}
                    sliderWidth={sliderWidth}
                    itemWidth={itemWidth}
                    hasParallaxImages={false}
                    firstItem={index}
                    initialNumToRender={5}
                    scrollEndDragDebounceValue
                    inactiveSlideScale={0.9}
                    inactiveSlideOpacity={0.7}
                    onSnapToItem={this.next}
                    scrollEndDragDebounceValue={0}
                />
            </ScrollView>

[bd-arc]

Oh, your carousel's container is a ScrollView? I must warn you that there are countless React Native issues about nested ScrollView (which the carousel basically is). As long as this for works for you, no need to panic, but stay alert ;-)

Regarding your config, this seems legit to me. Make sure to take a look at the release notes; you'll discover that prop scrollEndDragDebouncedValue has been removed.

You'll find below the exact configuration I used for this app which has been updated yesterday and which uses version 3.2.0 of the plugin. You can try it on Android and, pretty soon, on iOS to check that the "feeling" suits you.

<Carousel
    ref={(c) => { this._carousel = c; }}
    data={this.state.entries}
    renderItem={this._renderItem}
    sliderWidth={SLIDER_WIDTH}
    itemWidth={ITEM_WIDTH}
    hasParallaxImages={true}
    apparitionDelay={500}
    slideStyle={styles.slide}
    inactiveSlideScale={isIOS ? 0.96 : 0.92}
    inactiveSlideOpacity={0.65}
    autoplay={true}
    autoplayDelay={500}
    autoplayInterval={3000}
    enableMomentum={false}
    decelerationRate={'fast'}
    removeClippedSubviews={false}
/>

[bd-arc]

One final piece of advice: on Android, make sure to test carousel's performance and behavior without JS Dev Mode enabled, and ideally with a production build.

[jasongrishkoff]

Wow, didn't realize I didn't need ScrollView -- I think I pulled that from the example file. Going to use the settings you have above, without ScrollView :)

And totally understand re: production testing on Android.

Thanks for your help! I'll let you know if anything looks wonky.

[bd-arc]

@jasongrishkoff You're right: I forgot that I've used a top-level ScrollView in the example... Well, apparently it can work ;-)

By the way, I've just released version 3.2.1 which fixes an issue introduced in 3.2.0.

[jasongrishkoff]

Thanks :)

[sridhard]

@prithsharma @bd-arc @jasongrishkoff any update on this issue..how this issue can be resolved. I am facing the same issue

[jariwalabhavesh]

@bd-arc
I am facing same issue with in my app. Here is my env details

react-native: 0.49.0,
react: 16.0.0-beta.5
react-native-snap-carousel: 3.7.2

Here my code

 <Carousel
        data={Enteries}
        renderItem={({ item, index }) => <SliderEntry data={item}  />}
        sliderWidth={sliderWidth}
        itemWidth={itemWidth}
        contentContainerCustomStyle={styles.sliderContentContainer}
        onSnapToItem={activeSlide}
        layout={'stack'}
        loop={false}
        hasParallaxImages={true}
        directionalLockEnabled={true}
        scrollEventThrottle={200}
        enableMomentum={false}
        apparitionDelay={500}
        decelerationRate={'fast'}
        removeClippedSubviews={false}
        scrollEndDragDebounceValue={500}
      />

Still we have issue regarding swiping more then one cards