filmov
tv
React Native Animated Counter
Показать описание
🔥 In this video tutorial we will create a 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!
----
----
You can find me on:
---
Timeline:
00:00 Welcome and what we’ll build
00:35 VSCode and start coding
00:54 How to approach a Ticker component animation
03:00 Create the Vertical list for scrolling to the active number
04:12 Why a Vertical List and translateY
06:00 Create the cell container and overflow:hidden
07:48 fontVariant - tabular-nums - what it means
09:38 scroll to each number inside the vertical list
10:35 use Moti to animate the new state changes
11:39 Why the animation is not working and how to fix it
13:10 Apply a Stagger animation to each Number within the list
15:05 Fix the Text size when it will not fit inside the screen width
17:00 Apply numberOfLines and adjustFontSizeToFit
17:29 Get the Text layout and size via onTextLayout
19:20 Recalculate font size based on onTextLayout
19:50 Use Intl.NumberFormat to display it as currency
#react-native-reanimated #react-native-animation #react-native-counter #react-native-text-animation #react-native-stagger #reanimated-stagger #react-native-moti #reanimated-sequence
- 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!
----
----
You can find me on:
---
Timeline:
00:00 Welcome and what we’ll build
00:35 VSCode and start coding
00:54 How to approach a Ticker component animation
03:00 Create the Vertical list for scrolling to the active number
04:12 Why a Vertical List and translateY
06:00 Create the cell container and overflow:hidden
07:48 fontVariant - tabular-nums - what it means
09:38 scroll to each number inside the vertical list
10:35 use Moti to animate the new state changes
11:39 Why the animation is not working and how to fix it
13:10 Apply a Stagger animation to each Number within the list
15:05 Fix the Text size when it will not fit inside the screen width
17:00 Apply numberOfLines and adjustFontSizeToFit
17:29 Get the Text layout and size via onTextLayout
19:20 Recalculate font size based on onTextLayout
19:50 Use Intl.NumberFormat to display it as currency
#react-native-reanimated #react-native-animation #react-native-counter #react-native-text-animation #react-native-stagger #reanimated-stagger #react-native-moti #reanimated-sequence
0:24:09
React Native Animated Counter
0:14:19
React Native Custom Counter Animation With Reanimated From Scratch
0:00:10
React Native Animated Counter - Reanimated
0:12:29
Counter animation in react native
0:35:52
Sliding Counter Animation in React Native (Reanimated 2)
0:06:52
React Animated Number Tutorial - How to build an animated counter
0:09:11
Animated Number Counter with Framer Motion | Count Up Animation in React
0:04:12
Animating Offsets when Values Change in React Native
0:17:15
Counter Animation in React Native
0:02:26
How To Create Animated Numbers In React.js #react #number #animation #tutorial
0:00:10
React native text counter animation
0:12:37
Animate numbers using react native reanimated l simple text animation l number animation l Urdu
0:17:22
React Native FlatList Animations
0:00:54
How to implement animated counter in less than a minute.
0:13:33
10 EPIC React Native Animation Libraries
0:31:33
React Native Countdown Timer Animation with FlatList and Animated API
0:18:49
Circular Progress Bar Animation in React Native (Reanimated 2)
0:01:00
How to Animate with Keys in React
0:00:29
Countdown Animation | | react native
0:03:32
Counter Sliding Animation with React
0:05:45
#12: Pan Responder API - React Native Animations
0:13:14
The 10-minute React Native Animation Upgrade
0:24:10
Shake Animation in React Native (Reanimated)
1:19:58
Learn React Native Gestures and Animations - Tutorial
Комментарии