Тёмный

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

Maximilian Dietel
Подписаться 630
Просмотров 34 тыс.
50% 1

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 ------------------------------------------
github.com/MaximilianDietel03...
// Docs ------------------------------------------
Links to all of the packages documentations:
reactnavigation.org/docs/gett...
docs.swmansion.com/react-nati...
github.com/lottie-react-nativ...
github.com/react-native-svg/r...
// 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 ------------------------------------------
iCloud Drive with active-background.svg and animated Icons:
www.icloud.com/iclouddrive/03...
// SVG transformation ------------------------------------------
Sites used to transform SVG file into React SVG Component:
svg2jsx.com/
react-svgr.com/playground/?na...
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:
stackoverflow.com/questions/3...
// Icons ------------------------------------------
Animated:
lottiefiles.com/
Normal:
iconify.design/
// Design Programms ------------------------------------------
Programm used for designing SVGs:
www.figma.com/
Programm used for Lottie Animations:
www.haikuanimator.com/

Опубликовано:

 

24 авг 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 47   
@sumsidum4162
@sumsidum4162 Год назад
Straight to the point and just as much detail as you need! Keep it up.
@ThienNguyen-cd6rn
@ThienNguyen-cd6rn Год назад
I am a newbie in React Native, the way design is amazing and very smart ! It's awesome UI and UX ! Thank you.
@asmitasherlekar3744
@asmitasherlekar3744 Год назад
i have been searching this video for a very long time thankyou
@maxdietel
@maxdietel Год назад
Nice to hear I could help you!
@ultrasulo1
@ultrasulo1 Год назад
nice work. It would be great for us if you do more things like this.👍
@Shubham-fo3md
@Shubham-fo3md 8 месяцев назад
Amazing 🎉
@ujjwalmanandhar1439
@ujjwalmanandhar1439 Год назад
awesome tutorial
@comiclips9729
@comiclips9729 Год назад
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.
@maxdietel
@maxdietel Год назад
Glad I could help you!
@jervi_sir
@jervi_sir Год назад
bro that golden video, beg u to do more if u can
@code_lift
@code_lift Год назад
really nice tutorial
@vaibhavkumarpatel6863
@vaibhavkumarpatel6863 Год назад
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.
@ItsDaiko
@ItsDaiko Год назад
Thank you! How would you add a border radius to the top in this case? I can't get it to work..
@SandraWantsCoke
@SandraWantsCoke 11 месяцев назад
thanks! How do I transition smoothly the actual screen with bottom tab navigator?
@arupde6320
@arupde6320 Год назад
be regular . hae your audience . it will help you in ur future business
@anazi
@anazi Год назад
Honestly its not The best thing is to get to the point. Most tutorials start with (Hey guys ....blah..blah..) (Today we will be ... blah blah blah) Wasting 10 minutes talking without explaining till at the end you the audience find out if thats the tutorial you need or not.
@anazi
@anazi Год назад
Keep going man and dont be regular dont follow the herd .. lead it 👍
@PmartN
@PmartN Год назад
hey all! getting error with this when I put it inside my own expo project have tried reinstalling/removing/creating new projectbut no luck also deleting node_modules/package.json any ideas would be appreciated! iOS Bundling failed 605ms error: node_modules/react-native-reanimated/src/Animated.js: Cannot find module 'react-native-reanimated/plugin'
@Thunderstormplus
@Thunderstormplus Год назад
Hello, can I do react native at the expo?
@paulinkladi1689
@paulinkladi1689 6 месяцев назад
how can we have both bottom and sidebar navigation bar ?
@muhammadkumail9000
@muhammadkumail9000 Год назад
If bottom bar items are more than four so?
@firasyazid439
@firasyazid439 4 месяца назад
it works on expo guys?
@letadz8577
@letadz8577 Год назад
More tutorial pls 🥺🙏
@converter
@converter Год назад
Awesome tutorial. May I ask what's your laptop specs?
@maxdietel
@maxdietel Год назад
Mac M1 2021. I speed up building and installation parts in this video
@converter
@converter Год назад
@@maxdietel thank you :)
@GamingZone11
@GamingZone11 Год назад
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?
@maxdietel
@maxdietel Год назад
I dont think this is possible cause if the svg would be transparent the background would be white (color of the tabbar).
@GamingZone11
@GamingZone11 Год назад
@@maxdietel please make another video for us, just like i ask in the above comment. because right now i am working on a project and they need that kind of tab bar 🥲
@maxdietel
@maxdietel Год назад
Sorry mate, there is not a single way I can imagine on how to do this. Some things you can do easily in a design tool cant be done that easily if you program it. Maybe you should have a second look at the design and change it to a one colored background cause I cant help you in your case and Im pretty sure its just NOT possible
@GamingZone11
@GamingZone11 Год назад
@@maxdietel ok thanks brother.
@remixedOne
@remixedOne Год назад
Can u upload more please
@nikolanovakovic123
@nikolanovakovic123 Год назад
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
@maxdietel
@maxdietel Год назад
I just cloned the code again and it worked perfectly. There are multiple people that already tried out the code on Github and your the only one that got an error yet. This is most likely a problem on your part. It kind of sounds to me like you have some kind of code formatter activated that doesn't like the structure of my code so it complains about some thing that would actually work.
@nikolanovakovic123
@nikolanovakovic123 Год назад
@@maxdietel There is no need to be " ! " in the line code. It needs to be a " ? "
@maxdietel
@maxdietel Год назад
@@nikolanovakovic123 👍
@WebsiteLover
@WebsiteLover Год назад
It's most likley because you used a JS file extension instead of TSX, changing it to TSX fixed it for me
@perafinparvej9400
@perafinparvej9400 Год назад
Hello Would you like make full project?
@maxdietel
@maxdietel Год назад
What do you have in mind?
@perafinparvej9400
@perafinparvej9400 Год назад
@@maxdietel Something unique Like E-commerce complaints app
@maxdietel
@maxdietel Год назад
@@perafinparvej9400 Will do when I got time! Not sure what its gonna be tho
@akanakdeniz8914
@akanakdeniz8914 Год назад
Dont run android am sorry :(
@maxdietel
@maxdietel Год назад
Tested it on Android too, works for me.
@chrisjefford5896
@chrisjefford5896 Год назад
ρгό𝔪σŞm 😃
@xbxb
@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.
@webtutorialIndia
@webtutorialIndia 10 месяцев назад
Is this tutorial video Idea is stolen from William Candillon ?
@maxdietel
@maxdietel 10 месяцев назад
How so?
Далее
10 EPIC React Native Animation Libraries
13:33
Просмотров 17 тыс.
Custom Drawer Navigator in React Navigation 6
21:06
Просмотров 138 тыс.
Animated FlatList in React Native (Reanimated)
13:59
Просмотров 28 тыс.
React Native Tabbar Animation Challenge
42:37
Просмотров 58 тыс.
Criando TabBar personalizada com React Native 👌🔥
21:22
The Secret Science of Perfect Spacing
9:40
Просмотров 387 тыс.