Тёмный

Custom Drawer Navigator in React Navigation 6 

Pradip Debnath
Подписаться 43 тыс.
Просмотров 140 тыс.
50% 1

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

 

3 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 134   
@santanubiswas5354
@santanubiswas5354 Год назад
This was really really helpful. Trying to add background color for the active drawer item for the last 2 hours, tried everything, at last this video saved me.
@wilmerjairespinosasilva2892
@wilmerjairespinosasilva2892 8 месяцев назад
Excellent tutorial even though I am learning React and although I am also learning English, it is very intuitive, excellent person, thank you, greetings from Colombia
@mechwar
@mechwar 9 месяцев назад
I was searching for this online and the manuals are not very handy. Then stumbled upon this video! So clear and so nice explanation! Thanks mate!
@mattsmithson1671
@mattsmithson1671 2 года назад
This was super helpful! The documentation for the DrawerContentScrollView and DrawerItemList makes it hard to visualise what is happening but this cleared everything up and I was able to build the drawer menu I had designed. Thanks!
@itzpradip
@itzpradip Год назад
Thanks. I'm glad that it was helpful.
@sunnyy6295
@sunnyy6295 2 года назад
How to add drop down in react navigation drawer. This video was very informative.
@juannarvaez9805
@juannarvaez9805 Год назад
Hi, thanks for your tutorial, it was very helpful. I have a solution for DrawerItem customization for active screens at 14:39. The reason is because its active attributes depends on focused prop which is false by default, you can control this with the onPress event and a local state. For those who have problems with margin between icon and label it can't be solved because the custom styles are overridden, the same for distance between DrawerItems.
@bachudeepak3003
@bachudeepak3003 7 месяцев назад
Excellent tutorial for the beginners to get the concept
@surya8731
@surya8731 2 года назад
Bro please make complete course and one project
@Trading_Lifestyle369
@Trading_Lifestyle369 2 года назад
Yes really need it
@hareshprajapati6250
@hareshprajapati6250 2 года назад
Check out this React Native Tutorial In Hindi - 2022: ru-vid.com/group/PLvN7nvnjkvpQribRyQ4r0FYZxKsPLGciy Pikashow App Clone React Native In Hindi - 2022: ru-vid.com/group/PLvN7nvnjkvpRoniWuJoj2gF3bpvHgrzoX
@MuhammadHaris-qv8vz
@MuhammadHaris-qv8vz Год назад
Great content! Really helped me grab RN6 custom drawer concept easily. 👍
@widdbenguma2407
@widdbenguma2407 7 месяцев назад
Thank you so much! very useful tutorial it's really helpful, good luck Sir.
@satyaganeshch999
@satyaganeshch999 Год назад
Great Explanation bro... You really saved me 🙌🙌
@arinzenchor8762
@arinzenchor8762 2 года назад
Any chance we can get a redux course where we store users data and all info in the store Or let’s work on a full project from start to end (might be hectic but will love such 🤲🏾🙏)
@rakshitlakhatariya137
@rakshitlakhatariya137 2 года назад
Thank you for such informative tutorials
@Imraann0
@Imraann0 2 года назад
Exactly what I needed sir, thank you 🤲
@jjrise
@jjrise 2 года назад
again - thank you! These videos are awesome
@tenorgames
@tenorgames Год назад
Love this tutorial. Thank you.
@arslanali-vi5nj
@arslanali-vi5nj 4 месяца назад
Thanks for this really helpful
@usmivlogs8617
@usmivlogs8617 10 месяцев назад
thanks it was really helpful
@beforeandafterphotos
@beforeandafterphotos 2 месяца назад
That was awesome!
@chanuperera
@chanuperera Год назад
you saved my day. Thank you. Can you do a video about User registration and Login using Firebase?
@yashchavan8503
@yashchavan8503 Год назад
thanks man , you are doing great job
@muskanverma-ep5tb
@muskanverma-ep5tb 10 месяцев назад
Thank you so much , Really Helpful Video
@MrHChakib
@MrHChakib 2 года назад
Your videos are great but the background music is so stressful (especially when the reading speed is over 1.5). thanks a lot for your efforts
@programmingbeasts4649
@programmingbeasts4649 Год назад
thanks for your efforts, but please reduce the music or disable it in order for us to focus on your great content.
@Juan_lauretta
@Juan_lauretta 2 года назад
Thanks for this great video, it was very helpful!
@nicetomeetugaming7024
@nicetomeetugaming7024 2 года назад
This was very helpful thanks a lot sir!
@Mr.Bombastic-tl5ic
@Mr.Bombastic-tl5ic Год назад
Best tutorial
@vivektpss62
@vivektpss62 2 года назад
Great Explaination! Thanks for this video ..
@jorobe2905
@jorobe2905 Год назад
it was so helpful thank you so much
@atinukeadeshola-manuels9364
Really Really Really good job
@punetourism3630
@punetourism3630 2 года назад
thanks!!!Your videos are awesome!!!!
@BilalAhmed-uv5ou
@BilalAhmed-uv5ou 2 года назад
Thank you bro, you saved me!!
@AvinashSewpersadh
@AvinashSewpersadh Год назад
Legend...Great video!!
@nohaalghool7767
@nohaalghool7767 Год назад
do you have idea if i want make drawerContent in class component because it never use props as this way
@sidharthkumar2546
@sidharthkumar2546 2 года назад
My Man. Thanks a lot.
@antonyndungu5514
@antonyndungu5514 2 года назад
Awesome tutorial
@anikishaan5354
@anikishaan5354 2 года назад
amazing bro. i like your videos
@elelyons1847
@elelyons1847 Год назад
Sir I really enjoyed your lesson it is really informative, but the question I have is, how can I add a drop-down sub-menu to one of the drawer screens?
@ChethiyaKusal
@ChethiyaKusal Год назад
Very helpful!
@gouravnainwaya5669
@gouravnainwaya5669 2 года назад
Awesome 👍👍 video
@Sincr0production
@Sincr0production 2 года назад
Wow!👍👍👍 Thank you!
@nazmulrony201
@nazmulrony201 Год назад
please make a video on how to create a sub menu on react native navigation drawer
@lucasvuicik4590
@lucasvuicik4590 Год назад
Amazing tutorial bro
@itzpradip
@itzpradip Год назад
Thanks brother! 🙂
@reheitube
@reheitube Год назад
Hey, great tutorial indeed. Question: what if I want a button on the right oh the header bar ( not in the drawer) to open a modal window.. how can I add it?
@realtorBG
@realtorBG 2 года назад
at the moment you are perfect...may be to implement Firebase V9 will be very kind of you
@itzpradip
@itzpradip 2 года назад
Thank you for your suggestion
@realtorBG
@realtorBG 2 года назад
@@itzpradip discord group
@7sasking
@7sasking Год назад
I'm using Typescript, and in custom drawer I'm using props of type DrawerContentComponentProps, but when I put the component in contentDrawer I get blank white screen, is there a solution?
@minhtainguyen9283
@minhtainguyen9283 2 года назад
Thanks a ton! In case I need to show hamburger icon and custom with other icon, how I can do that?
@UmairKhan-hc2ql
@UmairKhan-hc2ql 5 месяцев назад
Nice tutorial
@itzpradip
@itzpradip 5 месяцев назад
Thank you! Cheers!
@nurhamsah_tech
@nurhamsah_tech Год назад
thanks brow
@goodstuff2read
@goodstuff2read Год назад
Is there a way to disable menu items and grey them out ? I don't mean making them invisible by wrapping the screen with a {shouldBeVisible && ...}. I mean just greying it would and making it not clickable. Right now I am using slight of hand by wrapping the screen in said if statement and using grey text in a custom drawer component. But it would be great if there was a isDisabled property for each screen that you could toggle using context or something like that.
@castrojunin
@castrojunin 2 года назад
Tks for share man! How do you config google fonts globally in your project?
@karthikaganesan300
@karthikaganesan300 Год назад
ionicons are showing on iOS.. plz help me
@nsk254
@nsk254 2 года назад
Please make a course on drag and drop between the list . please
@saajanbajaj641
@saajanbajaj641 2 года назад
How i can add stack navigation in drawer navigation? for e.g if i want to add a back button in setting screen.
@sagarlohni9783
@sagarlohni9783 2 года назад
Sir mere menu icons colourful hai but black mai aa rhe hain, unko original colour mai show krne k liye konsa code likhna pdega aur kis jagah par likhna pdega
@UmairKhan-hc2ql
@UmairKhan-hc2ql 2 месяца назад
Hello community, I'm facing a problem implementing React Navigation. Here is my scenario: I am implementing two navigations simultaneously: Drawer as the main navigation. Stack navigation. There are some screens that are present in both of my navigations, and this is where my code starts to trouble me. I am not able to access screens from both navigations. Can anyone assist me with this?
@dexicrew676
@dexicrew676 Год назад
How to add border below side drawer categories name? and one more picture?
@Osmanity
@Osmanity 2 года назад
How did you do the introduction demo video of the app mockup
@akeemsalami1854
@akeemsalami1854 2 года назад
Thanks for the tutorial, nice one. I have a problem building the app because am using RN 0.69 and got an error "library "libfolly_json.so" not found", kindly help.
@imomer
@imomer Год назад
On my drawer items there is ripple effect when touch, but I don't see this in yours... is there a way to remove it?
@programmingpython584
@programmingpython584 Год назад
How to remove the margin around drawerItems? I want to take the whole space. So is there any way to either remove the margin or style the whole thing (drawerItem + margin around it).
@manoranjansahoo7860
@manoranjansahoo7860 2 года назад
How do we get nesting navigation like a onboard screen and a home screen with navigation.replace() funtion
@adivmt
@adivmt 2 года назад
As you said at 15:00 this props will not working for drawer item but why?
@jijinshaji5414
@jijinshaji5414 2 года назад
nice one
@rodrigoniveyro9763
@rodrigoniveyro9763 2 года назад
my drawer overlays the previous screen instead of pushing it, how can i configure this behavior ?
@nguyenang3911
@nguyenang3911 2 года назад
I have error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?
@ashishrajput6620
@ashishrajput6620 Год назад
i do the same as you do but still it shows an error Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'? please tell me
@tienphanmemtinh8207
@tienphanmemtinh8207 Месяц назад
ERROR TypeError: Cannot read property 'style' of undefined, js engine: hermes ERROR Invariant Violation: "main" has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project. * A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
@yashingle7877
@yashingle7877 2 года назад
Hi , I got one error and error is ERROR Invariant violation requireNativeComponent :"RNSScreen" was not found in the UIManager. How to fix this error ?
@surendirani1689
@surendirani1689 2 года назад
Hi bro, am facing an issue in the drawer navigation , can u pls help me with it? I've followed the steps as said, but getting this error ======= Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?, js engine: hermes
@jomaraggabao7877
@jomaraggabao7877 2 года назад
I know how to fix this.
@andersobol4988
@andersobol4988 2 года назад
@@jomaraggabao7877 how?
@annthunguyen4872
@annthunguyen4872 2 года назад
@@jomaraggabao7877 please tell me how? :((((
@sudhirgupta8613
@sudhirgupta8613 2 года назад
Dear sir invariant react-native modulation app registry eroor is coming when I install and implement drawer navigator when I check this error on StackOverflow its showing react native reanimated 2 need install but I also follow those step but my problem still not going
@elmcapp6032
@elmcapp6032 2 года назад
File structure any videos on how to name folders and files. I see you have lower case and uppercase files and folders
@MrKhanPubg7
@MrKhanPubg7 2 года назад
i'm facing some issues with drawer navigation
@millwoodfurnace2739
@millwoodfurnace2739 2 года назад
Sir yeh error arha ha TypeError: navigation.openDrawer is not a function. (In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined)
@anandsumathi5455
@anandsumathi5455 Год назад
Drawer submenu video poduga
@Chris-hb3gz
@Chris-hb3gz Год назад
does anyone know how to hide a bottom tab navigation from showing inside the drawer?
@mohammedshahed5051
@mohammedshahed5051 2 года назад
TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions') ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
@crash9579
@crash9579 2 года назад
same here, solved?
@quemperguntou2692
@quemperguntou2692 2 года назад
I have the same problem
@crash9579
@crash9579 2 года назад
@@quemperguntou2692 Bro watch this. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6F-J7Ek5CGA.html
@alanjames670
@alanjames670 2 года назад
If I download the source code and just install all the dependencies, will this app work on my computer? saving my hours of all this silly errors I keep getting every second
@yonatancuervo3489
@yonatancuervo3489 Год назад
Awesom
@aRookieProgrammer
@aRookieProgrammer 2 года назад
Thanks a ton! your repository is awesome ! Please rename it to react native boilerplate because it gives a quick jump to development phase, people spend a lot of time in setting up drawer and navigation stack which your repository is saving
@itzpradip
@itzpradip Год назад
I'm glad that you think so. Thanks for your Comment & suggestion.
@gnani344
@gnani344 2 года назад
Cannot find module 'babel-plugin-r'
@bitcoinbitcoin670
@bitcoinbitcoin670 2 года назад
you're exporting 'export default AuthStack' from the AppStack file. Is this a mistake?
@bitcoinbitcoin670
@bitcoinbitcoin670 2 года назад
7:36
@willyhorizont8672
@willyhorizont8672 2 года назад
super!
@ankitmandiratta6695
@ankitmandiratta6695 Год назад
start with 7.30
@imrankhan-fn7ne
@imrankhan-fn7ne 2 года назад
how to set drawer in bottom tabs
@mathankmk9973
@mathankmk9973 2 года назад
bro navigation drawer not working for mee plz help mee bro
@Imraann0
@Imraann0 2 года назад
how do I navigate to a different screen from within the custom drawer. for example when you click the profile image in the custom drawer? I tried importing use navigation and doing navigation.navigate.. but it does not work.
@roonilwazlib2458
@roonilwazlib2458 Год назад
Make sure you have imported the libraries correctly
@mbohraroh3000
@mbohraroh3000 2 года назад
Does this navigation could be combined with tab navigator?
@itzpradip
@itzpradip 2 года назад
Yes
@guinomotec
@guinomotec 2 года назад
How do I separate the DraweItemList? I wanna make a line separating the list in 2 groups but using I only get the whole list
@mattsmithson1671
@mattsmithson1671 2 года назад
It is mentioned briefly in the video but you can use the DrawerItem component. You will be able to style each item then. reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent
@raymondmichael4987
@raymondmichael4987 2 года назад
I've been scratching my head since ysetarday; everything worked so far till I installed drawer, then the app fails to compile, wiht Error: Requiring module "node_modules eact-native-reanimated\src\Animated.js", which threw an exception: TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')
@thiranhetti
@thiranhetti 2 года назад
Hey did you figure out?? I'm having the same issue
@raymondmichael4987
@raymondmichael4987 2 года назад
@@thiranhetti , Hi buddy, Yes I did, via the docs reactnavigation.org/docs/drawer-navigator#installation but here is how: make sure import this at the root index.js; import 'react-native-gesture-handler' More importantly: add this to the babel.config.js : module.exports = { plugins: [ 'react-native-reanimated/plugin', // this should be listed last ], }; for Android, 1: Turn on Hermes engine by editing android/app/build.gradle like this: project.ext.react = [ enableHermes: true //
@thiranhetti
@thiranhetti 2 года назад
Thanks man, upload this to stack you'll get a ton of reputations😘
@raymondmichael4987
@raymondmichael4987 2 года назад
@@thiranhetti, thanks man. Glad I can help :)
@raymondmichael4987
@raymondmichael4987 2 года назад
@@thiranhetti You did ask there!?
@ЮлияСеменуха-ю2з
Спасибо
@Marshal-786
@Marshal-786 2 года назад
nice
@mohamadalkhatib2316
@mohamadalkhatib2316 2 года назад
thx for the tutorial but the music in the background is annoying
@THEROSSSH
@THEROSSSH Месяц назад
AppStack me AuthStack ka function bana diya
@arfazshaikh907
@arfazshaikh907 2 года назад
undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions') Getting this error .. anyone help please :(
@Wilson-qh4rh
@Wilson-qh4rh 2 года назад
Same here
@RahulPatil-ju3rn
@RahulPatil-ju3rn 2 года назад
Hi bro, first time run hone par ye error aa raha hai. -- TypeError: navigation.openDrawer is not a function. (In 'navigation.openDrawer()', 'navigation.openDrawer' is undefined). but second time phirse run karta hu to problem nhi ata drawer thik se open hota hai. what is actual issue any idea?
@daniel_narh
@daniel_narh Год назад
use navigation.toggleDrawer()
@mohamedyoussef8835
@mohamedyoussef8835 2 года назад
Awesome +++++++++++++++++++++++++++++
@yuriiberezynets6102
@yuriiberezynets6102 2 года назад
🔥
@mwabachanda7623
@mwabachanda7623 2 года назад
The graphic is poor I can't get clearly the pic
@realtorBG
@realtorBG 2 года назад
Discord group please !
@jonysthil
@jonysthil 2 года назад
The repository is out of date (sad)
@itzpradip
@itzpradip 2 года назад
updated now