🎛 Custom Animated Switch component in React Native - Moti & Reanimated2
🔥 In this video tutorial we will create a custom Switch animation using Moti library that's powered by React Native Reanimated2, having all the interactions running at 60fps on UI Thread.
We'll go through:
How to create a custom switch animation in React Native
How to use Moti in React Native
Inspiration: https://dribbble.com/shots/4167815-Sw... by Oleg ❤️
----
⚠️ Access full source code: https://www.animatereactnative.com/po...
----
👉👉 Have any questions? Join Discord: / discord .
Want to support me?
Patreon: / catalinmiron
BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
Paypal: https://paypal.me/catalinmiron
----
You can find me on:
Github: http://github.com/catalinmiron
Twitter: / mironcatalin
Website: http://batman.codes
---
Timeline:
00:00 Intro
01:00 What we're going to build
02:00 Start coding - VSCode project
03:05 Create reusable Switch component
04:55 UI component structure
06:10 Style the switch track view
08:45 Style the knob
10:00 Style the knob switch indicator
12:55 Jump into React Native Moti
14:15 Animate background-color of the switch track view
15:40 Animate knob container
17:45 Animate the knob switch indicator - Circle to Rectangle
19:00 the magic of 60fps animations
20:58 Performance review of the animation
21:26 Final words!
#reactnative #moti #reanimated2