Onboarding Pagination Indicator - Reanimated

Description

Reusable onboarding pagination indicator using React Native Reanimated - layout animations, entering and exiting animations, as well as creating a springy animation using `useDerivedValue` based on a number (`selectedIndex`) that's coming as a prop and animate the pagination itself. We’re also animating the "Next" button to reflect the state of the onboarding process. If the user is on the final slide, the button text smoothly changes from `Continue` to `✅ Finished`, signaling the end of the flow. This change is animated to feel smooth and responsive. There's a live stream session on [YouTube](https://www.youtube.com/watch?v=mL3Ry32QS8A) if you want to see how this was implemented.

Installation

bunx @animatereactnative/cli@latest add onboarding-pagination-indicator-reanimated

npx @animatereactnative/cli@latest add onboarding-pagination-indicator-reanimated

yarn @animatereactnative/cli@latest add onboarding-pagination-indicator-reanimated

pnpm dlx @animatereactnative/cli@latest add onboarding-pagination-indicator-reanimated

Preview

Dependencies

PackageVersion
lucide-react-native^0.456.0

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

bun add lucide-react-native@"^0.456.0"

npm install lucide-react-native@"^0.456.0"

yarn install lucide-react-native@"^0.456.0"

pnpm install lucide-react-native@"^0.456.0"

Source code