Leaderboard animation - Reanimated
Tags
Description
A custom leaderboard animation using react-native-reanimated.
This animations runs in two steps: first we animate the mounting of the users using Layout animation "entering" and once it finishes, we're kicking the "bars" animation using "withSpring".
As an example, I have added a background animation for the 1st place, using "interpolateColor", that will animate the background color from light grey to gold.
Installation
bunx @animatereactnative/cli@latest add leaderboard-animation-reanimated
npx @animatereactnative/cli@latest add leaderboard-animation-reanimated
yarn @animatereactnative/cli@latest add leaderboard-animation-reanimated
pnpm dlx @animatereactnative/cli@latest add leaderboard-animation-reanimated
Dependencies
| Package | Version |
|---|---|
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add react-native-reanimated@"~4.1.0"
npm install react-native-reanimated@"~4.1.0"
yarn install react-native-reanimated@"~4.1.0"
pnpm install react-native-reanimated@"~4.1.0"