yasaricli / react-native-dots-pagination

A simple dot paging for React Native.

react-native-dots-pagination

Paging as dots for react-native.

• Quickstart
• Using
• Props
• Issues

Quickstart

yarn add react-native-dots-pagination

Using

import React, { Component } from 'react';
import Dots from 'react-native-dots-pagination';


class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 0
    }
  }
  
  render() {
    return (
      <Dots length={10} active={this.state.active} />
    )
  }
}

Props

Name	Default value	Description
length	10	Required. The amount of dots you want to use.
active	1	Required. The index of the currently active dot.
width	300	The overall width works like a center.
paddingVertical	10	Average Vertical padding.
paddingHorizontal	10	Average Horizontal padding.
passiveDotWidth	10	(Width, Height) for passive dot.
activeDotWidth	15	(Width, Height) for active dot.
passiveDotHeight	10	Height for passive dot.
activeDotHeight	15	Height for active dot.
passiveColor	#CCCCCC	Colors for passive dots.
activeColor	#016bd8	Colors for active dots.
marginHorizontal	2	To adjust Margin Horizontal
onScrollTo	function	Trigger when scrolls and index changes

Issues

Github Issues are used to track todos, bugs, feature requests, and more.

react-native-dots-pagination's Issues

[Suggestion] Style Prop

For custom styling.

I want to have position: 'absolute' so i can place it wherever i want

declaration file for expo

Hi,

Thanks for the grateful plugin.

I'm new for React Native Expo, may I know how to solve this error message:
"Could not find a declaration file for module 'react-native-dots-pagination'. 'd:/expo/hkslbrowser/node_modules/react-native-dots-pagination/index.js' implicitly has an 'any' type."

Thanks a lot.

Document: marginHorizontal

First, thanks for sharing this control.

An improvement that would allow me to match the design of the pager on iOS, would be to allow to specify the spacing between dots.

Problem sliding to next dots.

Hello there, yesterday I found your module and I implemented it in our app. But here is the problem.
I have around 70 items and for some reason when I scroll to the 8th item suddenly the scrollView does not scroll right and instead of that it actually vanishes and then I have to do few scrolls to make the scrollView scroll to the item again. Do you have any idea what could be the cause of it ?

I recorded how it look when it happens. Please help me guys :D I am really lost here.
https://streamable.com/3ulyyq

Example Application

it is necessary to try and see some examples.

Accessibility props not passed through

Many approaches to creating an accessible carousel require making the dots accessible and clickable. This is messier than it needs to be currently, because the <Dots> component does not accept/pass-through accessibility props, so doing so requires adding an extra wrapping <View>.

I've opened a PR to fix this issue - #21.

There is an option to decide the side of to dot? ltr/rtl?

There is an option to decide the side of to dot? ltr/rtl?

Dots don't scroll to the active one on render.

Replicate
Expected Behavior:
The pagination dots container within our app's AppCarousel component should scroll to the active item when the component renders, ensuring that the active item is visible within the dots container.

Actual Behavior:
The dots container does not scroll to the active item on render if it is further than the visible dots, requiring a manual swipe to trigger the scroll animation.

Additional Information:

This issue affects the user experience within our app, as it does not provide a clear indication of the current active item.
The issue can be reproduced consistently when the active item is set before rendering.

Environment:

React Native

Bug for activeHeight < 15 and length = 2

Hi,

When length is set to 2 (width,height=15), then the right dot is clipped, as shown in the image.

Setting width, height to match the default for non-active (width,height=10), makes the dot offset in the Y.

What license is this project using? MIT?

In order to submit apps to the F-Droid store, we need to provide the license for all libraries we're using. Can you please add a license to this repo?

componentWillReceiveProps is not recommended for use.

When using Dots in a react-native app, the following warning now display:
YellowBox.js:71 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

This could be changed to use componentDidUpdate() instead and still have the desired effects.

Missing prop 'alignDotsOnXAxis' on documentation

I have seen this prop and its use is really helpful. It saved me a lot of time!

Could you add it on the docs?

Cannot find variable styles

After installing in my react native application, I keep getting an error saying cannot find variable styles. I made a fix for it though