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}
                    sizeRatio={1.0}
                />
            
            </View>
        )
    }
}

export default ExampleDotPaginate;

---

Example

---

API

Props

Prop	Type	Description
curPage	number	Pagination curernt Page
maxPage	number	Total Page in Pagination
activeDotColor	string	Active Dot Color. dot will control by opacity
sizeRatio	number(default. 1.0)	Customize Dot Size. minimum value is 1.0 (recommend value is 1.0 ~ 2.0)

License

MIT.

Author

rouge