meliorence / meliorence/react-native-snap-carousel
Customizing Behaviour for Items In Infinite Loop and Auto Scroll
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)

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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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