react-native-animated-pagination-dot

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;