React Native | Custom Animated Tab Bar | React Navigation | Reanimated 2 | Lottie

React Native | React Navigation | Reanimated 2 | Lottie | Custom Animated Tab Bar
Learn how to build a Custom Animated Tab Bar with React Navigation, Reanimated 2 and Lottie in React Native in 10 minutes.

// Github Repository ——————————————————————————————————————————

// Docs —————————————————————————————————————————-

Links to all of the packages documentations:

// Commands ——————————————————————————————————————————

Initialise new React Native project, Typescript:
npx react-native init AwesomeTSProject --template react-native-template-typescript

Note: React Native version 0.69.4 at the time I uploaded this video

//

Install required packages:
yarn add @react-navigation/native @react-navigation/bottom-tabs react-native-safe-area-context react-native-screens react-native-svg react-native-reanimated lottie-react-native

//

If your using iOS:
npx pod-install ios

// Assets ——————————————————————————————————————————

// SVG transformation ——————————————————————————————————————————

Sites used to transform SVG file into React SVG Component:

Note: If you wanna transform a lot of SVG files in your project, you might wan’t to take a look at this stack overflow article:

// Icons ——————————————————————————————————————————

Animated:

Normal:

// Design Programms ——————————————————————————————————————————

Programm used for designing SVGs:

Programm used for Lottie Animations:

[sumsidum]

Straight to the point and just as much detail as you need! Keep it up.

[vaibhavkumarpatel]

Excellent video my brother please we want you to teach more stuff related to react native as all need your knowledge for growing there skills in react native.
Please make regular video related to react native.

[ThienNguyen-cdrn]

I am a newbie in React Native, the way design is amazing and very smart ! It's awesome UI and UX ! Thank you.

[arupde]

be regular . hae your audience . it will help you in ur future business

[ultrasulo]

nice work.
It would be great for us if you do more things like this.👍

[PmartN]

hey all! getting error with this when I put it inside my own expo project

have tried new projectbut no luck also deleting node_modules/package.json any ideas would be appreciated!
iOS Bundling failed 605ms
error: Cannot find module

[xbxb]

I've seen a lot of this kind of custom nav bar, fancy animation, etc. But I never encounter 1 app that really uses this kind of effects. Always overrated.

[asmitasherlekar]

i have been searching this video for a very long time thankyou

[SandraWantsCoke]

thanks! How do I transition smoothly the actual screen with bottom tab navigator?

[paulinkladi]

how can we have both bottom and sidebar navigation bar ?

[ItsDaiko]

Thank you! How would you add a border radius to the top in this case? I can't get it to work..

[Thunderstormplus]

Hello, can I do react native at the expo?

[inakedfacts]

Very cool man. It really helped me.

I have had a design from my UX designer that looks like this before now, and I had to debunk it cuz I didn't believe it was possible... Now I see it is possible.
Thank you.

[muhammadkumail]

If bottom bar items are more than four so?

[jervi_sir]

bro that golden video, beg u to do more if u can

[nikolanovakovic]

Hi mate, I have error on this line of code

your github
112: return [...layout].find(({ index }) => index === activeIndex)!.x - 25

It says I'm missing a semicolon around (( ! and x ))
Can you help me why it showing that error, I copied your code

[converter]

Awesome tutorial. May I ask what's your laptop specs?

[GamingZone]

Brother i need your help, you have used the same color for svg and screen component, i want to make transparent background for active tab bar how can i do this?

[perafinparvej]

Hello
Would you like make full project?

[webtutorialIndia]

Is this tutorial video Idea is stolen from William Candillon ?