react-native-insta-pagination-dots

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

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