React Native Custom Animated Bottom Tab Navigator With Reanimated 3

Hello, in this video i will show you how to make a Custom Animated Bottom Tab Navigator in React Native using Reanimated

Chapters:
0:00 - Demo 1
0:14 - Demo 2
0:35 - Install Reanimated
1:04 - Install react-native-svg
1:21 - Install react-native-svg-transformer
2:25 - Install React Navigation
4:28 - Run the App
5:27 - Create RootNavigator
8:39 - Create BottomTabNavigator
11:08 - Create CustomBottomTab
20:01 - Create BottomTabIcon
27:15 - Create Slide Component
29:36 - Animate the Slide Component
31:04 - Hide not focused text
31:36 - Thankyou!!!

[macon]

Looks good, but I’d suggest implementing it with React Native Skia and adding a clip property to change the tab icon color when the circle moves, not when pressed. It doesn’t look great when the user presses the button, and it disappears because it becomes the same color as the tab bar, but in general - cool

[nemila]

After a few minutes in the video I subscribed because I liked the video. And like 10 minutes later I checked again if I actually subscribed to the channel. I hope all the videos are as good as this one!

[imam_robani]

Yeay, nice.
you create content from my previous comment
Thanks bro

[daxuano]

keep going bro, your video is helpful

[hadjer.l]

awsome tutorial,
I just have a question
well i'm having a bottom tab navigator the first tab screen is qr code scanner and the second is a profile screen so the scanner is working perfectly untill I navigate to the profile screen and go back then it no longer scanns, I hope you could help me, thank you

[ahmedhamed]

keep going, awesome tutorials
what about creating drag and drop using reanimated ?

[rimbadirgantara]

izin bertanya mas
knp ya seteleh install Reanimated nya react native ku g bisa build ke android fisik