React-native-insta-pagination-dots NPM

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