Animated Split Button in React Native (Reanimated)
This tutorial is about recreating a beautiful Split Button animation with Reanimated.
Although the animation seems simple enough, it actually hides so many pitfalls. In this video, we are going to disassemble the animation piece by piece and gradually rebuild it from scratch.
Do you like React Native animations?
My React Native animations course: https://reanimate.dev
Shared 100+ Animations on Demos: https://reactiive.io/demos
Twitter: / reactiive_
In this video, we're creating a custom tap gesture from scratch.
Custom Tap Gesture tutorial: • Improving Tap Gestures in React Native
Source code: https://github.com/enzomanuelmangano/...
Chapters:
00:00 Introduction
02:10 Packages installation
03:53 Defining the SplitButton interface
07:05 The Stop Button Layout
13:18 Splitted Behavior (without animation)
19:42 Adding the "Split Animation"
27:28 Fixing the gap issue
29:35 The Color Animation
31:43 The Stop & Finish actions
36:26 The custom PressableScale