React Native Custom Animated tabs - Reanimated
Вставка
- Опубліковано 29 вер 2024
- 🔥 In this video tutorial we will create a custom animated tab component built with React Native Reanimated, React Native Moti! It’s super customizable and comes packed with cool features.
You'll be learning how to:
- animated the tab items using React Native Reanimated layout animations, `entering` & `exiting` animations,
- use React Native Moti to animate the Lucide Icons
- React Native Reanimated LayoutAnimationConfig to skip the entering animation.
- Use `motifySvg` to be able to animate the SVG icon colors, as well as `entering` and `exiting` from React Native Reanimated to control the animation for the tab labels.
As a small UI/UX touch, we'll be using `LayoutAnimationConfig` from React Native Reanimated to `skipEntering` the tab label, in this way, on initial render, the label will not be animated.
It’s the perfect addition for adding smooth, animated counters to your React Native app!
----
👉👉 Access 120+ React Native Animations, the biggest react native animation collection in the world: www.AnimateRea...
----
👉👉 Have any questions? Join Discord: / discord .
You can find me on:
- Twitter: / mironcatalin
- Website: www.AnimateRea...
---
#react-native-reanimated #react-native-animation #react-native-tabs #react-native-animated-tabs #react-native-layout-animation #reanimated-stagger #react-native-moti #reanimated-sequence #reanimated #layout-animation-config
Great as always
Thanks, doing my best!
your big fan (y)
haha, thanks for your support!
👍
✌
the way you brought the intro for the video is excellent 👍
Very Amazing
Love it! thanks!
Amazing 🔥🔥
It's been a while mate🫡
I needed this, thanks!! Will buy your animations but i need to save up
There's a 50% discount running now, and you'll get a lifetime license for $99. Thanks for your support!
Mannn, this `skipEntering` was huge mindblowing learning! Thnkxxx
Glad it helped!
hey sir can you make video on ripple effect like (button, cart, icon-button and others) using react-native-reanimated
Will try! Meanwhile, if you have any links to take a look at how this may look like, please add it here: www.animatereactnative.com/inspiration . Thanks!
hey sir please make Animated Bottom tabs with cool and optimizze animations please make 3 to four good bottom animations with drawer please
Great idea, if you have some recordings or links, please create some entries here: www.animatereactnative.com/inspiration
Grear content !
I just need to animate colors on RN SVG T-T
I will see what I can do! Thanks!
like the channel activity
Me too! ❤
@@CatalinMironDev honestly, I reorganized my UA-cam subscriptions last week. I unsubscribed about 95% of the channels I was subscribed to. You are 1 of the 9 channels that I kept subscribed to.
how would you do it using the new architecture in react native ?
Which part? I am not sure if this is going to change or be different with the new architecture
what font family do you use for your IDE?
It's called "Dank Mono"
Very cool, thanks:)!!
Thanks, appreciate it!
Less code more performant animation 🔥
Amen!
yo boss great one
Big up!
Fireeee Broo!!
Thanks 🔥
Very nice
Thanks!
Love it
Thanks!
fire💥 the dangerous come back 💯
Thanks!
That was a cool one 🤩
Happy to hear this!
Great work as always
Thank you! Happy to hear that you found it useful!
Very nice!
Happy to hear it!