React Native Animated Pagination Dot

0.4.0 · maintenance · verified Tue Apr 21

This package provides an animated pagination dot component for React Native applications, designed to visually indicate the current page in a scrollable view or carousel with a distinct moving animation. It primarily offers a simple, customizable solution for pagination with smooth transitions between active dots. The current stable version is 0.4.0, last updated in September 2022. While development activity has been infrequent since its last major update, the library is stable and functional for its intended purpose. It differentiates itself from static pagination components through its built-in dot animation logic.

Common errors

```
Property 'curPage' is missing in type '{}' but required in type 'Props'.
```
cause The `curPage` or `maxPage` props are marked as required but were not provided to the `PaginationDot` component.

fix Ensure both `curPage` (current page index) and `maxPage` (total number of pages) are passed as `number` props to `PaginationDot`. For example: `<PaginationDot curPage={0} maxPage={5} />`.
```
Property 'containerWidth' does not exist on type 'IntrinsicAttributes & Props'.
```
cause Attempting to use the deprecated `containerWidth` prop in versions 0.1.7 or newer, where it has been removed or replaced.

fix Replace `containerWidth` with the `sizeRatio` prop. For instance, instead of `containerWidth={10}`, use `sizeRatio={1.5}` to adjust dot size. The default `sizeRatio` is 1.0.

Warnings

breaking The `containerWidth` prop was deprecated in version 0.1.7 and replaced by `sizeRatio`. Using `containerWidth` in versions 0.1.7 and newer will not have the intended effect and may result in build or runtime errors.
Fix: Migrate to using the `sizeRatio` prop to control the size of the dots. `sizeRatio` customizes the dot size, with a minimum value of 1.0 (recommended range 1.0 ~ 2.0).
gotcha The package has not received significant updates since September 2022. This lack of recent maintenance could lead to compatibility issues with newer versions of React Native or potential vulnerabilities, though none are currently reported. Users should test thoroughly with their target React Native versions.
Fix: Thoroughly test the component across target React Native versions. Consider contributing to the project or forking it if specific compatibility fixes or new features are required for modern RN environments.

Install

npm install react-native-animated-pagination-dot npm
yarn add react-native-animated-pagination-dot yarn
pnpm add react-native-animated-pagination-dot pnpm

Imports

PaginationDot
wrong:
```
const PaginationDot = require('react-native-animated-pagination-dot')
```
correct:
```
import PaginationDot from 'react-native-animated-pagination-dot'
```
The library primarily uses a default export for the main component. It ships with TypeScript types for better development experience.

Quickstart

Demonstrates a basic implementation of `PaginationDot` in a React Native component. It shows how to import the component, set required props like `curPage` and `maxPage`, and customize colors. A `useState` hook manages the current page index, which automatically cycles for illustrative purposes.

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import PaginationDot from 'react-native-animated-pagination-dot';

const ExampleDotPaginate: React.FC = () => {
    const [curPage, setCurPage] = useState(0);
    const maxPages = 5; // Simulate 5 pages

    // In a real application, curPage would likely be tied to a FlatList's onScroll event
    // or a carousel's active index.
    // For demonstration, we'll increment it on a timer or a button press.

    React.useEffect(() => {
        const interval = setInterval(() => {
            setCurPage(prevPage => (prevPage + 1) % maxPages);
        }, 2000); // Change page every 2 seconds
        return () => clearInterval(interval);
    }, [maxPages]);

    return (
        <View style={styles.container}>
            <PaginationDot
                activeDotColor={'#1da1f2'} // Twitter blue
                inactiveDotColor={'#cccccc'}
                curPage={curPage}
                maxPage={maxPages}
                sizeRatio={1.2}
                vertical={false} // Default, explicitly set for clarity
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f0f0f0',
    },
});

export default ExampleDotPaginate;

view raw JSON →