meliorence / meliorence/react-native-snap-carousel

Customizing Behaviour for Items In Infinite Loop and Auto Scroll

Open
#533 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

Is this a bug report, a feature request, or a question?

Question

Details

Hello folks, I'm developing an android application and have successfully implemented "react-native-snap-carousel" in my app. Please see the GIF on Actual Behavior, to quickly grasp what I have achieved so far.

You guys will notice that in that carousal shifting is happening for one complete item, e.g. Item at left goes out completely and next item came from right which is not our requirement. We want shifting in small steps e.g. maybe I can give some x step size which will move my carousal left for that step size within delay.

I also know that for my case react-native-snap-carousal is using Flastlist of React Native in background which has a method scrollToOffset https://facebook.github.io/react-native/docs/flatlist#scrolltooffset but I couldn't figure out how I can use this method here.

Environment

Environment:
React: 16.8.3
React native: 0.59.5
react-native-snap-carousel: 3.7.5

Target Platform:
Android (8.1)
Android TV (already running successfully on Mi Box S and TCL 49" TV)

Expected Behavior

I just want my carousal to move with some defined step size instead of moving item by item. Though, I went through the documentation few times but couldn't get a clue of which property will be helpful for me here, I hope I haven't asked something really obvious.

Actual Behavior

I have achieved this so far, (though this looks good but we need to bring up next items slowly and gradually)
gitissuecast

Reproducible Demo

Here's my code specific to "react-native-snap-carousel"

`<Carousel
layout={'default'}
ref={(c) => { this._carousel = c; }}
data={this.state.careTeam}
renderItem={this._renderItemWithParallax}
sliderWidth={(this.props.width - 20)}
itemWidth={(this.props.width / 5)}
inactiveSlideScale={1}
inactiveSlideOpacity={1}

      loop={true}
      loopClonesPerSide={this.state.careTeamSize}
      enableMomentum={true}
      activeSlideAlignment={'center'}
      activeAnimationType={'spring'}
      activeAnimationOptions={{
      friction: 4,
      tension: 40
      }}
      hasParallaxImages={true}
      autoplay={true}
      autoplayDelay={500}
      autoplayInterval={2500}
    />

`

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The behavior is configured through the Carousel props shown in the reproduction, especially loop, autoplay, autoplayDelay, autoplayInterval, and enableMomentum; compare these with the underlying FlatList scrollToOffset behavior. Confirm whether a supported step-size setting exists and verify the result on the stated React Native and Android environment; done means the requested gradual movement is reproducibly configurable or the limitation is documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, javascript, react-native
Domain
mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
15/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.