floydkim/react-native-animated-pagination-dot

react-native simple animated pagination dot

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