meliorence / meliorence/react-native-snap-carousel
Pagination component does not render with a dotsLength < 2
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?
- 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?
This is not a React Native bug and specific to this library.
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
The issue can be reproduced on both platforms for any version supported by the library.
Is the bug reproductible in a production environment (not a debug one)?
The bug is always reproducible.
Environment
Environment:
React: 16.9.0
React native: 0.61.5
react-native-snap-carousel: 3.8.4 (also master)
Target Platform:
Android (6.0)
iOS (10.0)
Expected Behavior
I expect the pagination component to render itself if I pass a value of 1 or higher to the dotsLength prop.
Actual Behavior
I noticed that my pagination component suddenly wasn't rendering after changing the number of items that I wanted the pagination component to show for.
After checking the code for the pagination component on master I found out that it does not render if the dotsLength passed is falsey or less than 2 (https://github.com/archriss/react-native-snap-carousel/blob/master/src/pagination/Pagination.js#L145).
Reproducible Demo
<Pagination
dotsLength={1}
activeDotIndex={0}
containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.75)' }}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 8,
backgroundColor: 'rgba(255, 255, 255, 0.92)'
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
Steps to Reproduce
- Install the library.
- Take the pagination example code (https://github.com/archriss/react-native-snap-carousel/blob/master/doc/PAGINATION.md)
- Change the dotsLength to 1 as above.
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 src/pagination/Pagination.js at the linked check around line 145, then reproduce the issue using the pagination example in doc/PAGINATION.md with dotsLength set to 1. Done means the Pagination component renders for dotsLength values of 1 or higher on both platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100