Sliding Counter Animation in React Native (Reanimated 2)

In this tutorial, we’ll learn how to create a Sliding Counter Animation in React Native.
We'll use these packages:
- react-native-reanimated
- react-native-gesture-handler

Clamp, SharedValue, Worklets ?! 🤕

How to deal with the interpolate function?

How to deal with the useAnimatedGestureHandler hook?

Chapters:
00:00 Introduction
00:50 Setup
05:40 Translate everywhere
11:15 Clamping the translations
14:42 The opacity animations
19:15 Translate Y
25:23 Let's build the counter behavior
33:13 The button container animation

[aditya_warrier]

Nifty little component! Great stuff!


Curious to know why external library functions won't work with the HOF runOnJS?? Why do we need to extract it out to a wrapper function?

[salik]

Thank you so much! I was really confused how to set state in a worklet. This video cleared it up for me

[raymondmichael]

I can watch your tutorials all day, you’re doing such a great job buddy.
Thanks 🎉

[egyjohn]

good job bro. i'm from Indonesia.

[gajananmehta]

One more amazing and very creative video 👍🏻👍🏻

[raffaelescala]

Another fantastic, clear and creative video. Ad maiora

[ameer_taghavi]

Amazing video 😍😍😍
this is useful for me 🙏🏻

[fabrizia]

Awesome animation and very clear explanation... thanks a lot👏👏

[matteoc]

Hello, thank you for your contents, i have a question: is this the approach need use for the implementation about the top tabs bar to scroll the indicator between the tabs? thanks in advance

[khalidkhan]

would be great if you can make these type of tutorials with skia?

[duxuan]

Awesome video!
This animation reminds me of the long press Like button to select react animation for a Facebook post!
can you do it using react-native-animation2?