https://github.com/yasaricli/react-native-dots-pagination

A simple dot paging for React Native.
https://github.com/yasaricli/react-native-dots-pagination

dots pagination react react-native

Last synced: about 1 month ago
JSON representation

A simple dot paging for React Native.

• Host: GitHub
• URL: https://github.com/yasaricli/react-native-dots-pagination
• Owner: yasaricli
• License: mit
• Created: 2019-08-03T16:21:18.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-09-09T06:31:06.000Z (over 1 year ago)
• Last Synced: 2024-08-03T11:01:28.238Z (6 months ago)
• Topics: dots, pagination, react, react-native
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-native-dots-pagination
• Size: 4.76 MB
• Stars: 136
• Watchers: 7
• Forks: 36
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: History.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-dots-pagination ★3 - A simple dot paging for React Native. (Components / UI)

README

        
# react-native-dots-pagination

Paging as dots for react-native.



  



  - [Quickstart](#quickstart)

  - [Using](#using)

- [Props](#props)

- [Issues](#issues)

## Quickstart

    yarn add react-native-dots-pagination

    

## Using

```JS

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 (

      

    )

  }

}

```

# 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](https://github.com/tsepeti/react-native-dots-pagination/issues) are used to track todos, bugs, feature requests, and more.