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
Dependencies
| Package | Version |
|---|---|
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"