react-native-insta-pagination-dots

react-native-insta-pagination-dots JS library on GitHub react-native-insta-pagination-dots JS library on npm Download react-native-insta-pagination-dots JS library

Instagram like carousel pagination dots with React Native

Version 1.0.5 License ISC
react-native-insta-pagination-dots has no homepage
react-native-insta-pagination-dots JS library on GitHub
react-native-insta-pagination-dots JS library on npm
Download react-native-insta-pagination-dots JS library
Keywords
react-nativecarousel-paginationdot-paginationinatagram-like-paginationinsta-dotsinsta-carousel-pagination
<script type="module"> import reactNativeInstaPaginationDots from 'https://cdn.jsdelivr.net/npm/react-native-insta-pagination-dots@1.0.5/+esm' </script>
Learn more

react-native-insta-pagination-dots

Instagram Like dot pagination component for React Native

Installation

Installation can be done through npm:

npm

npm i react-native-insta-pagination-dots

yarn

yarn add react-native-insta-pagination-dots

Usage

You can easily add to your project.
just import component and set current page index and max page index.

import React from 'react'
import {View} from 'react-native'
import PaginationDot from 'react-native-insta-pagination-dots'

const ExampleDotPaginate:React.FC = ()=>{
    const [curPage] = React.useState(0);
    
    return (
        <PaginationDot
            activeDotColor={'black'}
            curPage={curPage}
            maxPage={20}
        />
    )
}

export default ExampleDotPaginate;

Example

Pagination Dot Demo

API

Props

Prop Type Required(Default Value) Description
curPage number required Pagination curernt Page
maxPage number required Total Page in Pagination
activeDotColor string required Active Dot Color. dot will control by opacity
inactiveDotColor string undefined InActive Dot Color. dot will control by opacity
sizeRatio number 1.0 Customize Dot Size. minimum value is 1.0 (recommend 1.0 ~ 2.0)
vertical boolean false Dot direction

Contributing

License

MIT.

Author

shubh