React Native Custom Animated tabs - Reanimated

🔥 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

[@jondoe79]

the way you brought the intro for the video is excellent 👍

[@aashishpanchal3022]

hey sir can you make video on ripple effect like (button, cart, icon-button and others) using react-native-reanimated

[@CatalinMironDev]

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!

[@SoftIceCreamMan]

I needed this, thanks!! Will buy your animations but i need to save up

[@CatalinMironDev]

There's a 50% discount running now, and you'll get a lifetime license for $99. Thanks for your support!

[@drzaln]

Great as always

[@CatalinMironDev]

Thanks, doing my best!

[@usmanmarkaz]

hey sir please make Animated Bottom tabs with cool and optimizze animations please make 3 to four good bottom animations with drawer please

[@CatalinMironDev]

Great idea, if you have some recordings or links, please create some entries here: www.animatereactnative.com/inspiration

[@leonampaula6019]

Mannn, this `skipEntering` was huge mindblowing learning! Thnkxxx

[@CatalinMironDev]

Glad it helped!

[@gols13]

Very Amazing

[@CatalinMironDev]

Love it! thanks!

[@crim-son]

It's been a while mate🫡

[@SidGBF]

I just need to animate colors on RN SVG T-T

[@CatalinMironDev]

I will see what I can do! Thanks!

[@lahmermohammed517]

Grear content !

[@ELHAUKEZ]

how would you do it using the new architecture in react native ?

[@CatalinMironDev]

Which part? I am not sure if this is going to change or be different with the new architecture

[@nesrucodex]

what font family do you use for your IDE?

[@CatalinMironDev]

It's called "Dank Mono"

[@eliuddyn]

Amazing 🔥🔥

[@mist5322]

Very cool, thanks:)!!

[@CatalinMironDev]

Thanks, appreciate it!

[@ricardopinho630]

like the channel activity

[@CatalinMironDev]

Me too! ❤

[@ricardopinho630]

@@CatalinMironDev honestly, I reorganized my TH-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.

[@Mo19]

Less code more performant animation 🔥

[@CatalinMironDev]

Amen!

[@leinhhieu8782]

your big fan (y)

[@CatalinMironDev]

haha, thanks for your support!

[@gankers6746]

yo boss great one

[@CatalinMironDev]

Big up!

[@dawar.rajput]

Fireeee Broo!!

[@CatalinMironDev]

Thanks 🔥

[@praveshpal9644]

Very nice

[@CatalinMironDev]

Thanks!

[@abdulkarimkhaled]

Love it

[@CatalinMironDev]

Thanks!

[@franckngoubounkou9930]

fire💥 the dangerous come back 💯

[@CatalinMironDev]

Thanks!

[@medredha]

That was a cool one 🤩

[@CatalinMironDev]

Happy to hear this!

[@omamokejeffrey5626]

Great work as always

[@CatalinMironDev]

Thank you! Happy to hear that you found it useful!

[@niranjankaranth6065]

Very nice!

[@CatalinMironDev]

Happy to hear it!

[@chingiz_mammadov]

👍

[@CatalinMironDev]

✌