{"id":15371,"library":"react-native-animated-pagination-dot","title":"React Native Animated Pagination Dot","description":"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.","status":"maintenance","version":"0.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/Soomgo-Mobile/react-native-animated-pagination-dot","tags":["javascript","pagination","dot","react-native","instagram","scroll","scrollable","page","paginate","typescript"],"install":[{"cmd":"npm install react-native-animated-pagination-dot","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-animated-pagination-dot","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-animated-pagination-dot","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for React Native components.","package":"react","optional":false},{"reason":"Core framework for the component's UI and animation primitives.","package":"react-native","optional":false}],"imports":[{"note":"The library primarily uses a default export for the main component. It ships with TypeScript types for better development experience.","wrong":"const PaginationDot = require('react-native-animated-pagination-dot')","symbol":"PaginationDot","correct":"import PaginationDot from 'react-native-animated-pagination-dot'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport PaginationDot from 'react-native-animated-pagination-dot';\n\nconst ExampleDotPaginate: React.FC = () => {\n    const [curPage, setCurPage] = useState(0);\n    const maxPages = 5; // Simulate 5 pages\n\n    // In a real application, curPage would likely be tied to a FlatList's onScroll event\n    // or a carousel's active index.\n    // For demonstration, we'll increment it on a timer or a button press.\n\n    React.useEffect(() => {\n        const interval = setInterval(() => {\n            setCurPage(prevPage => (prevPage + 1) % maxPages);\n        }, 2000); // Change page every 2 seconds\n        return () => clearInterval(interval);\n    }, [maxPages]);\n\n    return (\n        <View style={styles.container}>\n            <PaginationDot\n                activeDotColor={'#1da1f2'} // Twitter blue\n                inactiveDotColor={'#cccccc'}\n                curPage={curPage}\n                maxPage={maxPages}\n                sizeRatio={1.2}\n                vertical={false} // Default, explicitly set for clarity\n            />\n        </View>\n    );\n};\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        justifyContent: 'center',\n        alignItems: 'center',\n        backgroundColor: '#f0f0f0',\n    },\n});\n\nexport default ExampleDotPaginate;","lang":"typescript","description":"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."},"warnings":[{"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).","message":"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.","severity":"breaking","affected_versions":">=0.1.7"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.4.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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} />`.","cause":"The `curPage` or `maxPage` props are marked as required but were not provided to the `PaginationDot` component.","error":"Property 'curPage' is missing in type '{}' but required in type 'Props'."},{"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.","cause":"Attempting to use the deprecated `containerWidth` prop in versions 0.1.7 or newer, where it has been removed or replaced.","error":"Property 'containerWidth' does not exist on type 'IntrinsicAttributes & Props'."}],"ecosystem":"npm"}