Skip to content

floydkim/react-native-animated-pagination-dot

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-animated-pagination-dot

Paginate component for React native simple dot with moving animation


download npm version

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

Pagination Dot Demo


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

About

react-native simple animated pagination dot

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%