react-native-animated-pagination-dot

simple pagination dot

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedPaginationDot from 'https://cdn.skypack.dev/react-native-animated-pagination-dot';
</script>

README

react-native-animated-pagination-dot

Paginate component for React native simple dot with moving animation


download"> npm version stars

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

Pagination Dot Demo

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
sizeRatio number 0.1 Customize Dot Size. minimum value is 1.0 (recommend 1.0 ~ 2.0)
vertical boolean false Dot direction

License

MIT.

Author

rouge