react-native-animated-pagination-dot

Paginate component for React native simple dot with moving animation

Installation

Installation can be done through npm:

npm i react-native-animated-pagination-dot --save

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-animated-pagination-dot'

class ExampleDotPaginate extends React.Component {
    state={
        currentPage :0,
        maxPage:20,
    };
    
    render(){
        const {currentPage, maxPage} = this.state;
        const color = 'black';
        
        return (
            <View style={{flex:1,}}>
                <PaginationDot 
                    activeDotColor={color} 
                    curPage={currentPage} 
                    maxPage={maxPage}
                />
            
            </View>
        )
    }
}

export default ExampleDotPaginate;

Example

API

Props

Prop	Type	Description
`containerWidth`	`number`	Pagination Dot Container Width ( default 84 ).
`curPage`	`number`	Pagination curernt Page
`maxPage`	`number`	Total Page in Pagination
`activeDotColor`	`string`	Active Dot Color. dot will control by opacity

License

MIT.

Author

rouge

lecramfriedrich/react-native-animated-pagination-dot