Pagination component does not render with a dotsLength < 2

[RemyLivewall]

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

Bug report

Have you followed the required steps before opening a bug report?

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] 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

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.

[RemyLivewall]

As I mentioned in the issue I found this behavior in the code. I understand that pagination does nothing with a single page, but that doesn't mean I don't want to have the option to show it for a single page.

[mtahir08]

Any solution?

[RemyLivewall]

Any solution?

Forking the library and changing the line is an option. In the application where we use the component it's not an issue so we haven't fixed it on our end.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[luchozamora]

Here's a quick workaround

<Pagination
   ...
   dotsLength={data.length > 1 ? data.length : 3}
   activeDotIndex={data.length > 1 ? activeDot : 1}
   inactiveDotOpacity={data.length > 1 ? 0.5 : 0}
/>

You basically render three dots, set the middle one as active, and set the opacity of the rest to 0. Hope this helps