meliorence / meliorence/react-native-snap-carousel

Pagination component does not render with a dotsLength < 2

Open
#508 5 comments 4 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?

Bug report

Have you followed the required steps before opening a 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
  1. Install the library.
  2. Take the pagination example code (https://github.com/archriss/react-native-snap-carousel/blob/master/doc/PAGINATION.md)
  3. Change the dotsLength to 1 as above.

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.