Animate with Reanimated - 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: https://twitter.com/reactiive_ In this video, we're creating a custom tap gesture from scratch. Custom Tap Gesture tutorial: https://youtu.be/DWFS_dSnJOs Source code: https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/src/animations/21-animated-split-button 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