meliorence / meliorence/react-native-snap-carousel
How to I prevent scrolling when using full-screen slide?
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?
Bug report
Have you followed the required steps before opening a bug report?
(Check the step you've followed - put an x character between the square brackets ([]).)
- I have read the guidelines regarding bug report.
- I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
- I have searched for existing issues and made sure that the problem hasn't already been reported.
- I am using the latest plugin version.
- I am following the issue template closely in order to produce a useful bug report.
Have you made sure that it wasn't a React Native bug?
yes
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
iOS
Is the bug reproductible in a production environment (not a debug one)?
yes
Environment
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-snap-carousel": "^3.9.1",
Expected Behavior
I used full screen slide as below:
return (
<Carousel
lockScrollWhileSnapping={true}
ref={c => { this._carousel = c }}
sliderHeight={viewportHeight}
itemHeight={viewportHeight}
slideStyle={{ height: viewportHeight }}
data={videos}
vertical={true}
loop={true}
windowSize={30}
swipeThreshold={10}
enableSnap={true}
inactiveSlideScale={1}
renderItem={({ item, index }) => (
<VideoItem link={item.videoLink} paused={index !== currentItem} navigation={navigation}/>
)}
showsVerticalScrollIndicator={false}
onViewableItemsChanged={_onViewableItemsChanged}
viewabilityConfig={{viewAreaCoveragePercentThreshold: 90}}
pagingEnabled={true}
keyExtractor={(item, index) => index.toString()}
/>
);
When click the screen, the slide should not move
Actual Behavior
When click the screen, the slide will shift and stop as if the slide is slided off ~20% of the viewport.
Reproducible Demo
(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)
Steps to Reproduce
(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)
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
Start with the Carousel configuration in the issue and compare its full-screen vertical setup with the README and the linked known-issues documentation. There is no reproducible demo, completed reproduction sequence, source file, or test named, so first establish a minimal reproduction for the iOS click-induced shift. Done means clicking the screen no longer moves or partially shifts the slide.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100