leecade / leecade/react-native-swiper

Hide dots and pagination

Open
#709 10 comments 0 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

Version

  • react-native-swiper v1.5.13
  • react-native: 0.50.3

Problem

I have 4 Views inside a Swiper component and showing 4 Dot, one Dot for each View.

I would like to keep 4 Views, but only show 3 Dot. 4th View should not be a visible element of the Pagination but should still be part of the Swiper component. Pagination should be hidden on the 4th View as well.

Example

4 Views but only 3 Dot

1st View

Pagination is visible and has 3 Dots.

  • 1st Dot is active.
  • 2nd Dot is inactive.
  • 3rd Dot is inactive.
  • 4th Dot is not visible.

2nd View

Pagination is visible and has 3 Dots.

  • 1st Dot is inactive.
  • 2nd Dot is active.
  • 3rd Dot is inactive.
  • 4th Dot is not visible.

3rd View

Pagination is visible and has 3 Dots.

  • 1st Dot is inactive.
  • 2nd Dot is inactive.
  • 3rd Dot is active.
  • 4th Dot is not visible.

4th View

Pagination is not visible.

  • 1st Dot is inactive.
  • 2nd Dot is inactive.
  • 3rd Dot is inactive.
  • 4th Dot is not visible.

Research

It seems like this number is responsible for the number of visible Dot components. Here it is being used to build the Dot components.

Summary

Is there any better approach to achieve what i'm asking for without touching these lines?

Maybe a hidden feature i'm missing to hide / remove Dots and Pagination for a given View index?

Contributor guide

No contributing guide indexed for this repository

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 in src/index.js around the referenced lines: inspect how the pagination count is determined near line 225 and how Dot components are built near line 547. Define how a view index can hide pagination and how the remaining dots should behave, then verify the four-view example matches the requested visibility and active-state behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.