react-native-app-intro-slider icon indicating copy to clipboard operation
react-native-app-intro-slider copied to clipboard

How to hide pagination dots

Open binhchili opened this issue 4 years ago • 5 comments

I have lots of screen and I want to hide pagination dots at the bottom because it renders too many dots . How can I hide them ?

binhchili avatar Dec 02 '20 05:12 binhchili

@binhchili - As mentioned in the releases: paginationStyle and hidePagination props have been removed and a new renderPagination-function takes their place. To disable any pagination/buttons/everything give it a function that returns null.

sasindroid avatar Jan 04 '21 15:01 sasindroid

This is how I managed to remove them

 <AppIntroSlider
           ...
          renderPagination={() => null}
 />

PatrickNiyogitare28 avatar Jul 31 '21 22:07 PatrickNiyogitare28

render pagnation removed my slides
how to fix it

BharathiNB avatar Nov 03 '21 05:11 BharathiNB

i want to hide these dots on last page how i can hide it

ambrishshukla001 avatar Apr 23 '23 21:04 ambrishshukla001

If renderPagination is set to null, the next button, etc. will also disappear. In my case, I wanted to remove the dots while keeping the buttons, so I'll share how I did it.

<AppIntroSlider
	...
        dotStyle={{
          display: "none",
        }}
      />

Or you could do it by making renderPagination a custom button as shown in this issue.

If you want to remove the dot on the last slide, I think you can get the index with onSlideChange and render the custom button set in renderPagination with a conditional branch.

I don't know, I haven't actually done this 😅.

ryuji-orca avatar Oct 10 '23 00:10 ryuji-orca