Masked Pagination

Description

A reusable and animated pagination component for React Native, perfect for carousels, onboarding flows, or step indicators. This component leverages `moti` for smooth animations and `MaskedView` to elegantly reveal the active indicator beneath the dots. Built with TypeScript, it offers a flexible and well-typed API: * `dots`: Total number of dots * `activeIndex`: Index of the currently active dot * `colors`: Customize the indicator and dot container colors * `dotSize`: Size of each dot and the indicator * `spacing`: Space between dots * `duration`: Duration of the animation transition

Installation

bunx @animatereactnative/cli@latest add masked-pagination

npx @animatereactnative/cli@latest add masked-pagination

yarn @animatereactnative/cli@latest add masked-pagination

pnpm dlx @animatereactnative/cli@latest add masked-pagination

Preview

Dependencies

PackageVersion
@react-native-masked-view/masked-view0.3.2
moti^0.29.0
nice-color-palettes^4.0.0
react-native-reanimated~4.1.0

To install these dependencies, you can use the following command:

bun add @react-native-masked-view/masked-view@"0.3.2" moti@"^0.29.0" nice-color-palettes@"^4.0.0" react-native-reanimated@"~4.1.0"

npm install @react-native-masked-view/masked-view@"0.3.2" moti@"^0.29.0" nice-color-palettes@"^4.0.0" react-native-reanimated@"~4.1.0"

yarn install @react-native-masked-view/masked-view@"0.3.2" moti@"^0.29.0" nice-color-palettes@"^4.0.0" react-native-reanimated@"~4.1.0"

pnpm install @react-native-masked-view/masked-view@"0.3.2" moti@"^0.29.0" nice-color-palettes@"^4.0.0" react-native-reanimated@"~4.1.0"

Source code