[FEATURE REQUEST] Add simple pagination dot components.

[dohooo]

The pagination dot styles are very various, So I'll implement a simple one, Just like

Features

• Change styles.
  • active color
  • inactive color
• Control the progress via reanimated values.

Hmmm, Any other features you want?

[dohooo]

https://github.com/dohooo/react-native-reanimated-carousel/issues/264#issuecomment-1247689044

[jacksonHendric]

Click the dot to move to a new slide would be great. If you can drag on the dots to move (Google like) then you're a legend!

[DenisKhatsuk]

A looped pagination element with the ability to set the amount of visible dots would be a killer feature.

Description: let's say we have a large deck of slides, a 1000 for instance. We don't want to display 1000 dots for obvious reasons. For such cases pagination with 5 dots would be enough, but they should be animated to reflect swiping back and forth, not to reflect actual slide index. So we won't get a jump back when we go from slide index 1000 to slide index 0 and vice versa.

I tried to managed any solution on my own, but no luck. It would be great to have such feature.

[dohooo]

A looped pagination element with the ability to set the amount of visible dots would be a killer feature.

Description: let's say we have a large deck of slides, a 1000 for instance. We don't want to display 1000 dots for obvious reasons. For such cases pagination with 5 dots would be enough, but they should be animated to reflect swiping back and forth, not to reflect actual slide index. So we won't get a jump back when we go from slide index 1000 to slide index 0 and vice versa.

I tried to managed any solution on my own, but no luck. It would be great to have such feature.

Ahh, You can use another carousel component with looped to play the pagination dot component, It will animated to next item when sweeping.

[DenisKhatsuk]

Ahh, You can use another carousel component with looped to play the pagination dot component, It will animated to next item when sweeping.

Wow, I haven't thought about such possibility :-) But I still miss how can I connect progress of my main carousel to the progress of the pagination. I can do it through the refs, but in this case pagination will react with the delay. Do you have any solution in your mind?

[dohooo]

Ahh, You can use another carousel component with looped to play the pagination dot component, It will animated to next item when sweeping.

Wow, I haven't thought about such possibility :-) But I still miss how can I connect progress of my main carousel to the progress of the pagination. I can do it through the refs, but in this case pagination will react with the delay. Do you have any solution in your mind?

Maybe I'll try it on this weekend.💡

[DenisKhatsuk]

Ahh, You can use another carousel component with looped to play the pagination dot component, It will animated to next item when sweeping.

Wow, I haven't thought about such possibility :-) But I still miss how can I connect progress of my main carousel to the progress of the pagination. I can do it through the refs, but in this case pagination will react with the delay. Do you have any solution in your mind?

Maybe I'll try it on this weekend.💡

Hey, Dohooo! Any chance you've took a look at the infinite pagination component? Not to steal your weekends, just curious to see what may be the solution 😇

[tomasmozeris]

https://github.com/yasaricli/react-native-dots-pagination Does decent job on X slides in carousel. Using onProgressChange can detect then slide is already 50%+ past scroll to change the index of dot

[thaycacac]

@dohooo are you releasing this feature?

[nassim-yagoub]

Hey ! I can work on a simple pagination component with a few style customization props, something like that:

<Pagination
     dotsLength
     activeDotIndex
     containerStyle
     activeDotStyle
     inactiveDotStyle
 />

I think it would be nice to get the Pagination from this lib since it's common to have it in carousels, would this fit @dohooo ?

[810505339]

There are only four imgs

i try use press-swipe add agination , but current index It doesn't seem right

[DavidDolyak]

+1

[bpeck81]

Use this https://github.com/felire/react-native-animated-dots-carousel

[dohooo]

Use this https://github.com/felire/react-native-animated-dots-carousel

I'll implement a new one and integrate it into RNRC tomorrow maybe.

[damjanvucina]

@dohooo any updates on this one? Many thanks

[mleister97]

Hmmm, Any other features you want?

• active color
• inactive color
• size
• gap between the dots
• maybe also the position of the component if you do not expose a seperate component for that

In my case I want to display the following:

I'm looking forward to a simple dot pagination component. Many thanks!

[tomasmozeris]

@dohooo May I please have a response? Is it possible for you to expose the current index, so that one could build a Dot Navigation component oneself?

https://github.com/dohooo/react-native-reanimated-carousel/blob/29425ee93a629e1b2dd2ab54470e885577c0cd8f/src/types.ts#L195C3-L195C19

[mleister97]

https://github.com/yasaricli/react-native-dots-pagination Does decent job on X slides in carousel. Using onProgressChange can detect then slide is already 50%+ past scroll to change the index of dot

@tomasmozeris Could you show how you connected these two components? Unfortunately, my solution is very laggy, and I suspect it's because onProgressChange is called too often, and I'm not using an animated value. It would be really helpful for me, thanks!

const [activeCarouselIndex, setActiveCarouselIndex] = useState(0)

 <Carousel
  ...
  onProgressChange={(_, progress) => {
    setActiveCarouselIndex(Math.ceil(progress))
  }}
/>

<Dots
  ...
  active={activeCarouselIndex}
/>

[tomasmozeris]

@tomasmozeris Could you show how you connected these two components? ....

I'm doing the same thing, are you testing in production mode?

[dosubot[bot]]

🤖

That sounds like a fantastic addition to the react-native-reanimated-carousel! Your proposed features would definitely enhance the usability and flexibility of the carousel component.

I encourage you to go ahead and start working on implementing these features. It's great to see your enthusiasm and willingness to contribute to the project. If you have any questions or need guidance while working on the implementation, feel free to reach out to the maintainers or the community for support.

Good luck with your work, and I look forward to seeing your contributions to the project!

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[isaachinman]

So, this issue has been open for a year and a half. Are there pagination dots out of the box, or not?

Edit:

Was able to create something simple quite easily:

export const ImageCarousel: React.FC<Props> = memo(({ images }) => {
  const [activeSlide, setActiveSlide] = useState(0)
  const totalSlides = images.length

  return (
    <>
      <Carousel
        onProgressChange={(_, slideProgress) => {
          if (slideProgress % 1 === 0) {
            setActiveSlide(slideProgress)
          }
        }}
        data={images}
        renderItem={({ item: image }) => (
          // Component
        )}
      />
      <Flex>
        {Array.from({ length: totalSlides }).map((_, index) => (
          <Flex
            key={`pagination-${index}`}
            backgroundColor={index === activeSlide ? 'text' : 'textHint'}
            borderRadius='circle'
          />
        ))}
      </Flex>
    </>
  )
})

[KrishnaSwaroopa]

So, this issue has been open for a year and a half. Are there pagination dots out of the box, or not?

Edit:

Was able to create something simple quite easily:

export const ImageCarousel: React.FC<Props> = memo(({ images }) => {
  const [activeSlide, setActiveSlide] = useState(0)
  const totalSlides = images.length

  return (
    <>
      <Carousel
        onProgressChange={(_, slideProgress) => {
          if (slideProgress % 1 === 0) {
            setActiveSlide(slideProgress)
          }
        }}
        data={images}
        renderItem={({ item: image }) => (
          // Component
        )}
      />
      <Flex>
        {Array.from({ length: totalSlides }).map((_, index) => (
          <Flex
            key={`pagination-${index}`}
            backgroundColor={index === activeSlide ? 'text' : 'textHint'}
            borderRadius='circle'
          />
        ))}
      </Flex>
    </>
  )
})

How to import Flex here in this code?

[dohooo]

See this example for more details: https://reanimated-carousel.dev/usage

[smspasha]

import Carousel, { ICarouselInstance, Pagination } from 'react-native-reanimated-carousel';

gives this Module '"react-native-reanimated-carousel"' has no exported member 'Pagination'.

using version 3.5.1

[Joro-Popov]

import Carousel, { ICarouselInstance, Pagination } from 'react-native-reanimated-carousel';

gives this Module '"react-native-reanimated-carousel"' has no exported member 'Pagination'.

using version 3.5.1

Same here

[pepew-le-boss]

same here

[leomonzonspaceguru]

same here

[carter-0]

same here

[carter-0]

import Carousel, { ICarouselInstance, Pagination } from 'react-native-reanimated-carousel';

gives this Module '"react-native-reanimated-carousel"' has no exported member 'Pagination'.

using version 3.5.1

Looks like it hasn't been pushed to npm yet, you can install it from git as a workaround. for example in package.json:

"react-native-reanimated-carousel": "dohooo/react-native-reanimated-carousel"

Or to pin to a specific commit like dede5eb:

"react-native-reanimated-carousel": "dohooo/react-native-reanimated-carousel#dede5eb"

[KirubaGhoshak]

@carter-0 use [email protected] version