Custom Animated Counter Component
Description
Check out our custom animated counter component built with React Native Moti and powered by React Native Reanimated! It’s super customizable and comes packed with cool features:
- Stagger Functionality: Easily tweak the stagger animation to match what you need.
- Responsive Layout: No more worrying about the text not fitting—this counter adjusts to always stay within its space using onTextLayout.
- i18n Support: Got users from different regions? This counter’s got internationalization covered.
- Written in TypeScript
It’s the perfect addition for adding smooth, animated counters to your React Native app!
Installation
bunx @animatereactnative/cli@latest add custom-animated-counter-component
npx @animatereactnative/cli@latest add custom-animated-counter-component
yarn @animatereactnative/cli@latest add custom-animated-counter-component
pnpm dlx @animatereactnative/cli@latest add custom-animated-counter-component
Dependencies
| Package | Version |
|---|---|
moti | ^0.29.0 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add moti@"^0.29.0" react-native-reanimated@"~4.1.0"
npm install moti@"^0.29.0" react-native-reanimated@"~4.1.0"
yarn install moti@"^0.29.0" react-native-reanimated@"~4.1.0"
pnpm install moti@"^0.29.0" react-native-reanimated@"~4.1.0"